KLIP
A runner safety device and mobile app.
My Role: UX Designer
Skills Used: Product Design, UI/UX, Branding, Prototyping, User Testing
Date: January 2021 - April 2021
PROBLEM
Runners face increasing safety risks while exercising alone outdoors. Female runners especially risk assault at an alarmingly high rate. Though many products attempt to address runners’ fears, none have accurately resolved this issue.
CHALLENGE
My software team was tasked by the client, KLIP, with creating a mobile application that pairs with a physical device to increase runner safety. The device uses a button to trigger emergency alerts via the app. The client wanted the following features in the app: emergency contacts, alerts, community feed, and various settings. These feature ideas were general and open to our interpretation. We had a 4-month time constraint and limited hours to design and develop low and high-fidelity screens. I worked as a UX designer, alongside a fellow designer and an engineering team.
SOLUTION
Along with my fellow designer, I met with the clients to discuss their vision for KLIP. We accumulated background information that led the clients to this idea. As female runners, they felt unsafe while exercising alone. We determined the following priority needs based on our client meeting: 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. We created the sitemap based on the client discussion, as an initial user flow for the app, starting at the landing page and mapping out the possible user flows.
COMPETITOR RESEARCH
We researched potential competitor devices and apps that shared similar features. These products were often well-conceived and executed beautifully, but they failed to address user needs, as defined by our research. For instance, a mobile app that pairs with a necklace device with a built-in button was not ideal for those who found running with a large piece of jewelry a nuisance. We also researched the competitors’ mobile apps and the most common features. Certain UI elements, user flows, or page organization succeeded within these apps, so we documented and added them to our sitemap. I found that a clear onboarding process was crucial for understanding the process before and during an emergency. Many apps included device visuals during onboarding to indicate the different functions. Some apps integrated a map to display the user's location. We gathered competitors' screens, then updated our sitemap by adjusting the page’s bulleted features and comparing correlating screens.
VALUE MAP
Given out limited time frame, we needed to determine priority features. We organized our long list of features 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. The clients believed it would provide an unmatched tool to discuss safety, resulting in a high ‘user value’ rating. The emergency contact feature has high ratings for both factors since it is a simple feature that fulfills the primary purpose of the product.
LO FIS
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. We based the organization of these screens on the site map and its user flow. We utilized Figma’s components and styles to easily make universal changes to buttons, fonts, and other elements. We created a clickable prototype on Figma with the second lo-fi iteration. I found that the creation of multiple iterations was necessary to fully flesh out the features and organization before moving on to the visual elements in the high fidelity screens.
USER TESTING
We completed thorough user testing on the second iteration of the low-fidelity screens. We utilized Useberry, a user testing website, to upload our Figma prototype and create a testing guide. Our guide prompted users to click through the prototype and 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, such as "What areas of the app did you find confusing?”. We reviewed the resulting data to successfully design the high-fidelity screens.
BRANDING & DESIGN SYSTEM
KLIP’s target user is a female runner, but any runners or users who feel unsafe can benefit from KLIP. The brand and color choices needed to reflect this welcoming, inclusive vision. The clients wanted a genderless, universal brand. Thus we designed a genderless runner figure as the KLIP logo to aesthetically attract users, signify the purpose of the app, and avoid excluding potential users. We carefully selected a specific blueish-purple hue that is bold but lacks societal gendering. The design system reflects a clean, simple interface through the sans-serif typefaces, stark color contrasts, and rounded buttons. We ensured that we had a complete design system that made the client handoff simple and effective.
HI FIS
All of our research, planning, iterating, testing, and re-iterating consolidated to create the final product, the high fidelity screens. The hi-fis include the following features: onboarding, home, settings, contacts, community feed, and resources. We ensured efficiency through the use of Figma components and maintained a consistent use of text and color styles. We utilized the design system in the hi-fis, as well as the KLIP branding. After completing all high fidelity screens, we created a full prototype on Figma. This allowed us to demo the app for our engineering team and the clients. We configured the designs in a meticulously labeled and organized Figma file for the clients. Every step in this design process was essential. All research and testing provided critical insight on what features we needed and where our usability fell short. The utilization of components and styles resulted in a clear, efficient design process with complete continuity throughout the designs. The cultivation of a design system and hi-fi catalog resulted in a successfully designed app and seamless hand-off.
ONBOARDING
Includes the launch screen, KLIP mission onboarding, and KLIP device onboarding.
LOGIN/SIGNUP
Includes the login, signup, and forgot password screens.
CONNECT DEVICE
Includes the connect device loading, devices found, device selected, and device paired screens.
CONTACTS ONBOARDING
Includes the manual and import contacts onboarding screens. Users add 2 emergency contacts now and can always add, edit, or delete contacts later. These contacts will receive messages when the KLIP device is triggered.
PIN ONBOARDING
Includes the PIN setup prompt, enter PIN, confirm PIN, and pin success state screens. The user's PIN can be changed later in settings. This PIN will be used to deactivate alerts.
HOME
Includes the home page. From home, the user can view device information, open a device feature review tap through, start a run, or access community and settings on the navigation bar.
RUN MODE
Includes the run mode default state (emergency button before activation) and the different states after triggering alerts. A single button press will alert contacts and a double press will alert local authorities. Alerts can be deactivated here.
COMMUNITY & RESOURCES
Includes the community and resources pages. The community page contains an anonymous feed with upvotes, replies, and shares. The resources page contains hotlines and links.
CONTACTS SETTINGS
Includes the contacts settings. The user can add, edit, delete, or view their emergency contacts. The user can add contacts manually or import directly from their phone.
SETTINGS
Includes the alert message, PIN, alert delay, test alert, and other device settings.
CLICKABLE FIGMA PROTOTYPE
Click through the Figma prototype below. I recommend entering fullscreen via the icon in the top right of the prototype.