Julian Jensen

Car maintenance at your place of work.

Coast App

 

Project Summary

 

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.

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.

As the UX program manager for this project, 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.

 
 
 
 
 

Research strategy and screener survey

 
 

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

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.

 

35%

get oil changes at a quick stop shop

65%

get oil changes at a car dealership


83%

Knew the year of their car

33%

knew their license plate number

 
 
 

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.

 

WHAT COLOR REPRESENTS TRANSPARENCY?

oil changes

AUTOMOBILES

EFFICIENCY

 
 
 

Content audit and usability testing

 
 

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.

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.

 

Content audit report

 
 
 

User interviews, affinity mapping, and storyboarding

 
 

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

 

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

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.

In our story, Beth gets out of bed and rushing to work, she notices her oil change light is on. Upon arriving at work, she receives an email from her company mentioning Coast as a new employee perk. Much of our future design would lean on these insights to deliver a refreshing experience for Beth and meet her personal expectations.

 

Storyboard

 
 
 

Creating new user flow

 
 

We thoroughly analyzed the previous 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.

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.

 

documenting previous user flow

 

new user flow diagram

 
 

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.
 

design feedback

 
 
 

Digital protoype

 
 

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.

 

design feedback

 
 
 

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.

DOWNLOAD FLINTO FILE

 
 
 
Comp 12.jpg
 

Next steps and takeaways

 
 
IMG_7522 (Priime Nob Hill) copy.jpg

team bestcoast

Our design recommendations and research findings were successfully implemented in the new Coast app.

 

Next steps and recommendations include:

  • 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

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.

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