PackUp
PackUp is the result of a one-week design challenge to make, from scratch, an app that lets you plan a trip, add friends to it, log expenses and settle them with ease in one convenient ecosystem.
Role
UX/UI design, Research
Context
CHALLENGE : Fragmented tool-chain.
Chat, maps, polls, and expense sharing, all live in separate silos. Context-switching kills momentum.
OBJECTIVE : Cover one “last-evening” scenario end-to-end.
Brief
Create a mobile flow that lets friends travelling together on a trip to add a late-joining friend, run a real-time dinner poll, auto-inserting the winning venue into the schedule, log the bill with custom splits, and guiding users through a minimal-transfer settlement.
Sprint Reframing
I followed the five-phase Google Ventures design-sprint loop, but adapted and compressed into a week.
UNDERSTAND
SKETCH
DECIDE
PROTOTYPE
VALIDATE
User Journey Map
Taking the brief and using Jobs To Be Done, the user journey was made which helped in understanding the flow better from opening the app to finally settling all debts within one ecosystem.
Add a friend > Run a dinner poll > Auto-insert the winner > Log the bill (wine excluded for two) > Setlle expenses > All square.
Insights
JOBS-TO-BE-DONE
“When I’m travelling with friends and we finish dinner, I want to split costs fast so I can keep the vibe, not crunch numbers.”
DESIGN PRINCIPLES
≤ 3-tap red routes, WCAG-AA dark palette. Taken from benchmarking various apps that have similar functionalities like Splitwise.
COMPETITIVE BENCHMARKING
Splitwise nails debt minimisation but ignores planning. Tricount is free but utilitarian. Jetty plans but can’t split money.
Design Solution
SEAMLESS | COLLABORATIVE | TRANSPARENT
INFORMATION ARCHITECTURE
WIREFRAMES
WIREFLOW
DESIGN SYSTEM
HIFI PROTOTYPE
Information Architecture
Five key nav pillars :
Home | Add | Trip | Expenses | Profile
match the trip lifecycle, with screens ranked by task frequency, so key actions (e.g., “Balance Summary”) are one tap away, keeping flows ≤ 3 steps.
(Tested with 8 users)
Wireframes
Sketching every key screen side-by-side surfaced navigation kinks early and let me iterate on layout, copy and hierarchy before committing to digital wireframes.
Wireflow
After making the wireframes, it was part of the brief to show the logic behind the app through a Wireflow. The wireframes had to be made with minimal placeholders, so it was very convenient while converting them to the HiFi Prototype later.
Design System
COLOR STYLE
TYPOGRAPHY
ICONS
HiFi Prototype
HiFi screens in Figma replicate every core flow with polished dark-mode visuals, letting stakeholders experience the full journey with pixel-perfect accuracy.
Check out the live prototype