Bryton Active

Mobile App | UI/UX Design | System Design

About Active

"Active" is a companion mobile application designed to provide Bryton GPS bike computer users with a rich set of services. It assists Bryton users in tracking, analyzing, and managing their cycling activity data. It also serves as a crucial tool for certain advanced features which require internet service interaction, playing an integral role in the Bryton product experience.

Background

Active app had been a pain point in Bryton's sales for a while. In the early years, due to the constraints of development resource, our software team chose a web-based framework for developing the Active application.

This decision created limitations as the product evolved and more features were added. User feedback through our surveys often mentioned that the app looked outdated, prompting us to improve its performance and stability by transitioning to native iOS and Android development technologies.

Project Goals & Challenges

At the time, we aimed to have this project, which involved transitioning the app to native development, align with the launch of a new flagship device. Besides revamping the UI, we had to simultaneously develop new features and optimize existing ones.

Given the intense time pressure and limited human resources, my task was to optimize the UI design in collaboration with external iOS and Android software engineers without making substantial changes to the design and information architecture. I also worked with internal software engineers to plan and design new feature workflows.

Project Goals

In addition to revamping the UI and implementing a brand-new design system for more consistent styles, my mission also encompasses the design of new feature workflows, optimization and iteration of existing features.

01

UI Revamp for Brand Consistency

02

The New Group Ride Feature

03

Optimizing Existing Features

New Logo Creation

After officially transitioning into the product design role, I initiated several design workshops during the early stages of development. In collaboration with new designers in the marketing department, we defined the visual style for the Bryton brand and its product lines, considering the existing brand identity and product strategy. We created a full series of visual identities for all the Bryton mobile companion applications including Gardia, Active, TMate. This not only created a clear distinction between product lines but also ensured brand consistency.

Design System

Based on the workshop discussions, I defined the visual and operational system for the Active app. I also discussed with iOS and Android engineers the ideal combinations of elements according to their preferences.

Key Features

In addition to the UI overhaul and the introduction of a new design system, my tasks included designing new feature workflows and optimizing and iterating on existing features.

Group Ride

About Group Ride Feature

"Group Ride" was a major iterative goal across the Bryton bike watch product line. By connecting with the Active app, the phone was used to send and receive real-time ride information, helping cycling groups access member positions, ride data, and messaging during rides.

Its business goals included increasing user retention, attracting a broader user base, enhancing brand recognition through user referrals, and gathering valuable user data for long-term success.

Challenges & Solutions

The Group Ride feature incorporated specifications from the market's leading competitors. Given the constraints of tight schedules and limited desktop research data, the product team engaged in intensive discussions at every stage of development regarding user journeys.

The collaboration between the bike computer device and the Active application was intricately interwoven, and throughout the development process, we extensively used documentation to describe and synchronize display states from various user perspectives.

The challenge was to provide users with a convenient experience while ensuring smooth interaction between the bike computer device, the Active app, and the server for reliable real-time data transmission. In the initial version, we designed the product based on assumptions and collected substantial feedback through testing before refining the design.

Training Features

As Bryton was simultaneously developing the S series of high-end training products, we converted user requirements into tasks, prioritizing the optimization of existing features and the addition of scheduling functionality.

Takeaways

When it comes to Design System and adhering to iOS & Android Design Guidelines, I've come to understand that it's not a binary choice between "unified design" and "platform-specific guidelines." It exists on a spectrum. Coming from a marketing design background, I initially prioritized visuals above all else, but this project has taught me the value of that statement. I've learned that unified design can often result in higher development costs compared to adhering to platform-specific guidelines. While adhering to platform-specific guidelines might slightly weaken the brand's visual identity, the most important aspect for Active, as a companion app, is to make it user-friendly, easy to navigate for users on both platforms, and quickly implement new features.

Through the long process of iterating and maintaining Active, I gained a deeper understanding of the interaction concepts and applications between mobile apps and bike computer devices through Bluetooth technology. By working on a web app that transitioned to native technology on both platforms not only increased my knowledge on platform-specific design guidelines but also helped me understand how components are developed differently in various states and between platforms through the collaborations with frontend engineers.