Hyundai Blue
Link App Redesign

OVERVIEW

According to April, 2020 statistics, Hyundai owns 8.9% of the global automobile market share. People owning a Hyundai vehicle do not engage with the associating Blue Link app as much as apps built by other manufacturers. My team and I set out to understand the problem, and redesign the app to improve its discoverability and experience. Our main challenge would be to identify the primary features essential to drivers.

DURATION

5 weeks

(SCHOOL PROJECT + INDUSTRY SUPPORT)

PROJECT TEAM

Dave M.R. - Senior UX Engineer, Hyundai Motors, Industry Client
Andrew Fogas, Melissa Carson, Victor Rosales - Human Systems Engineering Students
Joshua Dunne, Adhvik Madhav - User Experience Students
Prof. Russ Branaghan - Associate Professor, Human Systems Engineering, Project Mentor

PROCESS

We followed the design thinking process of research, design, and testing. Our goal would be to conduct an A/B test and measure task times. I sketched out ideas based on the team's input and volunteered to design the prototype. Our test was successful with ~85% reduction in task time.

DEFINE THE PROBLEM

" How do we help Hyundai vehicle owners recognize the convenience of the app, and improve the experience for new drivers? "

Following the UX lifecycle, we will divide our timeline completing 4 stages. Times given for each stage of evaluation are conservative, which will account for a margin of error if time estimations are incorrect.

FINAL
DESIGNS

Password reset process

A straightforward approach to resetting forgotten passwords. The user does not have to leave the app at any point in the process. After setting a new password, the user can directly login without having to refresh.

Climate control

Access to the climate settings is now easier than ever. Just tap on the temperature icon on the homepage, and set the desired temperature. The user can toggle front and rear defrosters too.

Doors control

An intuitive way to control all 4 doors individually. The user can unlock/lock all the doors with just a swipe. The swipe action is a clever way to prevent accidental taps on the phone.

Low battery responsiveness

When a user's vehicle falls below a threshold, they can search for nearby stations with just a tap. They no longer have to panic on seeing a red alert. Providing instant solutions on the app will greatly reduce thinking time.

Fixing the sign out button

Users will not have to think before tapping sign out. The button is more prominent and spatially separated from the rest of the menu.

VIEW PROTOTYPE

PRODUCT RESEARCH

Essentially, by working with users both directly and indirectly our team will narrow down true problem areas and ideate on a solution which may be more cost effective and feasible.

To identify areas that need to be redesigned and tested, I helped my team evaluate the app using our own heuristics and intuition. Here are some of the issues identified.

The temperature shown here is not from the inside of the vehicle, but atmospheric temperature.

This confused us as we were expecting the vehicles to be at a comfortable temperature.

The image of the vehicle displayed is static and has no functionality. The image may not accurately depict the exact vehicle owned by the user.

It isn't clickable and occupies unnecessary screen space.

Distance to nearest charging station isn’t shown in conjunction with battery level and range.

If the user's vehicle is running low and there aren't any stations nearby, the user is stranded and will have to call roadside assistance.

Instant knowledge of the nearest charging station is critical.

However, here on the app, this feature is found one level deeper.

The process to reset a password takes the user out of the app. This breaks the user flow. Password can only be reset in the mobile browser, and this isn't intuitive.
The entire process needs to remain within the app.

Location of the car is important to the user, but the app has this option one level deep. Users have often missed this feature.

Location of car should be accessible on home screen.

The key takeaways are,

  • Many immediate functions like the car's location and temperature had to be searched for.

  • Users shouldn't have to exit the app to complete their tasks.

  • Users cannot find the nearest charging station when required.

  • The homepage has many components that are redundant, the layout needs to be redesigned.

DESIGN SOLUTIONS

Design Inspiration

When it comes to mobile interfaces for automobiles, the first brand that anyone thinks of is Tesla.

Their minimal dark mode theme looks very modern and effective. The one-tap controls on the homepage is a great feature and can be incorporated in our redesign. The interactive car at the center of the screen is very intuitive and shows the status of the car from all sides.

Another great app is General Motor's Onstar. Indicating the tire pressure is a great addition to visualize the status of the car.

The fuel level bar shows a lot of information in a compact space. This layout can be extremely useful to our redesign,

Sketching & Ideation

Password reset

One of the issues faced by users was to reset their passwords. Our concept would have this entire process within the app. The sketch below depicts the rough user flow. The user would have to leave the app to obtain the verification code, but other than that, they wouldn't need to close the app.

Homepage Mark I

  • We have added some interactivity to the car image. Tapping on a particular section opens up a virtual remote to control that section.

  • We were thinking of adding a 360° image of the car. Users can rotate to see statuses on all sides.

  • Presently, we feel the homepage is a bit too crowded when including the gear status and the 3D icon. We need to remove the search bar and fix certain icons that break convention.

Homepage Mark II

By rating the features that are most important to drivers, our new homepage feels easier to use. We have included temperature and location settings right at the top.

Sign out button

We fixed the sign out button to be more prominent. We placed it at its standard position, i.e, at the bottom of the navigation.

Vehicle Interaction

We decided to get rid of the 3D rotating image. An aerial image will give users the same functionality and cut down on loadi time.

Climate Control

Tapping on the internal temperature on the home screen leads the user to this page. Here they can set temp. and toggle defrosters.

Low battery responsiveness

The app dynamically calculates the distance to the nearest charging stations and whether the car has sufficient battery to get there.

If the car is on low battery, the user is notified by a popup. The user taps on this, and is taken to a navigation screen.

Prototype Screens & The Mess

Final Mockup

USABILITY TESTING

A/B Testing

Recruitment of participants for this usability test were limited to those within proximity of the researchers. All participants did not have any prior experience with the App. 6 participants were used in the usability report for the Hyundai Blue Link App.

3 participants started the test on the blue link app and 3 on the wireframe. Varying the platform with which participants started first helps counterbalance any learning effects.

Users were asked to complete three tasks, and the time taken for each task was measured.

  • Set the internal temperature of the car to 66ºC.

  • Unlock the driver side door.

  • You have forgotten your password, follow the process to reset it.

We observe significant improvement in the task times. The time taken on the wireframe does not include overhead time like loading, database access, server calls,etc. Users completed the tasks 88% faster on average, and found the prototype to be more efficient and intuitive.

Here are some of the comments made by the particpants during the test,

" I should be able to change my temperature on the home screen. On the wireframe, I saw the Fahrenheit and figured it out right away how to set the temperature."

" To me, grey means deactivated and you shouldn't click on it. On the wireframe, it was pretty easy and what I would have expected. "

" This is f***** up. Things look clickable but are not on the app. On the other hand, this process is pretty straight forward on the wireframe. "

Post-test questionnaire results

After the completion of the tasks, users were asked to rate the app and the prototype on a scale from 1 to 5. This was done to obtain qualitative data; to compare the ratings and identify areas where our prototype failed.

WHAT I
LEARNED

I wasn't totally satisfied with the way this project transpired. It had nothing to do with my team members. They were amazing people and it is always great to work with different perspectives. The process itself felt clichéd. I did however, enjoy designing the prototype in Adobe XD. It was some of the best work I've done and received numerous praises. We got to present our findings to Dave and he was genuinely impressed. I believe he may wield some of the ideas we came up with.

Given the possibility of continuing the project, I would like to

  • Test the prototype even further. To see if Hyundai drivers reach for the app instinctively.

  • Research on other physical functions that can be made virtual. The possibilities for an electric car seem endless.

  • Test the prototype with non-Hyundai drivers to compare and identify features that are unique to us.

  • Work for Hyundai Motors to bring our prototype to millions of drivers.