KLIP

A runner safety device and mobile app.

My Role: UX Designer

Date: January 2021 - April 2021

Runners face increasing safety risks while exercising alone outdoors. Female runners especially risk assault at an alarmingly high volume. Though many products attempt to address runners’ fears, none have accurately resolved this need.

My software team was tasked by the client, KLIP, with creating a mobile application that pairs with a physical device, to increase runner safety with a physical button that triggers emergency alerts via the app. The client aimed to include the following features in the mobile app: emergency contacts, alerts, community feed, and various settings. These were general ideas without specificity and open to our interpretation. We had a 4 month time constraint and limited hours each week to design and develop lo-fidelity and hi-fidelity screens. I worked as a UX designer, alongside a fellow designer and an engineering team.

Client Consultation and Site Map

Competitor Research

Value map

Lo-Fidelity Designs

User Testing

Design System and Branding

Hi-Fidelity Designs (Final Product)

Along with my fellow designer, I met with the clients to discuss their vision for KLIP. We wanted to accumulate all of the background information that led the clients to this idea. As female runners, they felt unsafe while exercising alone. From my meeting with the client and additional user research, I found the most prominent needs as follows: a product to somehow increase safety while alone, a product that is easily comprehensible, a community feed that is completely anonymous, and a product that can be used quickly in an emergency. Based on these discussions and research we created the sitemap as an initial user flow for the app, starting at the landing page and mapping out the possibles flows a user could take.

After settling on distinct features to include and structuring them into the site map, we researched potential competitor devices and apps. While these products were often well-conceived and executed beautifully, they failed to address the needs we had found, through our research, as most important to the user. For instance, a mobile app that paired with a necklace device with a built-in button was not ideal for those who found larger pieces of jewelry a nuisance while running. I also researched the competitors’ mobile apps and the features that were most common. Certain UI elements, user flows, or page organization succeeded within these apps, so we documented these. I found that a clear onboarding was crucial for understanding the process before and during an emergency. Including visuals of the device during onboarding to indicate the different functions was a common factor. We gathered screenshots of screens, then updated our sitemap by adjusting the page’s bulleted features and integrating correlating competitor screens.

To achieve the most value given our limited timeframe,  we took our long list of ideal features and organized them based on two ratings: user value and difficulty to build. This value map reflects our evaluation of these features. For instance, a social or community feed requires a moderate amount of developing effort resulting in a medium ‘easy to build’ rating, and the client’s believe it will provide an unmatched tool for talking about safety resulting in a high ‘user value’ rating. The emergency contact feature has high ratings for both factors, since it is a fairly simple feature that fulfills the purpose of the product.

After evaluating these potential features, we implemented low-fidelity screens to flesh out the basic design architecture, including onboarding, registration, settings, emergency contacts, home, alert activation within the app, resource page, community feed, and alert deactivation. The designs were created with an emphasis on contrast and states, opposed to colors.  We utilized Figma’s components and styles to easily make universal changes to buttons, fonts, and other elements. We created a clickable prototype with the second lo-fi iteration. I found that the creation of multiple iterations was a necessary step to flush out the features and organization fully before moving on to the visual elements in the high fidelity screens.

We completed thorough user testing on the second iteration of the low-fidelity screens. We utilized Useberry to upload the Figma prototype and create a testing guide. This guide prompted users to click through the prototype to fulfill certain tasks. These tasks included “Add a new emergency contact”, “Post on the community feed”, and “Activate then deactivate an emergency alert”. Useberry screen-recorded the users as they completed these tasks and collected heat signature data to analyze their patterns. After completing the tasks, the users were prompted to answer numerous questions about their experience with the app. We reviewed the resulting data to successfully design the high-fidelity screens. User testing is critical to the success of a product. Quality UI/UX design will create easy user flows where the ability to complete certain tasks or navigate the app is comprehensible. User testing also reveals gaps in accessibility, an egregious downfall in many designs.

Brand cultivation is crucial for a successful product. In order to attract users and create a welcoming atmosphere, designers must research and purposefully construct a brand. For KLIP, the target user is a female runner. However, the product must be designed for a wider audience. Whether it is for runners or simply any user that feels unsafe at times, the brand and color choices must reflect the welcoming, inclusive vision. We designed a genderless runner figure as the KLIP logo. For the design system, we carefully selected a blueish-purple hue to draw attention, but remain genderless. The design system reflects a clean, usable interface through the round, sans-serif typefaces, and stark color contrasts. The design system’s components also reflect this theme with rounded buttons and elements. A complete and organized design system is a critical step for designers because it allows the client to observe the stylistic choices and it allows designers to easily make changes to all components or styles. If the work will be handed off to the client, then a successful design system will ensure future designers can add new screens or features with the same design style.

All of our research, planning, iterating, testing, and re-iterating came comes together for the final product. We have a complete book of all the hi-fidelity screens. This includes the following features: onboarding, home, settings, contacts, community feed, and resources. It is paramount that components are used throughout the designs so that any change will be replicated across all the designs. The use of text and color styles is equally important, so those changes are replicated as well. We integrated our KLIP branding and utilized the design system that we created. After completing all high fidelity screens, we created a full prototype on Figma. This allows us to demo the app for our engineering team as well as the clients. The designs are organized in an organized and labeled catalog for the clients.