Role
Client work – UX-UI & Product Designer
Duration
3 months
Type
Client Project
Tools
Figma
Typeform
Maze
Overview
The Brief
"We would like to improve our app and make it more user-friendly and engaging. We want to make sure that our users are getting the most out of our app and that they are happy with it, they use the app every day to be safe, and we would like to explore how we can monetize."
Beloo is a cycling safety app that broadcasts a rider's live position to contacts, provides incident alerts, and integrates roadside insurance. I was brought on as a Collaborator UX Designer to identify why daily usage was low, diagnose the existing UX debt, and design systems to fix it.
The engagement unfolded in four phases: a full heuristic audit, generative user research, hands-on user testing with real cyclists, and an end-to-end redesign covering interaction patterns, information architecture, and the complete UI.
Phase 01, Audit & Heuristic Review
The Problem
The initial phase focused on identifying the app's existing issues so the client could understand them and take actionable steps. The audit was conducted across three tracks.
Preliminary Analysis, A comprehensive review of heuristics, usage patterns, accessibility, CRO, usability, branding, colorimetry, performance, user retention, daily usage, user product perception, monetization, and business strategy. Key friction points:
- Emotional disconnect, Lack of emotional connection with the user and visual warmth.
- Inverted visual hierarchy, Cluttered, distracting interface with unclear priority.
- Navigation issues, Unintuitive nav bar, no main CTA, unclear action feedback.
- Accessibility failures, Contrast issues, especially critical on the home screen.
- Information Architecture gaps, Wrong content order, no quick access to core features.
- Brand inconsistencies, Visual and brand inconsistencies throughout.
- Suboptimal monetization, Poor perceived value and unclear premium tier messaging.
- Poor sensory experience, Overuse of high-contrast yellows and oranges without functional purpose.
Phase 02, The Client & Requirements
Understanding the Client
Before touching a single screen, I worked with the Beloo team to translate their ambition into concrete requirements. The north star was clear: improve the experience and make it genuinely memorable, turning the app from a tool people tolerate into one they choose. From that goal, three business-critical requirements shaped every decision that followed.
-
Requirement 01
From occasional to daily use
Apply adoption theory to leapfrog straight past regular use into a daily habit. Because Beloo is a safety app, consistent daily engagement isn't a vanity metric, it's what keeps riders protected on every ride.
-
Requirement 02
A value & monetization strategy
Design a clear value ladder and premium tier that lets the company generate sustainable, recurring revenue, without eroding the trust a safety product depends on.
-
Requirement 03
A cyclist-first map system
Build a mapping layer that surfaces the key points cyclists actually need, water fountains, climbs, repair workshops, hazards and fellow riders, turning the map into a reason to open the app.
Phase 03, User testing & Research
Understanding the Cyclist
Initial generative research was conducted to align with cyclists' mental models, ranging from professional athletes to casual riders. The goal was to map core pain points, safety concerns, and the incentives needed to integrate the app into daily riding routines. Understanding the "why" behind their interactions was the only way to address the gap between functionality and perceived value.
Testing methods
Online usability tasks
Task-based testing run remotely across different age groups, rider profiles and countries, spanning several European markets and the United States. Nine participants completed structured tracking and safety tasks over three weeks, giving us breadth across demographics and geographies.
Moderated field testing in Calpe, Spain
A group of professional, amateur and enthusiast cyclists, including Spanish champion Ivan Romeo, tested the app during a seven-day training camp in Calpe. Profiles were deliberately mixed to cover the widest range of users. A moderated test with control questions at several moments throughout the week, closing with in-depth interviews, a Typeform survey and a focus group.
Primary findings
-
Low Daily Retention
Users frequently forgot to open the app and struggled to perceive its utility beyond basic safety features.
-
Unclear System Feedback
Features felt confusing and lacked tangible value. Participants repeatedly requested integrations with third-party apps and easier access to core tools.
-
Confusing Information Architecture
Users lacked a clear understanding of the app's primary goals and layout, particularly the home screen. A common request: merge the home screen directly into the active tracking screen.
-
Colorimetry and Visual Stress
Riders reported contrast issues and sensory stress caused by an overuse of bright yellow and orange without clear functional purpose.
-
Usability in the Field
Difficulty accessing the tracking panel while wearing gloves, too many taps to reach core features, no device integration.
-
Feature Comprehension
The majority of users didn't understand the 112 button, the incident button, or the roadside insurance; it effectively felt non-existent.
Phase 04, Ideation & Architecture
Defining Scope, Limitations and Solutions
Before redesigning any interface, I mapped the technical reality the product had to live inside, what Beloo could and couldn't connect to, and which services would power the new experience. These constraints shaped the information architecture and the feature set as much as the user research did.
Real-time position & speed broadcast
Beloo's core job is pushing each rider's live position and speed outward in real time. That data has to reach navigation and connected-mobility platforms through their APIs, each with its own limitations on latency, format and access.
Core platform services
On top of the broadcast layer, four services power the rest of the product, from the map itself to storage, assistance and payments.
Moodboard
Before any wireframing, I assembled a moodboard covering style, colors and usability solutions. Beyond the visual direction (dark surfaces, glass morphism opacity and blur studies, gradient strokes), it collected proven interaction patterns from other products for the flows the redesign had to solve: checkout, search on maps, listings, partner discounts, premium promotion screens and gamified rewards.
Voice-first interaction
Cyclists have poor tactile access to their phone by the very nature of the sport: gloves, vibration, both hands on the bars, eyes on the road. That constraint made voice one of the most valuable interaction channels in the entire redesign, with the app open and with the phone locked.
The system is built around a wake word, "Hey Beloo…", followed by the order. Even from the lock screen with the display off, "Hey Beloo, start broadcast" begins broadcasting your position without a single tap, which directly increases real daily usage, the client's core metric. The pattern follows the interfaces riders already know: ChatGPT Voice, Siri, and "Hey Siri" on the lock screen.
Voice commands are surfaced in two places so they actually get learned: during onboarding, and in the hint messages under the AI sphere animation on the main screens.
Ideation, iPad sketches
The first round of ideation happened directly on the iPad: quick sketches to define the main screens of the app, the home merged with the tracking view and its AI sphere showing system state through color, the Android vs iPhone nav bars, and the Maps, Social, Premium and User & Gamification screens.
Wireframes for early testing
The sketches became low-fidelity wireframes built for speed: they were put in front of the client and a limited group of 8 users to iterate as fast as possible before committing to visual design. This round validated the color-feedback system, the AI sphere changing color with tracking state, before a single high-fidelity screen existed.
Feature, Structure
New Information Architecture
User testing revealed that riders couldn't find core features and didn't understand the app's primary purpose. The home screen was redesigned and merged directly into the active tracking view, eliminating the biggest source of confusion. Every category was reorganised around actual usage patterns discovered in the field.
beloo/
├── home/ (merged with tracking view)
│ ├── ai-sphere/ (live status indicator)
│ ├── safety functions/
│ │ ├── 112-emergency
│ │ ├── incident-report
│ │ └── roadside-insurance
│ ├── report-incidence-btn/
│ │
│ └── tracking controls (typewriter feedback)
│ ├── start-tracking
│ ├── pause-tracking
│ └── stop
│
├── social/
│ ├── share-location
│ ├── nearby-cyclists
│ ├── join-event-tracking
│ └── find-events-and-groups
│
├── map-controls/
│ ├── points-of-interest (water fountains, hills, repair workshops...)
│ ├── friends-view
│ └── route-highlights (sync with Strava routes to improve your position broadcast)
│
├── you/ (user profile and settings)
│ ├── stats
│ ├── badges-rewards/
│ │ ├── daily-streaks
│ │ ├── partner-discounts
│ │ └── achievements
│ │
│ ├── settings-and-preferences
│ ├── widgets-shortcuts
│ ├── notifications
│ ├── privacy
│ └── device-integration/
│ ├── garmin-edge
│ ├── apple-watch
│ └── android-wear
│
└── premium/
├── for-no-premium-users: promotion screen with benefits and CTA to subscribe
└── for-premium-users:
├── access-to-partners-discounts
├── intelligent-broadcast-auto-starting
├── manage-your-plan
├── roadside-insurance-details
├── exclusive-earning-points
└── premium-support
Phase 05, Design
The Redesign
Based on the user pain points identified in research, several solutions were crafted to boost daily usage through incentives, quick access, reminders, and hardware integration.
Feature, Retention
Intelligent Notification & Reminder System
Notifications are one of the most powerful drivers of daily app engagement. For Beloo, they're critical, users forgot the app existed between rides. The solution: a context-aware system that learns from each rider's history and sends reminders at exactly the right moment.
-
Smart ride timing, Analyzes the user's historical ride data to identify peak usage hours and sends a reminder just before that window opens.
-
Movement detection, If the phone detects 15 min of movement at 21–37 km/h (average cycling speed) without the app active, it sends a prompt to enable tracking.
-
Social proximity, Notifies the user when a friend or contact is cycling nearby.
-
Inactivity nudges, After extended periods of no app use, sends a motivational re-engagement message.
-
Morning motivation, On each user's most common riding days, sends a personalized morning message to build the habit loop.
Feature, Quick Access
Shortcuts & Widgets
Starting a ride should take one tap, not five. Quick access controls were designed for the Always On Display, iOS Control Center, Android Quick Settings panel, and home screen widgets, so Beloo is always one gesture away.
Users asked for these features, so I researched the industry's standards and existing solutions. Other integrations followed: Strava sync, TrainingPeaks sync, Suunto sync, smartwatches, and Garmin Edge.
iOS Control Center
Always On Display
Home Screen Widget
Rewards & Gamification
Badges, social features, and partner rewards to increase daily engagement and retention. Making safety a habit through positive reinforcement.
Device Integration
Seamless integration with smartwatches and Garmin Edge devices, offering controls, notifications, and automatic start features directly from the handlebar.
Social & Contextual Maps
Share live location via link, view other cyclists on the map, create or join riding events, and surface contextual POIs: water fountains, hills, repair workshops.
Feature, Main Screen
Easing Interaction, Safety & Refined UI Navigation
Research showed that cyclists couldn't find critical safety features when they needed them, buried deep in menus, requiring multiple taps while wearing gloves. The redesigned main screen brings incident reporting, roadside insurance, and the emergency 911 button to the first touch. A new color system and carousel nav make every action immediately clear.
-
Incident report, Persistent button to flag an incident instantly, triggering alerts to your contacts.
-
Emergency 911, One-tap emergency call, always accessible from the home screen.
-
Roadside insurance, Premium coverage surfaced directly on the main screen, not hidden in settings.
-
Glove-friendly targets, All critical controls designed with large tap areas for use on the road.
-
Color as system feedback, An orange sphere signals standby (not tracking); blue-green signals active broadcasting. The color of the AI element is the primary status indicator throughout the app.
-
Carousel nav, A swipeable menu gives quick access to all functions, with a cleaner top bar housing logo, social, and map controls.
3D Interactive AI (Spline)
A 3D interactive sphere acts as the primary UI element of the home screen. It humanizes the app and responds to the user's current state, standby or actively tracking. Its large surface also works as a touchable area for voice commands, critical for glove use in cold conditions. Below the sphere, the UI displays contextual feedback messages to guide the user in real time.
Waiting to track
An amber-orange pulsing sphere signals standby, the app is ready to broadcast your position when you start your ride.
Actively broadcasting
A calming blue-green color indicates that the user's position is actively being transmitted. Calm = broadcasting = safe.
Motion in Feedback Messages
Dynamic feedback messages communicate vital context to the user using typewriter animations. Depending on current conditions, the app greets the user and updates them on their status in real time.
Reflection
What I'd Do Differently
Looking back, the biggest surprise from Calpe wasn't a UI complaint, it was how invisible the safety features actually were. Riders who use this app to stay safe on the road didn't understand what the 112 button or the roadside insurance did, features that exist specifically to protect them. That gap between what a safety app assumes people understand and what they actually understand is the thing I'd probe earlier next time, in the heuristic audit itself, rather than waiting for the field week to surface it. I'm also honest that I don't have post-launch numbers to prove the reminder system and the new IA actually moved daily usage, the engagement covered research through to delivered UI, not a live retention study. If I got to extend this project, that's the phase I'd add: instrumenting the shipped redesign and coming back with real usage data instead of resting on user-testing intent.