Healvery Grocery Store
Overview
The product
Healvery streamlines grocery choices for users with limited nutrition knowledge, ensuring simplicity and informed selections.
My role: Ux/Ui Designer
Duration: 12 Weeks
Project type: Google Ux certificate project - Responsive Website design
Contribution: User interviews & Journey - Ideation - Prototype - Design System
The Problem
Grocery stores often lack nutritional info, leaving users uncertain about healthier choices. Shopping becomes overwhelming as users, unsure about what to buy, face a challenge in adopting a healthier diet.
The Goal
Offer nutritional insights and simplifying grocery shopping, so users can make informed choices effortlessly.
Process
Design Thinking
Research
Summary
By conducting interviews and a competitive audit, I created personas and empathy maps, deepening my understanding. Users with busy schedules seek faster online shopping, especially when uncertain about healthier choices.
Competitive audit
In this competitive audit, my primary objective was to conduct a comprehensive analysis aimed at identifying the main competitors, assessing the type and quality of their products, understanding their market positioning strategies, evaluating how they articulate their brand identities, and ultimately uncovering their strengths, gaps, and opportunities within the market landscape.
Interviews
The interviews revealed the main pain points upon which I focused my design.
Personas
To ensure the company's objectives align with our users' needs, I created UX personas.
User Journey
I created a user journey map that provides a deeper understanding of the pain points and areas for improvement.
Ideate
Summary
In the ideate phase, I structured the project's architecture with a sitemap, crafted wireframes for visualization, and created low-fidelity prototypes for testing. After this, I conducted a usability study, which provided insights to improve the design.
Sitemap
In line with my goal to provide a familiar yet faster and more intuitive experience, I structured the project's architecture with a sitemap.
Wireframes
I iterated through various design possibilities, creating wireframes to test different user interactions.
In the creation of Healveryโs wireframes, my goals were user comfort, speed, and intuition.
I maintained reassuring elements while introducing new features, like a section for popular recipes enabling direct ingredient addition to the cart.
Paper Wireframes
I used yellow marks to highlight my favorite elements, which were then merged into the final wireframe.
Digital Wireframes
In my digital wireframes, my primary goal was to achieve a simple navigation, recipes with the option to add their ingredients to the cart and to display popular products & saved favorites on the main page.
Mobile Version
For the mobile version, I resized numerous elements to fit the screen while preserving the same logic in the order.
Prototypes
Low-Fidelity Prototype
The main flow is designed for a straightforward, quick, and easy experience. For the categories, I implemented a feature to view/hide the cart, allowing customers to add or remove items without leaving the page.
Usability Study
This were the most important finding in the usability study.
Refining the Design
Changes were implemented based on the primary pain point identified in the usability study.
Home
Participants tended to click on categories or the hero CTA button, often missing discounts due to not scrolling. Now, discounts are above the fold for visibility.
Before the Usability Study
After the Usability Study
Categories Section
Given user issues with the "hide cart button," I made the following changes to solve this problem.
Before the Usability Study
After the Usability Study
Cart
Users frequently skipped the time frame selection, prompting its integration into the flow to address this issue.
Before the Usability Study
After the Usability Study
High-Fidelity Prototype
The hi-fi flow maintains the same logic as the lo-fi, with enhancements derived from insights gathered during the usability study.
Additionally, I implemented new features that were intended at the beginning of the project, such as a recipe page with the option to browse foods using specific filtering options. This includes a feature that allows users to add all the ingredients from a specific recipe to their cart.
Moreover, I added some improvements to the user experience to ensure a seamless journey for users. This includes implementing a favorites function for easy access to liked items, a popular products section, a repeat order feature, and a search bar function that enables faster browsing of popular categories and previous searches.
Desktop Version
Home
Categories
Categories & Cart
Cart
Cart Calendar
Order Receipt
Repeat Order
Repeat Order & Cart
Favorites
Deals
Recipes
Recipe Selection
Mobile Version
Home
Categories
Cart
Cart Calendar
Order Receipt
Accessibility Considerations
