BikeMi
The redesign of BikeMi, Milan’s public bike-sharing app, transforms a dated interface into a streamlined, station-aware experience. It improves usability, enhances booking speed, and presents real-time station data to better compete with private micromobility services.
Design System
Usability Test
UI Design
Mobile-first UX
Brief
Redesign Milan’s public bike-sharing app to improve accessibility, station visibility, and mobile-first usability.
Objective
Increase user adoption and satisfaction through clearer information hierarchy, faster onboarding, and smoother bike booking.
Role
UX/UI Design, User Research, Usability Testing, Information Architecture, Prototyping, Onboarding Design
Methodology
The methodology follows the phases of the Double Diamond framework.
Usability Evaluation
Emotion Recognition Analysis
Users’ facial expressions were recorded during app use to detect signs of frustration, confusion, or satisfaction beyond verbal feedback. However, this method yielded limited insights, as most users showed minimal facial responses, so the results were ultimately ruled out.
Design Opportunities
Design Solution
Card Sorting & Tree Testing
Information Architecture
Old Version: Menus buried key actions and forced users to dig through multiple subpages
Redesign: A central map hub with five tabs gives one-tap access to all core features.
Wireframes
20 users tested LoFi wireframes through think-aloud sessions, both in person and via the Maze platform. After fixing and retesting the identified issues, we moved to high fidelity design.
Design System
Using Atomic Design principles, we created a design system based on BikeMi’s original color palette, with accessibility as a core focus, addressing a key shortcoming of the previous app.
HiFi Screens
Using Atomic Design principles, we created a design system based on BikeMi’s original color palette, with accessibility as a core focus, addressing a key shortcoming of the previous app.
The Redesign
Old Screens
Redesigned Screens
Onboarding: A quick, friendly introduction that helps new users understand the service and get started faster.
Micro-tips: Bite-sized tips highlight key features for first-time users, removing the need for lengthy help sections.
Ride Screens: Integrated navigation, return confirmation, and visual reporting tools offer a smoother, more confident ride experience.
How to Use: Simple visuals and short captions replace dense manuals, reducing confusion and cognitive load.
Mockups
Testing
The updated app was tested with 18 participants through a mix of moderated think-aloud sessions and unmoderated core tasks. The group included both first-time and returning users to ensure diverse feedback.
High Usability
Find the perfect plan tailored to your needs, offering the right balance of features, flexibility, and value to help you achieve your goals effortlessly.
Intuitive
Find the perfect plan tailored to your needs, offering the right balance of features, flexibility, and value to help you achieve your goals effortlessly.
Clear IA
Find the perfect plan tailored to your needs, offering the right balance of features, flexibility, and value to help you achieve your goals effortlessly.