DOPPEL

App Redesign

Doppel is a revolutionary wearable that works with your body so it can actually alter your mood to make you more alert or feel relaxed.

It is worn on the inside of your wrist and is synced with an accompanying app which controls it. The device emits a vibration that feels like a heartbeat. Your brain responds naturally to the rhythm – similar to listening to upbeat or, alternatively, calming music.

THE PROBLEM

The original Doppel app was created for iPhones. It wasn’t a user-centric design and with production of the device imminent, the company approached me to review and redesign an enhanced app interface.

It was key that the app was simple to use for all user types and catered for all their requirements.

THE PROCESS

I started by doing some research on the users and their main goals. To get some insights, 
I conducted a few informal testing sessions, analysed several design issues and then prioritised the key areas where the app needed to be improved.

I created a sitemap for the new design as well as user flows which were developed into wireframes. A new visual interaction design approach plus a UI Kit were created to support this. I then used Sketch and InVision to create an interactive prototype.

DISCOVER

What are the user needs?

I identified several user needs for the Doppel app, including:

Staying calm during public speaking or presentation

Wanting to kick-start your body for a long day at the office

Somebody under pressure at work to meet a deadline

Student revising for an exam

Winding down at the end of a long day

What are their goals, when using the app?

Create an account to easily pair the device.
Capture the user’s resting heart rate or enter it manually.
Access a set of predefined rhythms, based on heart rate.
Change the predefined rhythms, create new ones and save them.
Sync their chosen rhythm with the device.
Find help when unsure how to use the app 
or device.
Control the device through the app interface, as well as 
the device.

I then needed to test the current app to see how it performed with these goals in mind. This would also provide further insights into the design issues.

TESTING THE CURRENT APP

Three people were chosen from a list of early adopters which Doppel provided.

Informal user testing sessions of 15-20 minutes were held using an iPhone and a Doppel wearable.

INSIGHTS FROM TESTING

Overall, the participants managed to get through the set tasks, although they struggled with working out how to use several features of the app. The main points were:


Sample screens from the current app that was tested.


  • Lack of clarity regarding what could or couldn’t be interacted with or what 
were buttons.
  • Confusion over what the icons do or where they take you within the navigation as there are no labels to identify them.
  • Overload of information and the help section was not easy to understand.
  • The look and feel was not that of a professional app. It had an almost home-made look.
  • The use of capital letters makes some things hard to read.
  • The diagrams were clear when trying to set up and pair the app.
  • The graph illustrations were well received.
  • Users liked controlling the illustrations although it took a while for them to realise they could use their finger to adjust them.

DEFINE

I evaluated the insights and defined three main pain points that would lead the design direction for the revised app:


1. Interaction and Visual Design

This was the primary issue. Users were confused about how to interact with the app and how it controlled the wearable. Some users commented that the look and feel was unsophisticated. A new UI Kit and design principles were established plus clear and simple interactions and properly labeled navigation were created.


2. Information Architecture

The app was tricky to navigate and the information architecture needed a full review. 
A card-sorting session was undertaken to establish where the main site content should sit, with a new sitemap created to illustrate this.


3. Content Review

Several users commented that the app instructions were confusing and screens were too text heavy. A review of the content on each screen was undertaken including the illustrations to ensure words and imagery balanced as well as making sure there was consistent use of terminology across the app.

SITEMAP

The revised sitemap can be seen below. The primary navigation has been split into 
three main areas - Rhythms, My Doppel and Settings. These are accessed through the bottom tray.

IDEATING THE SOLUTION

I used lo-fidelity UI sketches to hammer out ideas and concepts and did some preliminary validation of these with some users. The feedback helped to refine the concepts ahead of creating hi-fidelity mock-ups.

USER FLOWS

The main flows for the app were fleshed out in Sketch, using the hi-fidelity design screens. These illustrated how the main journeys within the app worked. It also allowed me to identify all the scenarios involved in the journey, such as alert messages, lost internet connection and any potential dead ends in the flow.



1. Sign Up






2. Sign In






3. Editing a rhythm






4. Syncing the app and device




VISUAL DESIGN

I then developed the visual design language. Doppel already had a style guide but the 
app was lacking good typography, defined interaction principles and clear screen layouts. Some of the main changes included the introduction of type hierarchy and the use of 
the colour purple for links. Additionally, the navigation bar icons were labelled and a 
UI Kit created.

UI Kit and Style Guide




DESIGN DECISIONS





Old design




New design


The previous version of the app had no labels on the bottom tray navigation and caused problems during user testing. Labels were added underneath the icons to prevent any confusion.







Old design




New design


The old version of the app lacked clarity as to what was an interaction due to missing button styles and clear visual references as to what could be interacted with.







Old design




New design


Content review: There were issues with the number of text instructions to guide users through the set-up process. Too much copy meant the guidance was overwhelming so this was cut back substantially to make the instructions easier to understand.





PROTOTYPE AND INSIGHTS

Using InVision, the screens were developed into a prototype which can be viewed here.

This was then taken back into testing. Three different people were chosen from a list of early adopters which Doppel had provided. Informal user testing sessions of 15-20 minutes were held using an iPhone.

The same tasks were undertaken as those used in the previous test session. There were a few caveats added to explain that the prototype did not offer full functionality and could not control the wearable device.

Overall, the feedback was positive. Some of the key insights were:

Two of the three participants said the body copy was too small. I agreed and increased it by 2px sizes.
There were no issues regarding navigation after I fixed the tray labels.
Too much content in some places. Despite cutting back some of the text, and introducing the animations, there were still two screens seen as being hard to scan and understand easily.
The new design meant interactions were now clear.
All three participants commented on how the animation in the on-boarding and set-up screens were very useful and helped with understanding the process.
Transitions and overall style were of a standard expected in a professional app.
All testers said they would definitely consider purchasing the device and the app.

CONCLUSION

Doppel is a great wearable device with a well-designed app ready for release. The response to the app was very positive during testing.

Some improvements to be considered are:

  • The app redesign was approximately three weeks. This timeframe is too short to get the best insights from all types of users.
  • More thorough research and testing would probably be beneficial to future releases of the app.
  • Analytical data would be very useful but due to the newness of the app this was unavailable.
  • A further review of how the content within the app is performing would be very beneficial. During the redesign process, the copy was heavily edited and balanced with visual illustrations. However, users found during testing that the copy was still too prevalent on some screens.
  • Additionally, I think the set-up process for the app could be simplified, which in turn would assist with instructions within the app. However, this would require a hardware change so is unlikely to be prioritised for a while.