fran
QUICK MARKET · CASE STUDY
From a 2016 student project to a group shopping app
Group shopping is split across three apps, which causes stress, math errors and forgotten items. Quick Market brings the shopping list, the group chat and the cost split into one app.
At a glance
PROJECT TYPE
Personal project, started in 2016 as a university challenge and fully rebuilt in 2025
TOOLS
Figma
ROLE
UI/UX Designer, Solo project
DURATION
3 months
PLATAFORM
Mobile Android and IOS
Context
Quick Market is an interface designed to solve the chaos of group shopping. It can be a barbecue with friends or a surprise party: the app puts the shopping list, the chat and the cost split in one place.
The project started in 2016 as a university challenge. In 2025, I rebuilt it from scratch. The goal of this update was to apply current UI design standards, better accessibility and a smoother information architecture.
The problem
Group shopping is usually spread across three apps: WhatsApp for the conversation, Notes for the list and Splitwise for the split.
The friction
Information gets lost between these platforms. This creates stress, mistakes in the calculations and forgotten items.
The goal
Create one ecosystem that connects the whole journey, from planning to settling the bill.
Benchmarking and visual references
To build the new interface, I analyzed the strengths and the friction points of three established products:
A reference for taxonomy and categories, but it has too much visual noise (pop-ups and ratings).
Excellent calculation logic, but the interface looks dated and the ads interrupt the flow.
The gold standard for fast communication, but not efficient for managing a shopping list or protecting financial data.
Architecture and ideation
The redesign focused on reducing cognitive load. I organized the user journey into four essential flows:
4. SPLIT
A smart and transparent division of the final amount.
I mapped these flows in a user flow diagram that shows every screen and decision, from login to payment and settings.
1. ONBOARDING
A simple sign-up (Google, Apple or form).
2. SHOPPING FLOW
Choosing items and managing the shared list.
3. CHECKOUT
An integrated payment flow (pay at the register, credit or debit card, or Pix).
Key features
CONTEXTUAL
COMMUNICATION
Unlike a regular chat, the conversation happens inside the event. Participants can see the status of the list in real time ("Did someone already get the charcoal?"), which helps avoid duplicate purchases.
FINANCIAL
TRANSPARENCY
A clean dashboard answers three questions at a glance: Who paid for what? How much do I owe? Who owes me?
HYBRID TRACKING (ONLINE AND OFFLINE)
The interface lets users record purchases made outside the app. They take a photo of the receipt, and the app reads it and adds the spending to the group. This is a design concept.
Design system
The original brief gave me only a logo, so I built a scalable design system from scratch.
COLOR
PRIMARY PALLETE
Chalet Green 600
#507140
SECUNDARY PALLETE
Shark 200
#E6E5E6
Picton Blue 50
#F0FAFF
Buttercup 400
#F2B02E
TYPOGRAPHY · HEEBO
Heading H1
Title/Button
Button/Menu
Body
Detail
COMPONENTS
I designed the components around the three jobs of the app: talk, shop and split. Every touch target is at least 44px high, because people use the app with one hand while they walk through a supermarket.
BUTTONS
One strong action per screen. Green is for the main step, dark is only for payment, so people always know when money is involved.
CHAT MESSAGE
Each person has a name color, so a busy group chat stays easy to follow. My messages use the soft green.
SLIPT CARD
Shark 900
#1F1E20
Shark 700
#424144
Picton Blue 400
#2EC1F2
Flamingo 500
#F25B2E
Bold · 20px · line height 28px
Bold · 16px · line height 24px
Bold · 12px · line height 20px
Regular · 12px · line height 20px
Bold · 8px · line height 16px
INPUT FIELD
One strong action per screen. Green is for the main step, dark is only for payment, so people always know when money is involved.
SHOPPING LIST ITEM
Checked items show who bought them, which avoids duplicate purchases. The stepper makes quantity changes quick.
Shark 50
#FAF9F9
Fuchsia Pink 600
#D12FBE
Chalet Green 100
#E2EBDC
Mexican Red 800
#9C2323
Answers "who paid, who owes" at a glance. Status chips pair color with a word so they work for color-blind users too.
Prototyping
I split the prototyping into two stages so that the business logic (shopping and splitting) would not be hidden by visual style.
Stores: Choose the supermarket for the event.
New conversation: Start a new event or contact, with frequent contacts at the top.
Conversations: See all your groups in one place.
Add members: Select people from your contacts to join the group.
Group chat: Talk with the group inside the event.
Shopping: Review the items and their quantities before paying.
LOW FIDELITY (WIREFRAMES)
What I focused on: The hierarchy of information in the shopping lists and the flow of the payment screens.
Design decision: I chose a bottom tab bar to make the app easy to use with one hand, which is common when people shop in a supermarket.
Member management: See who is in the event, with a member counter.
Splits: See how the total is divided between members.
Item list: Choose the products for the shared list.
Payment: See the total and confirm the payment.
Item quantity: Set how many of each selected item.
High fidelity
In the final version, I applied the design system to every screen.
CONVERSATIONS
SHOPPING
Each event shows a progress count (for example, "9/20 items bought"), so users know the status of the list without opening the chat.
Items are grouped by category, with the cart summary and the total always visible.
PAYMENT
SETTINGS
The user chooses a payment method and reviews the purchase before confirming with a clear green button.
A simple list with account, privacy, notifications, payment and help.
