02 // CAR TRACKER AND VEHICLE STATUS
AutoLink Premium Current ‘Car Tracker and Vehicle Status’ Screens Analysis
New ‘Vehicle Status’ Screen Design
Again, the chosen car will default to the users main car. However, if there is more than one car associated with the account then the user will be able to toggle between each.
This area will show they key status information about the car and when pressed will open up another drop down screen to allow all expanded information to show.
For the fuel level section, if the car is electric this would show battery status.
This drop down screen is used to display petrol stations and allow a user to search for petrol stations when their fuel level is under 15%.
If their fuel level is low, the text would change, so that it is not indicating low fuel level.
This area is for the car information like tyre pressure, locked of unlocked doors etc.
This area here will display any key information or notifications related to the car or any actions performed.
After completing this screen, and conducting some user testing on the navigation bar and whether the icons were the correct ones for each screen, it was evident that they weren’t showing intuitive enough and the users weren’t sure whether the car icon was to see vehicle statistics or access the remote control.
Hence, I changed the icons to have the car as the vehicle status screen and the home icon as the remote screen as that is seen as the main menu of this application.
This drop down screen is designed to allow a user to see their cars live location and their current location.
When the map is pressed it will redirect the user to the devices preferred map app (apple maps, google maps etc.) and give them directions to their car from their current location.
Connection information is good to have so that the user can confirm that the details displayed are the most recent.
This area shows the weather. Based on research having the weather in this app is very unnecessary. People aren’t opening their car apps to view the weather.
Hence, it was taking up area on the screen that could be used for more important information.
The Eco Driving Score and Battery information is also not useful on this screen and perhaps can be more beneficial in another screen like the statistics screen.
The map shows vehicle location and the users current location which is great.
Again, the swipe function between screens is not very intuitive for this app so I have ensured that the movement between screens is tailored to more of a tap motion whether that be to bring up the overlay screens or to move between main screens.
During research it was found that this was one of the most complained about screens. It is great to see the engine, guard, geo-fencing and valet icons here, however, they are not usable. A user is not able to click on them to turn the engine on or off or to turn the valet function on or off.
This functionality is found in the menu item accessible from the home screen right at the bottom via a toggle icon that is not at all labelled so unless it is pressed, a user wouldn’t know what its function is.
Currently there is no “Onboarding” user experience in the Hyundai AutoLink Premium App. From the moment the app is opened, the user is prompted to log into their ‘myHundai’ account. Once that is completed the user goes straight into setting up their car with the app. There is no explanation of how to use the apps features at any point or what they are to expect within the app in terms of what it can offer them.
New ‘Onboarding’ Screens Designs
SCREEN 05:
SCREEN 06:
Design Rationale:
Clear & Concise Messaging: The text on each screen is intentionally brief and to the point, ensuring users are not overwhelmed with information during onboarding.
Consistent Tone: The language used across the screens is friendly and supportive, aimed at making users feel comfortable and confident as they navigate through the setup.
User Guidance: The onboarding screens are structured to guide users through the app’s most important features, ensuring they understand the value and how to use the app effectively.
These wireframes represent the initial design concepts for the onboarding process of the Hyundai AutoLink Premium app. The goal of these screens is to smoothly introduce new users to the app’s key features and help them get set up with minimal friction.
DESIGN SYSTEM
Ag
Hyundai Sans Head Office
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
#012C5F
#00142D
#322208
#1F9EBA
#9ADCED
#000000
#1C1C1A
Heading 1 (Bold)
24px
Heading 2 (Bold)
20px
Subheading (Bold)
16px
Subheading (Regular)
16px
Body Text (Bold)
12px
Body Text (Regular)
12px
COLOUR PALETTE
TYPOGRAPHY
COMPONENTS
ENGINE
START
ENGINE
STOP
High-Fidelity Designs
ONBOARDING
Simplified Onboarding Process:
First-time users are guided through a smooth onboarding experience, making setup and familiarisation with the app's features easy and intuitive. Interactive tutorials and tooltips help users feel confident from the start.
REMOTE
VEHICLE STATUS
Streamlined Remote Control:
Easily access essential vehicle controls like remote start, door locking, and climate management. The redesigned interface ensures that users can operate their vehicle effortlessly from their smartphone.
Comprehensive Vehicle Status and Enhanced Location Tracking:
Stay informed with real-time updates on your vehicle's health, including fuel levels, tire pressure, and engine status. The clean and organised layout provides critical information at a glance.
Keep track of your car's location with improved map integration and security alerts. Whether parked in a busy area or on a road trip, you'll always know where your vehicle is.
Iteration Based on User Testing
1
Feedback when an action is performed
Based on the user testing we conducted, it became evident that the current Hyundai AutoLink Premium app design imposes unnecessary friction in the user experience. Specifically, after every action, such as locking or unlocking the doors, users are prompted to re-enter their code.
This requirement is redundant, particularly if the user has already logged into the app. Our testers expressed frustration with this repetitive step, which they felt slowed down the process and diminished the convenience of using the app remotely.
To address this, our redesign will introduce instant visual feedback for all remote actions. This change not only eliminates the need for constant code re-entry but also provides users with immediate confirmation that their commands have been successfully executed.
By streamlining these interactions, we’re enhancing the overall user experience, making the app more intuitive and efficient for daily use.
Reflection
Working on the Hyundai AutoLink Premium app case study provided significant insights into the complexities of improving existing features.
Focusing on a few key elements that I identified as problematic during initial research, I encountered several challenges. Simplifying the complex user interface while retaining necessary functionalities required a deep dive into what functions were used by users the most frequently.
The user setup process also proved difficult, as creating a seamless and intuitive onboarding flow was harder than anticipated. Integrating essential features in an easily accessible manner demanded a deep understanding of user needs and behaviours, which was another area of struggle.
The limited time frame of this project was a significant constraint. With more time, I could have conducted more comprehensive user research, involving a larger and more diverse group of users to provide deeper insights and accurately identify pain points.
Spending additional time on prototyping and testing different design iterations would have allowed for the early identification of usability issues and more effective refinement of the design.
Enhanced user onboarding through interactive tutorials and step-by-step guides, a more iterative design process with regular feedback loops, comprehensive usability testing, and a focus on accessibility would have significantly improved the final outcomes.
This experience underscored the importance of an iterative design process, continuous user feedback, and a holistic approach to creating user-centric solutions, which I am committed to applying in future projects.
Next Steps
Suggested Future Improvements and Features:
1
Customisable Dashboard
A customisable dashboard would allow users to tailor their app experience by selecting and organising the features and information most important to them. This feature would enable users to create a personalised interface, where they can choose which elements—such as fuel level, battery status etc.—are displayed on their home screen.
2
Other Remote Services
Open/Close Windows and Sunroof: Users could remotely open or close windows and the sunroof, allowing for quick ventilation before they enter the car or in case they forgot to close them after parking.
3
Multi-Car Management
For families or companies with multiple vehicles, the app could manage all cars under one account, allowing the owner to track usage, schedule maintenance, and even allocate driving privileges.
01 // REMOTE CONTROL
AutoLink Premium Current ‘Remote’ Screen Analysis
Design Ideation and Mid-Fi Wire-framing
The current remote screen features a selection of buttons that perform different remote actions for the car and then a section that the user can click on to navigate to the climate control section.
The way a user navigates through some of the most important screens that are used almost every time the app is used, is by sliding across the screen.
Many times this creates problems as the interactive components on the other screens cause the user to miss tap on things they did not intend to when trying to simply navigate from one screen to the next.
As a solution to this the new design removes this all together and reshuffles the navigation bar at the bottom of the screen to ensure all daily used screens are easily accessible.
At the moment, a user needs to click on the climate control section at the bottom of the remote page to navigate to this screen.
There are not that many things happening here that constitute the need for all of the additional navigation and clicking.
Hence, in the new design I have removed the separate climate control screen and added its contents to the bottom of the remote screen
When a user wants to perform an action they must hold down on the button until the circle fills up and then they are prompted the enter their app passcode to send the function to the car.
New ‘Remote’ Screen Design
Test of remote screen and climate control navigation to see how current design is working.
The chosen car will default to the users main car. However, if there is more than one car associated with the account then the user will be able to toggle between each.
I think the engine start button visually representing the Hyundai Push to Start button was a nice touch in the original design. As a result I have kept it, so users still have the experience of pushing the button to start their car even in a virtual space.
Rather than changing between screens to control the climate of the car, having all the main ‘remote’ resources on one screen allows for easier navigation and accessibility.
Navigation bar has been changed to include only the most relevant screens to a user of this app. Things like maps and the ‘My Hyundai Home’ screen have been removed as they are not accessed by users on a daily basis.
The new navigation bar includes: car tracker, driving history, remote, vehicle management and driving statistics.
03 // ONBOARDING
AutoLink Premium Current ‘Onboarding’ Screens Analysis
INFORMATION ARCHITECTURE
Existing Information Architecture:
Information Architecture for Re-Design:
USER PAIN-POINTS
1
Users struggle with finding and utilising key features within the app. Tasks such as remote start, vehicle health monitoring, and navigation are buried in menus or not easily accessible, causing frustration and reducing the overall usability of the app.
2
The initial setup process for the app is cumbersome and time-consuming. Users experience difficulties in pairing their devices, configuring settings, and personalizing the app to meet their needs, resulting in a poor onboarding experience.
3
The current UI design is overly complex and lacks clarity. Users are confronted with a cluttered layout and insufficient visual hierarchy, making it difficult to navigate the app and access important features quickly and efficiently, resulting in a confusing and frustrating user experience.
USER PERSONAS
"I need an app that makes managing my car simple and quick, not something that adds to my stress. It's frustrating when I can't easily find the features I need."
Age: 32
Occupation: Marketing Manager
Location: Sydney, Australia
Tech Savviness: Moderate
Vehicle: Hyundai Tucson
Emma Carter
GOALS
Efficiently manage car functions remotely with a seamless user interface.
Quickly access important vehicle health updates through an intuitive design.
Easily track and analyse car trips with user-friendly visual representations.
Navigate the app effortlessly with a clean and straightforward layout.
CHALLENGES
Finds the current navigation unintuitive and cumbersome, leading to frustration.
Feels that the remote start and climate control interfaces are not user-friendly.
Desires more detailed and visually appealing trip tracking and analysis.
Finds the app's interface cluttered and not optimized for quick access.
NEEDS
A more intuitive and streamlined navigation structure.
A user-friendly remote control interface with clear, accessible options.
Enhanced trip tracking features with detailed insights presented visually.
A cleaner, more engaging UI that prioritizes ease of use and quick access to key features.
"The app should be as smart and efficient as my car. It needs to be intuitive and easy to navigate so I can manage my vehicle without any hassle."
Age: 45
Occupation: IT Consultant
Location: Melbourne, Australia
Tech Savviness: High
Vehicle: Hyundai Santafe
James Lee
GOALS
Simplify the process of starting and controlling the car remotely with easy-to-use UI elements.
Ensure car security features are easily accessible and clearly presented.
Keep track of the vehicle's location with a straightforward and visually clear interface.
Access tutorials and guides within the app that are easy to follow and engaging.
CHALLENGES
Finds that there isn’t a guided onboarding process.
Struggles with the complexity and visual clutter of the vehicle status and location screens.
Feels that the app’s interface lacks polish and is difficult to navigate.
Experiences difficulty in initially setting up the app due to a complicated UI.
NEEDS
An improved onboarding process with interactive and engaging tutorials that simplify the learning curve.
Simplified vehicle status and location screens with clear visual cues and easy-to-understand information.
A polished, user-friendly interface that enhances overall app usability.
An intuitive setup process with step-by-step guidance to make getting started easier.
COMPETITIVE ANALYSIS
In conducting my competitive analysis for redesigning the Hyundai AutoLink Premium app, I selected Mercedes me, myAudi, myVW, and myBMW car connectivity apps. These choices were informed by their high user ratings in Australia and their reputation for delivering robust features that enhance vehicle management and user experience.
General Analysis
Mercedes me AP
myAudi
myVW
myBMW
Strengths
Weaknesses
UX
UI
Seamless user experience, effective remote controls.
Occasional connectivity issues and data update delays.
Intuitive navigation and efficient remote control features.
Sleek, modern, and visually appealing.
Seamless integration with Audi vehicles, real-time updates.
Occasional connectivity issues and data update delays.
Intuitive navigation and efficient remote control features.
Sleek, modern, and visually appealing.
Wide range of features, practical vehicle management tools.
Occasional connectivity issues and data update delays.
Intuitive navigation and efficient remote control features.
Sleek, modern, and visually appealing.
Wide range of features, practical vehicle management tools.
Occasional connectivity issues and data update delays.
Intuitive navigation and efficient remote control features.
Sleek, modern, and visually appealing.
Feature Analysis
Mercedes me AP
myAudi
myVW
myBMW
Voice Command Integration
Easy Setup Process
Guided Tutorial for App Use
Personalised Driving Insights
Trip History and Analysis
Basic
Basic
Basic
Basic
Limited
SURVEY RESULTS
USER RESEARCH
“Can you change the pin to when the app boots up and not needed for sending commands.”
"The user interface is also a bit difficult to navigate."
"The app is not user-friendly and hard to navigate."
“Unintuitive, - different ways of getting to different areas of the ap, which make it confusing, & when you get to one, hitting the back button doesn't take you one step back, but back to the start.”
“Trips should be able to be set to business or personal easier, with a button on the map or swipe left or right.”
“Needs to be able to register more than one driver & car .”
USER RESEARCH
This section delves into the user research phase, a critical component of the redesign process for the Hyundai AutoLink Premium app. By conducting thorough user research, the aim is to identify key pain points, gather user feedback, and understand the needs and expectations of the users. This foundational step ensures that all design decisions are data-driven and focused on enhancing the overall user experience, addressing current shortcomings, and meeting user needs more effectively.
REVIEWS
18-24
25-30
30-40
40-50
AGE OF USERS
1
2
3
> 3
HOW MANY TIMES A WEEK DO YOU USE THE APP?
3
4
6
8
9
FROM 1-10 HOW EASY IS IT TO NAVIGATE THE APP?
1 - EASY
10-HARD
Yes
No
DO YOU TRACK YOUR CAR TRIPS?
4
5
6
7
HOW HELPFUL DO YOU FIND APP TUTORIALS?
1
2
4
6
HOW RELIABLE DO YOU FIND THE APP?
Based on the survey conducted and user feedback, it is evident that there are several areas that the AutoLink Premium App is lacking in. Users mention that the app’s navigation could be more intuitive, with a streamlined interface that allows easier access to key features. Additionally, we see that users tend to shy away from using the app due to its lack of ease. Once user testing is conducted with the new design, a way to determine whether the design has done its job is to see if people would use the app more frequently, as the goal is to reduce their frustrations when navigating elements of the app that they need.
UI (Visual Design)
UX (Information Architecture, User Flows, Paper Sketches, Wireframes, Prototyping)
Research (Problem Statement, User Research, Competitor Analysis)
Strategy (Research Goals and Challenges)
WEEK 01
WEEK 02
WEEK 03
WEEK 04
Problem Solutions
Case study overview
Problem Statement - Why This Project?
This case study focuses on redesigning the Hyundai AutoLink Premium mobile application to enhance its overall user experience. Chosen for its relevance and impact, this project addresses significant user pain points identified through personal use and extensive review analysis. The current app is criticised for its counterintuitive navigation, unappealing interface, and complex setup process. By simplifying navigation, enhancing visual design consistency, and improving the onboarding experience, this redesign aims to create a more intuitive, visually appealing, and user-friendly application, ultimately increasing user satisfaction and engagement.
Enhance Visual Design and UI Consistency
IMPROVE ONBOARDING AND USER SETUP
SIMPLIFY AND CLEAN UP NAVIGATION
PROJECT TIMELINE
CONCEPT
FINAL PRODUCT
Hyundai auto-link
premium.
This case study examines the redesign of the Hyundai AutoLink Premium mobile application to improve its user experience. By addressing key issues such as navigation, visual design, and onboarding, the goal is to create a more intuitive and user-friendly app.
ROLE: UX/UI Designer
TIMELINE: 3 Weeks
TOOLKIT: Figma, FigJam, Miro, Photoshop, Notion
SCREEN 01:
SCREEN 02:
SCREEN 03:
SCREEN 04:
Designed & built with
figma & framer
