E-commerce Platform
Challenge: Develop both web and mobile experiences that help users schedule the delivery or pickup in the grocery store.
Deliverables: Research. User testing report. Affinity map.Wireframes. UI. Prototype. Usability testing.
Role: Product Designer
Project Overview
About
Wynshop is the leading provider of digital commerce and fulfillment solutions for local store-based retailers. The grocery-focused e-commerce technology provider has grown and invested rapidly across North America in recent years, and is now adding customers in markets throughout Australia and South America.
In a fast-paced grocery e-commerce industry, providing a seamless Time Slot system aims to address the challenges by introducing a user-friendly and efficient platform for scheduling the delivery or pickup of groceries.
Our platform provides a Time Slot solution when shopping. But recent discoveries indicate that the shoppers find it not that easy to navigate.
My role & Tools
I was part of the pitch team and responsible for the research and design of the Storefront and the App. UX work was presented to the client in October 2021. I worked alongside a Senior UX Architect who focused on the V2 App.
Time Line: 1 Week - 40 Hours
Year designed: 2021
Project: New Features Integration & Redesign
Responsibilities: Competitive analysis, User surveys and interviews, User personas, Task flows, Journey maps, wireframes, and prototype, High fidelity prototype, Usability tests.
Team: Product Manager, Product Owner, Developers & Software Engineers
*Disclaimer: For this case study, I changed the design system, but kept the flow, relying on the user research study.
Also, I created multiple flows and added features that were considered, proposed, but not implemented at the time it was designed. Also, to avoid the longevity of the case study, I will focus on the app flow.
Quick Links
The Design Brief
Client’s Requirements & Problem
Our clients express a desire to redesign ONLY the time slots reservation section and make it more efficient. They gave us one week to research and find the best solution to meet their requirements.
Project Goal
The following case study is focused on screens where the shopper can:
1. Select the shopping mode
2. Select the time frame for pickup or delivery
3. Change the shopping mode during the checkout process
4. Get a note if the reservation has expired or is about to expire
Solution
Integrate new features and redesign the flow both on the storefront and the app.
To accomplish this, I will conduct user interviews to gain insight into user behavior and preferences. This feedback will inform our market research, in which we will analyze trends and competitor strategies to identify opportunities for redesign and new features.
Redesigning the Time slot section will affect other screens in the checkout flow!
Empathetic Approach
In this Section
1.Research
2. Competitive Analyis
3.User Interviews
4.User Persona
5.Research Findings
Research & Lean UX Canvas
After we discovered the problem, I made some assumptions about the pain points and potential improvements that could be made with the current time slot screen. I wanted to learn about user preferences, what they like, and issues they have with online grocery shopping.
I started with competitive and visual analysis, focusing on popular retailers in the US and Europe, and defined goals to help focus better on the problem.
Lean UX - Problems & Goals
Competitive & Visual Analysis Takeouts
I started with competitive and visual analysis, focusing on popular retailers in the US, Europe, and Australia, and defined goals to help focus better on the problem.
Both analyses were reviewed and discussed between UX team members and project managers, and we decided to take additional action and run the test focusing on time slot screens and flow.
The team was also following the user behavior via Microsoft Clarity to learn and understand the user behavior and compare it to the findings from tests, and qualitative and quantitative data.
Also, the findings presented to our clients, section included all phases, from the homepage to notifications about expired time slots.
*For this case study and the longevity of the analysis (Including more than 30 e-commerce websites, grocers, and others), I will focus on some popular retailers in the US and Europe.
Competitive Analysis - Time slot section (2021)
Research Plan and Interviews
We run the test on the and compare our client with the other 3 direct competitors. For that, we created the test scenario based on the previous observation and additional research from some case studies we were able to find.
Scenario: You want to order groceries for the week. You will be examining the flow of selecting a time slot for pickup and/or delivery. You will navigate to 3 different grocery websites. Once you have added items to your cart and selected a time slot for each grocer. Add more products and modify the time slot. After that, the test will be complete.
Here is what we wanted to know:
How is your overall experience?
How difficult was navigating through time slots and finding the right time?
What aspects of the experience can be improved?
How was the checkout process?
Was it clear?
Some users were asked to add more items to the cart and return after 2 hours, and explain what happened.
Surveys & Interviews
More than 30 testers participated altogether (on three devices).
The first thing that came was the longevity that the shopper spent on our platform rather than on the other two.
Some shoppers were struggling to select the day, while some were looking for the available time slot on a specific date. Regardless of their situation, all of the participants were spending too much time looking for the available time slot, complaining about the difficulty of selecting the proper day, and commenting that the screen was not intuitive enough and they were not getting the proper response after the slot was selected.
Statistic HotJar, Microsoft Clarity, Surveys
“I should be able to easily identify the available time slots the upcoming days, but I had to scroll down and it was to crowded to notice the available one.”
— Marcus, UK
“I should be able to see the available and unavailable slots, selected ones and unselected ones. I went back and forth since wasn’t sure if I even select one.”
— Alex, US
“I never got confirmation that I selected the time slot. I had to go back and forth and found it on the homepage. This process should be fast and effective, but this one is not.”
— Maria, US
“To many things going on there! When I selected the time slot, I didn’t even noticed the button changed color. Not very intuitive. What I like is the option to change it on homepage.”
— John, US
Current Design
When observing the current time slot. I made notes on where our testers struggle to continue.
The overall experience was underperforming compared to the other two competitors.
Here are some takeaways
Shoppers found the shopping mode section “crowded” and “messy”. Also, the BACK arrow was missing from the page.
Shoppers were clicking on the “Choose the pickup time” section, but the section didn’t work.
No indicators about the dates and carousel view
Too much text and information. Some testers could not find the available time slots.
Buttons at the bottom were confusing?!
Journey Map & Persona
Based on the collected data from the research process, I created the Journey Map and implemented all the findings from that stage, including the time the UX team spent modifying the personas and brainstorming sessions.
In the Journey map, it was clear how ONE screen is creating pain points for shoppers, and they spend more time figuring out where to click and looking for the available time slot.
Our persona hypothesis consisted of 3 different archetypes, which we used to facilitate discussions about our users, desires, and varying contexts of use. We discussed the personas with two of our clients to develop a clear picture of who the design of the app would target in phase 1 and later in future releases.
Personas
Pain Points & Research Key Findings
I asked the questions and went down the empathy road to align with my shopper's likes and pain points. It’s time to formulate a solution and then test my theory.
The key findings research document will outline what I learned and what I’m doing next.
Pain Points:
Customers had more issues with the mobile and the App than with the desktop version.
Customers have already selected the shopping mode, so they haven’t paid much attention to the icons, and no one has changed the store!
Customers were clicking on the selected date that was not active.
Some customers haven’t noticed the carousel view showing the dates.
The carousel view with days is not showing the selected day was causing confusion among shoppers.
Customers found time slot selection and all time slots listed overcrowded and time-consuming.
They need additional confirmation that the slot is selected than the radio button.
Customers never got confirmation about the selected date and time.
Customers didn't know how long the reservation would hold.
Testers found shopping mode, and store selection “Messy”, “unorganized”, and “hard to move around”.
Testers were clicking on “Choose pick up time,” but the section is static.
No Indicator of what day is selected on the carousel.
Testers found the design "not intuitive, and could not see what Time slots are available and which are reserved.
Key findings:
Our platform has an opportunity to provide its users with the security and peace of mind when they’re looking to schedule a delivery or order pickup.
Providing a sense of excellent customer service, digitally. The website and mobile app that is designed to provide transparency about booking a time slot.
A fresh design that is approachable to all shoppers.
New feature integrations are necessary!
Define
In this Section
1.Project Golas
2. New Feautures
Project Goals
So, in pushing design forward, it was important to maintain the existing flat site structure and ensure that we work with components and designs built into the platform.
Synthesizing goals from our research served as a lens through which we could consider not only what the app should do, but also how it should feel. We believed this would be the difference between delivering a good experience and a great one.
Ideal Experiences
Knowing who I was designing for allowed me to ask myself how the experience fits into the shopper experience.
Combining our research and brainstorming the different things people do before, during, and after shopping for groceries allowed me to come up with a broad set of tasks quickly.
I categorized and segmented the tasks into behavioral affinities and aligned content and features.
It gave me an opportunity to:
Visualize what existing functionality and content
What needed supporting
What opportunities were available to innovate, and also
What could be discarded from the existing design
Ideate
In this Section
2. User Flow
3. Low Fidelity Wireframes
The User Flow
UX team went with Mobile mobile-first design approach, especially since our research and tests were not successful, and the majority of the negative reviews came from mobile and app users.
Scenario 01: No Time slots Available - Shopper will have to change the date or shopping mode
Scenario 02: Only Available Time Slots are listed - Shoppers can select one, following the Reserved Time Slots screen with the confirmation note at the bottom!The
UX team decided to have one ICON that indicates the shopping mode.
In the following flow, I used different icons.
Instead of icons, Change Delivery address (if in pickup mode) or change the shopping mode are clickable; if in pick-up mode, then the shopper can change the pick-up store or switch to delivery.
Shopping online for groceries can be time-consuming. The shopper is going back and forth, looking for the best deals or rearranging the shopping cart even after the Time slot is reserved.
Prototype
In this Section
1.Mood Board
2. Design System
3. Hi-Fi Wireframes
4. Hi-Fi Prototype
Mood Board
When collecting images for my mood board, I was very intentional about following the 5 senses to guide me. While some of the senses didn’t apply, sight, touch, and smell all led me to think of fresh and healthy.
I added photos of fresh and healthy food because I thought it was important to think about this flow and our customers in the first place.
I wanted my users to feel the smell from the fresh market.
Fresh colors such as greens and pink felt vibrant.
A Realway is an elegant and minimalistic sans-serif typeface. It's highly readable, making it a great choice for both print and web, and for any project targeted to a broad audience such as ours.
Shopping Mode: Delivery
Shopping Mode: Pick Up
Shopping Mode: FAST Delivery
TESTING
In this Section
1.User Testing
2. Screen Revisions
User Testing
Now the prototype needs to be tested! It was done with the Devs’ assistance, and the results were positive and informative, which led to some revisions and adjustments.
Interview Style: Interviews conducted via Google Meet and Zoom.
Participants
Participant 01: 28 yyears old Manager in Hotel, USA
Participant 02: 33 years old, Veterinarian, USA
Participant 03: 46 years old, Sales Consultant, USA
Participant 04: 65-years-old, Manager, Europe
Participant 05: 70-years-old, retired professor, Europe
The team created more than 20 questions. But for privacy reasons, I will focus on the overall experience (UX) and difficulty during the process.
Question 01: Please rate the level of ease or difficulty going through the action of booking the time slot. From the moment of choosing the shopping mode to the end!
Question 02: Please rate the overall experience. Designs, UI, Difficulty booking the time slot, change address, shopping mode, etc.
Testing Insights
Customer service helps the user feel more confident in their purchase of insurance.
Shoppers feel more confident when they start the checkout process
The designs help them navigate more easily and confidently
The possibility to change shopping mode, address, and payments during the process was important to all shoppers
Shoppers said that new designs are clean and simple.
Shoppers appreciated the info notes regarding their actions.
Younger shoppers liked dark mode better
Revision on 3 Screens
Revision was implemented on 3 screens. The Address selection was the one that didn’t have a specific indication about the default address. The same rule was applied to the store selection.
Revision 01:Shoppers didn’t know what the selected address was. The radio buttons are added as the indicator.
Revision 02: Same pattern - shop selection. The main store is selected, and the radio button is turned on.
Revision 03: Modifying order. Note will be appearing during the entire modification process.
FINAL
PROTOTYPE
Get it Right On time!
Screens for Mobile, Desktop, Tablet
+2
Days For Research
+3
Days for Designs
Positive Reviews