Web Design

Ágape

Web for supermarket chains
Tedeache

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 taken into account
  • 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 the online experience and the physical store
  • Core functionality coverage: catalog, offers, payments, and order tracking
  • Innovation opportunities: smart lists ordered by in-store location
  • Fresh product selection: possible solutions via image, video, or video call
Research Methods

Benchmark

It is a tool to evaluate competitors' products and services, although it can also be applied internally to analyze one's own. It allows for the identification of strengths and features, as well as a detailed analysis of the competition, understanding their most effective strategies and practices.


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

This methodology was very helpful in 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 necessary functions and services in this sector, focusing on the following key points: online shopping, shopping lists, online fresh product purchasing, restrictions, and nationalities.

SWOT

The objective of the SWOT analysis was to analyze the project from an internal and external perspective.

Strengths:innovative proposal within the online supermarket sector; existence of a diverse database of recipes adapted to different diets; clear categorization by dietary restrictions that improves user experience.

Weaknesses: dependence on in-store product availability and the need for website synchronization; new project without a user base; initial lack of 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.

DAFO Analysis

This analysis allowed for the identification of risks and limitations, but also the recognition of competitive advantages and innovation opportunities that strengthen the proposal in the market, making the project more solid and viable.

Surveys

A quantitative technique that allows for the collection of information from a wide group of users to learn about their opinions, habits, and preferences in a structured way. The goal of the survey was to validate previously detected trends and understand how they organize their shopping, what they value when choosing products, and their openness toward new digital solutions.

Shopping Habits

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

Interest in Innovation

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

Key Conclusions

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

The survey allowed for the validation of real behaviors and the detection of improvement opportunities, ensuring the solution responds to specific needs and improves the online shopping experience.

Interviews

A qualitative technique that allows for deeper insight into user habits, motivations, and frustrations through direct conversations. The goal of the interviews was to understand how they 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 usually shop weekly, always visit the same supermarkets, and split their purchases based on offers.

Main Problems

Barriers such as shipping costs, confusing interfaces, difficulty finding products, unhelpful images, and distrust of reviews that seem paid were identified.

Key Opportunities

Improvements such as list synchronization between devices, automatic reminders, smart lists based on history, preference for chat over video calls, more comprehensive ratings and incentives, and personalized recommendations stand out.

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

User Personas

Based on the information gathered in the surveys and interviews, I developed user personas that represent the main user profiles in online grocery shopping. These synthesize their real habits, motivations, frustrations, and preferences, allowing the user to remain at the center of every design decision and avoiding assumptions. With these as a base, I developed a User Journey Map to visualize the shopping experience step-by-step, identifying key moments, pain points (such as product search or choosing fresh items), and improvement opportunities throughout the entire process.

User Persona

Design Process

Buyer

Design Process

Arquetipo

Design Process

Journey Map

The User Journey Map allowed me to visualize in detail the full 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 the difficulty of finding suitable products, lack of trust in fresh items, or the complexity of interfaces.

I also detected key moments of opportunity, where better categorization, smart lists, or personalized recommendations can significantly improve the experience. This analysis was fundamental to understanding not only what the user does, but how they feel at every moment, allowing for the design of solutions that reduce frustration, increase trust, and make the shopping process more efficient and intuitive.

User Journey Map

Value Proposition Canvas

The Value Proposition Canvas allowed me to align product features with real user needs in the context of supermarket shopping. On the customer side, I identified three key dimensions: the tasks the user attempts to perform, such as planning weekly shopping, finding suitable products based on dietary needs, comparing options, and saving time by avoiding unnecessary travel; their frustrations, such as the difficulty of finding clear product information, lack of reliable options for special diets, the complexity of current apps, and time wasted on poorly organized shopping; and the gains they expect to obtain, such as trust in other users' reviews, time saved through automated lists, access to specialized products, and the ability to discover international recipes and products.

On the product side, each feature responds directly to these points: smart and collaborative lists prevent forgetting items and optimize planning; personalized recommendations and transparent information improve decision-making; and visual tools for fresh products increase confidence in online shopping. Additionally, the integration between the physical and digital supermarket, along with a simple and customizable experience, reduces friction and creates a more efficient, satisfying shopping experience adapted to each user.

Business Model Canvas

The Business Model Canvas represents a physical and digital supermarket model oriented toward urban families, elderly people, time-constrained young people, and regular shoppers seeking convenience and home delivery. The primary customers are urban and suburban families, seniors who value price-quality ratio and proximity, workers and independent young people with little time, as well as digital users accustomed to shopping online.

The value proposition focuses on offering basic, necessary household products that are always available, combined with an omnichannel experience. The business offers digital channels (web and app) to browse products, promotions, and news, smart and personalized shopping lists, home delivery services, and specific recommendations for fresh products or items adapted to dietary restrictions. Additionally, the platform allows for product ratings and easy identification of items suitable for different needs.

The primary channels are physical supermarkets and a website or mobile application through which online purchases can be made and home delivery requested. The customer relationship is maintained through personalized in-store service, digital support, and online tracking, complemented by the delivery service.

Key activities include the sale of cleaning and food products, shopping list management, personalized selection of fresh products, and the creation of product rating spaces on the web. For this, the key resources are the store employees and the IT team in charge of the digital platform.

Regarding key partnerships, the business depends on suppliers of fresh and ultra-processed products, private label manufacturers, logistics and transport companies, technology companies, and franchisees. Finally, the main costs include product purchasing, physical store maintenance, logistics, technology, marketing, and personnel. Revenue primarily comes from the sale of fresh products, consumer goods, in-store and online services, as well as advertising income.

MoSCoW

The MoSCoW prioritization allowed for the organization of digital supermarket features based on their importance for the minimum viable product. The Must category included essential functions: allowing two or more people to share the same shopping list, choosing fresh products rated by criteria such as color, allowing direct purchase from the gallery or history, having a specific section for international products, automatically releasing a product from the cart after purchase, and being able to cross off or restore all items on the list. It was also considered essential to categorize products, receive relevant suggestions after a purchase, and add items quickly to the list.

The Should features, important but not critical for the first version, include showing related suggestions when crossing off products, allowing the purchase of a specific item through a photo or visual search, and enabling unfiltered comments on products and stores.

At the Could level, complementary improvements that would add extra value were placed, such as real-time courier tracking, paying for the list directly with methods like Apple Pay or Google Pay, highlighting products by color or specific diets, rating specific product characteristics, discovering trending items, or allowing users to like and comment on others' lists.

Finally, in the Won’t category, it was decided not to include for now a system that automatically prescribes products or entire lists as suggestions, as it would require greater technical complexity and a deeper knowledge of user shopping habits.

User Interface

UI Overview Ágape
UI Overview Ágape
UI Overview Ágape
UI Overview Ágape