The Situation

Background

TrackR is a consumer-facing tech company that uses a mobile application and a physical device to help people keep track of their belongings. It has been a goal to redesign the app experience ever since my first day on the job.  From the map showing where your item was last seen, to the way we onboard new users, we wanted to redesign the user experience and make it less confusing and more enjoyable.

The Problem

The question we continually asked was how can we accurately and effectively communicate to our users how close they were to their devices. We needed to find a solution while taking the current technological limitations of our products into consideration as well as our different personas physical or mental limitations.

Our personas ranged from young individuals who were familiar with different technologies to older adults with limited technological experience and or disabilities.

The Original Design

Solution/Goal

As you can see from the image above, the original design indicated distance using green bars in the shape of a circle along with text. The more bars that were full, the closer one was to their device. From early user testing, we found that the increasing and decreasing green bars were confusing. In order to make this interaction more intuitive, we needed to replace the current visual representation of the user's distance with something else.

Challenge

Our challenge was to figure out a better way to communicate the distance from a user's phone to their TrackR device. Since the only information the app receives from the device is the strength of the bluetooth signal, we had to figure out the best way of using that small piece of info to show proximity. It was this constraint that challenged us the most but at the same time helped us come up with a unique final design.

User Research and Interaction Ideation

Research and Testing

At the beginning, we decided to do some usability testing and see how our users felt about our original app. The main problem we kept seeing was that people didn't know what the green bars indicated. A lot of the time they thought the bars represented volume and would try to tap on the bars only to find that nothing would change.

We also found that users would try to zoom in on the map and see the exact location of their missing item. However, because we were using Bluetooth technology, the map would only give an approximate location rather than an exact one which would frustrate the user.

Whiteboard Idea Session

Interaction Design and Brainstorming

We were able to come up with ideas on how to transform the current design and make it more intuitive, simple, and even fun. Above are some of our notes that we created that were based on the data from our user testing and user interviews.

We discovered that by using video game hud UI designs as inspiration, we could transform the searching experience from something that could be stressful into something that was fun and engaging.

For the new interaction design we decided to try and communicate distance with,

• Color (Visual)

• Sound (Auditory)

• Vibration (Kinesthetic)

We found that when people are searching, their eyes are often not on their phones. Users tended to look around the room instead of looking at the app. Because of this we decided make the app experience usable without looking at the phone. This would not only make it easier for average users to find their lost items, but also make it easier for users with disabilities as well, making our service more accessible to more users.

Mockups

Wireframes

We then created some simple mockups using Sketch, Axure and of course a pen and paper. We presented the mockups to the product design team along with an outline of how we expected the new experience to work. We hoped that with the new design it would not only be an improvement to the look of the app but also to the feel of the app.

Notebook Wireframes

Interaction Goal

For the new interactions, we wanted to keep the map component as an overall summary of the device location. However, we also wanted to use a new “Searching” experience once the user got close enough to the device. We put together our ideas and showed the product team how the experience was supposed to work. There were three components to our new interaction redesign,

• The Visual Component

  • Use colors to indicate to the user how far or close they are from the item they are trying to find.

  • Use circular pulses to show radar-like proximity.

  • Use text to describe a user's proximity with phrases that are accurate but not too precise so as not provide the user with false information.

• The Auditory Component

  • Use a sound different from the one emitted by the TrackR device to indicate to the user where their item is located.

  • We came up with the idea of a sound similar to a heart beat or a pulse to evoke a positive, exciting, emotional response when the user was interacting with the TrackR app.

• The Kinesthetic Component

  • Use vibrations from the phone to match the pulse-like sound.

  • As the user gets closer to the device the vibrations or heartbeats speed up, mimicking the human body's natural response to excitement.

The New Searching Experience

Improved Distance Indicator

The main goal of the redesign was to figure out a new way of communicating proximity. Based on our research and mockups, the company decided to build the new experience with the new color interaction first and then possibly build the other interactions later down the line.

We delivered our work to the Sr. Product Designer who took our designs and transformed them so that only the color interaction was part of the new release. Below is the current, live app experience that combines the Sr. Product Designer's design and our interaction work.

First Part of the New App Interaction

The Emotional Goal

Even though not all of our ideas were included in the new release, the idea with was to create an overall interaction that targets the human senses. The closer the user gets to their device, the more the visual, auditory, and kinesthetic interactions change, creating a more immersive experience that includes many of the bodies senses. This then will hopefully, with continued user testing, show the creation of an emotional bond between the user and the company.

The Accessibly Goal 

On top of trying to create an emotional and easy to use interaction, we wanted to try and make the app experience more accessible. By having multiple types of interactions we are allowing users with different disabilities to interact with our app and product.

The idea is that users who can't hear, can feel the vibrations and see the changing colors while the users who can't see, could theoretically use the vibrations and different sounds to hone in on their missing devices.

Continued improvements 

This was the first of many updates. The overall goal is still to improve the user's journey of finding a lost item. Continued improvements will be researched, designed, and tested to see if there are any further updates we can make. It is our professional and personal goal to make sure the user's experience with our products is world class and most of all, enjoyable.