Overview

Car maintenance at your place of work.

 

 

Challenge

SUMMARY

Our team was tasked with a 3-week design sprint to shorten the time required to sign up and schedule an appointment for a mobile auto care service. In addition, our client requested a full-scale user research report for the current app. Our goal was to make significant changes to the current user flow and user interface to improve usability for first-time users—those who have the biggest impact on the bottom line if they can’t complete the sign up experience.

Coast is a new B2B service in the San Francisco Bay Area that provides oil changes, tire rotations, and other basic car maintenance services to employees at two specific companies in the East Bay, Tesla and Workday. Our aim was to deliver a  trustworthy and transparent experience—key components of the Coast brand.

 

MY ROLE: UX PROGRAM MANAGER

  • Project Management: I combined expert project management skills with my passion for user experience design. I understood the strategic priorities of the client and project, working with designers to make the most impact possible under our tight schedule.
  • Team Dynamics: I provided input, mitigated conflicts, and empowered cross-functional collaboration throughout the process to meet tight deadlines during research, testing, and delivery phases. 
  • Client Communication: I maintained contact with the client every day to set expectations and provide updates. I also led weekly client meetings by creating agendas, taking notes, and following up on unanswered questions.
Assembling Affinity Map

Assembling Affinity Map

Project Gantt Chart

Project Gantt Chart

 

 

User Research

Statement of Work

Statement of Work

KICkOFF & RESEARCH STRATEGY

Before embarking on our research phase, we held a formal kickoff meeting with our client to ask detailed questions about the company's history, the current app, daily operations, and future goals. We also set expectations and constraints for our 3-week design sprint.

The meeting led to the creation of our research strategy plan for our user research phase. It recommended performing the following processes to reach the required goals set by our client:

  • Screener Survey
  • Branding/Color Scheme Survey
  • Competitive & Comparative Analysis
  • Heuristics Analysis & Content Audit
  • Usability Testing Current App
  • User Interviews & Affinity Mapping
  • User Persona Creation
  • Storyboarding & Customer Journey Mapping
 
Where respondents performed their old changes in the past 12 months

Where respondents performed their old changes in the past 12 months

SCREENER SURVEY

Our team conducted initial research through a screener survey with questions related to car maintenance, daily commuting, and oil changes. We analyzed the findings and found varying positive and negative experiences related to car maintenance. 

Percentage of respondents that knew specific information about their vehicles

Percentage of respondents that knew specific information about their vehicles

The most common pattern surrounded time management: respondents often mentioned that typical car maintenance took time out of their busy schedules. Secondly, we found that very few users knew specific information about their vehicle like VIN number and license plate—which were required pieces of data to create an appointment in the current app.

Lastly, we asked respondents to performword associations with the current coast logo and color scheme (dark blue and turquoise) to test one of our hypotheses that the color scheme did not match with the services that Coast provided. They responded with items like travel websites, cruise ships, soap companies, waves or ripples, and healthcare—anything but oil changes and auto care.

 
Example Survey Question

Example Survey Question

BRANDING/Color Scheme SURVEY

In a separate survey, we further investigated color associations about the Coast color scheme. For example, we asked users to name 1-2 colors they that represented oil changes, travel websites, or transparent companies. We used these results to prove and disprove our own assumptions and the initial responses in the screener survey.

Key Results from Branding Survey

Key Results from Branding Survey

Our findings revealed that respondents associated black, grey, and red with cars and oil changes. On the other hand, we found that transparency and efficiency were associated with blue, light blue, and white. Both results proved our hypotheses that the brand colors were mismatched with the visual design. So we used these conclusions to inform our color choices for our digital prototypes later on.

 
Competitive Analysis Chart

Competitive Analysis Chart

COMPETITIVE AND COMPARITAVE ANALYSIS

We analyzed over a dozen different direct and indirect competitors related to car maintenance, housekeeping, ridesharing, B2B employee perks, and even DIY oil change resources like YouTube. We found that varying trustworthiness was a common theme and used this conclusion to make sure our new users would:

  • Clearly understand how the Coast service works
  • Only be asked for only minimum amount of personal information
  • See clear pricing and other useful information
Competitive Analysis Diagram (by Iva Kim)

Competitive Analysis Diagram (by Iva Kim)

 
Heuristics Analysis - Jenn Chou & Katie Hughes

Heuristics Analysis - Jenn Chou & Katie Hughes

HEURSISTICS ANALYSIS & CONTENT AUDIT

To understand all of the pain points with the current user interface and and user flow, we performed a detailed heuristics analysis using LEMrS principles (learnability, efficiency, memorability, error management, and satisfaction). We found 60 different unexpected our out of order components  when we all used the current app for the first time.

Content Audit Report

Content Audit Report

Secondly, we performed a content audit to figure out what visual and functional items should be kept, removed, or created. Surprisingly, we found dozens of different aspects of the user interface that needed to be changed to benefit the user experience. We used the insights generated in these two research documents to make significant changes to the user flow and inform how we would craft our visual design.

 
User Testing

User Testing

USABILITY TESTING

To drill deeper into the pain points for the current app, we tested it with five different users. Their feedback further informed our content audit recommendations.

Discussing Test Results

Discussing Test Results

  • Testers found that they spent too much time typing too much personal and vehicle information into various forms instead of scheduling an appointment
  • They also indicated they were confused with the overall process of signing up and scheduling, as the app provided no on-boarding experience. Most often, testers made statements like "it was laborious / confusing / complex" or "why is that there?" 

We used the insights from user testing to reiteratecritical pain points that our new design would solve.

 
User Interview

User Interview

USER INTERVIEWS & AFFINITY MAPPING

To get a deeper understanding of what people would like to see in a mobile auto care app, we interviewed eight potential users who drove to work as part of their commute. We synthesized all of our interview data into an affinity map which informed us of five major trends (in order of importance):

Negative Emotional Associations

Negative Emotional Associations

  1. People had a plethora of negative emotions associated with oil changes and car maintenance
  2. Dirty and grungy visual associations
  3. Car maintenance is too costly and most repair shops are trying to “upsell” their customers with expensive products and services
  4. People are too busy to make car maintenance a priority
  5. Most people perform oil changes every 2-6 months on average

It became apparent that users found car maintenance to be a hassle and burden on their lives. We used these trends and patterns to:

  • Inform how we would approach educating new users
  • Challenge their pre-established associations with car maintenance through our user flow and user interface
  • Create a user persona that captures all of this information
Assembling Affinity Map - Iva Kim

Assembling Affinity Map - Iva Kim

 
User Persona (by Jean Chou)

User Persona (by Jean Chou)

USER PERSONA, STORYBOARDING, AND CUSTOMER JOURNEY MAPPING

Based on our previous affinity map, we created a user persona named "Busy Beth" who is an Account Manager at Tesla who just realized her car needs an oil change. We listed her goals, needs, and pain points to make sure our design changes reflected her priorities. To dive deeper into the mindset of Beth, we created a detailed customer journey map and storyboard to pull apart what she would be thinking, feeling, and acting upon. Much of our future design would lean on these insights to deliver a refreshing experience for Beth and meet her personal expectations.

Drafting Customer Journey Map - Iva Kim & Katie Hughes

Drafting Customer Journey Map - Iva Kim & Katie Hughes

Customer Journey Map (by Katie Hughes)

Customer Journey Map (by Katie Hughes)

Storyboard for Beth (by Katie Hughes). Getting out of bed, rushing to work, noticing her oil change light is on, arriving at work and receiving an email from her company mentioning Coast as a new employee perk.

Storyboard for Beth (by Katie Hughes). Getting out of bed, rushing to work, noticing her oil change light is on, arriving at work and receiving an email from her company mentioning Coast as a new employee perk.

 

RECAP OF RESEARCH DATA

To quantify the vast amount of research we conducted for our client, we summarized all of our qualitative and quantitative data points. We found that we had 104 "heavyweight" qualitative and 1,019 "lightweight" quantitative data points that became the backbone for our design decisions in our prototypes. We felt extremely confident in our research strategy and execution—priming us for a successful design phase.

 

 

Design Process

Original User Flow - Whiteboarding

Original User Flow - Whiteboarding

ANALYZING CURRENT USER FLOW

We thoroughly analyzed the current user flow and site map to find critical pain points and complex usability features. In mapping out the site map and user flow, we knew we would have to make significant changes to address concerns both for the client and for our new users. We made the following recommendations for our design:

Creating User Flow - Iva Kim

Creating User Flow - Iva Kim

  1. Remove extraneous personal and vehicle information that confused users or slowed down the sign up and scheduling process.
  2. Integrate a short boarding process to educate users.
  3. Make sure users select a company that Coast currently services before providing any personal information.
  4. Remove the email verification process in the middle of the user flow, which eliminated three intermediary steps requiring users to exit the Coast app.
  5. Allow users to schedule their own appointment times, removing multiple pages from the original user flow and multiple email messages sent to users.
 
Discussing Design Elements - Katie Hughes & Iva Kim

Discussing Design Elements - Katie Hughes & Iva Kim

NEW USER FLOW

Based on the analysis above, we collaborated on a new user flow that would simplify getting our users from the welcome screen to their appointment confirmation in the most intuitive way possible. We discussed types of user actions, user interface elements, and other important details like clear copywriting for the initial on-boarding screens.

In the end, we simplified over 30 different steps in the original user flow into 15 simplified screens.

New User Flow

New User Flow

 

 PAPER PROTOTYPE

After a thorough breakdown of our new user flow, we created two iterations of a low-fidelity paper prototype. During our initial testing we received important feedback, including:

Creating Paper Prototype - Iva Kim

Creating Paper Prototype - Iva Kim

  • Users didn't expect to see welcome screen with a sign up button, so we removed it and focused on the initial on-boarding experience.
  • Users wanted to read more information about the services offered (ie. oil changes, tire rotations). So we added descriptions in our second iteration.
  • Users expected to see their order confirmation details before entering payment information. So we planned to add that functionality in the digital prototype.
Paper Prototype - Areas of Improvement: Welcome screen, information about services offered, payment details after confirmation screen

Paper Prototype - Areas of Improvement: Welcome screen, information about services offered, payment details after confirmation screen

 
User Testing Medium-Fidelity Digital Prototype

User Testing Medium-Fidelity Digital Prototype

MEDIUM-FIDELITY DIGITAL PROTOTYPE

We designed a medium-fidelity digital prototype in Sketch & InVision. We then tested it with new users to inform specific design changes to our affordances, layout, and other design elements for our high-fidelity prototype. During our testing, we received the following feedback:

Testing Using InVision

Testing Using InVision

  • Users expected to see shorter copywriting for the on-boarding screens. So we refined the copywriting.

  • Users indicated there were too many screens with text entry during the account creation phase. So we compressed all fields into one screen.
  • Some users didn't expect to find just two companies (Tesla and Workday), so we included a help modal to explain that Coast is currently expanding.
  • Users wanted date and time choices with more intuitive affordances to select appointments.

With this feedback, we created and tested a second iteration of our medium-fidelity prototype (see below). 

Medium-Fidelity Prototype - Areas of Improvement

Medium-Fidelity Prototype - Areas of Improvement

 

 

Interactive Prototype

High Fidelity Prototype

High Fidelity Prototype

HIGH-FIDELITY DIGITAL PROTOTYPE

We tested our app with more users—refining very specific design elements along the way. In addition, we applied a flat design language to our user interface to standardize our affordances and layout. Once user testers felt comfortable with our new prototype, we paused our design process and prepared for our final client presentation.

To recap the significant changes we made to the original user flow and user interface, we created a comparison video for the client (see below).

 

 

Conclusion

NEXT STEPS FOR OUR APP

 

WHAT I LEARNED

As a UX Program Manager for this project, I was fortunate to work with my amazing team members: Iva Kim, Jenn Chou, and Katie Hughes. They are amazing UX designers who have a deep understanding of user research, visual design, content strategy, and interaction design. While my team was remarkable, I still gained personal insights from this design project.

1. Project management in a compressed time schedule with a small team requires daily scrums and constant communication, as every work hour is critical. Our Gantt Chart was especially useful for this short-term project, which we found advantageous to keep track of individual responsibilities and upcoming project milestones.

2. Daily client communication via email was paramount for eliminating any unmet expectations. It also made us accountable for our own work, as we needed to communicate that we were working hard every day towards certain milestones and goals.

3. When debates on design elements arose, discussing differing viewpoints was a successful tactic that helped the group move forward with the strongest choice—eliminating compromises that would ultimately detract from the quality of the final prototype.

Team BestCoast

Team BestCoast

 

 

More Case Studies

 
Comp 10-1.jpg

Puppy Delivery

BravePup is an organization in Seattle that brings rescue puppies to corporate events. We turned this idea into an app for on-demand puppy delivery.

P2 Website Thumb.png

Coat Factory

With so many items to choose, and a frustrating user experience, the website for Burlington Coat Factory needed a better way for users to filter their searches and checkout faster.