FOOD DELIVERY CASE STUDY
A conceptual project on grocery delivery options during the Covid-19 pandemic.
CHALLENGE
METHODOLOGY
SOLUTION
Create a conceptual Food Delivery Website for Twin Cities shoppers.
Exploratory research on area food delivery revealed that Twin Cities grocery shoppers were unsatisfied with the pick-up and delivery options. Each user mentioned they would ideally shop at their Co-op for groceries but didn’t like (or did not have) the option for Co-op delivery so they were instead using a service they did not feel great about. I developed a concept, prototype, tested the prototype, and created an evaluative report for the concept.
I designed a website enabling online ordering from local co-ops. The site invites users to choose between grocery pick-up or delivery service and allows customization for each product, improved delivery communication, and access to in-depth product information.
Role: UX Researcher & Designer | Deliverable: Interactive Prototype
METHODS
1 Directed Storytelling
2 Wireframes
3 User Flow Diagrams
4 Interactive Prototypes
5 Think-Aloud Usability Testing
ATTRIBUTIONS
• Stock Photos: IStockphoto & Pexels
• Icons: Material Design
• Axure Modules: Flat Ui Kit
• User Test Script Template: Steve Krug
Project Reflection
I knew I wanted to design a conceptual project around a food website because fast and friendly food solutions were always on my mind during the Covid-19. I brought in users for directed storytelling interviews so I could get a basic understanding of potential customer’s current food and delivery needs and use and gain insights into opportunity spaces.
An “AHA” moment occurred when I discovered that 3/3 of my surveyed users were interested in co-op delivery but unsatisfied with the current options. This inspired me to build “Bunches,” a food delivery application that focused on co-ops and considered specialized customization items.
This was my first experience with building a clickable prototype. I used the application Axure and advanced sets of UI components to make an explorable prototype before testing with users again to see if my concept was a strong solution for a potential co-op delivery option. The result was clunky but functional. When testing it, I learned that the prototype doesn’t need to be perfect to gain valuable user insights or measure the value of an idea.
CASE STUDY: DESIGN > RESEARCH > TEST > EVALUATE
RESEARCH
Directed Storytelling & Research Report
I conducted 3 remote interviews with local residents using the directed storytelling method over Zoom to gather insights about how they currently used Food Delivery websites and better understand their experiences.
I used Zoom and Otter to record and transcribe interviews*.
Interviews were synthesized into a research report featuring the participant’s experiences, goals, needs, and pain points. This report explored commonalities and opportunities to create a goal statement for our website design.
Click the video above to view the full report or view it here.
*All participants were volunteers who agreed to be recorded.
USER GOAL STATEMENT
Our user is a busy professional who wants convenient options for quality, reliable food delivery.
This user needs a service that can be easily customized to fit their active lifestyle and reflect their values.
AHA MOMENTS
• The Directed Storytelling Interviews revealed that all of the potential users were unhappy with their options for local co-op delivery.
• Users were concerned that the services available were unreliable or unavailable. They also noted that some of the services had structures or values that conflicted with their own values or how they saw their co-op’s values.
• I saw this as an opportunity to create a platform that addressed these concerns and but still met their goals for a fast, convenient service
Click Image to Enlarge
SITE MAP & KEY TASK FLOW
DESIGN
Wireframes & Architecture Diagram
After evaluating the user goal and considering the structure for a potential website design, I identified 3 of the Key Frames to build the design concept around.
The wireframing process began with some quick, hand-drawn sketches. These sketches were then modified into low-fidelity digital wireframes using the application Sketch.
I also used Sketch to create an architecture diagram to outline the site’s layout and map key task flows.
3 KEY SCREENS
1. Shop Homepage with a more dynamic header so that users could check service and cart information from any page
2. Product Pop-Up page with customization options for product details and shopper notes/substitutions
3. User Dashboard for further customization.
KEY USER FLOW GOALS
Convenient, Fast Process.
I wanted users to achieve “check out” within 10 steps
- This user flow was also built into the architecture diagramHighlight “Notifications” with a shortcut from any screen.
A Cart Drawer accessible from every page
Initial Homepage Sketch
Initial Sketch
Handdrawn Wireframe: Home
Sketch Wireframe: Home
Sketch Wireframe: Product
Sketch Wireframe: Dashboard
PROTOTYPE EVALUATION
Think-Aloud Usability Testing
GOAL: To test the first impression of the site design and the usability of the key task flow for buying a product and checking notifications.
BUILDING PROTOTYPE: The Sketch wireframes were rebuilt in Axure with some basic UI functions so I could test the key user flow.
THINK ALOUD USER TESTING:
• I conducted 3 remote usability tests over Zoom with volunteer participants who fit our intended user: busy professionals.
• Tests were recorded and transcribed using Zoom and Otter*
• Participants were given a link to the prototype and were observed as they were given a scenario that fit our test goal
Usability Testing Findings Report
The insights from the Usability Tests were synthesized into a findings report where I outlined the testing methodology and identified key recommendations for improving the usability of the grocery delivery website.
KEY RECOMMENDATIONS:
• 8 recommendations made to improve participant’s pain points
• 7 critical bug fixes
Initial Findings from Think-Aloud Usability Testing
*All participants were volunteers who agreed to be recorded.
CONCLUSION
Moving Forward
3/3 of my participants liked the overall concept and design of the grocery delivery website and we are able to complete their key task flow.
In this way, the initial design concept was successful and ready to move on to the next phase in development, which would be to further build out the prototype and continue to test user flows and develop logistics. The current prototype could be improved by adjusting the concept to better accommodate mobile views.
