Beloo cycling safety app

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:

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.

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.

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.

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.

On top of the broadcast layer, four services power the rest of the product, from the map itself to storage, assistance and payments.

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.

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.

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.

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.

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.

The final hi-fi prototype was built for production handoff, not just presentation. Every flow, connection and interaction is documented directly on the Figma canvas so developers can read screens, states and transitions without needing a walkthrough call.

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.

The redesign was handed over as 78 screens across 8 flows, log-in and onboarding, home and live tracking, maps, social, premium and checkout, incident reporting, roadside assistance, and profile and rewards, each one tagged Ready for dev on the Figma canvas.

There is no highlight reel here, on purpose. This is the whole system in motion, including the screens that rarely make it into a portfolio shot and decide whether a product can actually be built: location permission prompts, log-in error states, email verification, checkout steps, success confirmations, filter panels, and the iOS and Android variants of the same navigation bar.

This engagement ran from heuristic audit to delivered UI. Instrumentation and post-launch measurement were never part of the scope, so there are no instrumented retention numbers on this page and I'm not going to invent any. The closest thing to one: preliminary follow-up testing with target users points to an estimated 60–70% increase in repeat usage, and it stays labeled an estimate, not a result, until the plan below runs on the live build. What there is: a system that can be built, and a chain from each decision back to something a rider said or failed to do in testing.

Nothing in this section is a result. The engagement ended at delivered UI, so what follows is the instrumentation I'd put into the build and the bar I'd hold it to, written as hypotheses because that's what they are until someone actually runs them.

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.

If there's a phase two, the order is already set: instrument the shipped redesign (time-to-tracking, rides tracked per rider per week, incident-report completion), road-test the voice layer with real audio, run the cold-user color test, then revisit the premium price with data instead of an assumption.

One thing came up in the field study that the current scope doesn't answer. Riders kept asking for two things Beloo doesn't do yet: turn-by-turn navigation they can actually follow at speed, and advanced training metrics, power, normalised power, cadence, heart rate and VAM, read live without a second device on the handlebar. Both already exist elsewhere; what riders said was missing is a version of them with an experience worth using.

That makes it a real opportunity rather than a feature request: Beloo already owns the ride session, the position stream and the handlebar surface, so navigation and live metrics are the natural next layer rather than a new product. It stays an exploration for now, not a commitment. It needs its own research round, and the training-metrics audience is not automatically the safety audience.