Case Study — Shipt

Yuki Mochizuki
7 min readJun 25, 2020

Many of us have been quarantined for months since many states issued the stay home order in the middle of March. This quarantine situation has changed our lives in many ways. Especially for grocery shopping, more people are shifting to online grocery shopping to avoid going out or human contact. In unit 3, by having Shipt, a grocery delivery service, as a case study, I was able to explore accessibility improvements on the website.

For this project, I had 2 weeks to conduct the following steps as a group with 3 other teammates.

  • Research (user interview & usability testing on the current website)
  • Design (sketches, wireframes, prototype, testing)
  • Result (outcomes/impact, learnings, next steps)

Research

User Interviews

In order to understand how users interact with various online grocery shopping platforms, we conducted 5 user interviews that we selected from our screener survey.

Three rounds of affinity mapping of user quotes led us to about 10 of “I” statements.

Research Insights

After synthesizing user interviews including “I” statements, we were able to bring up more than 20 insights. However, some were business problems that we UX designers will not be able to solve immediately.

We decided to focus on some insights that we may provide user experience solutions.

  • Users need to be able to update cart after placing order
  • Shoppers need to make sure produce is fresh
  • Users need to be able to update cart after placing order
  • Timeslots need to be easier to book
  • Users should be able to book a time slot before picking out items
  • Users are buying week worth of items in advance
  • Shoppers need to be highly communicative with users, especially about replacing items
  • The site should notify any important updates while users are shopping
  • The more the system communicates its progress, the more the user trusts the system

Taking these insights into consideration, we created a persona & journey map and uncovered a problem statement.

Persona

Persona

After synthesizing the research insights, we crafted a persona “Lily Patterson” who lives with a husband with three kids. Here are some of the high light of this persona.

Main goal: to secure a time slot that best fits around her schedule.

Pain points: Low inventory on preferred items, Time slot expiration, Unable to modify/edit cart, Inadequate communication

She is busy with her work and family, she needed an easy way to do grocery shopping productively within a given time.

Journey Map

Journey Map

To visualize the process of potential users during their online grocery shopping experience, we created a user journey map.

We segmented our journey mapping into six different phases.

Primary Highlight: Convenience. There is a higher possibility of continuing online grocery shopping after quarantine is over, due to the ease and accessibility of online grocery shopping.

Primary Pain Point: Limited availability of time slots. Due to higher demand, users cannot find or secure a time slot that fits in their schedule

As you can see, she goes through some highlights in her online grocery shopping experience. However, she also frustrated within some phases by losing a timeslot or having delivered a product that doesn’t meet her expectations.

At the end, we closed with our user interview research with the problem statement below.

Problem Statement

Online grocery shopping has seen a recent influx of users, causing a shortage of resources and more inconvenience than usual.

Lily has daily time constraints that affect her online grocery shopping habits, how might we be able to help her shop more efficiently within the constraints that she is given.

Usability testing on the current Shipt website

The next step is usability testing on the current Shipt website. The purpose of this testing is to assess the usability of the current website and how it supports the needs of the primary persona. By having usability testing with 4 users, we were able to obtain the six insights.

  • Users could not click on ‘Next Delivery’ to see Time Slots
  • Users were unable to find ‘Special Request’
  • Users were unable to find ‘Buy Again’
  • Users had a hard time finding ‘Live Chat’
  • Users want to edit cart after checkout

Based on these findings we moved on to the next step for redesigning the websites.

Design

Although it is ideal to solve all problems, it is important to prioritize which feature to focus on. Due to timing and resource, we can only improve certain features. By using the MoSCoW method, we concluded with below as the high priorities.

  • Buy Again feature: Users were not able to find this feature which is currently located under “Category” in the primary navigation. It is inconvenient for users who want to quickly reorder previously purchased items.
  • Live Chat feature: This feature is not accessible enough for users who want to chat with an associate immediately. Because it is located under “Contact Us” in the footer area.
  • Next Delivery feature: On the current Shipt website, it is not easy to book or modify time slots. Users are not able to change timeslots on the home page. They can change it until they go through the check out process.

As a team, we ran Design Studio to exercise quick sketches and critiques to bring up with some wireframes that solve these problems. Here are some of the new improvements we come up with.

  • Buy Again feature: Place the ‘Buy Again button’ on the homepage to make it more accessible
  • Live Chat feature: Place ‘Live Chat’ on the homepage to make it more accessible
  • Next Delivery feature: Turn ‘Next Delivery’ to a dropdown to let the users pick an available Time Slot, Add a modal window to alert users regarding limited Time Slots
“Next Delivery” — An example of an improved feature in mid-fi prototype

These new features in the mid-fi prototype improved the usability of the Shipt websites tremendously as you can see the usability testing summary below.

Hi-fi prototype

https://www.figma.com/proto/wCdKoxwpmmLMxEVSa9c2Mt/Shipt-Hi-Fi?node-id=53%3A2272&scaling=min-zoom

In order to improve those features, Buy Again, Next Delively and Live Chat, we updated our Hi-fi prototype with below features we learned from the mid-fi user testing.

  • Make lower Buy Again button without box surrounding it as to not confuse users with upper “Buy Again” button
  • To make “Delivery Date and Time” option a little bit more clear as users were confused by the “today” and “tomorrow” tabs.
  • Make it more clear how to exit the chat. Instead of the triangle next to the Send button, have an “X” mark on the top right corner.

User testing on high-fi prototype resulted almost the same as the reults from the mid-fi usability tesing. It ended successful with some useful insights for the next steps.

  • To reword the scenario to make it clear to the users that it’s for a new delivery time.
  • Fix the prototype where the user can edit the delivery time from the chat
    window.
  • Conduct usability tests with Live Chat button in lower right margin to
    determine the best location for the button.
  • Consider adding a quick view option to items within the Buy Again carousel for shoppers to get more detailed information about the item they are viewing.

Results

There are some areas we can still test and improve as you can see in the insights from the last testing result. However, in conclusion, we made online grocery shopping experience on Shipt much more efficient by simply adding basic features and making existing features more visible.

This was the first project I approached from the user interview to the final hi-fi prototype as a group. In my previous projects, there were things that I did not understand or didn’t do well, especially affinity mapping and research synthesis. However, this group project let me learn from other teammates how they approach each step. Also, it was a great learning experience work efficiently as a team by utilizing their unique characteristics.

Here are things I learned from my teammates.

  • How to conduct user interviews productively
  • How to conduct affinity mapping effectively
  • How to extract insights from affinity mapping & “I” statements
  • How to determine what problems we, UX designers, can fix (there could be many problems we want to solve. But it could be a business problem that we can not easily fix)
  • How to priorize which feature to focus
  • Group standup is helpful to understand teammates strengh at the beginning of project
  • Time management is very important to keep each step in a project on time

--

--

Yuki Mochizuki
0 Followers

Designer who is passionate about accessible and inclusive design. My goal is to create a positive experience for users with a wide range of perspectives.