1. Introduction 2. Challenge3. Research4. Design5. PROTOTYPE

More Successful Onboarding

Client: Meineke Auto Repair Centers

Role: Research, Strategy, Wireframes (plus UI, Animation)
Timeframe: 100 hours
Tools: Paper, Sketch, Illustrator, Figma, After Effects

Incorrect App Setups

Meineke Auto Repair’s mobile app (on iOS/Android) offers appointment scheduling, coupons and rewards, finding your nearest store, and app-only features such as a users’ complete Meineke service history.

When first installing, users were choosing the wrong country (US or Canada), not realizing that the app locked itself to that country’s database of locations unless they reinstalled it. That was just one sign of a setup and onboarding process that wasn't very clear from the outset.

I have omitted and/or disguised confidential information in this case study. The information presented here is mine, and does not necessarily reflect the views of Meineke or its parent company, Driven Brands.


Improve The Application Setup Process

As part of our ongoing relationship with the client, we were responsible for providing support and making constant optimizations to their several websites and their mobile app.

The challenge was to make the setup and onboarding process clearer so users understood the selections they were making and what it meant, while keeping the solution modest in scope due to available hours and budget.

My Role

I was the sole UX designer on this project, working with a Project Manager. My responsibilities included gathering requirements, and creating flows and wireframes for implementation.

The interaction and final visual designs shown here are not part of the original project, but exploratory next steps, undertaken on my own afterwards.


Problems & Constraints

Monitoring app user feedback, the Project Manager became aware that some users were having a problem finding Meineke locations after installing.

Meineke has several hundred US locations, with several dozen more over the border in Canada. Accordingly, the app required that users choose which country they were situated in on first use. Configuring this setting wrongly led to problems like this:

Users weren't just confused when selecting a country; they had no way to undo or change their initial selection unless they reinstalled the app—something which most had no idea about.

Different Countries, Different Databases

Conversations with the developers quickly revealed an organizational problem: the location data was stored on entirely different databases. Meineke US and Meineke Canada actually had separate CRMs and other databases.

A Piggy Bank
A Store 'open' sign

Since merging the databases or rearchitecting the app was too costly for this project, it was necessary to help users make the right selection with minimal friction or confusion.


Faults In The Flow

I examined the entire onboarding flow for UX-related errors. There were three main problems that needed addressing:

  1. Poor Country Selection
    This crucial step was placed late in the flow and made to seem unimportant, with no warning to users about the permanency of their choice.

    In addition, the UI was overly dark and bland, with too little context given for the buttons. For instance, 'CA' could mean California (likely the reason for the review above).
  1. Back to back dialogs with no permission priming
    Asking users to confirm their country seemed necessary, but tapping 'yes' led the user right into another dialog - a Location permission, with no prior priming whatsoever.
  1. Confusing product tour slides & Account creation
    While keeping to a neat 3 slides, little effort was made at convincing users of the value, thanks to poor contrast, hard-to-read text and bland icons.

    In addition, the first slide was largely wasted, and account creation had been placed only on the last slide, but left skippable—making it confusing to the user if creating an account was a necessary step or not (it was; the app had little functionality without a linked account).

Towards The Ideal Path

Paper Prototyping

I needed to find out what the optimum flow was. Paper prototyping was a great way both to organize my ideas, and to guerrilla-test the flow with likely users (I focused on finding car owners who had smartphones with apps installed).

Optimizing & Prioritizing

Eventually, a flow emerged that I felt avoided the prior problems.

I placed country select first to stress its importance and permanence, made sign up/sign in possible from all slides with the option to skip removed, and gave Location Permission an additional slide to properly prime users for acceptance.

(Click/tap on image to enlarge)

Creating Wireframes

Armed with this flow and my paper prototype screens, I created medium-fidelity wireframes.

I also tried to incorporate certain UI improvements here, such as standardizing button placement and improving readability.

(Click/tap on image to enlarge)

Beyond the Project Limits

My role here had been to solve users' country selection problem and create medium-fidelity wireframes that offered an improved onboarding experience.

Though this was essentially achieved, and I was no longer involved with the project, I was inspired to take the designs further myself. I wanted to demonstrate how including better visuals and animation might help push the onboarding experience even further, and to produce a prototype that could be potentially be used for further testing.


Look, Feel & Motion

The original slides had done a poor job of conveying the app's features - and without that crucial part in place, it was likely some users might not continue to sign up.

To improve these, I sketched them first, then created them using a mixture of Sketch and Illustrator.

Here are some of the improvements I made:

6 high-fidelity screens showing for the app

(Click/tap on image to enlarge)

Bringing It To Life

The first few minutes of using the app needed to feel delightful. I opted to use short animations on the slides to really highlight the benefits of the app - while hopefully giving a lighter, more modern feel to the experience.

From sketches, I created vector illustrations and imported them into After Effects for animation, creating Lottie files (light, JSON-enabled animations) for the app and animated gifs for the prototype.

Original Animation Sketches.

A final Illustration.

The same illustration in a finished animation.


Creating a Figma Prototype

I chose to use Figma to create a prototype as I like the fine control it gives over animations, and other programs such as Adobe XD currently have no support for animated gifs.

You can view the prototype below.

(Figma prototype not loading? Open in a new window or watch a video.)


Fewer Wrong Setups

After communicating my findings and designs to the team, changes were made to the flow as per my advice (such as moving the country selection).

Since the changes, complaints from users about wrongly configuring their app have dropped significantly.


One Problem at a Time

I was proud to be involved this project with as far as it went - without a lot of time available, I was able to quickly identify key faults and propose a solution that improved the entire onboarding experience.

That being said, it felt like I was taken off the project with a lot more work still needing to be done. (Truthfully, that was my inspiration for wanting to continue it here).

The app's problems likely went a lot further than onboarding. If I was still involved, I'd love to:

More Projects:

Solving High User Queries With Chatbots

Creating a multi-platform chatbot solution for motorists.

A Better Way To Pay For Paint

Improving the checkout process for paint professionals.