TL;DR
Redesigning grocery shopping to tackle food waste problem
Flashfood grocery app is an app that allows grocers to sell surplus food that is almost expired and allows shoppers to browse those food items, buy them at a discount, and pick them up in-store. Flashfood had gone through some redesigns done by several agencies and firms. This caused problems of inconsistency and context lacking in the design. I was tasked to redesign the Flashfood app focusing on business growth and shoppers shopping experience. The ultimate goal is shoppers can have a coherent end-to-end experience. The final design was implemented in stages and resulted in more partnerships and engagement, reaching #5 on Top Food & Drink category on the App Store Canada.
PROBLEMS
Inconsistency and context lacking in the design
While its growth in shoppers and partners are rapidly expanding, all the design works were externally outsourced to different firms and agencies. This caused problems of
- Inconsistency and context lacking in the design
- Was not designed with scalability in mind
- The previous version of is not a good reflection of the company from a quality and context standpoint leading to lack of investment and partnership
- Much variability was found in the design causing longer development time and incoherence.
Previous version of the Flashfood app
PROBLEMS VALIDATION
The app was substandard execution
User feedback was compiled from the Apple App Store, Google Play Store, Facebook, and Google reviews. The reviews were reviewed and categorized into four different groups:
- Stores and location: More stores in a specific city, more location (other cities)
- Usability and app performance: Very glitchy, the app is substandard execution (design and development)
- Food options: Not many selections
- Scepticism: Why not donate to the food bank instead, still processed industrial scale
This list helped to find the focus on the redesign and validates what the customer truly feels about the previous version of the app. The comments regarding poor execution are important feedback and need to be taken seriously. This validates the need for redesign and led the focus on designer-developer communication through specs, reviews, and feedback loop. While another concern regarding scepticism was found, Flashfood needs to be more proactive in communicating its goal to reduce food waste and be clear on how does Flashfood approaches can help to solve food waste problems.
A compiled list of Flashfood App customer reviews
GOALS
Increasing business growth and shopper satisfaction
The primary goal is to effectively and efficiently redesign Flashfood grocery app for business growth and shopper satisfaction. The business growth is regarding more products sold, more stores, more investments, more shoppers, and easy new product integration. Shopper satisfaction is regarding enhancing shopper browsing and purchasing experience.
With that we aimed to increase:
- User retention by at least 5%
- Number of grocery partnerships and the scale (at least add 1 partner within 4 months after the redesign)
Market research
Heuristically analyzing 21 apps
The market research was done by adapting heuristic evaluation. The main focus is to learn best practices on product display and product details. 21 iOS apps from several different industries were analyzed. Each app was analyzed by highlighting green for good design practices and red for violating design principles.
Market research on Tim Hortons, Lululemon, and Wayfair app
Market research on Walmart Canada, eBay, and Etsy app
Lululemon, Tim Horton, and Etsy apps are excellent at sectioning complex information and making it more concise and digestible. The use of tabs is very effective in hiding contextual information. Sticky call to action button located at the bottom of Tim Hortons app is an excellent example of user control and freedom principle by Nielson. However, bad design practices that violate consistency and standard usability heuristic can be found on Walmart Canada app item display and eBay app item details. There is no standard on clear visual and typographic hierarchy and it violates the common F-reading pattern, which makes it harder to skim. Some of these insights are used in the future development of the redesign.
Auditing
The good and bad of the previous version
The Flashfood previous version was also evaluated using heuristic evaluation using Norman’s 7 principles of good design. Every screen was analyzed, and issues were noted then prioritized based on its impact from high to low. The auditing effort was meant to highlight bad and good design practices, as well as note features or parts that need to be rethought in the redesign. The auditing also helped to make sense of the current experience logic and flow. It helped to understand the system and its limitations better.
ISSUE
Cycling stores on the main page (No endpoint)
DESIGN PRINCIPLES
Constraints - The previous version store horizontal list keeps cycling through. This can be confusing as it is hard to know for the shoppers when to stop scrolling through.
RECOMMENDATION
Horizontal store selection should not be constrained to have an endpoint of the list.
ISSUE
Not showing map in the start
DESIGN PRINCIPLES
Discoverability and Conceptual Model - Shopper’s first contact is store vertical list. However, the main view is the map view with the horizontal list. This first contact does not provide enough information leading to lack of understanding and control.
RECOMMENDATION
The map should be shown right away once the user opens the app.
ISSUE
Manage notifications “button”
DESIGN PRINCIPLES
Affordances - The previous version Manage notifications text works as a button but does not look like one thus the user may not know it is tappable.
RECOMMENDATION
Manage notifications should be a button. The current one seems like the user can add a check.
ISSUE
No card in the checkout
DESIGN PRINCIPLES
Discoverability and Affordances - The text “Use Another Card” does not suggest that it is possible to add a card. There is no indication shopper can add a payment card through this screen.
RECOMMENDATION
When checking out, if there is no credit card on file, it should be prompted directly to adding payment card flow.
Shopper journey flow
Grocery shopping
The “traditional” grocery shopping activity was explored through a user journey map. The goal of using the traditional grocery experience is to understand the common behaviours and shopper patterns in deals and grocery shopping. By learning how the user interacts with the pre-existing system, it provides information to have a seamless Flashfood grocery app integration in the shoppers’ day-to-day grocery shopping activity.
Particularly, this user journey map helps to improve the payment process in Flashfood grocery app. For example, the user journey map pointed missing steps like confirmation before hitting the pay button of the previous version, which on the map can be seen as “Make sure the number will be paid” step.
The grocery shopping user journey map
The user journey map for Flashfood grocery app focuses on the primary activity, which is purchasing items. The user journey map was derived from the grocery shopping user journey map. This tool is handy to make sense of logical steps of making a successful purchase. Each node is colour coded, blue is the shopper and green is Flashfood/the grocery app. The journey map helped to understand the system and how two sides interact through the app.
The Flashfood grocery app user journey map
Disassemble
Picking critical points and defining features
The red dots on the journey map above are considered the critical points. These are the major activities required to complete a transaction. What it means is these activities are the determinant steps to make a successful transaction. These critical points are the steps need to be focused on as its interactions are more valuable than the other steps. Then each critical point was individually inspected. Features and specification for each critical point were defined to accommodate the goal of each point.
Assemble
Paper mock-up
The paper mock-up method was used to help to explore the layout and figuring out the navigation of the app. The mock-up contains basic wireframes of all the screens to make a complete purchase. The critical steps were brought together with the non-critical steps, making the paper mock-up a complete logical purchase flow. Highlighted yellow components are components that are clickable and indicate navigations. The arrows are used to show the sequence.
Paper mock-up of the new Flashfood grocery app
Designing for
Consistency
There is no consistency in the use of typography of the previous version. There is no clear rule and distinction on how a title, subtitle, or body text should look like. There is no typographic hierarchy and many text variations within and across screens. First, this makes the text harder to skim and scan. Second, more variations in the same screen causing more cognitive load for the shoppers to process information. The image below shows that in the previous version item detail screen there are six different typography variations while in the new version, there are only four different typography variations thus information is easier to consume.
Typographic hierarchy comparison
Designing for
Modularity
Since Flashfood Inc. does not only have one product, it is crucial to create components that are modular so that if a new product needs to be integrated to the Flashfood grocery app, it will feel seamless and will not disrupt the existing shopper's experience with the app. An example of this is the card used in the main view of the app. This card is a module which can be a store card, a message card, or an advertisement card. In the previous version main view, there is no card; stores are just displayed with no clear separation, making it odd to replace it with other things that are not a store. On the other hand, the new version uses a card-based system which allows it to be replaced by various modular cards.
Store list comparison
Designing for
Reusability
The idea of reusable components is to improve the design and development process by making it faster and more consistent. The reusability can be achieved by having a component that has a general format and layout but is still modifiable to be used for other purposes. One example is “short card” component that was used as the base for store info card, payment card, and instruction card. The image below shows the basic layout of the small cards, which is used for all the payment cards (including its different states), instructions card, and store info card.
Small cards application and small cards layout breakdown
Motion
Removing view redundancy
In the previous version, there are two list views for the stores. Horizontal list, which is the main view and the vertical list. These two list views show the exact same information but the vertical list shows less information due to no map. This vertical list redundancy is unnecessary because it does not give more information, in fact removing some, thus gives less value to the user. I then decided to replace the vertical list with a store view, showing the items and store information as the users enter the vertical view. The solution will remove the unnecessary redundancy and direct the users right to the view that leads to the first purchasing touchpoint. But, how should the transition be from the horizontal store list to a store view? I brainstormed and came out with a solution that I prototyped using Framer JS. I tried to retain the card view and make it has a seamless transition. As you can see in the video below, the big card transitions to the small card by clipping just the texts and hiding the item images from the big card.
Final Design
A more cohesive experience with better design guidelines and common patterns
The final design was presented in a unified prototype using Figma prototyping feature and specified based on the tasks breakdown.
Flashfood homepage and store view
Flashfood item and cart view
Flashfood payment method view
Flashfood checkout view
Result
From #70 to #5 app on App Store
The redesign was shipped in stages and:
- Added two new partnerships (Target and Loblaws), from <10 to >400 grocery stores
- Increased number of users and user retention who completed transactions (~10% increase)
- Moved the app from #70 to #5 on Food & Drink apps on the App Store Canada
- Allows prototyping of new products quicker, making experimentations cost lower.
Flashfood app retention data
Learning and Next Step
Reducing a single person bias
There are some learnings and recommendations to improve the design process and the Flashfood grocery app:
- My bias profoundly influences the design
I was the only designer at the time thus most design decisions were made and consulted to me. A more diverse perspectives are needed to reduce any possible biases. Incorporating more people in the design process to reduce a single person bias and yield more thoughtful and neutral solutions. - Data, data, data…It’s a valuable source of information
There's a missed opportunity of using data. At the time, I was a new designer and was not informed enough on data-driven design.
Next step: Exploring a new way to show store list (vs. map-horizontal). Loading map requires a lot of internet data. Is it absolutely necessary for the user to have a great UX?
