Project Overview: Redesigning the Online Grocery Experience

Reading time: 2 minutes

Welcome to the final project of the UX/UI Design Fundamentals: Usability and Visual Design course. This project combines all the skills you've developed throughout the course, preparing you to design impactful, user-centered digital experiences.

What you will learn

Through this final project, you will learn how to create a complete, user-centered digital product from initial evaluation to polished responsive design. You'll begin with a heuristic analysis to identify pain points in existing grocery e-commerce platforms, and then apply UX methods like persona development, journey mapping, and interaction design. Using Figma as your end-to-end tool, you will gain the skills to build structured wireframes and add meaningful microinteractions. By the end of this project, you'll have a portfolio-ready case study that reflects your full UX design process.

Learning objectives

By the end of this project, you will be able to:

• Apply UX research methods such as heuristic evaluation, personas, empathy maps, and customer journey mapping to identify user needs and usability issues in grocery shopping platforms

• Design user-centered grid-based wireframes and microinteractions using prototyping tools

• Document and justify UX design decisions through structured Figma workflows

Scenario

You are a UX designer at a digital design agency commissioned to improve the online experience for grocery shoppers. The client has provided you with two websites—SpiceBasket (traditional layout) and GreenBasket (modern interface) and requested a full redesign for a new unified grocery platform. The new solution should fix usability issues, support diverse user needs, and adapt across devices. Your challenge is to evaluate both sites using heuristics, understand user pain points through persona building, visualize the shopping flow via journey mapping, and design a responsive, interactive UI system. The result will demonstrate the entire UX process from research to responsive design—all created and documented within Figma.

Note: While SpiceBasket and GreenBasket are provided as examples, you are free to choose any similar grocery websites or apps for your evaluation. Select platforms that allow you to explore usability challenges and apply the UX methods outlined in this project.

Project tasks

Task 1: User experience analysis and heuristic evaluation

• Conduct a heuristic evaluation using Nielsen's principles to assess the usability of the existing grocery platforms. Annotate issues in Figma, prioritize them by severity, and suggest fixes for improvement.

Task 2: Creating user personas and empathy maps

• Develop personas such as a busy parent and an elderly shopper to represent typical users. Create empathy maps to reflect what these users think, feel, say, and do when interacting with grocery apps.

Task 3: Building a customer journey map

• Design a journey map covering key stages like awareness, login, product browsing, checkout, and post-purchase. Identify user thoughts, emotions, actions, and pain points across the shopping flow.

Task 4: Designing microinteractions

• Prototype interactive elements like "Add to Cart," "Login," and "Navigation Tabs" in Figma. Use Smart Animate transitions to show how microinteractions improve usability and engagement.

Task 5: Grid-based wireframe design

• Create low-fidelity wireframes for three key screens — homepage, product listing, and checkout — using a 12-column layout. Emphasize structure and flow, not visuals, to prioritize content clarity.