Shipt
UX Design & Research
ROLE
This project is a fictitious redesign, completed as a part of General Assembly's User Experience Design Immersive.
TOOLS USED
Background
Shipt is an American grocery delivery company owned by Target. Given the success that Shipt has had with retailers, it is planning to expand its services to include a grocery store with a cult-like following: Trader Joe's. The business wants to see grocery sales from Trader Joe's generate 3 million USD, a month, in the first year of being available on the Shipt app. Shipt’s UX team is being asked to feature Trader Joe’s items to help accomplish this goal.
Problem
Consumers need a compelling reason to buy through Shipt, instead of other grocery delivery services such as Instacart. They are looking for maximum order efficiency and fair prices.
Goals
Redesign Shipt's mobile app to include Trader Joe's and help users shop effortlessly and efficiently for their groceries.
Overview
Research
Part 1: User Interviews
To better understand the pain points and needs for Shipt’s customer base, we decided to begin the project by diving into user interviews.
We selected a range of users, all who met the following criteria:
-
Familiar with grocery delivery services/have used one in the past
-
Never ordered directly within the Ship app (okay if they ordered with Shipt via Target app)
-
Shops somewhat regularly at Trader Joe’s
We wanted users who understood the concept of grocery delivery and found a need for it in their lives. It was important to us that none of them had used the Shipt app specifically so we were able to get their genuine reaction to the app experience without any previous knowledge.
User 1
Age: 65+
Male
"I don't like unnecessary difficulty... and not require a degree in computer programming to order."
User 2
Age: 20-25
Female
"[Grocery delivery apps] help me talk to less people which I like."
User 3
Age: 35-40
Male
"I only just started [grocery delivery apps] recently, because of time constraints."
We began the user interviews by asking about their experience with grocery shopping in general to learn their overall stresses and challenges. Then we gradually got more specific as we learned about their experience using grocery delivery apps. After gathering background information, we asked users to jump into the Shipt app and complete a purchase all the way to the checkout screen.
We chose to synthesize our research with an affinity map and we found 4 main themes:
Time
The main interest in using a grocery delivery app is because it saves time for users!
Ease
Users enjoy the flexibility to stay home, easily find coupons, and limit interaction with other shoppers and employees.
Guest Mode
It was very important to for users to be able to explore the app as a guest- before making an account.
Search
Having the ability to search for an item, not just a store, allows users more flexibility to shop for what they want.
COMPETITIVE ANALYSIS
For the second phase of our research, we conducted a comparative and competitive analysis to look at how Shipt compared to other apps in both the grocery delivery space and overall.
We wanted to look at not only function, but design. We wanted to ensure consistency with industry standards and create a sense of familiarity for users- even if it’s the first time they have opened the Shipt app.
Part 2: C&C Analysis
Main Takeaways:
-
On Instacart, the only way to use the app is to sign up or log in (on desktop and mobile). You are unable to browse as a guest.
-
The Instacart homepage has category and store suggestions to help guide users to decide what they are looking for (simple design with lots of images).
-
Amazon Fresh pushes you into a box by not showing you only the items that are available in your area. You must click on the item first, then discover if it is available.
-
Amazon Fresh has a lot of advertisement heavy categories.
COMPARATIVE ANALYSIS
Main Takeaways:
-
On Adidas, you are able to complete the bulk of your shopping experience without having to login or create any sort of account.
-
Chipotle’s app used food images as you were shopping, and then again in the checkout flow as you are able to add extra items to your cart.
-
Curated specialty landing pages within the app for featured products (like Adidas) would be a great way to advertise the new Trader Joe’s items.
Amazon Fresh
Instacart
Shipt
Adidas
Chipotle
Shipt
Analysis
Part 1: Personas
After user interviews, we decided to move forward with two personas to fit the Shipt Audience.
Justin Mills
Single Father of 2
“I feel like these delivery apps are trying to sell themselves all at once rather than trying to help me and my needs.”
User Goal: Justin needs Shipt to deliver groceries to his home from Trader Joe’s in an efficient way so that he can receive his groceries on time without any complications and for reasonable prices.
Justin needs an app where he doesn’t have to create an account just to try it once
User Needs:
Justin needs an app where he can choose to repeat his previous orders to save time
Justin would like to receive grocery items as early as an hour after checkout
PRIMARY PERSONA
Kathie Gerber
Influencer
“I don’t like unnecessary difficulty.”
User Goal: Kathie needs Shipt to deliver trending products at discounted prices so that she can create video content for her blog easily with new and exciting items.
Kathie wants to easily find new foods to try for her influencer unboxing videos
User Needs:
Kathie would like to find good deals on food and beauty products
Kathie wants to discover new trends in what is popular and people are purchasing
SECONDARY PERSONA
Part 2: User Journey Map
We decided to create a retrospective user journey map to learn more about our user’s current experience on the app. We took the exercise from the perspective of our primary persona, Justin.
By tracking Justin’s emotional state and paint points throughout the journey map, we were able to pinpoint key adjustments we wanted to make within the Shipt app.
Part 3: Problem Statement
Through our analysis phase, we developed a problem statement to meet both Shipt’s user and business needs.
"Shipt is looking to increase business by incorporating Trader Joe’s into their grocery delivery app. They see an opportunity for increased revenue, and are looking to increase the efficiency and ease of their app to encourage users to choose them over competitors.
Users are looking for a way to easily order groceries on a timeline that fits their schedule. They are looking for discounts and a stress free shopping experience. "
Design
Part 1: Sketching
As a group, my team dove in with sketching potential solutions for our redesign. We were able to consult each other and combine our sketches before bringing everything together for our Low-Fi mockup.
We started with sketches of the homepage:
And then other phases of the app:
Part 2: User Flows
As we started to bring our sketches together, we were able to storyboard and map out our user flows.
For our prototype, we mapped out three user flows:
-
Order groceries to be delivered
-
Search for a popular product
-
Create an account
By deciding on what screens we would need, we were able to create simple flows for our users and create efficiency throughout our prototype.
Part 3: Mid-Fi Wireframes & Testing
While building our mid-fi wireframes we sought inspiration from our C&C analysis. We made sure to consult not only our competitors, but other popular apps to ensure we were able to create something familiar and user friendly.
We started off with 17 frames to guide us through each user flow.
After we completed our mid-fi wireframes, we decided to do testing with Maze. Maze is a product research platform that allows users to set up automated, unmoderated user testing. We created 3 tasks for our participants to accomplish:
Search for trending item- Trader Joe’s Daily Facial Sunscreen
Purchase the Trader Joe’s Daily Facial Sunscreen and have it delivered
Please enter your account and re-order your most recent order
We gathered 4 participants for the test. Three female and one male, all ages 18-44.
Search for trending item- Trader Joe’s Daily Facial Sunscreen
TASK 1
Another benefit of Maze is that you are able to download heat maps of your testers activity on site.
Key Takeaway: As a result of our mid-fi wireframe, not all our buttons were working- including our search button at the bottom of the screen. This created some confusion for our testers. However, overall it was an easy process to find the search bar at the top.
Direct Success: 25%
Indirect Success: 25%
Give-Up: 50%
Purchase the Trader Joe’s Daily Facial Sunscreen and have it delivered
TASK 2
.png)
Key Takeaway: The process to choose a product and complete the checkout flow is easy and straightforward. We did discover that there was some confusion with the “checkout” text at the bottom of the screen. It was not a button, the price next to it was, however testers clicked the “checkout” text first.
Direct Success: 100%
Please enter your account and re-order your most recent order
TASK 3
Key Takeaway: Once again, we struggled with testers clicking the “checkout” text at the bottom of the screen instead of the price tag button.
Direct Success: 66.7%
Indirect Success: 33.3%
.png)
.png)
.png)
What was your main pain point?
“My main pain point was, I lost the threading between the cart page (or where the tab said $xx.xx) to the checkout. Intuitively I selected the tab to the next of it."
"I love the repeat order option. Incredibly user friendly and customer focused. My main pain point was more around the instructions than the actual prototype."
"The checkout button was unclear for both tasks. I wasn't able to remember after using it once that the checkout button was different."
Quotes from Mid-Fi Testing
Part 3: High- Fi Wireframes
In addition, I chose a minimalist serif font with a majority black & white color scheme to direct the users attention to the images of food and products on the page.
After synthesizing our mid-fi user testing, we were able to get started on the Hi-Fi mockup of our redesign. As lead UI Designer on the team, I created the brand kit and worked with my team to build out each screen to meet our aesthetic needs.
I decided on a bright green color scheme to replace Shipt’s dark purple colors for several reasons:
-
Green is a happy color but not overwhelming, it can also bring a sense of calm
-
Similar to other apps in the space, green works well with images of food
-
The bright green I chose is able to stand alone with minimalist design
Part 1: Hi-Fi Testing
For our Hi-Fi user test, we decided to conduct moderated zoom interviews. We made this decision so we could dive deeper with our testers and ask appropriate follow ups. We created 3 tasks for our participants to accomplish:
Test
Please create an account and search for the Trader Joe’s Daily Facial Sunscreen.
Please add the sunscreen to your cart and complete the checkout process.
Please enter your account and re-order your most recent order.
We gathered 3 participants for the test. Two female and one male, all ages 23-64.
“I would like a cart icon that follows you as you scroll down”
Confusion with "Your Orders" vs "My Orders"
Highlight buttons and text to increase readability
Takeaways from Hi-Fi Testing
Part 2: Iterations
After synthesizing our user testing data, we discovered 3 main themes we wanted to approach for our iterations:
-
Users missed “add to cart” button and needed a sticky footer/header
-
Change “Your” language to “My”
-
Highlight buttons and text for readability
.png)
.png)
Users missed “add to cart” button and needed a sticky footer/header
ITERATION 1
Solution: Added a sticky header and footer so the checkout button and navigation are always seen
.png)
By adding a sticky header, users do not lose access to their navigation tools as they scroll down the page.
Highlight buttons and text for readability
ITERATION 2
Solution: Changed colors and fonts to increase readability
By bolding small text and changing background colors, users were able to move through the app with more accessibility
Change “Your” language to “My”
ITERATION 3
Edited language to put in the perspective of the customer
By writing in the point of view of the customer, the app allows users to feel ownership of their account and experience
Final Prototype
Next Steps
I would love to continue the testing & iteration process with the new Hi-Fi revisions. In addition, although not possible with this project’s current time restraints, I think building our flows for different stores and products would be beneficial to user testing. By allowing the users more options, I would be able to see their behavior more naturally within the app.