Client
AutoMate
Design Brief
AutoMate is an automotive service platform that yields happier car owners and trusted auto shops. As their UI designer, I worked with the product team to improve and redesign new user experience and interface for the app. The AutoMate app focused on car repair and maintenance. From booking regular car wash to quoting body paint repair services, the app empowered car owners to take good care of their car easily and conveniently. Business Card Design
Before I introduce the UXUI design, I would like to share the business card design that I created for AutoMate. I designed the card to look just like a car key. The idea was that when we first introduce ourselves to potential partners, they would instantly understand that "AutoMate is a car-related company." Also, giving away a car key was a symbol of trust. By adding the three service icons on the button of the car key, it helped people to understand our main services at a glance.
Before I introduce the UXUI design, I would like to share the business card design that I created for AutoMate. I designed the card to look just like a car key. The idea was that when we first introduce ourselves to potential partners, they would instantly understand that "AutoMate is a car-related company." Also, giving away a car key was a symbol of trust. By adding the three service icons on the button of the car key, it helped people to understand our main services at a glance.
Onboarding
Problem
There were overflow and unorganized information and service options within the app. Not all of the services were useful, while some services were only applicable to certain car owners, such as the different wants and needs for EV and non-EV car owners.Solution
Through this customization onboarding process, it enables us to obtain valuable information from the user, such as the type of car service that they need, budgets, and parking habit. Therefore, we can generate more accurate user suggestions. To make the app more personal to the car owners, the final step of the onboarding process is to add their own vehicle and license plate number to the profile. When launching the app, they will be able to see their beautiful car on the home screen.
Navigation
Problem
We discovered that there was a high drop-off rate and extremely low first purchase rate after users downloading the app. It mainly due to overwhelming information throughout the interface, but also very hard to browse around.Solution
We identified all of the services in to 4 main categories: Beauty, Maintenance, Inspection, Upgrade. On each category, we divided the services into subsections. For example, car wash and coating services will be under Beauty. With the goal to improve our user experience and increase our order numbers, we revamped the app with more visually consistent and user-center interface.
Booking
Problem
The booking flow was not very intuitive confuse user when choosing different products. For instance, there were too many service options with confusing names, unclear categorization and no filter available. When user decided to book a service, they could only choose date, but not the time.Solution
We reorganized the information hierarchy and streamlined the ordering process to make it more intuitive. Apart from reimagining the booking process, we also added the filter/sort function and used tag to better describe the service. With a well organized and easy to use interface, users would be able to complete booking faster and easier.
Quotation
Problem
Since the quoting function in the app was hard to navigate, car owners usually request quotation directly from our customer service via WhatsApp or phone call. Our customer service would need to ask follow-up questions and use their own tools to document each request, which increased their workload and decreased their work efficiency.Solution
We would like to improve the quotation feature to increase order number and the work efficiency of our customer service. We revisited the quotation flow and designed a simple and easy to use interface to gather essential quotation information from car owners before passing it to customer services. For example, photos and VIN number were essential information in a body paint quotation.
Road Trip
Problem
With the worldwide COVID crisis, traveling became extremely challenging. Since we couldn't travel to other countries and there were evening dining banned in restaurants, road trip and dining in car around Hong Kong became a new lifestyle for the car owners. However, there were lack of resources to share good locations about local road trip routes and dine in car spots.Solution
In the explore tab, we created a new Road Trip feature. We hand-picked some dine in car destination and road trip route around Hong Kong. With each scenic destination and route, we provided with up-to-date photos, accurate Google Maps navigation and some useful tips about to each location for our car owners, and to bring extra value to their day to day life.
Design System
Problem
The app didn't have a design system to keep the visual elements consistent.Solution
We created a design system for the new interface with standardized grid, typography, colors and icon to develop UI components.
