Summary
I led the design and implementation of a seamless booking system on Yandex Maps, resulting verified daily bookings and providing a foundation for potential expansion into various service sectors.
Results
25,000+
Daily Bookings
15+
Partnered CRM’s
+++
Verified User Reviews
What I did
Competitive Audit
User Interface Design
User Experience Design
Art Direction
Team
Product Manager
Lead Researcher
Lead Graphic Designer
Product Designer (me)
Platforms
iOS & Android
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Yango or Yandex.
Yango Maps, launched mid-2023, aimed at simplifying navigation in the United Arab Emirates and Azerbaijan, offers detailed maps specifically tailored to these regions.
Yango Maps goes beyond basic features like finding places and getting directions for walking, driving, or public transport. It empowers users with features like highly detailed maps to navigate complex intersections, speed limit notifications, and offline maps to save on expensive mobile internet.
This focus on regional details and offline functionality builds on the strengths of Yandex Maps, the established mapping platform from which Yango Maps originated. Yandex Maps, launched in 2004, offers a wider range of features, with 12 million monthly active users in Russia and over 20 million worldwide.
Background
Yango Maps set out to create a user-friendly navigation app specifically for a few regions. A key goal was to showcase the app's features and grab user attention. However, the team quickly recognized a potential roadblock: users in the UAE are often cautious about granting geolocation permissions, which are essential for any map app to function.
This user behavior, combined with a lack of data on how effective the existing onboarding process was, presented a significant challenge. To be successful, Yango Maps needed a new onboarding experience that could address both of these issues: effectively highlighting the valuable features of the app and securing the necessary permissions from users.
Business Requirements & Constraints
During the project, as a Yandex Maps product designer I collaborated with the product manager of Yango Maps to define the app's onboarding experience.
Our goals for the onboarding were to:
Increase user location permission grants
Educate new users about the app's features
The scope was later expanded to include:
Boosting notification and IDFA (identifier for advertisers on iOS) permission grants
Adapting the onboarding for Yandex Maps as well
Tailoring the onboarding content to the user's region
Market Research
I conducted a thorough analysis of the apps of Yango Maps' direct and indirect competitors. This analysis assessed their feature sets, user experience, interface, and visuals. We gained valuable insights on best practices to incorporate and areas to avoid.
Wireframing & Prototyping
I started by researching what structure would best achieve the app's goals and subtasks. Based on my findings, I created three different onboarding experiences using wireframes and prototypes to show how they'd function.
While I developed these variations, a central theme remained consistent: emphasizing the importance of location permissions. This is where the world map comes into play. By incorporating a world map into the onboarding flow, we can provide context and visually reinforce the idea that knowing the user's location is the first crucial step.
The team also thought it might be helpful to show a descriptive screen before asking for location permission. This screen would explain why the app needs access to the user's location. Back then, the only permission the app needed was location access. So, trying this new approach made sense.
This version modifies the existing onboarding flow. Users encounter the first screen, followed by a choice: jump right in or explore key features first. If they choose features, however, the app will automatically request location access after browsing.
This approach takes a completely different tack, dividing onboarding into two parts. The first part focuses on obtaining location permission and introducing the app's core functionalities. The second, delves deeper into the app and offers a brief user guide.
Last flow prioritizes efficiency. It utilizes a minimalist approach with a fullscreen interface to request permissions, showcase critical features, and briefly explain how the app works. This method gets users started quickly with minimal clutter.
The product manager raised a concern about all the onboarding versions. They worried users might skip the feature introduction, leading them to miss out on important functionality.
The first version definitely allowed users to completely bypass the features, while the second one was too expensive to develop. To address this potential gap, I decided to modify the structure of the third version and we focus on moving forward.
Before. Swipe to browse additional features (optional).
After. Proceed with onboarding using the button (required).
Testing Hypotheses
I finalized the onboarding structure, but then received new requirements for what the onboarding screens should include. Once I added content to the structure, it became clear that eight screens were too much for users to take in during the first launch. I asked to conduct a research to prove it.
Research Details
To test our prototypes with different options, research team recruited 360 participants and used a 3rd party service to record their interactions through webcams in unmoderated sessions (participants completed the tasks on their own). They divided the participants into 3 groups. Each participant used their phone to access the prototype, complete assigned tasks by navigating through it, and then answer a survey about their experience.
Typical participant profile:
Age: ≈28 years old
Gender: Male
Location: Resident of Dubai for at least 6 years
Language: Primarily uses English for daily communication
Research Takeaways
This research yielded valuable insights that helped us understand the specific needs and concerns of users:
Limited attention spans. Only a third of participants indicated they would complete the entire onboarding in real-world use. The full process took about a minute, highlighting the need for a concise experience.
Managing expectations. Showing the number of onboarding screens upfront helps users set expectations and avoids frustration if it's longer than anticipated.
Prioritizing value. Users are more receptive to learning about the app's most interesting and valuable features first. Explaining basic features can be introduced later.
Digging into user needs through research was key. It helped us understand what mattered to users. Based on that, we simplified the onboarding process, cutting the number of screens from suggested number to 8. As the designer, however, I felt this was just a starting point. It wouldn't be enough to truly improve the user experience in a significant way.
Design Scalability
After completing the research and handing off the design to the engineering team I discovered a new constraint. It turned out that Yango Maps isn't a completely separate app built on Yandex Maps. Instead, they share the same underlying codebase. This means team can't have separate onboarding experiences for each app and need to use a single onboarding flow for both.
While they share the same core structure, the two apps will have distinct visual identities and functionality depending on the region. For instance, the branding colors, fonts, and logos will differ based on the app. I've mapped out the features available in each country to ensure the onboarding only highlights functionalities relevant to that specific region.
Yango Maps uses a rich blue color with a bold brand font for headlines and a regular font for descriptions. Speed limit alerts are particularly important in the Emirates due to strict laws.
Yandex Maps has a slightly lighter blue color and uses one font for both headlines and descriptions. While searching for places is a very common feature, it's not as popular in some regions.
Visual Design
By design, the features and permissions screens were intended to be illustrated with images. However, even though the created images by a graphic designer incorporated brand colors and aligned with the screen's purpose, they still appeared generic. Recognizing this, the product manager sought my help to improve the visuals. Here's what they looked like:
To guide the visual direction, I presented different options for developing the graphics. Each option, whether focusing on increased detail or a more realistic style, would make the illustrations more attractive. Ultimately, the graphic designer decided on the approach that offered greater realism specific to the product. This involved a combination of user interface elements and a detailed 3D map, which would better convey the context of the features being explained.
Final Design
Impact
Yango Maps launched a new onboarding experience, and so did Yandex Maps. It welcomes new users and introduces them to the app's key features right away. This streamlined approach aims to improve the user experience by making the app's value proposition clear from the start.
To gauge the effectiveness of this new approach, we're closely monitoring user engagement metrics. I am excited to share the results once I have a clearer picture of how the new onboarding experience is affecting user behavior.
Takeaways
Looking back, here are some areas where i believe the project could have been improved:
Clearer requirements. Having a complete picture of requirements, content needs, and technical limitations from the start would have allowed for more optimal solutions. In this case, time pressure forced some quality sacrifices. For instance, the Yandex Maps onboarding was only visually adapted to the brand, without considering the specific user context in each market (where location permissions are readily granted).
Offline functionality. The initial onboarding relied on a background-downloading world map, which could leave users confused if they have a weak or no internet connection. An ideal solution would allow users to proceed with onboarding even in offline scenarios.
[Some text about offline]
Data-driven decisions. The research results provided clear insights: the onboarding was too lengthy and could benefit from a UI element displaying the number of screens to manage user expectations. Unfortunately, these findings weren't fully incorporated into the final design.
Prioritizing bug fixes. A critical bug emerged during design review where user location searches took over 10 seconds, causing the onboarding to skip. Despite the bug was found, it wasn't addressed until a pre-launch experiment revealed a significant impact (1/3 of users encountered it). A more proactive approach to bug fixing would have minimized user frustration.
[sankey diagram]
Text quality and user testing. While the visuals were addressed, concerns lingered about the quality of the onboarding text. An internal study raised doubts, but text revisions weren't implemented.
[sbs with text]
Pre-launch usability testing. User testing is crucial not only in the initial research phase (identifying user pain points) but also before launch to ensure the design effectively addresses those issues. Unfortunately, this final testing step wasn't conducted.
