Oyin Runsewe
Product designer

Grocer Delivery App

A redesign of a grocery delivery scheduling system

ROLE

UX Designer

TIMELINE

1 month

TOOLS

Figma, Overflow

SUMMARY

Last year, I worked with a North Carolina grocery delivery company to create a shopper's app under an NDA. I was provided with app requirements and features and collaborated with a UI designer to deliver these features.

I decided after my contract to re-design some screens with more context about the user by understanding their journey and how the created features fit within it. This case study also allows me to showcase some of my work without breaking the NDA.

The company's initial measure of success was to conduct usability tests to ensure users could complete the tasks. And on launch, we would get more qualitative and quantitative feedback from real users.

PROJECT CONSTRAINTS

Before tackling a redesign, I created a list of constraints that I'd have to keep in mind throughout the project.

  • Must be designed within four weeks

  • Must meet initial business' needs

  • No direct access to the target users

The previous designs
Fig 1: The initial designs for the scheduling system

Fig 1: The initial designs for the scheduling system

As part of a bigger project, I was tasked to create a scheduling system with a co-designer. The company required this system to be able to accommodate a shopper who might shuffle between two locations.

This prototype was based on the app requirements provided by the company:

  • Users must be able to add multiple locations and availability

Due to the time constraints, I initially tackled the whole space without creating a persona. I decided after my contract to re-design with more context about the user by understanding their journey and how this feature fits within it.

Fig 2: Photo by Elizeu Dias on Unsplash

Fig 2: Photo by Elizeu Dias on Unsplash

MEET JACOB,

Jacob is a 20-year-old Business major at The University of North Carolina, Greensboro. He drives to and from his home in Thomasville to attend lectures at Greensboro. He also works as a gig shopper to pay for his bills.

Goal

  • Utilize his time to earn some money

Needs

  • Pick batches at current location

  • Set his availability for both locations

Fig 3: Jacob's Workday Walkthrough

Fig 3: Jacob's Workday Walkthrough

Ideation

From all the artifacts created, I established user stories to reflect the task Jacob would hope to accomplish in order to pick up batches at multiple location and earn money efficiently

  • Add, edit and delete multiple locations

  • Set, edit and delete availability for existing locations

With multiple locations and availabilities, it is possible for shoppers to get confused. So shoppers should be able to —

  • Quickly identify current location and schedule to avoid confusion between locations

  • See an overview of each schedule to prevent overlapping

Then I created a task that allows users to set their locations and availability and sketched out a task flow.

Fig 4: The Task flow - Set locations & schedules

Fig 4: The Task flow - Set locations & schedules

I wondered what a fleshed out understanding of the users could uncover so I went back to the drawing board.

With the help of my mentor, we thought of different ways and reasons people organize their time. From the word "schedule," we immediately thought put together & establish. 

  • Booking a trip, flight or accommodation

  • Setting the alarm to keep them on track

  • Creating a reminder on a calendar

I also remembered that Google Home had done a good job of giving users the ability to add multiple home addresses and devices.

I pulled inspiration from all these platforms and flows and sketched some wireframes.

Fig 5: A few sketches exploring the visual layout of features

Fig 5: A few sketches exploring the visual layout of features

First Solution

My first attempt at redesigning the experience was an eye-opening experience. It was still very similar to the old wireframes, with more considerations for accessibility.

Fig 6: First solution's wire flow

Fig 6: First solution's wire flow

Although, gig work allows shoppers to have flexible hours. An article by a&b shows that building a routine, planning and consistency helps people stay organized.

I removed the 2-week model for a weekly view to integrate the routine building into the app. I kept the calendar view to give users the ability to schedule hours for a particular day.

Fig 7: Side-by-side comparison of designs

Fig 7: Side-by-side comparison of designs

I brought a snapshot of their schedule to the front to help shoppers quickly identify their locations and schedules.

Fig 8: Side-by-side comparison of homepage designs

Fig 8: Side-by-side comparison of homepage designs

Iterations

The designs received some positive feedback; however, I received questions that made me re-think certain features.

  • " I'm more interested in my weekly view."

  • " Is this supposed to be a calendar? "

  • " What would I use the calendar view for? "

The calendar view restated what the weekly view could do, so I dropped this feature to avoid distracting Jacob from the key task. I tested these wireframes again.

Here is a timeline of changes I made to the wireframes after each round of testing.

Version 1

I used colour to help Jacob differentiate between different locations and schedules

Version 2

Following accessibility guidelines, “Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)”. I included shape as another way to distinguish between locations & Schedules

Version 1

Shoppers were to provide a nickname and colour before they added their address.

Version 2

Testers felt confused by the initial flow

  • Reflection: being able to enter their address was the crucial task, so I switched this flow.

Version 3

The flow didn’t feel right. After speaking with my mentor, I decided to reduce the user’s decision load by making the colour and shape assignment automatic.

  • This reduced the screens from 2 to 1

GROCERY SHOPPER APP (REDESIGN)

Version 1

Testers hesitated before clicking on the headline to change the address

Version 2

I brought the arrow menu close to indicate it was a clickable element.
I also included the shape element to the scheduled time

Version 3

I removed the greeting information as it was not relevant and took up visual space.
I also made the Home element bigger to improve accessibility

Final Prototype

The final prototype

Learnings

Learn from others

There were certain times that I felt I was relying too much on my assumptions. I reached out to product designers who could give me some guidance based on their experience. When I finally started talking to people about my designs, I was able to get different perspectives. I learnt things that helped me progress and would be carrying it to my future projects.