Responsive Site
OVERVIEW
Evaluate, user test, and redesign FreshDirect’s responsive website.
METHODS
Screener Survey | Interviews | Affinity Mapping | Persona Development MoSCoW Feature Prioritization | Design Studio Sketching | Wireframing Rapid Prototyping | Usability Testing
TOOLS
G Suite | Figma Miro | Illustrator
Zeplin | Keynote
ROLE
UX/UI Designer | UX Researcher
TEAM
Patricia Musat | Sarah Lipman | Jeremy Coleman
TIMEFRAME
Full-time, 14 Days
INTRODUCTION
The Problem
The goal of this project was to evaluate and resolve any usability issues with FreshDirect’s responsive website, including any accessibility improvements our team could recommend.
The Opportunity
Shelter-in-place restrictions have made online grocery shopping more necessary than ever for many people, yet most grocery store websites are often confusing and difficult to use.
APPROACH
Discover
Screener Survey User Interviews
Usability Testing
Define
Affinity Mapping
“I” Statements & Insights
Persona Development
Journey Mapping
Design
Feature Prioritization
Design Studio
Mid-Fi Wireframes
Mid-Fi Prototype
Deliver
High-Fi Wireframes
High-Fi Prototype
Usability Testing
Next Steps
RESEARCH
Talking to Users
Through a ten question screener survey, we learned that 47% of users felt advanced with their online shopping expertise, 47% used their mobile phone to do so, and 33% bought groceries online at least once a month.
Synthesizing Research
After interviewing six respondents, we identified several key insights, the overarching one being that users were frustrated with a lack of control they experienced throughout the online shopping process.
Articulating Insights
We crafted an online grocery shopper persona named Kim to convey our research insights in an emotionally useful form, articulating his specific situation and pain points.
Mapping Emotions
We also visualized Kim’s emotional experience during the process of purchasing groceries online, using a journey map to outline his actions, mindset, and emotions throughout the entire process.
EVALUATION
Opportunities
Now it was time to look at the state of FreshDirect’s existing website. Asking participants to navigate the existing website using their mobile phones, we conducted 3 usability tests, and discovered 3 main issues:
1) users had difficulty locating, viewing, and reserving available time slots.
2) user found the site’s navigation and product organization confusing.
3) users had trouble locating the filters feature, when searching for products.
DESIGN
The Features
Based on our research thus far, four issues stood out to us as we entered the design phase: improving the time slot selection experience, relabeling the navigation, and enhancing both the search bar and shopping cart icon.
The Priority
But because time slot selection was Kim’s primary pain point, we prioritized a time slot selection modal and alert, which would provide users better information and access to time slot availability immediately.
USABILITY
The Test
Because Kim’s greatest need was to have more control over locating and selecting available time slots, we prioritized testing that feature with users, and found that:
3/3 users successfully found an available time slot
The Verdict
Overall, users loved the new feature’s convenience, and rated the app’s ease of use as 4.7 out of 5, and 4.9 out of 5 for satisfaction.
PROTOTYPE
CONCLUSION
So What?
Though usability testing of our final hi-fi prototype revealed further changes could be made, my team and I also observed our design changes successfully give control back to users as they more easily navigated through the online grocery shopping experience.
What’s Next?
Though my team and I were very happy with the results of our fourteen day design sprint, we identified two additional features we’d like to consider for future iteration and testing, namely:
A time slot “countdown timer,” much like those used when purchasing broadway tickets.
Available time slot push notifications, that would alert users when new time slots become available.
