Yellowbox

In a nutshell...

⭐

Our team’s challenge was to adapt the Yellowbox locker management app for corporate users. We reimagined the app’s homepage and locker booking process to better accommodate multiple bookings in a single location.

Team

3 designers + 1 Project Manager

My Role

UX/UI Designer

Timeframe

February 2022 - May 2023

Background

This client project was done in partnership with Prodigi UNSW, a student-led nonprofit that matches student design and engineering teams with local startups.

What is Yellowbox?

Yellowbox is a smart locker system providing locker management and access through its mobile app.

As a successful startup founded by UNSW students from Sydney, Yellowbox now operates worldwide in offices across Australia, Europe and North America.

The problem?
Yellowbox was not originally made for workplaces.

Yellowbox’s original business model is catered towards “public” usage. The app was built to enable users to discover and book lockers on a need basis at the beach, the pool, the gym, etc.

From 2021-2022, Yellowbox found that the greatest demand from their smart locker system was actually from workplaces and office spaces.
This meant that their core customer group had changed, and thus, their app was no longer serving the needs of their customers.

⭐

Our Challenge

Redesign the Yellowbox app process specifically for workplace locker booking and use.

Gathering Context

Analyzing the Current Product

There was one major issue with the existing product: the home screen’s map interface is geared towards “public” users who intend to discover and use multiple locker locations.

On the other hand, corporate users will typically stick to one location- their office. This makes the map a poor choice for corporate users as they must locate their office on the map every time they wish to book a locker.

Yellowbox Competitors

Our team looked into other booking apps (not just for lockers but for cars, taxis, meeting rooms, etc.) to study their processes for managing multiple bookings.

⭐

Key Takeaway

A dashboard homepage would be better suited to corporate users rather than a map.

Ideation

Nailing down the user flow

Before starting any designs, our team created user flows representing the two major aspects of our project: creating a booking, and managing a booking.

What goes in a dashboard?

We conducted a Crazy Eights exercise to explore how to represent the most important information on the dashboard- the user's existing bookings, and the option to create new ones.

Mid-fidelity prototyping

After our initial design exercises, we created an interactive mid-fidelity prototype to be used in usability testing. We kept the design simple to encourage feedback from our participants.

Putting our designs to the test!

Our team conducted an online think-aloud usability study with ten participants over two weeks. We made adjustments to the prototype throughout three rounds of testing, addressing various issues along the way. By the third round, users were completing these tasks with ease:

✏️

Creating a new booking

✏️

Extending an existing booking

✏️

Ending an existing booking

✏️

Rebooking a recently used locker

Key insights from usability testing

🪗

Users preferred for content to appear in expanding accordions

🔒

Users needed a clearer and easy-to-access lock/unlock button

📅

Pre-set booking dates were convenient for users

Key Design Decisions

The redesigned homepage

To replace the original map view, we created a dashboard view with cards that allow users to quickly create and manage multiple locker bookings.

Expanding locker cards

We explored multiple options for locker management cards - expanding cards, a settings pop-up, or displaying all the information in a larger card.

We used A/B testing during our user research period to gather feedback about each of the options, which helped us select the expanding card moving forward.

Simplified date selection

Booking lockers in advance was a crucial feature included in our redesign. However, feedback in our user testing showed that most users would care to book lockers on convenient days (i.e. book today or tomorrow).

Creating a mini design system

While the Yellowbox team provided us with their brand colours and fonts, we were also assigned to create a mini design system for the mobile app. I took on this aspect of the project specifically and created a small kit of common components for myself and the other designers to use in our high-fidelity designs.

Project Outcomes: Introducing Yellowbox’s new booking process!

Booking a new locker

Ending a locker booking

Yellowbox has implemented most of our work into their app!

Yellowbox recently updated its locker booking app, which I’m happy to say includes the major design changes from our project.

What I learned ✏️

1. Working with an existing project is different than starting from scratch

In business, there are always compromises in objectives, feasibility, and timeline. We conducted multiple sessions with our client to understand the product, user base, and their needs. Additionally, we held regular meetings to provide updates and gather feedback during the design process.

2. Ask quality questions, get quality answers

A major aspect of effective user research is asking the right questions. We collaborated with our mentor, Danica, to create task scenarios that intentionally avoided using wording similar to our prototype's content and calls-to-action (CTAs). By avoiding these "leading phrases," we aim to prevent influencing the behavior of our participants.