Julian Jensen
 

Coast App

 

Car maintenance at your place of work.

tim-mossholder-212029.jpg

The Challenge

Our team was tasked with a 3-week design sprint to make significant changes to the current user flow in order to shorten the time required to sign up and schedule an appointment for a mobile auto care service. Our client also requested a full-scale user research report, which is where we began our work.

What is coast?

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.

 
Old Version of Coast App

Old Version of Coast App

Our New Design

Our New Design

 

My Role

UX Project Manager

 
 
Custom Project Gantt Chart

Custom Project Gantt Chart

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.

Assembling Affinity Map

Assembling Affinity Map

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.

Contacting Our Client

Contacting Our Client

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.

Comp 11.jpg
 

Research

 
 

Research Strategy & Summary

 

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

Insights from Screener Survey

Insights from Screener Survey

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. 

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.


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.

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.

Example Color Choices for Survey

Example Color Choices for Survey

Key Results from Survey

Key Results from Survey


Competitive Analysis Diagram (by Iva Kim)

Competitive Analysis Diagram (by Iva Kim)

Competitive 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

Heuristics Analysis & Content Audit

We also 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.

Performing Heuristics Analysis

Performing Heuristics Analysis


User Testing

User Testing

Discussing User Testing Results

Discussing User Testing Results

Usability Testing

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

  • 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 Interviews & Affinity Mapping

 

Investigation

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):

  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

User Interview (Andrew Ho, Iva Kim)

User Interview (Andrew Ho, Iva Kim)

Conclusion

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
Negative Emotional Associations

Negative Emotional Associations

Assembling Affinity Map (Iva Kim)

Assembling Affinity Map (Iva Kim)

Comp 29.jpg
 
User Persona (by Jean Chou)

User Persona (by Jean Chou)

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.

User Persona, Customer Journey Mapping, and Storyboarding

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.


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:

  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.
Creating Current User Flow From User Testing (Iva Kim)

Creating Current User Flow From User Testing (Iva Kim)


New User Flow Diagram

New User Flow Diagram

New User Flow

We then 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.

 

Quantifying Our 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.

Comp 22.jpg
 

Design Process

 
 

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:

  • 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.
Discussing Design Elements (Katie Hughes & Iva Kim)

Discussing Design Elements (Katie Hughes & Iva Kim)

Examples of Design Feedback for Our Paper Prototype

Examples of Design Feedback for Our Paper Prototype

 

 
Testing Using InVision

Testing Using InVision

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:

  • 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.

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.

Examples of Design Feedback for Our Medium-Fidelity Prototype

Examples of Design Feedback for Our Medium-Fidelity Prototype

Our Final Design

To help explain the changes we made to the user flow and user interface, we created a comparison video. The old version of the app is on the left and our final design is on the right.

 

Watch Comparison Video

Download Flinto File

Comp 25.jpg
 

Conclusion

 
 

Next Steps For Coast App

Heuristic evaluation of the current website

User testing with current Coast App customers

Including more transparent pricing

Repeat scheduling options and menu re-design

Changes to editing user account information

Copywriting for services offered

Creating a Content Strategy Plan

 

Our design recommendations and research findings have been successfully implemented in the new Coast 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.

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.

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.

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 09.jpg

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.

002.jpg

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.

Comp 24.jpg