Consumer Portal Redesign
UI/UX Progress
A state-of-the-art SaaS web application revolutionizing vehicle service appointments. As a user-friendly online scheduling platform, it caters to all vehicle owners seeking seamless car service appointments at their preferred dealerships. Following a strategic redesign, the product witnessed a remarkable 16% surge in utilization, coupled with a substantial 45% reduction in average booking time. Explore how this transformation enhances the user experience and drives efficiency in the automotive service realm.
This is live product in pilot after redesign: https://www.hondaofstevenscreek.com/honda-service/schedule.htm
High fidelity prototype link:
These are redesign process:
Step 1 UX Research
Step 2 Pain Points and Insight
1. Sign-in Struggles: Users often forget their credentials or prefer not to sign in, impacting user engagement and retention. Offering alternative sign-in options such as social media or phone number lookup can streamline access and quick booking(only pick time spot).
2. Incomplete Input Issues: Users miss input fields when providing car details on a single page, leading to incomplete submissions. Segmenting the input process into multiple steps can ensure thorough data entry and enhance user experience.
3. Car Knowledge Gap: Users lack familiarity with their vehicle's model and trim, causing frustration and hindering progress. Including explanatory tooltips or an "I don't know" option can empower users to proceed confidently.
4. Confusion with Technical Terms: Users struggle with technical jargon like VIN numbers and trim, complicating service selection. Introducing plain language input fields or tooltips can simplify the process and reduce confusion.
Step 3 Information Architecture & workflow
1. Information Architecture
Crafting a streamlined information architecture for the car service scheduling app involves creating a logical sequence structure. This ensures a user-friendly journey, minimizing cognitive load and enhancing the overall scheduling experience.
2. Workflow
Developing a concise workflow for the car service scheduling app complements the information architecture. The workflow outlines a systematic series of steps, seamlessly guiding users from initiation to completion. By integrating the workflow with the structured information architecture, the app optimizes the user experience, making scheduling intuitive and efficient. This dual approach enhances usability and ensures a smooth, well-defined process for users engaging with the car service app.
Step 4 Draft Design
1. Use figma to create wireframe
2. Create UI Style Guideline
Define all the elements: Color, Icon, Button, Selector, Tab
3. CREATE MOCKUP
Step 5 Final Design
Use Figma create high fidelity prototype.
Consumer Portal Prototype - Desktop
Consumer Portal Prototype - Mobile
Engage - Dealership Checkin Experience
Engage is a tablet/desktop Saas APP for car dealership to check in car’s service and repair. It can help technicians to record car’s check in, inspect, service and estimate. After user research and release new features, the advisors utilization increase 16%, sales per check-in increase 10%, average check-In time decrease 45%.
Goals
Increase product utilizations
Increase sales per check-in
Optimize current IA, workflows, and UI to provide a better user experience
User research
Interview from 5 dealer advisors and technicians, get these feedback:
During checkin list, not easy to find specific appointment
Car owners don’t understand the issue of their car and refuse to pay for extra necessary services or repair
Car condition inspect form is not clear
Create new feature - UI Design
Feature 1 - Check in appointment filter
Difficult to define appointment is one of problem for advisors to use our app. Base on time, advisor’s name and status, create a filter can reduce searching time.
Feature 2 - Search bar
Since sometimes advisors need find specific checkin appointment with name or model, I created a searching tab. With easier way to input VIN number, a scan button is designed by use tablet camera to identify long numbers to input.
Feature 3 - Upfront Media capture and media review
Since most vehicle owners don’t understand their cars’ issues, technicians can take pictures or record videos to send to vehicle owners to get approve more services.
Feature 4 - colorblind design test
Inspect form not pass the blind color test since it has green and red condition buttons. Solution is adding text in condition button to make it clearly understandable for color blind users.