About Gardia

"Gardia" is an application developed to accompany Bryton's new product - Gardia R300L, the smart bike radar taillight. Through Bluetooth pairing, the "Gardia App" connects with the smart radar taillight, enabling Gardia to display signals indicating approaching vehicles detected by the radar device. These signals are conveyed to users through visual displays, sound alerts, and vibrations. Users also use the "Gardia" taillight device to configure settings, such as controlling the taillight's illumination mode, activating the brake light, and updating the firmware. This application is an indispensable assistant for users of radar products.

My Role and Outputs

In this project, I closely collaborated with three engineers: outsourcing iOS and Android engineers and an in-house engineer responsible for the radar device.

I was in charge of the entire UX and UI design process, from problem definition, design drafts, to engineering delivery, and also responsible for string writing and management.

Project Challenges

At the project's inception, I had multiple projects on hands simultaneously. The most significant challenge was to facilitate the onboarding of outsourcing engineers who were collaborating with us for the first time.

The goal was to ensure that they not only understood the product specifications but also quickly established effective communication, enabling us to find common ground and align on project objectives. This was essential to ensure that the tasks were completed within the given timeframe.

Requirements and Objectives

We gained insights into user requirements through competitive analysis and market feedback. The preliminary market research we conducted provided a solid understanding of the user types and usage scenarios for bike radar products. Before diving into the design of "Gardia," I conducted a final round of research, consolidating user feedback from competitor applications. I discussed these findings with the product manager and engineers to prioritize and decide on certain requirements.

In addition to competitive design analysis, we compiled several requirements based on searches across major sales platforms, app stores, and feedback from various distributors:

■ Radar use while riding provides value by indicating "no vehicles behind." 
■ The volume of vehicle approaching alerts needs to be sufficiently loud.
■ Support for vibrating alerts to remind riders when the device is placed in a pocket.
■ The ability to quickly mute alerts when riding in urban areas with frequent vehicle detection to reduce annoyance from constant alerts.

These requirements reflect the core needs of users and ensure that "Gardia" addresses their concerns effectively. By incorporating these features, the app can enhance the user experience and provide valuable benefits to cyclists.

iA & Function Flow

After defining the main requirements, I also took into consideration the future roadmap of the brand's product offerings and created two sets of information architecture diagrams. These diagrams were the result of a thorough analysis of pros and cons, and discussions with the product and in-house engineering teams.

Subsequently, I produced the information architecture in details and organized the documents for product spec, facilitating communication through meetings with external software engineers who had not previously dealt with related products. This ensured a clear understanding of collaboration methods, product structure, and detailed functional requirements, ultimately reducing communication costs and ensuring a shared vision of the project.

Design System

Based on the decisions made during the design workshops, I provided Gardia app with a visual definition and created special icons to meet functional requirements.

Interface Design

I implemented the defined visual style and design system across various pages of the app.

App Store Preview Design

While Gardia is designed for a specific user group as an auxiliary application for hardware devices, the strategy of using high-quality preview images to attract users and increase app downloads is relatively less applicable. However, attractive preview images still play a role in maintaining and enhancing user trust in the brand. A well-designed interface preview can elevate consumer confidence in Bryton's professionalism and effectively convey the main app functionalities.

Result and Learning

In this projects, working with Android engineers presented a significant challenge for me. During our back-and-forth communication, I honed my soft skills, particularly in the area of effective communication.

I learned how to tactfully navigate emotionally charged situations, focusing on discussing solutions and ways to collaborate, which effectively prevented the work atmosphere from deteriorating further. Ultimately, through compromise and mutual understanding, we successfully completed the project within the designated timeframe.