Peapod (Responsive Web Redesign)
Overview
4 Week Sprint
Peapod is a service that allows users to purchase their Stop & Shop groceries online for pickup or delivery. At the height of COVID-19, this service became more important than ever to allow users to keep their distance while providing essential items. Our team was tasked with redesigning Peapod’s responsive site to resolve any issues found in the research, and make the website more accessible to the many different kinds of people who needed their groceries delivered during quarantine.
Methods
User Interviews
Screener Survey
Competitor/Comparator Analysis
Persona Development
Feature Prioritization w/ MoSCoW Mapping
Design Studio
Sketching
Wireframes
Usability Testing
Tools
Figma
Google Suite
InVision
Miro
Zeplin
My roles
UX Researcher
UX Designer
UI Designer
Team
Michael Mallette
Leah Mirani
Barry Smyth
Research
Heading into this project, our team’s first step was to conduct user interviews about the experience of grocery shopping. The information we gleaned from these conversations would allow us to identify what was and was not working about Peapod, and put us on the right track to finding solutions to the website’s problems.
Screener Surveys
We used a screener survey to identify the right users to interview. We wanted to talk to a range of people in terms of age, technological ability, and interest in online grocery shopping
User Interviews
We spoke to 6 users, and asked about grocery shopping both online and in store. We wanted to learn not only what people liked and disliked about the online experience, but also what people liked about in person shopping that was missing from online.
Synthesis
Through Affinity Mapping, we identified themes in our users’ experiences with grocery shopping. These trends allowed us to draw a series of deeper insights into our users’ goals, needs, behaviors and pain points.
Affinity Mapping
Affinity Mapping Screenshot
To our surprise, grocery shopping brings out strong opinions and many similarities came into focus.
Key Insights
• Users like to be inspired while shopping
• While online, users miss real human connection
• Users want to pick their groceries themselves so they can control the quality
The thread that weaved through all of the groupings was:
“I like my routine”
Persona
Taking all our Affinity Map groupings and “I” statements, we created our Persona, Lily. Every decision from then on out, we asked “Does this benefit Lily?”.
Journey Map
To better understand Lily’s emotional rollercoaster, we created her Journey Map. This made it easy to picture the high and low points of Lily’s grocery shopping experience. Creating this helped us represent the exact points where we could address opportunities to improve the online grocery shopping process from the highs and lows from in-person shopping.
Persona Journey Map
Based on these goals, needs, pains and behaviors, from our Persona, and visualized through our Journey Map, we created a Problem Statement.
Problem Statement
We wanted to summarize what Lily wanted, what was preventing her from getting it, and ask ourselves how we could help her with this issue.
We asked ourselves…
“How might we help her create a new routine with online grocery shopping that emulates the joys of the real life grocery shopping experience.”
Feature Prioritization
The MoSCoW Map method made it easier to decipher which changes would ultimately be impossible without Peapod altering or adding big pieces of their company.
Though this, we narrowed it down to 2 issues with high impact and mid to low effort/expense:
• Live Chat with Peadpod
• Redesign the Browsing Layout
Design
With a solid understanding of all the problems at hand, our team listed out and prioritized potential features that could improve the experience of using the Peapod website. We started with a desktop design, because that was the more popular platform among Peapod users, and then translated what we created to a mobile space. Based on our time, resources, and what would be most helpful to users, we chose to focus on the following features:
Homepage redesigned with browsing aisles and larger images as the focus
Peapod Chat added to bottom right corner with blue icon to represent “information”
Next Steps
Our team uploaded our wireframes to Zeplin, and gave the file to our development team so they could build out the design. They completed the project in a 10 day sprint, over the course of which, we periodically met with them to answer any questions.
Based on usability testing results and user feedback, we also recommended the following steps to further improve Peapod’s website:
Build out our visual browsing layout across the entire site, and conduct another usability test asking users to emulate their normal shopping experience. See if users are more likely to browse within the new layout, and if they enjoy the experience.
Enlarge the “Ask an Expert” button in the bottom right corner, and add text to the “Ask an Expert” icon that appears next to the product title
Make it clear that a real person will be responding to this chat — consider adding profiles and profile pictures of the different Peapod Experts
Run usability testing on the mobile version of the website
Summary
We came into this project thinking we’d be able to help those most in need of accessibility to online grocery shopping, particularly with the disabled and elderly in mind. We found out quickly that the users we have access to throughout the UX Design process are of utmost importance to the direction your data will take you. Ours didn’t include many of either but we learned to pivot and do our best to help the users we did have access to.
The most grueling moment in this whole process was the struggle between letting our imaginations run wild with big seismic changes and reminding ourselves that the best way we can make that change is by doing the most with the least effort. Having a reminder of who we were serving, our Lily, constantly brought us out of fixing the problem for ourselves as users and put us into the mindset of fixing for her, and all the users that made her.
Prototype
Enough about work, learn more about me: