It works in conjuction with an app allowing users to stay connected to their car, making car tracking and maintenance a hassle-free experience.
Challenge
Scouto is a mobile app for connected car telematics which works with OBD-2 devices. The previous app design was functional but suffered from a cluttered and confusing user interface. The company had identified the need for a redesign that would simplify the app's functionality, improve its visual design, and enhance the user experience for its target demographic of users.
'The app had to be something that a petrolhead could fine tune to their liking and get every possible information about their vehicle while also enabling a not so tech-savvy parent to track the driving behaviour of their child.'
Goals
The primary goal of the redesign was to ensure that all features could be accessed and utilized easily, without sacrificing any of the app's core functionality, ultimately leading to greater customer satisfaction and loyalty. A secondary goal was to make the designs scalable to accommodate new features that the business wanted to add. The key goals of the project were as follows:
- Redesign the app's user interface to create a modern and engaging experience for users.
- Simplify the app's functionality to make it easier to use and navigate for different kinds of users.
- Improve the app's overall user experience by enhancing usability and reducing cognitive load.
- Rework the Information Architecture to accomodate business needs and add new features to the app.
I led the mobile app UI Design. I collaborated with the development team, product marketing team, and with other stakeholders, including the CEO of the startup to plan and execute the redesign of the app.
Research
I conducted research to the best of my abilities since I was still learning and did not have hands-on experience with user research. Another issue was that the product was still in beta testing and we did not have a user base we could contact or research with. Lastly, there weren’t enough resources to take on the endeavor. I did the best I could and tried using the internet to my advantage. Here’s what I did:
- Competitor analysis: Analyzed the top competitors in the market to identify industry best practices and opportunities for improvement. (Back when I did this, I did not even know this was an actual way of collecting insights from secondary user research.)
- User feedback: This data was collected by the company constantly as they tried to test the product with more and more users.
- User persona development: Based on the understanding of the business leads about their target consumers, I came up with some critical user journeys to try and think about the app flow from different users’ point of views.
- User flow analysis: Analyzed the current user flow of the app to identify areas of improvement.
From this research, I identified several key issues with the existing app, including a cluttered and overwhelming user interface, confusing navigation, and lack of clear visual hierarchy.
Design Process
Information Architecture (IA)
There was an IA present. Some major features were to be added which required separate flows and some modifications were made to the existing flow to improve UX.
The features to be added included a marketplace for car parts and services, a wallet for tracking car expenses, enhancements to the trip tracking, and a gamification aspect along with a rewards mechanism to try and increase engagement of the customers.
Wireframes
Creating wireframes and user flow diagrams to map out the app's functionality and navigation.
Paper wireframes help me visualize the UI in my mind and also ensure all elements required on a particular screen have been placed. This is also beneficial for making changes quickly as the time taken to implement new changes increases exponentially as we move along the development process so it's always better to have a keen eye over these wireframes, find and correct any errors as early as possible.
Style Guide
Developing a style guide to ensure consistency across the app's visual design
The design system for Scouto app is clean, modern and intuitive. It uses a simple color palette of blue, grey and white with Poppins as the main font to maintain consistency throughout the app. The design system includes clear and concise UI elements, buttons, icons and inputs that are designed to be easily recognizable and intuitive.
Overall, the typography system for Scouto mobile app is designed to be easy to read and consistent throughout the app. It uses Poppins as the primary typeface with varying weights and sizes for different use cases such as headings, body text, call-to-actions, and navigation.
The company had a set of brand guidelines in place which were followed strictly to maintain uniformity in all the visual communication.
Here is a detailed design system for the Scouto app:
Design Solutions
Easy onboarding process
The app had to have a simple and intuitive onboarding process that helps the user get started with the app quickly and easily.
Gamification
Gamification was a key strategy I used to enhance user engagement for Scouto. By incorporating personalized achievement badges, progress trackers, and rewards, I encouraged users to track their car's performance and driving behavior, resulting in improved user engagement, satisfaction, and loyalty.
Track your trips
The app allows the user to track and analyze their trips, including distance traveled, time spent driving, and fuel efficiency. The user should be able to view this data in an easy-to-understand format.
Simpler Navigation
Reduced the number of features on the main screen and moved them to separate pages accessible via a navigation drawer. A universal bottom bar was added that made it easier for users to navigate between the different sections of the app.
A new dashboard
Redesigned the dashboard to display only the most important information at a glance, while providing additional information on separate screens. A personalized dashboard was created that allowed users to track their car's performance, driving behavior, and maintenance needs in one place.
Customizable Alerts
Enabled the user to set up customizable alerts for specific events such as harsh braking and acceleration, engine idling, or speeding. Alerts should be easy to configure and understand.
Prototype
Click anywhere on the region around the Phone to see interactive hotspots.
Press 'F' to view and interact with the prototype in full-screen view.
Open on a laptop to interact with the prototype.
Key Learnings
Being a part of a growing start-up was a great learning opportunity, specially for me, since this was my foray into the professional world, that too in a field in which I had no formal training.
Thankfully, I had some of the best co-workers that one could ask for. I learnt how to manage time, prioritize work based on the company schedule and also had a lot of fun while learning all this.
I constantly interacted with the developers and that helped me learn a lot about the handoff process and utilizing effective communication and documentation to make the design implementation smoother.
What would I do differently?
If I got the chance to do this project again, here are a few major things I would do differently:
- Conduct more user research: Although the company was gathering some data from the users, there was a lot more I could have done to get to know user problems and find solutions.
- Focus more on accessibility: Accessibility and Inclusivity are important aspects of design, and ensuring that the app is accessible to all users, including those with disabilities, would have helped improve usability and satisfaction for all users.
- Design System and Documentation: Build a design system before rushing to get to the screens. Implement a proper documentation process which acts as the single source of truth for all designs.
- Incorporate user feedback throughout the design process: Constantly gathering and incorporating user feedback would have helped to ensure that the design met user needs and expectations better.
- Perform thorough testing: Extensive testing, including user testing and usability testing, would have help to identify issues and make necessary improvements before launch. Test some more!