Final Project: Redesigning Online Grocery Shopping with UX/UI Design

Estimated time: 90 minutes

Introduction

In today's fast-moving digital world, grocery e-commerce platforms need to strike a balance between usability, visual appeal, and accessibility to meet the needs of a wide range of users. Whether it's students making quick purchases or professionals handling their weekly shopping, users demand fast, clear, and reliable online experiences. However, many grocery websites fall short in delivering an intuitive and seamless design. This project aims to close that gap through a comprehensive UX design approach. Using Figma, you will work through the entire product design lifecycle—from evaluating existing platforms to designing a responsive, user-friendly interface. The ultimate goal is to create a more efficient and trustworthy online shopping experience.

Prerequisites

Before starting this project, you should have:

• Basic to intermediate experience with Figma, including working with frames, auto layout, components, and prototyping features.

• A solid understanding of fundamental UX concepts such as heuristics, user personas, wireframes, and user journeys.

• Familiarity with standard UI design patterns commonly used in e-commerce platforms.

• Awareness of mobile-first design principles and accessibility best practices to ensure inclusive user experiences.

Note: If you don't already have a Figma account, we recommend signing up before beginning the project. To do this, right-click on Getting Started with Figma and open it in a new tab to sign up.

Project 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.

Task details

The project carries a total of 25 points and consists of the following five tasks:

• Task 1: User experience analysis and heuristic evaluation (5 points)

• Task 2: Creating user personas and empathy maps (5 points)

• Task 3: Building a customer journey map (5 points)

• Task 4: Designing microinteractions (5 points)

• Task 5: Designing Grid-based wireframe (5 points)

Note: Each task is divided into multiple steps. Perform the various steps mentioned within each project task, record your analysis and key learnings. These can be used to highlight your expertise in your individual portfolio. As part of the evaluation process, you will be asked to provide textual responses based on the task completion.

Task 1: User experience analysis and heuristic evaluation

Step 1: Prepare your Figma file

• Go to Figma.com and click Design and name it as GroceryEase – UX Audit.

• Create two frames (artboards) using the Frame tool from the bottom menu bar. In the right-hand properties panel, choose Desktop preset sizes under Frame Presets. This will create a desktop frame and rename it to Homepage—SpiceBasket. Similarly, create another frame and rename it to Homepage—GreenBasket.

Step 2: Create a heuristics checklist

• Add a new page to your file and name it Heuristic Evaluation Table.

• Use the Table Creator plugin or manually create a table using rectangles and text boxes.

• Set up your table with the following columns:

  • Heuristic

  • Does UI follow this? (Enter: Yes, No, or Partial)

  • Comments (Brief observation or rationale)

  • Severity (Indicate with color: Green, Yellow, or Red)

  • Suggested Fix

Step 3: Add UX annotations to screenshots

• Use the Rectangle tool (R) to highlight areas of the interface that have usability issues.

• Add text labels using the Text tool (T) to briefly describe each problem.

• After adding labels, group each text label with its corresponding rectangle to keep annotations organized.

• Use the Line tool (Shift + L) to draw arrows pointing from the annotation to the specific element or problem zone.

• Some example annotations you can use for reference include:

  • Text not visually prominent

  • Missing price feedback near the cart icon

  • Items are not clickable

Step 4: Identify issues per heuristic

• Review each heuristic one by one for both frames of your design.

• For each heuristic, make one or two specific observations based on what you see in the interface.

• When evaluating, focus on areas such as whether the system clearly shows the cart or login status, whether button styles and labels remain consistent throughout, whether the interface helps prevent errors through confirmations or undo options, and whether the overall layout appears clean and focused.

• To keep your work consistent and efficient, consider creating a single Figma component, like an issue card, and reuse it across different frames as needed.

Step 5: Prioritize each issue in table

• Add issues in the table you created and write about them for each heuristic point. Next to each row in the table you've added, place a colored sticky note to indicate the severity of the issue.

• Use the following color codes to represent severity levels:

  • Green indicates a minor issue that is cosmetic and does not block usage.

  • Yellow indicates a moderate issue that may confuse users or slow down the task.

  • Red indicates a severe issue that blocks the user flow or could lead to an error.

• For styling, use rounded rectangles with the following fill colors:

  • Green – #C6F6D5

  • Yellow – #FEF3C7

  • Red – #FED7D7

Step 6: Export and share

• Select the frame named Homepage—GreenBasket, a blue border will be visible to ensure the entire screen is selected.

• With the frame selected, go to the right-hand sidebar under the Design tab.

• In the Export section:

  • Click the "+" icon if no export setting exists.
  • Choose the format as PNG.

• Export the frame:

  • Click the Export button Export Homepage—GreenBasket. This will download the file to your laptop, or you can store the image in your preferred folder for use in presentations or reports.

Task 1 Deliverables:

Submit a written UX analysis containing the following components:

• Heuristic evaluation summary: A summary of how the homepage designs (SpiceBasket and GreenBasket) align with or violate key usability heuristics.

• Key usability issues: A list of 3 usability issues identified across both interfaces.

• Prioritized improvement suggestion: Prioritized improvement suggestions with brief rationale based on issue severity and heuristic relevance.

Task 2: Creating user personas and empathy maps

Step 1: Create a new page in Figma

• To begin, open your Figma project and create a new page. Title this page "Personas & Empathy Maps". This will serve as the dedicated workspace for your persona research and design insights.

• Next, you need to create two separate artboards using the Frame tool. Select the Frame tool by pressing F on your keyboard. Then, draw the first frame on your canvas and set its dimensions to 1440 pixels wide and 1024 pixels high. Once the frame is created, rename it to "Persona 1—The Busy Parent". This frame will house all the relevant persona details, empathy mapping, and design considerations for a busy working parent.

• Now, repeat the same process to create the second frame. Again, draw a new frame with the same dimensions: 1440 pixels wide and 1024 pixels high. Place it beside or below the first frame, depending on your preferred layout. Rename this second frame to "Persona 2 – The Elderly Shopper". This frame will contain the structured information related to an elderly user's needs and behaviors.

Step 2: Build the persona template

• To create a user persona template, you can either use any plugin for user persona or manually structure the layout using Auto Layout and sections. Here's how you can organize it:

  • Begin with a Persona Section, and within that, create subsections to describe different aspects of the persona:

    • Name: Start by providing the persona's name

    • Age: Specify the age of the persona, reflecting either a younger or older demographic.

    • Occupation: Describe the persona's role or employment status. This could be something like working parent or retired teacher, showing the person's lifestyle or life stage.

    • Location: Include where the persona lives, such as urban or suburban. This helps understand their environment and daily challenges.

    • Goals: Outline the persona's objectives. For instance, the persona might want to shop for groceries quickly, preferring ready-to-cook options.

    • Frustrations: Highlight what causes the persona inconvenience or dissatisfaction. Examples include a cluttered app or unavailable delivery slots.

    • Behavior: Define the persona's regular actions, like ordering weekly or shopping on weekends. Note their preference for mobile apps or other specific behaviors.

    • Tech comfort: Describe their level of comfort with technology. A persona could have medium or low tech comfort, with the latter often associated with older individuals.

    • Quote: Incorporate a relevant quote that reflects their attitude or pain point. For example: "I don't want to forget essentials during checkout."

    • Devices used: Indicate the technology they use, such as an Android phone or a tablet, to give further insight into how they interact with technology.

Step 3: Design empathy map for each persona

• To create an empathy map beside or below each persona frame:

  • Create four quadrants: Label them as

    • Thinks
    • Feels
    • Says
    • Does

  • Fill in each quadrant:

    • Thinks: "I hope my preferred brands are in stock."
    • Feels: "Frustrated when delivery slots are full."
    • Says: "I need to finish shopping in under 10 minutes."
    • Does: "Browses by categories, adds favorites first."

  • Use Sticky Notes: In tools like Figma, add sticky notes for each section and color code them:

    • Blue for "Thinks"
    • Yellow for "Feels"
    • Green for "Says"
    • Pink for "Does"

Position the map near the persona profile for clarity.

Step 4: Share or export

Use the "Share" button to generate a view-only Figma link.

Task 2 Deliverables:

1. Submit two detailed user personas in text format, one for "The Busy Parent" and one for "The Elderly Shopper." Each persona should include:

• Name and Age

  • Provide a realistic name and a specific age that reflects the user type.

• Occupation and Location

  • Describe the person's current job and the city or region they live in.

• Goals and Frustration

  • Highlight what the user is trying to achieve and the challenges they face in doing so.

2. Submit textual details for an empathy map for each persona. Include meaningful insights under the following categories:

• Thinks and Feels

  • What occupies their mind and emotional responses?

• Says and Does

  • What do they express and how do they behave?

Task 3: Building a customer journey map

Step 1: Create a new page in Figma → Name it: Customer Journey Map

Step 2: Create a horizontal layout grid: Use Frame tool (F) to create a wide artboard

Step 3: Divide it into stages like:

• Awareness
• Consideration
• Login/Signup
• Browsing Products
• Cart & Checkout
• Post-purchase

Step 4: Add row labels for the journey map:

• User Actions
• Thoughts
• Emotions
• Touchpoints
• Pain Points

Step 5: Use Figma's rectangles to fill in user actions from your personas. Example: "Searches for discounts" → "Can't find filters" → "Feels frustrated"

Step 6: Add emojis or arrows for emotional tracking

• 👍, 😐, and 👎 for positive, neutral, or negative experiences
• Color code Pain Points in red
• These will inform future redesign priorities

Task 3 Deliverables:

Define user actions, describing what the user will do at each of the following stages in a Customer Journey Map.

1. Awareness

2. Consideration

3. Login/Signup

4. Browsing Products

5. Cart & Checkout

Task 4: Designing microinteractions

To create a new page in Figma for Microinteractions, follow these steps:

Step 1: Create a new page:

• Open Figma and create a new page, then title it Microinteractions.

Step 2: Define three key interactions to animate:

• Choose the interactions you want to animate. For example:

  • Add to Cart button: Feedback animation to show the item was added.

  • Login button: Success animation with a checkmark using Smart Animate.

  • Navigation tab: A sliding highlight effect when navigating.

Step 3: Design the default and final states:

• Create two frames for each interaction:

  • Frame 1: The default state (for example, a normal button).

  • Frame 2: The final state after the interaction (for example, when the button is clicked, it changes color, an icon appears, and the text changes).

Step 4: Use Figma variants:

• Select both frames, then right-click and choose Combine as Variants to group them together. This will allow you to animate between these two states.

Step 5: Set up the animation in the Prototype tab:

• Go to the Prototype tab. For the interaction, set it to trigger on Click, and choose Smart Animate with a transition time of 300 ms ease out.

Step 6: Test transitions in Presentation Mode:

• Enter Presentation Mode and click through to preview how the interactions will look when users click. This will help you test the transition and refine the animations.

Step 7: Add annotations:

• Use text boxes to explain what each microinteraction improves. For example, you could annotate that the Add to Cart button animation improves visibility by giving users immediate feedback, or that the Login button animation enhances system status by showing a clear success indicator.

Task 4 Deliverables:

In a written format, describe a microinteraction you would design for a grocery shopping platform. For the interaction, include the following details in your response:

1. Interaction description: What is the trigger (for example, button click) and the purpose?

2. Default: Briefly describe the visual before the interaction.

3. Final state: Briefly describe the visual after the interaction.

4. Animation logic: What type of transition or animation would you apply (for example, fade, scale, Smart Animate with 300 ms ease-out)?

5. UX value: Explain how this microinteraction improves usability or user experience.

Task 5: Grid-based wireframe design

Step 1: Create a new page:

• Open Figma and create a new page. Title it Wireframes.

Step 2: Set up a 12-column grid:

• For desktop: Set the frame size to 1440px.

• For mobile: Set the frame size to 360px.

In the Layout Grid settings, adjust the following:

• Columns: Set to 12.

• Gutter: Set to 20px.

• Margin: Set to 80px.

Step 3: Draw wireframe blocks (low fidelity):

Use rectangles to represent various components, such as:

• Headers

• Product card

• Side navigation bars

For a low-fidelity look, set the rectangles' color to #E0E0E0. This keeps the wireframe simple and focuses on layout rather than design details.

Step 4: Use placeholder text:

Inside the wireframe blocks, add placeholder text for things like

• Product Title

• Price

• Any other content like "Product Description" or "Cart Total" based on the screen.

Step 5: Wireframe at least three key screens:

Design wireframes for the following screens:

• Homepage

• Product Listing

• Cart/Checkout

Step 6: Use auto layout for consistency:

For consistency across the wireframes, group elements like navbars and product cards using Auto Layout. This will ensure your wireframe is adaptable and aligned consistently.

Step 7: Label wireframe sections clearly:

Add clear labels for each section of the wireframe, such as Header, Product Section, and Footer. This will help you understand the structure better when presenting or collaborating with others.

Task 5 Deliverables

In a written format, describe how you would design a grid-based wireframe for a grocery shopping platform. Include the following in your response:

1. Grid setup: How would you configure your layout grid (for both desktop and mobile)? Explain the column, gutter, and margin settings you would use.

2. Wireframe blocks: Describe the key components you would represent in your wireframes (for example, header, product cards, navigation).

3. Screen breakdown: Outline how you would design the Homepage, Product Listing, and Cart/Checkout screens. Mention specific elements that would appear on each screen.

4. Consistency: How would you ensure consistency across wireframes?

5. Labeling: What labels would you add to each section to organize your layout?

Provide a detailed explanation for each point above. Your response should showcase your approach to layout design, user flow, and usability in wireframing.

Summary

This project is a comprehensive showcase of your UX design skills applied to a real-world scenario. Throughout the project, you'll combine user research, usability analysis, wireframing, microinteraction design, and responsive layout techniques to create a user-focused grocery e-commerce prototype from the ground up. Figma serves as your all-in-one tool for planning, designing, and testing. By the end, you'll have a well-documented project that highlights your ability to apply structured UX methods to real challenges—a valuable addition to your professional portfolio.

Author(s)

Richa Arora