During my experience as a Agap2 UX/UI design consultant at Hyntelo, one of my tasks was to design the new onboarding flow for Nearby, a Mastercard mobile app that my client had been commissioned to re-design.
What is Nearby? It is a free tool, map-based and active worldwide, that helps users find specific services related to their Mastercard credit cards, in their relative vicinity, or nearby a selected point.
In the image you can see some screens from the old onboarding flow.
The onboarding flow that I am showing you here was designed by me for a version of the app that subsequently underwent changes in its functionality. In any case it had been approved by Mastercard.
Where do you start when you find yourself having to design something so specific? Well, the first thing I did was an as-is analysis, from which emerged a decidedly long and overwhelming onboarding, uninviting to read, and also aesthetically questionable.
So I decided to document myself by conducting a benchmark on competitors and comparables. Through this research activity, some valuable data emerged, both on the UX and on the visual level.
From Waze, I appreciated the value of a short flow and concise content focused on the solution and how good it feels once you get it.
Figma, as a technical tool and not a utility app, takes a more focused approach to functions, which are presented within the interface through numbered tooltips.
The Google Earth solution is interesting; it starts with a summarizing modal and then turns into a kind of guided hands-on tutorial.
ChargeMap and Cycle-e Around Pirelli stand out for the emphasis they place on personalization and use cases, along with original solutions in terms of visual communication and interaction design.
Mailchimp's is probably the best onboarding I have looked at if we exclude Duolingo which, by characteristics is not applicable to our case. By the use of cropped screens of the interface and a copy that results in being both feature- and solution-focused, it manages to provide, without overloading and without going into unnecessary technical-functional detail, an initial hint sufficient to represent a basic overview of the product. all accompanied by a finely curated visual contour.
At this point I asked myself, what purpose should this onboarding have? The answer was that it should be a welcome and introduce to the 3 main functions (explore nearby, find nearby, and plan), without becoming an instruction booklet.
So, taking critical cues from the benchmark, I applied the collected data to our case and, with wireframes first and with hi-fi prototyping later, I made the 6 flow screens.
the splashscreen has a map as a background; this along with the pins representing the 4 Mastercard services that can be located with the app, immediately suggests the essential nature of the app itself.
after loading you land on the welcome page; which similarly to the first screen of Google Earth, represents a general overview and introduces the 3 main functions. Given the structure of the home page, I found it effective to insert it cropped as seen in the image, so as to provide an essential first look.
Clicking on 'Continue' takes you to these 4 steps, in structure very similar to the Mailchimp flow. You can swipe back and forth or go forward by clicking 'Next' and at any time you have the freedom to skip. The images and copy, again, do not represent detailed instructions, because at this time the user cannot use the app yet, they are opening it for the first time. What they represent instead is a balanced introduction between conciseness, function-oriented and benefit-oriented message.
