SpareIt
overview
SpareIt is India’s largest automotive aftermarket multi-sided platform, backed by Petromin Express. Its aim is to digitize garages, empowering them with easy access to sourcing, last-mile logistics, business management solutions, and digital credit.
The goal of this particular project was to identify experience issues with SpareIt app. This project involves a Garage Management System that enables garages to efficiently handle service jobs.
background
Serving both small, large and multi-outlet garages, as well as individuals who own vehicles, SpareIt initiated a project with Flooid to enhance the overall user experience and reduce the friction when servicing vehicles. Learn more about what they do.
I was the lead designer on the team alongside 2 designers. I was responsible for fixing UX/UI experience of the app. Whilst the project was short, some key achievements are listed below:
Applied design sprints to inform our process. I was able to effectively apply the design sprints process to identify the problem, ideate on the solution, prototype and deliver the final product.
Solving complex issues. Despite the app’s complex user flows and diverse user types, accommodating various interaction fields across tablets and phones proved challenging. However, I was able to adopt an easier user flow to reduce task completion.
Designing for accessibility. It's worth noting that accessibility is often not a top priority in most projects. However, we made it a key consideration—designing with all user types in mind, without compromising on aesthetics.
understanding the problem
I conducted a brainstorming workshop with the team to uncover pains felt by the users. There were 3 types of end users* who were using the app. It was revealed that:
Users were taking an average time of 3 minutes to complete a task (Creation of Job Cards**)
Users found forms to be very complex and lacking structure.
Users would be more conscious of their actions if their impact was quantifiable and measurable
Lack of visual hierarchy and accessibility caused delayed task completions
The user flow for the app was quite complicated and lacked affordance
*for the purpose of this case study I'll be only going through the solution for one type of user (station manager).
**Job Card creation was a major use case. It was almost 60% of the daily task.
Fig. 'Create Job Card' old flow
fixing the problem
From these findings, we decided to rework on the user flow and fix the usability issues, some of which are:
Introduce progressive disclosure for creation of a Job Card and other tasks to reduce complexity.
Redraft the Information Architecture to fix the information hierarchy.
Improve visual hierarchy for smooth navigation.
Overhaul the overall visual theme while prioritizing accessibility.
I conducted a workshop with SpareIt's team to draw out their vision of the solution and reconstruct the information architecture.
We then developed optimal user flows aligned with SpareIt's vision for the solution and created low-fidelity wireframes to help visualize it.
In our internal tests with the low-fidelity prototype, Job Card creation took about 2 minutes and 15 secs to complete. That is a 42% decrease in task completion time.
Fig. Station Manager proposed user flow
Fig. 'Create Job Card' wireframes
visual design
We crafted the visual design through a step-by-step process, starting with mood boards and style tiles and evolving into a complete UI kit. To enhance usability, we selected vibrant colors and oversized interactive elements, making it easier for users to navigate without accidental clicks.
Below is the breakdown of main functions and experience tweaks we made:
DASHBOARD
The dashboard or home page of the Garage Management System was designed with the approach that station managers can easily access the majority of features with a single tap. In addition to that, we have also incorporated key metrics, including total earnings, total customers, and total services.
JOB CARD CREATION
Job card creation is one of the most used features in the Garage Management System. The basic approach behind designing this flow was to reduce the number of clicks, the amount of time taken to create a job card, and to simplify the entire user flow. This was achieved through upfront filters and easy-to-navigate buttons.
SERVICE ADVISORS
Through this feature, station managers can create service advisors, control the functionalities they have, and generate their login credentials. Permission controls made easier with simpler interaction elements.
CUSTOMERS
Every customer’s history includes all the vehicles that are serviced or getting service from the garage. Station Managers can view all previous invoices, send follow-up reminders, or track the current status of the car from the service history.
ONBOARDING
The onboarding of the Garage Management System is based on OTP and passcode-based login. To give it a personal touch, every screen in onboarding has a banner that could be used to deliver promotional messages to Station Managers and Service Advisors.
conclusion
Improving the app experience was key for the end users as it could significantly improve their task completion leading to customer satisfaction. While I am happy with the internal prototype test results, lack of testing on real users meant I couldn't objectively know how the app performed with real users.
Some key learnings from this project are:
Test, Test, Test. Design isn't successful until it's tested with real users. No matter how polished the solution appears, if users react differently than expected, the design has missed the mark. Testing reveals friction, informs iteration, and ensures the product truly works for its audience.
Communicating design decisions in light of the business goals. It is much easier and natural for me to explain my decision decisions based on user insights. However, it is equally valuable to consider how those decisions also support the business goals.
Copy can significantly impact understanding. Everything from one-word button labels to multi-sentence subheadings impact the user’s experience with a product.
Importance of Visual Design. In previous projects, my focus was primarily on solving problems through wireframes. But this time, I’ve come to understand that visual design plays a vital role, regardless of who the end users are.
