Eaata App
The Premier Solution for the Automotive Industry
Role
Product Design, UX Research, UI Design
Co-designed with UX Designer Meylin (EAATA)
Timeline
March - November 2024
Tools
Figma, Miro, Jira
Overview
This app was created to provide automotive solutions to mechanics and other professionals in the automotive industry. It is designed to sell specialized automotive courses through microlearning short video classes in high definition. The app also aims to be a marketplace where clients can find and purchase powerful tools for diagnosis, electronic repair, and locksmithing of automobiles. Additionally, the app provides after-sales services and exclusive technical support to help with the start-up of purchased equipment or resolve any issues that clients may have. The goal of the app is to be a one-stop-shop for all the needs of mechanics and professionals in the automotive industry, offering education, tools, and support to help improve their work and increase their efficiency.
Problem Statement
Mechanics and automotive professionals often face challenges in keeping up with the latest techniques, technologies, and regulations in their field. This can lead to reduced efficiency and potentially even safety issues. Traditional training options, such as in-person seminars or lengthy online courses, are not always convenient or cost-effective.
My Contribution
As a UI Designer, I supported EAATA’s UX team by creating high-fidelity interfaces and building reusable components for the app’s design library. I helped translate UX flows into polished visuals, ensuring consistency, accessibility, and scalability across the product.
Solution
Our app aims to address this problem by offering microlearning courses that provide mechanics with the knowledge and skills they need to stay current in their profession. Through high-definition video classes that can be accessed anytime, anywhere, mechanics can learn at their own pace and on their own schedule. In addition, our app offers a variety of diagnostic tools and equipment, as well as after-sales services and technical support, to help mechanics succeed in their work. By providing a one-stop solution for automotive professionals, our app aims to improve efficiency, safety, and overall success in the industry.
Objectives & Goals
Objectives:
- To provide a convenient and cost-effective solution for mechanics and automotive professionals to stay up-to-date with the latest techniques and technologies in their field.
- To offer a variety of microlearning courses, covering a wide range of topics, that are accessible anytime, anywhere.
- To provide mechanics with the tools and equipment they need to perform their work effectively.
- To offer after-sales services and technical support to help mechanics succeed in their work.
Goals:
- To increase enrollment in microlearning courses by at least 50% within the first year of launch.
- To achieve a customer satisfaction rate of at least 90% for both courses and products.
- To increase sales of diagnostic tools and equipment by at least 30% within the first year of launch.
- To Improve the navigation flow within the app, as well as its visual interface.
- Create a loyal customer base.
My Design Process
Context
The application was first launched in 2021 for Android users and was recently updated for iOs, adding basic details to the design without changing the information architecture and user flow. However, it is planned to refresh the application and its content for 2023 with the following requirements.
Stakeholder requirements:
Improve the navigation of the interface
Improve the design of the interface
Update the information architecture
Analysis of the current app:
Based on the evaluation of the interface based on heuristic analysis, Gestalt principles and operating principles. It was detected:
- Lack of hierarchy in the information structure.
- False affordance, when showing active sections that are not yet available.
- The navigation of the App limits the flexibility and efficiency of use.
- Inconsistencies in the design system.
- Interface design without Grid alignment.
- Proximity in buttons generate errors of use.
- Inconsistencies in the application of color styles.
App Functions (The user will be able to):
- Access training courses.
- Submit technical support requests.
- Purchase products.
- Manage their user profile
Important Feedback
A survey was conducted on 25 of some of our returning customers to quickly ask what to add or remove from our app based on their experience. The purpose of this was to uncover potential quick wins on simple improvements that could be executed quickly. A look at the answers:
I love the sources they offer, but the app just doesn't work well. I can't seem to navigate it easily, and it's frustrating.
I've tried using the app for my business, but the false affordance really makes it hard to use. I end up just going back to my old methods.
I love the idea of this app, but lack of elements alignment just makes it too confusing. I end up making mistakes and it just wastes time.
26%
Positive experiences
26% of users reported having a positive experience with the app, saying that it was easy to use and helped them diagnose and fix problems with vehicles efficiently.
34%
Neutral experiences
34% of users reported having a neutral experience with the app, saying that it was okay, but could use some improvement in certain areas such as information hierarchy and design consistency.
60%
Negative experiences
60% of users reported having a negative experience with the app, saying that it was difficult to use due to false affordance, inconsistent design, and confusing navigation.
Stakeholder requirements:
01
Users value the good use of information hierarchy, affordance, design consistency, and alignment.
02
Users indicate that there are inconsistencies in the design system and proximity issues in buttons.
03
Too much information on screen makes users feel overwhelmed, they'd like a more curated experience
04
Navigation should be intuitive and flexible, allowing users to easily access the information and tools they need.
Competitor Analysis:
An analysis of competitors was performed to determine their strengths and weaknesses, and to guide the development of the EAATA App's functionality and information organization.
Benchmark
Xhorse App
Architecture information
The structure that organizes the information allows a better reading of the hierarchy.
Ease of reading and user recognition
Its format is easy to read for the user, however, it is difficult to distinguish once the service changes.
Flexibility in navigation
Once you go deep into a service, it is flexible to go back or even go to the central page
Use and consistency of design system
They are consistent with the design style of the brand, however, the use of colors can be confusing on certain screens. The iconography is consistent, although it can be complex if you're not a frequent user.
Target User
The application will be created for people interested in the automotive sector, to improve their skills, through tools, knowledge, and keep them updated with new automotive technologies. Users will be in the age range of 25-65 years approximately.
96.4%
Over the 96.4% of mechanics in 2019 were male.
Male
Using a database of 30 million profiles Zippia estimates demographics and statistics for automotive technicians in US
+
User Persona:
A persona was built based on the data collected to help drive decision making and keep the product focused on solving users pain points, frustrations, and goals.
Age: 40
Location: Texas
Occupation: Mechanic
Archetype: The Professional
goals:
pain points:
frustrations:
Alex is a 45-year-old owner of a small independent automotive repair shop. He has been in the business for over 20 years and has a wealth of experience in diagnosing and fixing problems with vehicles. Despite his expertise, Alex is always looking for ways to improve and stay ahead of the game. He has a passion for cars and a desire to provide the best possible service to his customers. In his free time, Alex enjoys tinkering with his own vehicles and keeping up with industry news and trends.
Profile:
Difficulty keeping up with latest technology and techniques in the automotive repair business.
Lack of access to high-quality learning courses and cutting-edge tools.
Lack of expert support to guide diagnosis and repair processes.
Increase efficiency and speed in diagnosing and fixing vehicles.
Expand his business and increase profits.
Stay informed about industry advancements.
Continuously improve his skills and knowledge
4. Struggle to stay competitive in the automotive repair industry.
5. Inefficient processes that slow down repair times and impact customer satisfaction.
6. Limited access to expert support and resources.
Slow or outdated diagnostic tools.
Limited access to training and resources.
Inefficient processes that waste time and resources.
Inaccurate or incomplete information.
"I've been in auto repair for 20+ years and need an app to stay current with technology and techniques. It will improve my work, efficiency and customer service."
Alex Martinez
personality:
Methodical
Practical
Detail-oriented
Determined
MoSCoW:
A MoSCoW was created to evaluate those design functionalities and opportunities that where considered mandatory, should, could be and are not neccesary.
Must Have
Quick and efficient search engine
Category of every tools and products they will sell
Filter option for products
Section where to show courses in process.
A database of repair information and technical support resources to assist in fixing problems
Offer the option to download the certificates
Should Have
Suggestions of the newest courses
Option to play the intro of the courses
Option to save favorites
A notification system to alert the user of any updates or new features
Area to put promotions of products for sale
Option to Show temporary discount products
Could Have
Integration with third-party suppliers and parts distributors.
A chat function for live support from technical experts
A dashboard to track progress and achievements
Link to social media
Won´t Have
Features that are not relevant or necessary for the app's primary purpose
Features that are too complex or difficult to use
Too much information on one screen
Content Map:
Now we'll create the content map, which provides an overview of the content we need in our app, to cover more information later, serves as a roadmap for creating and organizing content in a product, and helps ensure that the product final meets the needs and expectations of the target audience.
User Flow:
For the development of the user flowchart it was crucial to understand the information provided by the automated database that would be associated with the app and would load user data and subscription types, as well as group the types of services according to their functions.
Medium-Fidelity Prototype
The development of wireframes focused on the creation of frames are related to technical support services, technical service, home and the assistance bar.
Below is a sample of a low-fidelity visual representation of the layout and functionality of the app. It shows the structure of the screen, and the placement of elements such as text, images, buttons, pop-ups, forms, etc.
Home Screen:
The home page is one of the main changes made, since it proposes:
✔ Top bar with a general and immediate search where the user can search for the service they need. It will also have immediate access to notifications.
✔ Nav bar (bottom), which identifies the user and allows immediate access to their profile. This bar will work permanently to give the user immediate access and a better browsing experience within the app.
✔ A summary that updates the user on ongoing services, products, or associated equipment.
✔ Services menu, in this section the user according to his needs can start browsing in the selected service.
Services:
The organization of the screens related to the courses, technical support service and machines are focused on facilitating the recurring actions of the users and the navigation between services, for this reason the following actions were implemented:
✔ The Nav bar (bottom), is transformed to give space to access home and profile on any of the service screens, allowing flexibility of navigation and error correction.
✔ Tabs that allow the user to navigate between the available states of the ements (this case courses) without having to return to home again. This is decided since the user in a session can make use of multiple actions, which allows freedom and control of navigation.
The aspect mentioned above is consistent in the rest (services) of the app as it helps to make the application easier to use and more intuitive
EAATA Visual Design:
The client was very strict with his visual identity, as he requested that only his blue color palette be used in the designs. Using the 60-30-10 rule, my goal was to make the app as simple as possible with color only highlighting important CTAs instead of overwhelming the user with too many variables.
Solution | Hi-Fi Prototype:
EAATA App makes the process of diagnosing and fixing problems with vehicles much more efficient and effective by providing high-quality microlearning courses, cutting-edge tools, and expert support to automotive repair technicians. The app streamlines the diagnostic process and helps technicians to quickly and accurately identify issues, resulting in improved quality of work and better service to customers.
1
2
3
4
5
6
Onboarding | Sign Up | Log In
The process is streamlined, reducing the number of steps needed to create an account, while still capturing all of the necessary information. The design is intuitive, making it easy for users to navigate and complete the sign-up process without frustration.
