Web Design

Ágape

Web for supermarket chains
Ágape — case study cover

Project Overview

The project was developed in response to the needs of customers who shop both in-store and online. The goal is to improve the experience of managing lists and carts, while also allowing for a more precise selection of fresh products to avoid unwanted choices (such as overripe fruit or vegetables).

Additionally, the project aims to innovate in the market by offering a service with product categories organized according to dietary restrictions.

Timeframe

4 Weeks

My Role

UX + UI Design, Visual Design, User Research, Wireframing, Prototyping + Testing

Tools

Figma, Figjam, Google Forms

The Challenge

Improving the online grocery shopping experience to make it more accessible, efficient, and inclusive for everyone.

Supermarket shopping is a daily activity that significantly impacts people's lives. A poor experience can lead to frustration, wasted time, unnecessary spending, and distrust in digital channels, affecting various social groups:

Families, needing to plan shopping and control their budget; People with reduced mobility who depend on online channels to access basic goods; Professionals with little time who require speed and efficiency; People with dietary restrictions.

Furthermore, the correct selection of fresh products directly influences trust in the online supermarket. Solving these problems contributes to promoting digital inclusion, saving time, and fostering more sustainable consumption habits.

Objective / Goal

To develop our business proposal, it is essential to research the user and the market. Therefore, we have defined the research objectives based on the study's target audience and the direct and indirect competitors in the sector.

Our primary goal is to create user-centered value, improving the shopping experience by studying user habits, motivations, and frustrations in both online and physical channels.

Another objective of this research is to understand how the main supermarket websites and applications operate in the current market, both nationally and internationally. The aim is to identify trends, core functionalities, and differentiation strategies that characterize direct and indirect competitors. This will allow us to establish a benchmark for what users already consider standard in these types of platforms, while simultaneously detecting innovation opportunities that differentiate Ágape Supermarkets.

My Design Process

Design Process

For this project, I followed the Design Thinking methodology, an iterative user-centered process that allowed me to deeply understand the difficulties of online grocery shopping before designing any solution. I began by empathizing with different user profiles (families, people with reduced mobility, time-constrained professionals, and people with dietary restrictions), defined their real needs, ideated features focused on accessibility and correct product categorization, prototyped in Figma, and validated with real users.

Market Research

Analyzing the market and its impact on the purchase decision and examining how current major supermarket websites and apps function.


Common Features
  • Full catalog
  • Promotions and discounts
  • Online cart
  • Purchase history and favorites lists
  • Diverse payment methods
  • Home delivery or in-store pickup
  • Search engines and filters
  • Loyalty programs

Also Considered
  • Industry trends: increase in hybrid shopping (click & collect) and suggestions based on history or preferences
  • User experience: trust in fresh products, ease of use, and navigation complexity
  • Omnichannel integration: connection between online experience and physical store
  • Core functionality coverage: catalog, offers, payments, and purchase tracking
  • Innovation opportunities: smart lists sorted by in-store location
  • Fresh product selection: possible solutions via image, video, or video call
Research Methods

Benchmark

A tool for evaluating competitors' products and services, though it can also be applied internally to analyze one's own. It allows identifying strengths and characteristics, as well as conducting a detailed competitive analysis to understand strategies and most effective practices.


Types of benchmark
  • Competitive benchmark (direct competition)
  • Comparative benchmark (indirect competition)
  • Internal benchmark
  • Industry benchmark
Benchmark
Benchmark

This methodology was very helpful for evaluating direct competitors (Mercadona and Lidl) and the indirect competitor (El Corte Inglés), based on the analysis of their digital platforms.

This technique was applied to research key functions and services in this sector, focusing on: online shopping, shopping lists, fresh product selection, dietary restrictions, and nationalities.

SWOT Analysis

The SWOT analysis aimed to evaluate the project from an internal and external perspective.

Strengths: innovative proposal within the online supermarket sector; diverse recipe bank adapted to different diets; clear categorization by dietary restrictions that improves user experience.

Weaknesses: dependence on in-store product availability and need for web synchronization; new project without a user base; lack of initial brand recognition.

Opportunities: integration of artificial intelligence to generate personalized lists; incorporation of multicultural recipes; rating and comment systems; inclusion of professional opinions and multiple brands to improve personalization.

Threats: competition from established apps like AnyList, Yummly, or Cooklist; difficulty adapting to product seasonality; possible user resistance to innovative proposals; presence of large supermarkets as direct competitors.

SWOT Analysis

This analysis allowed identifying risks and limitations, but also recognizing competitive advantages and innovation opportunities that strengthen the market proposal, making the project more solid and viable.

Surveys

A quantitative technique that allows collecting information from a large group of users to understand their opinions, habits, and preferences in a structured way. The survey aimed to validate previously detected trends and understand how users organize their shopping, what they value when choosing products, and their openness to new digital solutions.

Shopping Habits

Most users use shopping lists to organize themselves, though not always in digital format. Additionally, other users' opinions and ratings significantly influence the final purchase decision.

Interest in Innovation

There is curiosity about using artificial intelligence in everyday tasks, although current adoption is low. Interest in discovering products from other cultures was also detected, reflecting openness to new shopping experiences.

Key Conclusions

Doubts persist when selecting fresh products online, which affects trust in the digital channel. Furthermore, online supermarket shopping remains limited, evidencing barriers in the user experience.

The survey validated real behaviors and detected improvement opportunities, ensuring the solution responds to specific needs and improves the online shopping experience.

Interviews

A qualitative technique that allows deep exploration of users' habits, motivations, and frustrations through direct conversations. The interviews aimed to understand how users manage their shopping, how they use lists, and what problems they encounter in current solutions.

Detected Habits

Many users create mental lists or use apps not designed for this purpose. They tend to do weekly shopping, always visit the same supermarkets, and divide their shopping based on offers.

Main Problems

Barriers identified include shipping costs, confusing interfaces, difficulty finding products, unhelpful images, and distrust towards seemingly paid reviews.

Key Opportunities

Highlighted improvements include list synchronization across devices, automatic reminders, history-based smart lists, preference for chat over video call, more complete ratings and incentives, and personalized recommendations.

The interviews allowed deep understanding of users' real behavior, revealing unmet needs and clear opportunities to improve the digital shopping experience.

User Personas

Based on information gathered in surveys and interviews, I created user personas representing the main user profiles in online supermarket shopping; these synthesize their real habits, motivations, frustrations, and preferences, keeping the user at the center of every design decision and avoiding assumptions. Using them as a foundation, I developed a User Journey Map to visualize the shopping experience step by step, identifying key moments, pain points such as product search or fresh product selection, and improvement opportunities throughout the entire process.

User Persona

User Persona

Buyer

Buyer

Archetype

Archetype

Journey Map

The User Journey Map allowed me to visualize in detail the complete user experience during the supermarket shopping process, from planning at home to receiving the order. Through this journey I identified how their actions, thoughts, and emotions change at each stage, as well as the main friction points such as difficulty finding appropriate products, lack of trust in fresh items, or interface complexity.

I was also able to detect key opportunity moments, where better categorization, smart lists, or personalized recommendations can significantly improve the experience. This analysis was fundamental to understanding not just what the user does, but how they feel at each moment.

User Journey Map

Value Proposition Canvas

The Value Proposition Canvas allowed me to align the product's functionalities with the user's real needs in the context of supermarket shopping. On the customer side I identified three key dimensions: the jobs the user tries to accomplish, such as planning weekly shopping, finding products suited to their dietary needs, comparing options, and saving time; their pains, such as difficulty finding clear product information, lack of reliable options for special diets, and wasted time in poorly organized shopping; and the gains they expect to obtain, such as trust in other users' opinions, time savings through automated lists, and access to specialized products.

On the product side, each feature responds directly to these points: smart and collaborative lists prevent oversights and optimize planning, personalized recommendations and transparent information improve decision-making, and visual tools for fresh products increase trust in online shopping.

MoSCoW Prioritization

MoSCoW prioritization allowed organizing the digital supermarket's functionalities according to their importance for the minimum viable product. In the Must category: allowing two or more people to share a shopping list, choosing fresh products rated by color criteria, direct purchase from gallery or history, an international products section, and automatic cart removal after purchase.

Should functionalities include showing related suggestions when marking products, allowing purchase via photo or visual search, and enabling unfiltered product and store comments.

In the Could level: real-time delivery tracking, direct payment with Apple Pay or Google Pay, and product highlighting by color or diet.

Finally, in the Won't category: an automatic recipe and complete list suggestion system.

User Interface

UI Overview Ágape
UI Overview Ágape
UI Overview Ágape
UI Overview Ágape
Next project

MentaliZT

MentaliZT