MyDrive
A new pairing process for TomTomers

ROLE
TEAM
CLIENT
TIMELINE
UX / UI Design
Interaction
Animation
Illustration
‍
Wenjia Wang
Dusanka Prevulovic
Peter Reimer
Paige Lucas-Dean
Booking.com
Dec 2021 - Feb 2022

CLIENT
TomTom

TIMELINE
4 months

TEAM
Wenjia Wang
Marianna Bonellou
Jessica Galvao
Kristiady Hidayat
‍

ROLE
UX / UI Design
Animation

TomTom’s MyDrive app was made years ago to help TomTom owners connect their device to the internet and get the all important real-time traffic information. But the app is difficult to pair with the device, offers a few outdated functions and is confusing to the users.

In this case I talk about updating the process of pairing TomTom SatNav and the app. I’m responsible for the interaction and visual design of new features and ensuring that our engineers implement each feature correctly.

Challenge

Our challenge was to revamp an existing app and give our very specific target audience, men, aged 55-65, who already owned a TomTom navigation device, the best possible experience. This meant finding all the pain points and areas with which we could provide new solutions, while at the same time staying within the brand’s identity.

The goal of our redesign was to reduce the likelihood of user connection failures. In addition, we want to provide a smooth experience for loyal TomTom users.

How I got there

Research

We read TomTom research materials and comments from platform to understand the usage and feedback of the product by the target users. Secondly, we visited several shops that sell TomTom devices, such as BlueCool and Media Market, and spoke to staff to find out what help TomTom purchasers were seeking.

We also conducted an in-group user experience analysis of the current MyDrive app. Most importantly we took Situated Design: We spent a day staying with users, dividing each page of the app into key tasks and looking at any pain points associated with users completing these tasks. We combined our findings with research data provided by TomTom to create a user journey map to help us visualise user experiences and interactions during the pairing process. This helped us to identify where we wanted our solution to intervene.

Benchmarking

The study of directly and indirectly competitor has allowed us to understand how to match within the limits of what technology allows and to be inspired in the design phase.

We chose several products to analyse. For example, Garmin, a direct competitor offering the same navigation and mapping services, Bose Connect, a Bluetooth headset connection app, and Sonos, an app for connecting Sonos audio devices.

Interview | Survey.

we were analyzing data and making an affinity map.

We interviewed 10 young people to collect qualitative information for an in-depth understanding. The participants were around 20-25 years old and had travel experience.

Our interviews found out how the younger generation searches for travel information and plans their trips. We also found out about the current shortcomings of the Booking app.

In addition, we learned about the apps that are popular among the younger generation, such as Tiktok. Further analysis of these apps allowed us to understand why users like to use them and learn from them.

Most important insights

Research

Different TomTom devices use different pairing processes. Older models of devices connect to the app via Bluetooth technology. Newer devices support Bluetooth, WIFI and 4G.

We default to Bluetooth as the primary technology used for the pairing process for several reasons: Older Tomtom Devices only support Bluetooth; Users are more familiar with Bluetooth; and technical constraints.

‍

Situated Design

Users focus on only one screen
Users only focused on the app when trying to pair. They missed the pairing button on the TomTom device.

No Feedback
There was no message telling users that they need to tap the button at the same time.

Have to jump out of the App
Turn on Bluetooth and find a TomTom device that happened to be outside of the MyDrive app.
‍
More visualisation
Text-based guides can be difficult to follow and remember.

Benchmarking

Visualization helps user to match faster.
‍
All apps remind the user to turn on Bluetooth, some products ask the user to jump to setting to turn it on, and a few allow the user to turn it on directly in the app.

‍
‍

1. The pairing process needs to be simplified to avoid the user's use of the process outside the app as much as possible.
‍
2. The user needs to be prompted and given feedback whenever they complete important steps.
‍
3. Visualization.
‍
4. Redesigned the UI to create a visual connection between the app and the TomTom device.

Findings.

Travel decision making

We were able to identify 6 key points that are the most decisive drivers in Gen Z's online travel planning:

  • 85% of participants prefer to create their own personal tour rather than a package tour.

  • 98% of participant will compare before booking.

  • 80% of respondents claim they enjoy sharing and getting holiday inspiration online.

  • 76% of participant prefer the dominance of pictures and videos over text descriptions.

  • 90% of participants cited budget and location as the biggest considerations before traveling.

  • Sharing journeys and socializing have become part of the lives

Functional, but boring

We tested and asked the target group about their experience of using the current Booking app.

  • The UI style is very commercial, users like a more youthful, lively style.

  • They quickly lose patience with the complexities of filter.

  • The attraction recommendation page is filled with a lot of text, which is not attractive to users.

Created for TomTomer

Through our preliminary research we learned that the user pain points were in connection, user instruction and feedback. Therefore, we conceptualised this several times using methods such as Crazy 8 and the Lotus Blossom method. Our problem space is quite open, so we wanted to conceptualise as many different concepts as possible so as not to limit our solutions.

We conducted an intra-group assessment and listed the cons and pros of these concepts.  After taking into account technical constraints (Bluetooth technology must be used), design constraints (no right to change the UX design of the TomTom Device) and commercial considerations (Cost), the final design was selected after comparing the advantages and disadvantages of the different concepts.

Iteration
Testing

At the Low-Fi mockup stage, I could connect my user flow and wireframes to better understand possible difficulties between flows and tasks.  solved some problems like button size to increase the usability for my test with real users.
‍
I invited 11 people that way I could analyze their perspective, observing pain points and actions on usability and desirability of the product, in order to have a clear process to follow and compare results.

Visual Design

We took inspiration from TomTom device's interface and regrouped a set of color palette and elements to make MyDrive app consistent with Device's interface style.

Considering the usability and accessibility of the interface, I used the WCAG 2.0 standard to ensure that the color palette was sufficiently accessible and referred to the Human Interface Guidelines to determine the size of the design elements.

Timely feedback and tips

We have added tips and feedback pages so that users know exactly what to do next.

Seamless journey without external operations

The button to turn on Bluetooth exists in the app, so our users don't need to jump to the phone's settings page, making the experience more seamless.

Easy-to-follow operating instructions

Visual user guides make it easier for users to remember and understand.

It's not the End...
Further UI exploration

At the end of the project, I conducted further UI exploration. This was based on an idea the client had：Designing an Amigo style UI. This part is still in progress.

Reflection ‍

Overall, the project was very interesting - designing a new pairing process. As someone less familiar with pairing technology, I had to learn a lot through research to depth understanding. Situated Design was key to being able to sympathize with users, especially since I did not yet have those experiences. What I also found amazing was that older adults are not as far removed from new technology as I had assumed.

View Next Project
Trip Board
01
Projects
Projects
02
Animations
Animations
03
Illustrations
Illustrations
04
About
About
02
About
03
Blog
03
Contact us
WENJIA WANG.
Menu
Close