Wildpatrol. Sport tracking app UX / UI case study

A sport tracking and safety rescue app for mountain and sea sports.

This UX / UI case study is about Wildpatrol, a sport tracking and rescue app developed for a startup as client during my time working at Nacar Design. My role in this project was to work in the UX and UI design.

This article is a summary of all the design process, always from a user-centric approach to design and taking into account the startup requirements.

The briefing

Before the project started, the startup had already done some research based on the actual apps on the market, and also based on research with athletes and other sport app users.

The opportunity they found was on extreme sports or high level athletes, whose needs may be different than the average. Those users may require some medical supervision or, in some cases, even a rescue if we talk about sports like climbing, mountain bike or surfing. Their goal was to create an app that fulfills all these requirements.

The main challenges that we faced at the beginning of the app design process were:

1. Differentiate the app by designing a ‘rescue option’, a super easy and fast way of sending an emergency call.
2. Including a premium option for high level athletes that enables 24/365 communication with a team of doctors specialized in sports medicine.

Value proposition

• An all-in-one app that enables a good tracking of your sport sessions while making you feel protected.
• A friendly and easy to use emergency flow that allows the user to send a fast rescue call if needed.
• Having a powerful way of communicating to the rescue patrol your exact position and the route you followed based on your tracked session, and some information about your profile and even your injury (the more information they have, the better the rescue will be).

The research

Benchmark

To begin the research phase, I started with the competitive analysis. I firstly analyzed the IA, the key features and the user flows needed to fulfill all the requirements.

Not only sport tracking app providers were investigated, but also other elderly people or child tracking apps. The idea was to integrate both functionalities in the same app at the same level, and to design an easy flow in case of emergencies. Those were our main competitors:

One of the most important insights we got from our investigation was how difficult on boarding was on these apps. There are a lot of steps to accept and access from the phone to allow to been able to give a good service to the user, so we though one of the pain points was the first time using the application. We decided this would be one of our design goals: to have an easy on-boarding flow to get a good conversion rate.

User personas

After our conversation with the client and having access to their main insights, I started working on developing two different personas attending on the target we were focusing in, to understand the audience, but most importantly, to be able to make quick but well informed decisions during the processes.

Attending on the main insights of the investigation and conversations with the marketing specialist of the startup, we defined two different personas. One of them, Alex, a lover of extreme sports who use to go out during the weekends for long periods of time. On the other hand, Lola, a young student with an enormous impact on social media who dedicates her life to the sports and actually earn money from it.

User journey

Once the personas were defined, we realized that their current user journeys were different because the environment where they sessions took place were different. Due to that, we decided to develop two different user journeys, one for each.

We detected the way the user would interact with the app may be different depending on the environment; a water activity would make impossible for the user to carry the phone with her, but during a mountain session the user would always have his phone with him.

Key findings

The most important findings of the research phase to take into account during the design process, were:

• There are two different scenarios attending to the user environment. It’s important to differentiate them and to give them the tools they need.
• In water sports, giving the weather status could be an added value for the app.
• The social factor is important for both personas.
• Giving feedback to the user related to the safety operation may calm him during an emergency situation.
• Emergency option should be offered from all the screens.

The solution

Wireframes

The first think we were concerned about was the on-boarding. We wanted to engage users and not loosing them for a bad first use experience. We were not positioned as a known brand so we needed a easy-to-use first flow.

After investigating the different apps on the market, we realized there were lot of steps of information we wanted. For the rescue option, it’s necessary to validate the mobile phone in order to send the rescue message, and this may take some time to the user before seeing the real options of the app.

Our final decision was to make the on-boarding as easy as we could, giving the opportunity to the user to try the tracking option for a limited number of times. The emergency option would remain disabled until the phone validation, and we would include a warning message with this information.

Then, I started to develop the tracking modes. One of the findings of the research phase was that our users may have different needs depending on the environment. For the mountain sports, I designed an easy to use tracking map with two different views: map or data. Once the session reached the end, a resume screen of all the activity would be shown.However, we detected that a sea user may not have his/her mobile with him/her, so we need to ensure his safety in case of accident. To achieve this, the sea mode should include an extra feature: the possibility to set up an estimated duration for the session. If the time is reached and the user doesn’t unlock the phone in the next few minutes, an automatic message would be send to some trusted contacts that the user should have selected before. This feature aims to increase the safety feeling of the user.

However, we detected that a sea user may not have his/her mobile with him/her, so we need to ensure his safety in case of accident. To achieve this, the sea mode should include an extra feature: the possibility to set up an estimated duration for the session. If the time is reached and the user doesn’t unlock the phone in the next few minutes, an automatic message would be send to some trusted contacts that the user should have selected before. This feature aims to increase the safety feeling of the user.

Another important flow was the emergency call. In this case, we differentiated two steps. The first one was sending the basic alert, with the exact coordinates and the route followed. This should be a basic flow in case of extreme emergency. For that reason we just placed a confirmation screen to make sure it was necessary to send the alert and warning the user on the consequences in case it is a fake alert: with just a swipe and a tap you could be located.

But we also designed an easy way of increasing the information sent. Bu introducing an interactive dummy, the user could select the body area injured, so the rescue patrol already have information on the case, making it possible a faster and better operation.

Finally, we finished designing another aspects as the user profile, the navigation menu or different patterns for settings screens.

Flowchart

Once the architecture of the app was closed, we started to develop all the visual styleguide and branding. The main words that should define the app were adventure, sport, extreme and safe. Once I finished with the visual design and all the concept was finished, I developed a complete flowchart for the development team to make it easier for them to understand the app.

In this image, it is possible to see all the screens that establish the full app: the on-boarding, all the tracking screens, the emergency flow, the main navigation menu, the profile, the chat with the doctor and the promotional premium screens and the settings.

The result

The interaction

Finally, I created a prototype for the user tests and the possible iterations of the product. I strongly believe on motion and the animations as an UX tool, so I focused on polish micro-animations as a way of communication. The following video highlights the main features of the app.