Mobile App · UX Case Study
Overview
Quick Mart is a convenience store app designed for busy shoppers with limited time. A mobile app is the answer — with it, users can easily find products using their smartphone anytime, anywhere. No more searching or waiting in lines.
The app not only makes shopping more accessible but also provides personalised experiences, deals, and quick transactions — ensuring a hassle-free and satisfying shopping experience for everyone. This project was approached end-to-end: user research, persona development, user flows, wireframes, and high-fidelity visual design.
5
User interviews conducted
∞
Shop anytime, anywhere
1
Persona — Alex Thompson
E2E
Full design process
Challenge
The Problem
Shopping in convenience stores often means struggling to find products and enduring long checkout lines — this can be inconvenient and time-consuming for customers. Busy shoppers, particularly those with limited free time for grocery shopping, need a faster, smarter way to get what they need. Without a solution, stores risk losing revenue and customers to more convenient alternatives.
The Solution
Quick Mart brings the convenience store experience to users' smartphones — browse products by category, reorder favourites, pay online, and track delivery, all without setting foot in a queue. Personalised deals and a smart shopping history make repeat purchases effortless. The app targets busy shoppers and ensures a seamless, satisfying shopping experience while preventing potential revenue losses for the store.
Constraints
Quick Mart is a self-directed portfolio project — a fictional convenience store app designed to demonstrate a full UX process from research to high-fidelity UI. No development handoff, no live product.
The brief was entirely self-constructed. Research had to precede design — no jumping straight to wireframes. 5 user interviews informed the persona and user flows before any screen was sketched.
The solution had to be a native mobile app — all layout and interaction decisions had to work within iOS design conventions and thumb-reach ergonomics.
The goal was to demonstrate the full UX pipeline: discovery, definition, design, and validation — not just the final UI.
Design Process
01
UX Research
02
Brainstorming
03
UX Design
04
UI Design
05
Testing
06
Handoff
Goals
Company Goals
User Goals
User Persona
A tech intern currently pursuing a degree in web development. Working mostly from home provides the flexibility to attend university classes. However, Alex encounters challenges when going to the store — uncertainty of product availability and the frustration of long checkout lines often result in skipping lunch, especially during limited breaks.
Age: 24
Gender: Male
Profession: Tech intern / Web development student
Tech usage: Heavy social apps user
Shopping freq: 2–3 times per week
Pain Points
Goals
User Research
Five user interviews were conducted to validate the problem and surface genuine needs. Key themes emerged around navigation clarity, order history, and notification preferences.
On useful app features
"I love the ability to easily reorder groceries with saved history, saving time. The flexibility to pay online or with cash card on delivery is great — eliminating worries about my account balance."
On categorisation
"Not categorising plant-based items in one group makes it hard to find. Better categories would help. I appreciate an app that remembers my details, saving time on constant input."
On navigation
"Clarity and detail are important for me — complex navigation or slow loading times discourage me. With limited free time, I aim to complete purchases in 5 minutes."
On push notifications
"I check my email daily for work, and extra emails are fine if they match my interests. However, random daily deals annoy me and might make me unsubscribe. Tailored content is welcome."
User Flow
The complete user journey maps every touchpoint — from onboarding through to order tracking — ensuring no step creates unnecessary friction.
01
Sign Up
02
Onboarding
03
Account
04
Home
05
Shop
06
Favourites
07
Search
08
Categories
09
Products
10
Product Details
11
Add to Cart
12
Checkout
13
Track Order
14
Order Done
15
Rate Store
16
Earn Points
Key Features
Users can reorder their most-bought items in seconds — reducing the cognitive load of weekly shopping and directly addressing the time-saving need surfaced in research.
Pay online or with a cash card on delivery — removing the payment anxiety that emerged as a barrier in user interviews. Eliminates worry about account balances at the door.
Products are categorised in a way that reflects how users actually shop — including dedicated plant-based and health sections, directly informed by interview feedback about frustrating categorisation gaps.
Every screen was designed with the 5-minute shopping target in mind — minimal taps from browse to checkout, with no unnecessary steps or friction between the user and their order.
Notifications and deals are tailored to user interests — not random daily promotions. Based on research showing users will unsubscribe from irrelevant push content.
An integrated points and referral system builds long-term loyalty and drives customer base expansion — directly addressing the company's growth goals alongside user satisfaction.
Visual Design
The Quick Mart visual identity uses Montserrat — a clean, modern typeface with strong legibility at all sizes. The colour palette is grounded, approachable, and built around accessibility standards.
Fresh Green
Primary
Mint Accent
Accent
Deep Charcoal
Text
Off White
Background
Testing
With hi-fi prototypes built in Figma, I ran informal usability tests with 3 participants — friends matching the Alex Thompson profile (working adults who use grocery apps regularly). Tasks included: find a plant-based protein product, add it to cart, and check out.
Key findings:
Finding 1 — Navigation behaviour
The category browse was used more than search on first visit — users wanted to explore, not search precisely. The smart category structure was validated; the search entry point was less critical than expected on a first-time session.
Finding 2 — Cart summary
The cart summary at checkout didn't show item images — 2 of 3 participants expressed uncertainty about whether the right item was selected. The lack of visual confirmation created hesitation at the most critical step in the flow.
Finding 3 — Specials section
The "Today's Specials" section was noticed by all 3 participants on the homepage without prompting — it drew more immediate engagement than the category grid, suggesting it should be positioned higher in the visual hierarchy.
Changes made post-testing
Added item thumbnails to the cart summary to reduce uncertainty at checkout. Moved the special offers section higher on the homepage based on unprompted engagement across all 3 sessions.
Outcome
3/3
Task completion rate on the primary checkout flow during usability testing
2
Design iterations post-testing — cart summary updated, specials section repositioned
The prototype shipped as a clear, validated baseline — checkout flow tested at 3/3 task completion and refined through two iteration rounds. Where I'd take this next, once it's live with real users: a second round of testing on the search and filter experience to see what people actually look for vs. what surfaces first, and a proper empty-state pass so out-of-stock categories feel handled rather than broken. Once real usage data builds, the natural next moves are a "buy again" surface for repeat purchases — the heart of a convenience store app — light personalisation tied to past orders, and ongoing checkout-speed refinements as real cart sizes shape the picture.