Mobile App Case Study
Part of the UI/UX Design Roadmap
In short
Phone users are on the move, using one thumb, on patchy internet. A dedicated mobile case study shows you can design for those real conditions.
A dedicated mobile-first project applying Phase 9's responsive and platform-specific design skills, distinct from your other case studies to show range across form factors.
Think of it like this
Using a phone in an auto-rickshaw
In a bumpy auto, you hold the rail with one hand and your phone with the other. Tiny buttons get missed, long forms are impossible and the network drops near the flyover. Design your mobile app for that ride, not for your desk.
Watch it happen
The mobile build plan
1/6Learn where and when people use it: walking, on a bus, at night, with bad signal.
The big ideas
What you need to know
One-handed first
Main actions near the bottom, easy to reach with a thumb. Rare actions can go higher.
Big tap targets
Apple suggests at least 44 by 44 points, Material at least 48 by 48 dp.
Bad network states
Show what happens when the network drops. Save drafts so users don't lose work.
Respect the platform
Users expect their phone's usual patterns. Fighting them makes your app feel strange.
See it in code
Walk through the code
1Mobile spec: Book bus seat screen2Frame: 360 x 800 (common Android size)3Tap targets: min 48 x 48 dp, 8 dp apart4Primary action: sticky bottom bar, thumb zone5Text: body 16 sp min, supports system font scaling6States: loading, no seats, offline, payment failed7Gestures: none required, every action has a button1/3Real screen size and Material's minimum tap target size.
A short mobile spec you can add to your case study. It shows you thought about hands, platforms and failure states, not just how it looks.
Save yourself the pain
Common mistakes
Oops
Shrinking a desktop design down to a phone frame.
Do this instead
Start mobile-first: rethink layout, navigation and content for a small screen and one thumb.
Oops
Only reviewing the design on a big monitor.
Do this instead
Use Figma's mobile app or mirror it to your phone. Check text size and reach in your own hand.
Your mission
Milestone 1: the core flow on a phone
Quick check
Where should the main action button usually go on a phone screen?
Go deeper
- 1Choose a mobile-specific problem (e.g. on-the-go usage) that genuinely benefits from a mobile-first approach.
- 2Apply platform conventions (iOS or Android) deliberately and explain your choices.
- 3Include a prototype demonstrating gestures and mobile-specific interactions from Phase 6.
More projects at this stop
End-to-End App Design Case Study
Website Redesign Case Study
Design System Case Study
0-to-1 Product Design Case Study
Accessibility Audit & Redesign
Portfolio Website
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
