Autic: an entire platform redesign
My Role and Responsibilities
UX/UI Designer
Research
User Flows
Information Architecture
Wireframing
Visual Design
Tools Used
Figma
Miro
Google Docs
Maze
Microsoft Teams
Team
Me, Bachir (Head Developer, Project Manager) + Engineering Team
Project Context
Client: UAE Start-up company Autic
Timeline: (June-September 2022)
About Autic
100 garages participated in the initial launch of the ERP system and gave feedback
Autic wanted to improve the design of this system, and have a working tablet prototype to present to an auto expo in mid-October 2022 (which had 700 garages participating)
Securing sign-up with 15% of participating business provided enough revenue to move forward with a full product launch in 2023
Research
Initial feedback from a pool of auto repair garages showed that improvements need to be made to the platform before the tablet and mobile solutions can be fully developed and launched.
These areas include:
The current design is not easy to understand or navigate for garage techs
The color palette for the mobile screens doesn’t match the most recent re-branding
Development issues and lag
Users did not want to see pop-up ads
In addition to resolving these pain points
After taking the first week to fully understand the scope of my task on this project, I met and collaborated with the Engineering team to determine realistic goals for the capabilities of the development of the tablet and mobile applications. While it was not my responsibility to design the entire ecosystem, I did need to understand the mobile experience fully in order to create the tablet.
My first challenge of the design process was advocating for time and resources to be dedicated to collecting data that would allow us to best integrate the Autic system into their current one. I analyzed the current market and interviewed garage consultants to learn about the day-to-day operations, specialized language, labels, and employee roles within auto repair shops in Dubai.
The Solution and Impact
The new screens make the platform a smoother experience for garage owners and include a UI that is fresh, utilizes the new branding, and is consistent so that it can be applied across all interfaces in the Autic ecosystem (tablet, mobile, and website/ERP).
Customer Problem
People put off scheduling their car for maintenance because the process is too time consuming
Autic as a Solution
In order to improve the customer experience and disrupt the industry, Autic is creating a platform that will allow car owners to schedule car repairs and communicate with the garage during an appointment using a mobile app instead
My Scope and Timeline
I sought out an opportunity to apply my design skills in the real world and was interviewed and selected for this re-design project while also completing my coursework for DesignLab.
As the company stakeholders were seeking a fresh pair of eyes to tackle these issues, my task within Phase 1 was to translate Autic’s re-branding into a new visual design and to improve the user experience for the tablet application specifically, within a 16-week timeline. The design would then be handed off to an on-site Designer in Dubai who would apply the same style to the mobile application and backend ERP system.
Autic is an on-demand vehicle service tech company with the end goal of expanding into an all-in-one hub for auto insurance, maintenance and repair, emergency roadside assistance, and scrap branches, to be achieved through UAE government sponsorship of their digital product.
Business Problem
In order to bring this service to the general public in the UAE, garage owners need to have access to a tablet application to meet their scheduling needs and communicate with mobile users in need of service, in addition to organizing their financial system and day-to-day operations.
Phase 1 of the project is to make the service request option available to mobile users and allow auto repair shops to schedule those appointments.
Secondary Research
I conducted a market analysis to see what other digital products are potentially used for similar mobile user needs. Secondary Research was performed on the automotive industry as well as a Competitive Analysis of popular vehicle maintenance apps.
Tablet User Interviews
Due to the time and language differences, a representative of the Autic team interviewed technicians and managers from auto repair shops in Dubai on my behalf. After creating the interview guide, questions were vetted by the rep before he traveled to each garage separately for the interviews.
Interviews
Each garage has its own vehicle admissions checklist, but all share a similar set of items
It was revealed that the admissions process takes place in two stages by two different employees
The majority of communication between clients and the business takes place via phone call
Nearly every service quote is determined after the vehicle is inspected
Majority of auto repair shops interviewed order their parts directly and do not outsource from other garages; only labor when necessary
Garages organize vehicles via license plate number and car model
Interview responses were collected and consolidated. As by the 8th location the information we received appeared to be consistent, I noted and summarized the key takeaways for the team and Autic stakeholders. Market Analysis was also presented during this time to think in tandem about both the mobile user and garage owners needs.
Analyze
Market Analysis
Common direct and secondary competitor features:
Saved service history
Often app services are free to users
Search function for auto repair shops and map locator
The number of vehicles one user can register within the platform is often limited (average: 1-4)
Insights
Leaning into the cultural context…
The general hypothesis from the Autic stakeholders is that their target mobile users (car owners) are “lazy” in the UAE. For them, convenience and personalization are key, and the foundation for the inception of this service model.
After reviewing the features of other popular car service applications on the market and before any user research took place, I collaborated with the team to determine the segmented audience (garage techs vs. car owners), devices, and role both types of users would play in the Autic ecosystem. This helped to inform the storyboard created to illustrate the planned experience for scheduling an appointment using the Autic app.
Design
Creating a the design for the tablet became our main focus before designing the mobile experience. Garage technicians had shared what information they typically need access to quickest throughout the day, so an interactive calendar element would need to be included, as well as available staff, job cards (translated to “tasks”), and vehicle progress.
After presenting the initial design for the wireframe, feedback from the development team determined:
The cap on how many photos should be taken of each car during the inspection (so as to not overwhelm the server)
The technician would also need to open the navigation and select the admission icon in order to open the inspection checklist - feedback from the team indicated this would be too slow of a process so a solution needed to be determined to increase efficiency for this flow.
Identity (login / logout)
Vehicle Admission (inspection process)
Vehicle Exit (close order and send to financial system)
Labor Updates + Approval/Rejection (from mobile user)
Create Quotes
Update Order/Labor/Parts
Assign Labor
Outsourcing (access vendors)
Send and Receive Notifications
Set Car Service Reminders
Access Calendar / Schedule Appointments
Turning focus back to the second group of users, the garage employees, our garage consultant walked the team through the daily operations of an auto repair shop, the different types of employees and their roles, and the management structure.
Information Architecture
Tablet Sitemap
The tablet flows and sitemap were created simultaneously and refined with feedback from the development team.
Wireframes
The admissions process was especially important to understand, as the tablet handoff meant it would occur in several steps:
The survey information helped to add detail and after reviewing the interview responses and full technical report of the current Autic system, I collaborated with the development team and we determined 11 main flows were needed for the tablet (following the same process as above) in order to make it appropriate for the needs of the business:
Vehicle is dropped off
2. Vehicle is inspected by technicians
3. Individual parts are analyzed for potential repair
Survey responses from the garage technicians informed what kind of data and which actions were most important, and ranked as follows:
Job cards
Progress on vehicles
Schedule an appointment
Initial feedback from the product's first iteration also revealed that the techs wanted to see as much information as possible for the daily operations on the Dashboard, and to search for additional information as quickly as possible (i.e. parts inventory, etc.).
The team workshopped ideas to increase usability despite the amount of information that would need to be present on the Dashboard and I refined the user flows for Assigning Labor and Updating an Order further.
A process must exist for the tech to create quotes and send to car owners for approval before service on vehicles can take place
Employees in multiples roles will have access to the tablet during the admissions process before it is complete
Technicians ranked their top info to have on hand:
1. Job cards
2. Vehicle Progress
3. Parts Inventory
4. Appointment calendar
Tablet Dashboard
Calendar flow: checking appointments
Assign Labor flow
Technician Profile Modal
Admission Checklist (Screen 1)
Tablet Dashboard (Iteration #1)
UI Elements
Autic recently went through a rebranding process and updated its company name, logo, and color palette. When I joined the team, I was given the freedom to expand on this and update and refine the fonts in a full style guide unique to the brand.
Moodboard
The owner of the company and stakeholders wanted a bright color palette to make their brand and subsequent service stand out from the rest in the UAE market. In the initial kickoff meeting we discussed that culturally, green and orange are popular and applied widely to digital products there. A popular food application called Talabat is ubiquitous in Dubai and the team wanted to give contrast to its UI standard.
Building on the re-branding, I created a mood board to reflect my understanding of Autic’s values and the aesthetic vision for the project moving forward:
Modern
Efficient
Trendy
Accessible
Reliable
Logo
After collaborating with the team, I updated the logo with a new font choice: Kulim Park, and changed the spelling from Autec to Autic, which the company owners felt was a more proper pronunciation of the company name. The text for the tablet headers and body copy were also standardized to Droid Sans and Poppins, respectively.
Tablet Solution: Dashboard
Feedback from the team translated into several adjustments to the updated iteration of the high fidelity tablet Dashboard screens:
Technician List: As a technician can only be assigned one task at a time, the list of employees was changed into a card indicator with the number of available techs that can be assigned work.
Admit a Car: I added primary CTA to the Cars Admitted card so the inspection can begin directly from the home screen, reducing the number of actions a technician would need to take to begin the vehicle admissions process.
Calendar: The calendar size was reduced and consolidated into a menu. Technicians can select the date and the appointments will populate on the dashboard. Default list of appointments will be for the day of.
Additional Tablet Screens
The design intent initially for the Technician Profile was a modal that would house the technician’s work status, and scheduled tasks for the day, and for the garage Manager to have the ability to edit any current tasks or assign, however, additional input from our garage consultant revealed that each technician can only be assigned one task at a time. So the technician module would need to be updated to reflect this.
Next Steps
Usability Testing; once a working prototype is available, this should be presented to a pool of auto repair technicians for testing so we can further refine the design.
Challenge: It is my hypothesis that the biggest barrier to introducing the Autic system to auto repair shops will be the adoption of an online communication system with clients, as the businesses have operated traditionally over the phone.
Begin working on mobile solution; The team will change focus to our other group of target users: car owners, and begin the process of designing a phone application to work in tandem with the tablet solution.