Role: Research, Strategy, Wireframes (plus UI, Animation)
Timeframe: 100 hours
Tools: Paper, Sketch, Illustrator, Figma, After Effects
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.
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.
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.
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.
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.
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.
I examined the entire onboarding flow for UX-related errors. There were three main problems that needed addressing:
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).
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)
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)
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.
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:
(Click/tap on image to enlarge)
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.
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.)
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.
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:
Creating a multi-platform chatbot solution for motorists.
