A complete overhaul of the user flow and UI
Coast is a new B2B service in the San Francisco Bay Area that provides oil changes, tire rotations, and other basic car maintenance services. 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. 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.
Check engine light
Research strategy and screener survey
How much do we know about our cars? We tested to see how much information daily bay area commuters know about their vehicles and where they get their oil changes.
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 and comparative analysis - Heuristics analysis and content audit - Usability testing - User interviews & affinity mapping - User personas - Storyboarding and 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.
Get oil changes at a quick stop shop
Get oil changes at a car dealership
Knew the year of their car
Knew their license plate number
Color choices matter
Examining silent preferences
We asked respondents to perform word associations with the current coast logo and color scheme (dark blue and turquoise) to test our hypothesis that the color scheme did not match 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. 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?
Analyzing usability testing results
Fixing the user experience
Content audit and usability testing
We performed a content audit to figure out what visual and functional items should be kept, removed, or created.
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 craft pain points that our new design would aim to solve.
Content audit report
Deep dive into our typical users
User interviews, affinity mapping, and storyboarding
We interviewed potential users and found 5 major trends about daily driving and how commuters maintain their cars.
People had a plethora of negative emotions associated with oil changes and car maintenance
Dirty and grungy visual associations
Car maintenance is too costly and most repair shops are trying to “upsell” their customers with expensive products and services
People are too busy to make car maintenance a priority
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 in a new user flow
- Create a user persona that captures all of this information
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.
Putting it all together
Creating a 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:
- Remove extraneous personal and vehicle information that confused users or slowed down the sign up and scheduling process.
- Integrate a short boarding process to educate users.
- Make sure users select a company that Coast currently services before providing any personal information.
- Remove the email verification process in the middle of the user flow, which eliminated three intermediary steps requiring users to exit the Coast app.
- 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 13 simplified screens (see below).
Documenting previous user flow
Our first iteration
Paper prototype and testing
Our team went through two iterations of a paper prototype that informed changes to our affordances and UI strategy.
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
Taking it to hi-fidelity
We designed a medium-fidelity interactive prototype in Sketch and tested it using 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.
Observing user testing
Testing using invision
The big reveal
Comparing 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.
Wrapping it up
Next steps and takeaways
Our new design was successfully implemented in the new Coast app and published on the App Store.
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.