Home About Services Work Contact Let's Talk
Back to Work / Keells Super App Redesign

Keells SuperApp Redesign

A full UX/UI redesign of the Keells Super mobile app — making grocery shopping simpler, faster, and more enjoyable for everyday Sri Lankan shoppers.

3 Weeks Timeline
UX/UI Designer My Role
Figma Tool
Mobile Platform
Keells Super App Redesign
01 Overview

What is this project about?

Keells Super is one of Sri Lanka's largest supermarket chains. This project was a concept redesign of their mobile app — rethinking the entire shopping experience from the home screen through to checkout and payment confirmation. The goal was a clean, modern interface that felt fast and trustworthy, reflecting the brand's position as a premium grocery destination.

Who it is for

Everyday Sri Lankan shoppers aged 18 and above who want to order groceries and household essentials from Keells quickly through their phone.

Platform and scope

A native mobile app redesign covering the home screen, category browsing, single product page, delivery flow, checkout, and payment success state.

My role

Sole designer from research through to high-fidelity prototype — user research, information architecture, wireframes, visual design, and a component library in Figma.

02 Problem

The problem we set out to solve

The existing Keells app felt cluttered and visually dated. Navigation relied on deeply nested menus, product discovery was slow, and the checkout flow had too many unnecessary steps. Users who tried the app for the first time often abandoned their cart before completing a purchase simply because the experience felt more frustrating than walking into a physical store.

Pain Points
  • Cluttered home screen with no clear visual hierarchy
  • Deep category nesting made product discovery slow
  • Checkout required too many steps and screens
  • Product pages lacked useful information at a glance
  • No clear promotions or savings signposting
Redesign Goals
  • Simple, clean UI with clear visual hierarchy
  • Easy navigation for a smooth shopping experience
  • Faster, streamlined checkout process
  • Better product search and filters
  • Prominent promotions to drive conversion
03 Process

My Contribution

I followed a structured five-phase design process: studying user needs and existing pain points, mapping information architecture, creating wireframes, building the high-fidelity UI, and then refining based on feedback before preparing for developer handoff.

Key User Flow — Finding and Purchasing a Product

Home Search or browse categories
Category Browse filtered products
Product View details and add to cart
Checkout Review order and pay
Confirmation Order confirmed and dispatched
04 Visual Design

Screens and Visual Design

The visual direction is fresh and approachable — rooted in Keells' signature green but elevated with generous white space, clear typographic hierarchy, and a bold promotional language that makes deals immediately obvious. The result feels modern and trustworthy without being clinical.

Click any screen to view it full size.

Primary
#1EA120
Dark Green
#61BC47
Neutral Dark
#3E3E3E
Neutral Mid
#A0A0A0
Surface
#F5F5F5
Display & Body Poppins
Scale 10 · 12 · 14 · 18 · 22px
Keells Onboarding Flow
01 — Onboarding Flow
Post-auth Setup Flow
02 — Post-auth Setup Flow
Homepage & Category Page
03 — Homepage & Category Page
Product Page & Cart
04 — Product Page & Cart
Delivery Details & Checkout
05 — Delivery Details & Checkout
Components
06 — Components
05 Decisions

Key Design Decisions

Grocery apps sit at the crossroads of speed, trust, and price sensitivity. Every decision was made to remove friction from the path between landing on the home screen and completing a purchase.

Navigation

Flat category grid over deep nested menus

The original app buried categories two or three levels deep. The redesign surfaces the top categories as a persistent horizontal chip strip on the home screen, cutting the average taps to find a product from four down to two in early testing.

Conversion

Prominent "40% Off" hero banner on first load

Price is the primary reason Sri Lankan shoppers choose one channel over another. Leading with a bold promotional hero card on the home screen creates an immediate sense of value before the user has browsed a single aisle.

Checkout

Delivery intent captured at the very first step

Asking "Is this delivery for you or someone else?" at the start of the checkout flow eliminates a late-stage address surprise that caused significant cart abandonment in the original experience.

Accessibility

High-contrast product cards with visible price hierarchy

Every product card shows the product name, weight, and price in a clear three-level hierarchy. Original prices are crossed out alongside the discounted price so savings are immediately scannable — no hunting required.

06 Learnings

What I Learned

Redesigning a consumer app for a well-known local brand comes with its own pressures. The brand equity is real — users have strong opinions about what Keells should feel like — and the design has to honour that while still pushing the experience forward.

Portfolio

Featured Projects

Selected works that showcase my craft across design and development.

Paydens Redesign

Paydens - Website Redesign

A concept reimagining Instagram as an immersive spatial experience for Apple Vision Pro.

View Project
Fashion App

Fashion App Design

A full mobile fashion app UI covering home, category browsing, filter overlays, and a detailed product page.

View Project
Instagram Spatial UI

Instagram Spatial UI

A concept reimagining Instagram as an immersive spatial experience for Apple Vision Pro.

View Project
Open to Work

Liked this project?
Let's work together.

Whether you need a full product from scratch, a design refresh, or a landing page that converts — I bring pixel-perfect craft and strategic thinking to every project.

Email Me