Sprint Drive: Website | App Store | Google Play | Prototype
Harman Spark: Website | App Store | Google Play
Harman Ignite connected car platform is a client-service based mobile app, a website and a special device - dongle, that plugs into the vehicle’s ODBII port, and reads all the vehicle’s telematics data, various values like fuel level, oil temperature and others, the device has also build-in GPS, G-force sensor, and a Wi-Fi hotspot.
As an example of Harman Ignite connected car platform I would like to show Sprint Drive and Harman Spark mobile apps.
The main goal of this project was to redesign the look and feel of the app, and also introduce new features.
I’ve started my design process with research and evaluation of the existing app, to pin down all UX flaws and possible user pain-points.
The customer also provided user feedback data that helped in my research.
Among the main issues were:
• Overcomplicated in-app navigation;
• Busy screens, overloaded with information;
• Users could select vehicle only on one main screen;
• Users were having issues with adding and selecting vehicles;
• App design did not allow to add more features.
Old Apps Screenshots
The next step was research and ideation. I’ve made a competitive analysis on such apps as Verizon Hum, T-Mobile SyncUp Drive, Automatic.
And made research on modern mobile apps design trends, such as:
• Bottom navigation;
• No hamburger menu;
• Simple and clean UI.
Customer provided app analytics data, that showed the most visited screens:
• Dashboard;
• Menu (Settings part);
• Notifications.
Design Trends Research
Based on the users feedback, app analytics data and my research findings I came up with a few sketches of the main Dashboard screen.
Main changes:
• 3 most visited screens were put into a bottom bar, so they will be easily accessible from other screens within the app;
• New Vehicle Selector was put on top of those 3 main screens;
• Bottom drawer with cards instead of hamburger menu.
Initial Sketches
After several rounds of internal and external reviews and discussions with a Product Manager, customer, and the dev team, the new design was approved, and I’ve started working on UX framework.
I prefer the “atomic design” approach. Creating UX framework before the actual wireframes help to save time because it is much faster to build the wireframes in Axure using prepared "blocks". Almost every "block" in the framework is master, and if there would be a need to change a card layout, for example, it could be done by changing the master. As a result, all instances of this master on all pages will be changed as well. Also, this approach provides the development team with all the essential information about interactions and animations before the actual wireframes will be delivered.
UX Framework
All UI elements, their states and user interaction descriptions were added to a separate folder in Axure, along with UI animations.
UX Framework Animations
Then using the UX Framework I’ve started building UX wireframes and user flows, updating existing screens and adding new features, like:
• RepairPal Service;
• Maintenance Reminders;
• Impact Detection.
UX Wireframes
Before the release of the updated app, I came up with an idea to add one more feature called “What’s New”.
This was done to ease the “pain of changes”, which is a pretty common thing - when users may feel frustration and anxiety when it comes to “sudden” changes in the product that they were used to. Animations that I’ve created were showing new UI changes and new features in an entertaining way.
Animations for "What's New" Screens
I've created a Proto.io prototype with the updated UI and UX for Sprint Drive app, so the end customers could play with the app before buying the product. Since first launch in September 2019, the prototype was viewed by more than 14000 unique visitors.
Improved UX design increased app store ratings for Sprint Drive (Android: 4.8, iOS: 4.8), Harman Spark (Android: 4.5, iOS: 4.7).
The new design was applied to other similar connected car products in the US, Canada, Europe, Japan and India.
New features are still being developed and gradually will be added to the platform (mobile app and website).
Visual design mockups
All screens, images, sketches, wireframes, visual designs, user experience designs, animations, industrial designs, 3D models, 3D model renders featured on this page are the intellectual property of the respective companies for which they were created. These works are showcased here for portfolio purposes only. All rights are reserved by the respective copyright owners. No part of this portfolio may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the copyright owner.