Bear Tracker. Sports activity tracker

Project background

I was searching for a running app for my Wear OS watch, but each one had major drawbacks: no support for an external heart rate monitor, no Strava integration, or no interval training settings. Days of searching led to frustration and discouragement — how could developers miss such important features? However, I decided to give Gear Tracker another try and spent time figuring it out. After a few hours and with the help of the app's website instructions, I realized it could meet all my running needs.

My motivation

The fact that the app had all the features I needed but was difficult to master inspired me to create a redesign project to develop the best running app for Wear OS.

Project goals

  1. The primary goal of my redesign was to simplify the onboarding process for new users.

  2. The secondary goal was to create a more friendly and appealing visual identity. In a conversation with the developer, I learned that he was dissatisfied with the app's name and its main icon.

Process

When I started the redesign, I found out that the developer was working on the app alone and wasn't ready for a redesign. So, I decided to create the project at least for my portfolio.

I identified pain points and UX patterns that could pose challenges for new users. Based on these insights, I designed a new version of the app and created a prototype in Figma. I then conducted user testing with runners who had never used the app before to understand how difficult it would be for new users to get started and to validate or refine my assumptions.
It would have made more sense to conduct user testing before the redesign, but I didn't initially realize how far I was willing to go with this project.

App feature

The app looks nearly identical on both the watch and phone, offering the same features. It's essentially the same app with slight adjustments in element placement due to the watch's screen size. The developer stated that this approach is convenient and saves time since it allows him to create one app for two devices with minimal changes rather than two separate apps. I adhered to this same idea when creating my project.

Example of usertest

Project tasks:

1. Make the settings icons more visible

2. Improving of Action menu

3. Make the layout settings clearer

4. Changing the name and designing a new logo

1. Make the settings icons more visible

Problem

The icons of the gear and slider are located in an unusual place and are quite small. They don't feel like interactive elements. When you look at the switching icon, it's hard to remember which icon will appear next because there are so many of them. As a result, it's easy to miss the icon you want.

Task

Make the icons of gears and sliders the same size as other interactive icons. Keep them separate from the leading icon.

Solution

Place the icon on the right. The icon fits on the watch screen.

Expected outcome

The icons have become more noticeable and it is easy for a new user to find the gear icon, and it is easy to understand that the icon is interactive. In the intervals, I was successful to get rid of the slider icons, and the interface became more familiar.

Before

After

2. Improving of Action menu

Problem

  1. An unusual pattern with a pointer and a second click. It is not usual that after clicking on the icon, it seems that nothing is happening. And to find out the names of all the functions, you need to call them all in turn.

  2. Non-informative icons do not correspond to the meaning, and sometimes the same icons add complexity to the user's path.

Task

  1. To design the layout of the action menu functions so that all the names are visible and so that this layout can be easily reused for all similar menus.

  2. Develop icons corresponding to the functions.

Solution

A simple list of functions is the best option, considering that the function names can be long and may be in different languages. The menus, which allow you to move and add items, have arrows located at the top in a row.

Of course, this list won't fit on one screen of the watch, but the main setup will happen on the phone. The watch will be used for quick access to the settings in case the user forgets to adjust something.

Expected outcome

The user will quickly find the functions he needs and will not have to solve the puzzle.

Before

After

3. Make the layout settings clearer

Problems

  1. It's not immediately clear that the indicator field is interactive.

  2. The wavy line, tilde, can leave you feeling confused when trying to understand its meaning.

  3. When you open the Edge layouts screen for the first time, it's not obvious where you are in the system, what you can do here, or how it can be useful during your activity.

  4. The upper parameter from Edge layouts either closes or is located too close to the name of the upper parameter from Main Layouts.

  5. a) The font used for the parameter name is difficult to read, especially on the watch.
    b) It's not clear which parameter the name refers to — it's exactly in the middle between the indicators.
    c) The natural movement of your eyes from top to bottom is disrupted when reading the text. The numbers catch your eye first because of their size, and then your eye turns to the small name of the parameter. The movement of your eyes is from the bottom up.

Tasks

  1. Show the interactive zones of each parameter field

  2. Come up with a clear designation for an unselected parameter.

  3. Make the transition to the editing edge layout and its editing clear and convenient

  4. Change the layout of the parameter block, for better readability, and …

  5. ...to eliminate the overlapping of elements on top of each other.

Solution

  1. Show interactive zones with a light highlight. Highlighting too much will make it difficult to understand what the layout will look like during the activity.

  2. Use the "+" sign to indicate that you can add a parameter.

  3. Combine Main layouts and Edge layouts on the same screen and place them on different tabs.

  4. 5. Bring the numbers and the parameter name closer together, increase the font size of the parameter name.

Expected outcome

After opening the screen, the user will understand:

  1. what can I click on in the indicator field …

  2. .…even if the indicator is not selected.

  3. that once on the Edge layout tab, he can add and edit parameters along the edges of the screen.

  4. 5. what parameter has already been selected, and which parameter the name refers to

Before

After

4. Changing the name and designing a new logo

Problems

The first version of the application was developed for the Samsung Gear series of watches. Samsung watches are no longer sold under this name, but the name of the application remains, so the developer has a feeling that the name is outdated. The developer also had a feeling that the logo was very dry with small details and it would be good to add emotion to the logo and name.

Tasks

Develop an attractive logo for beginners in running

Solution

I learned from experienced runners that they often choose watches from brands that specialize in tracking sports activities. The watch on Wear OS is used by people who were looking for a smartwatch and only later became interested in running. So, these are probably not experienced runners.

Therefore, I decided to choose the image based on the idea that the logo should be cute and appealing to beginners in running.

Expected outcome

More users will download the app. Users are happy and touched to see that a cute but determined bear gets in motion when downloading the application.

Before

After

Create a free website with Framer, the website builder loved by startups, designers and agencies.