Home / Work / Case Study
E-commerce Mobile App UX/UI Design Redesign

Fabiola
Psychologist

Reimagining Spain's leading supermarket app to deliver a faster, more intuitive shopping experience that reduces friction and increases customer satisfaction.

Role
Brand and UX/UI designer
Timeline
8 weeks (Oct - Dec 2025)
Team
Solo project with stakeholder feedback
Tools
Figma, Figjam, Miro, Google Forms

The challenge

Mercadona is Spain's largest supermarket chain, serving millions of customers daily. While their physical stores are beloved, their mobile app experience was falling behind user expectations, with confusing navigation, a cluttered interface, and a checkout process that led to high cart abandonment rates.

The goal was to redesign the mobile shopping experience to make it faster, clearer, and more delightful—without losing the brand identity that customers trust.

Current vs. Redesigned Interface

Understanding the problem

Through user interviews with 15 regular Mercadona shoppers and competitive analysis of leading grocery apps, I identified three core issues:

🔍

Poor search experience

Users struggled to find specific products quickly. The search lacked filters, and results were often irrelevant or incomplete.

🛒

Confusing navigation

Category structures didn't match users' mental models. Many gave up and switched to competitor apps for weekly shopping.

💳

Checkout friction

The checkout flow had 7 steps with redundant information requests, leading to a 42% cart abandonment rate.

"I love shopping at Mercadona in person, but the app is so frustrating that I end up using other apps for online orders, even if I prefer Mercadona's products."

— User Interview Participant, Regular Customer

Key findings

68%
Preferred in-store shopping over app
42%
Cart abandonment rate during checkout
3.2★
App Store rating (vs 4.5★ competitors)
15 min
Average time to complete one order

Based on these insights, I created two primary personas to guide the design process: Busy Parent Maria, who needs to complete weekly shopping quickly between tasks, and Tech-Savvy Miguel, who expects a modern, seamless digital experience comparable to other e-commerce apps.

User Personas

Design Approach

1. Information architecture redesign

Conducted card sorting sessions with 20 users to restructure product categories based on their mental models. Simplified the navigation from 8 top-level categories to 5 intuitive ones.

2. Search & filter enhancement

Designed an intelligent search with autocomplete, recent searches, and smart filters. Added quick-access to favorite products and previous orders for repeat purchases.

3. Streamlined checkout flow

Reduced checkout from 7 steps to 3 by consolidating forms, adding one-click payment options, and implementing smart address suggestions.

4. Visual design system

Created a cohesive design system maintaining Mercadona's brand colors while introducing modern UI patterns, improved hierarchy, and better use of whitespace.

5. Usability testing & iteration

Conducted 3 rounds of usability testing with 25 participants, iterating on feedback to refine interactions, copy, and visual design.

Design Solutions

Smart Search & Discovery

  • Predictive search with visual product previews
  • Advanced filters by dietary needs, brand, and price
  • Quick reorder from purchase history
  • Personalized product recommendations
Search interface
Checkout flow

Simplified Checkout

  • Reduced from 7 steps to 3 streamlined screens
  • Saved payment methods and addresses
  • Real-time delivery slot availability
  • Clear order summary with easy edits
Full user flow comparison

Results & impact

While this was a conceptual redesign without access to production data, usability testing with the prototype showed significant improvements:

-65%
Task completion time
92%
Successful checkout completion
4.7★
Prototype testing satisfaction
100%
Would recommend to others

"This is exactly what the Mercadona app should be! I could actually see myself using this for my weekly shopping."

— Usability Test Participant

Key learnings

💡

User Mental Models Matter

Card sorting revealed how differently users categorize groceries versus how businesses organize their inventory. Designing for the user's perspective, not internal logistics, was crucial.

Reduce, Don't Add

The best improvements came from removing steps and simplifying flows, not adding new features. Sometimes less really is more.

🎯

Test Early, Test Often

Multiple testing rounds helped catch assumptions early. What seemed intuitive to me wasn't always clear to users—iteration was essential.

🎨

Brand Familiarity Builds Trust

Users responded positively when the redesign felt modern yet familiar. Maintaining brand colors and core visual identity while modernizing patterns was the right balance.

Next steps

If I were to continue this project, I would focus on:

Future concepts