Fresh
Grocery in your hand
2016
Contributions
UX research
Creative direction
Wireframe
Prototype
Tools Used
Problem
How might an app help grocery shoppers to have a pleasant online shopping experience?
Project overview
Fresh is a grocery shopping app designed based on Alan Cooper‘s goal-directed design process. Goal-Directed Design combines techniques of ethnography, stakeholder interviews, market research, detailed user models, scenario-based design, and a core set of interaction principles and patterns. It provides solutions that meet users’ needs and goals while also addressing business/organizational and technical imperatives.
Few of the major features the app came up with to address user goals are:
- innovative ways to save money
- option to compare products
- option to choose a specific delivery window
- filter the whole market according to a user’s eating habit
This was a 7 week long project executed by a team of 4 as a part of the Design for Interactivity course at SCAD.
Process overview
Research
Secondary research
A report from Nielson shows that consumers aren’t just picking up the phone to order; increasingly, they’re pulling up the retailer’s webpage or using their mobile apps. One-quarter of global respondents are already ordering grocery products online for home delivery, and more than half (55%) are willing to use it in the future.
Competitive research
Interviews
"The price is important. I have diabetes and I buy diabetes stripes online for cheaper price if it’s not an emergency.”
“My boyfriend he is a vegan, it is hard to find the ‘right food’ he needs in one place online.”
“Convenience and price matter most.”
“I just really like being in a grocery store so I can look around and I can compare the products and the prices.”
Modeling
Quantitative Analysis
Pain Points, Needs & Goals
Variables mapping
Personas
Framework
In this phase the team came up with contextual scenarios based on the personas followed by key path scenarios addressing the solutions to problems and pain points of the personas. The team used key path scenarios to refine the stories of two personas from the point they opened our app. That gave the team a clear idea on the functional requirements of the app which helped producing the user flow.
Key path Scenarios
Wireframe
Prototype
After much refinement through all the processes described above, at this stage the team worked on the UI and the high fidelity prototype.
Try the Clickable Invision prototype below! Hints: Order a box of Coca-Cola Classic!
USABILITY TESTING
We asked random users to try our prototype and accomplish 4 tasks:
1. Search for soft drinks section and order 3 boxes of Coca-Cola Classic, 12 Fl Oz, 35 Ct.
2. Search for the product: Pepsi, 12 Fl Oz, 36 Ct and add it to your wishlist.
3. Tr y to compare Coca-Cola Classic, 12 Fl Oz, 35 Ct and Pepsi, 12 Fl Oz, 36 Ct using the app.
Four of the testers successfully finished the first and the second task and all had some troubles dealing with the third one. Comparing product is a feature we didn’t find in any other shopping apps. So user’s unfamiliarity with such feature on mobile apps could be a reason of their struggle. However, eventually with repeated try they could figure this out without any instruction. The testers also shared their opinions and suggestions about the app concept. Some suggested to make it more obvious of how much they had saved on the order confirmation page, and putting some texts on the subcategory page to indicate how to compare.