BikeMi
APP REDESIGN
PROTOTYPE
ATOMIC Design
ROLE
UX/UI Design · Research
Usability Testing · Prototyping
METHODS
Heuristics · PREMO · Ethnography
Card Sorting · Tree Testing · SUS
VALIDATED OUTCOMES
SUS 84/100 · 92% task success · 24s median unlock · 86% first-click IA
Final prototype
Milan had
300K bike
trips a year.
Users were googling
how to
take them.
ROLE
UX/UI Design · Research
Usability Testing · Prototyping
METHODS
Heuristics · PREMO · Ethnography
Card Sorting · Tree Testing · SUS
VALIDATED OUTCOMES
SUS 84/100 · 92% task success · 24s median unlock · 86% first-click IA
300+
Docking stations across Milan, yet users faced challenges in finding bikes.
4
Private micro-mobility apps launched in Milan between 2019–2022, each with modern onboarding and real-time maps.
2.5★
App Store rating. Review analysis: complaints were almost entirely about the interface, not the bike service itself.
01 - RESEARCH & EVALUATION
First-time users couldn't subscribe.
Experienced users opened Google Maps to compensate.
8 methods across 2 phases. 97 survey responses.
12 semi-structured interviews. 20 usability participants.
The research pointed to two structurally separate failures operating on the same interface and fixing one without the other would leave half the user base behind.
01
02
03
04
Mapping the Support Black Hole
Revealed that when users faced physical unlocking or docking errors at the station, no real-time troubleshooting or back-end support.
Quantifying the IA Failure
Scored 4 core flows against Nielsen’s Heuristics. Found that 14 scattered menu items forced users to constantly relearn the interface.
Excited → frustrated → annoyed
Users started excited but frustration peaked at "Unlock bike", the most critical moment in the flow.
6 channels scraped, 200+ reviews coded
Discovered frustrated users were actively crowdsourcing setup tutorials on Facebook and Instagram just to compensate the app's non-existent onboarding.
05
06
07
08
97 respondents
Segmented by usage frequency confirmed the split: rare users failed at subscription (85%), regular users failed at navigation (89%).
Confirming the Dual Failure
Shadowing users at docking stations found a complete distrust of the BikeMi map. Constantly bouncing to Google Maps for directions.
4 Experienced, 8 New users
High onboarding friction (stressful setup/no tutorial) and critical feature gaps in navigation (reliance on external GPS).
Aligning 3 Profiles to 4 Core Jobs
Regardless of experience, everyone shared the same jobs of finding a bike, getting directions and the right information, all of which the current app failed to support.
02 - RESEARCH SYNTHESIS
Users were failing because the information they needed was scattered.
INSIGHT 1
"Navigation Confusion"
14 separate menu items were scattered across 3 different navigation paradigms, preventing users from ever learning a single mental model.
INSIGHT 2
"Geolocation Without Context"
The most valuable piece of real estate, the map home screen, provided zero actionable data. Users had no context about what to do next whether before starting a ride, during or after.
INSIGHT 3
"Abandoned after Hello"
Instead of contextual onboarding during the critical first 30 seconds, the app provided dense text manuals buried deep within the settings menu. By the time a new user found help, they had already switched to a competitor's app.
"I use BikeMi because it's cheaper, but every time I open the app, I wish I was using Lime."
- Survey respondent, 27, daily commuter, Milan
Design Brief
The redesign needed two separate answers on the same canvas: a guided experience for first-time riders, and a real-time, informative layer for power users, without adding complexity for either.
03 - INFORMATION ARCHITECTURE
The original IA hid core tasks 3-4 taps deep.
The redesign surfaces them in 2.
Card Sorting Results
Tree Testing - Core Flow
CARD SORTING
Card sorting revealed strong affinity (>80%) for placing live bike availability and station directions at the booking step, exactly where the original app buried them 3–4 taps deep.
TREE TESTING
Tree testing (n=27) confirmed 89% success on the primary task of "Find how to use the service," and 86% first-click accuracy across core tasks, validating the restructured IA before moving to wireframing.
ORIGINAL
Welcome Page → Login → Map → nested menus
Scattered support links forced riders to dig through multiple subpages for stations, policies, and help.
REDESIGNED
Onboarding Screen → Map Hub → 5 clear branches
A map-centric hub with five clear branches unifies stations, search, account, and help in one-tap access.
04 - WIREFRAME TESTING
20 users, 2 rounds
18 UX-savvy participants (18–25) and 2 in their 50s tested low-fi wireframes via think-aloud sessions, both in-person and through Maze. Issues found in round 1 were fixed and retested before moving to high fidelity.
EMOTION RECOGNITION ANALYSIS
"Not so emotional after all."
I also ran Emotion Recognition Analysis by recording users' facial expressions while using the app. However, most users showed little change in expressions, so I dismissed these results and relied on verbal and behavioral feedback instead.
05 - DESIGN SYSTEM
One system to rule them all.
Using Atomic Design principles, I built a component library reflecting BikeMi's brand colors while correcting the accessibility failures of the original app. Every component shares a single token set
TOKENS
ATOMS
MOLECULES
ORGANISMS
06 - KEY DESIGN DECISIONS
Four moves that changed the experience.
01
Onboarding
Contextual 3-step visual guide with Milan landmarks. Micro-tips show: filter by type → tap station → unlock bike.
02
Map-First Navigation
Persistent type filter chips maintained across sessions.
03
Ride Experience
Persistent ride HUD (route/ETA/cost), clear return receipt, visual tap-to-report for damage.
04
Help Architecture
Bite-size "How it works" steps. Visuals + one-liners replace long manuals. 3 clear branches, not a catch-all.
→ Faster first-time comprehension, clear next steps.
→ Fewer first-use errors, no need for dense help text.
→ Higher ride confidence, quicker returns, faster damage reports.
→ Lower cognitive load and fewer support requests post-onboarding.
THE REDESIGN
Key screens across the user journey
What changed?
What the research found broken
✕ No onboarding screen, map loaded with no context or guidance.
✕ Map showed station pins only, no live bike counts or type breakdown.
✕ Bike type icons rendered but non-interactive, no filtering possible.
✕ During ride: no trip timer, no live cost, no route, no return cue.
✕ End of ride: brief confirmation only, no damage reporting path.
✕ Help section: multiple paths routed to the same screen.
✕ 3 inconsistent button styles across the app, no unified system
What the redesign delivered
✓ 3-step visual onboarding guide with Milan landmarks, skippable.
✓ Live E-bike / Regular / Child-seat counts on every station card.
✓ Persistent type filter chips at map top, maintained across sessions.
✓ Ride HUD: trip timer, live cost (€), route display, 1-tap return.
✓ Visual bike diagram for damage reports, no mechanical jargon.
✓ Help: 3 clear branches, How it works / Subscriptions / Chat.
✓ Atomic design system: one token set, one style, WCAG AA contrast.
07 - VALIDATION
84
/ 100
System Usability Scale - "Excellent" band. Top-tier mobile app usability.
n=18. Moderated + Unmoderated sessions
92%
Task success rate across all core, tested flows.
24s
Median time-to-unlock for first-time users
86%
First-click IA accuracy (tree testing · n=27)
2 taps
From map home to full station detail