Summary
Design improvements for car icons and voice guidance features in Yango Maps, Yandex Maps, and Yandex Navigator.
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.
Product
Yandex Maps, Yandex Navigator, and Yango Maps are popular cartographic services that allow users to plan routes using various modes of transportation, including walking.
These applications generate revenue through advertising services like Google Ads and targeted campaigns with businesses. However, untargeted ads often lead to lower user engagement. Conversely, well-targeted and contextual advertising is more effective as it resonates better with users and generates higher click-through rates.
Background
While most users dislike ads, especially those that interrupt use or lack relevance, alternative, contextual ad formats exist. These formats, like car icons and voice guidance during navigation, are generally better received because users choose to activate them. However, businesses may find their effectiveness lower compared to other ad formats.
Goal
The goal is to enhance the appeal of car icons and voice guidance features for both users and businesses. This could lead to users engaging with these features more frequently, increasing brand awareness for businesses. Consequently, the product would experience a boost in effectiveness, potentially leading to increased sales volume or higher pricing.
Research
I performed a small audit of the feature and analyzed how competitors approach it. This included examining their strengths and weaknesses, visual style, interface design, and user flow.
Based on these findings, I formulated conclusions and hypotheses that can guide the team's decision-making process and future experiments.
Wireframing
Drawing on the results of our goal setting, feature audit, and competitor analysis, I've designed several options for testing.
Maintain the list layout, but more details about each object. This includes descriptions, colors, object size, and increased image size.
Another option is a grid layout. This layout shows more image space compared to text, allowing users to see the objects better.
This layout uses large blocks to display objects. Each block contains all info about the object, including more details about its colors.
Design Validation
In the absence of prior user research, I opted to conduct a study using Toloka, a crowdsourcing platform commonly used for tasks related to AI development.
Toloka also allows for simpler things like showing users with two images and asking for their preference with a brief explanation. To minimize user effort during testing, I refined initial wireframes into high-fidelity mockups.
Research indicates that users favor interfaces with large cells and buttons. However, a grid layout with two rows offered a trade-off between displaying more objects and prioritizing images compared to a single row of larger cells.
Additionally, since users wouldn't intuitively know another screen appears upon tapping an object, buttons may be unnecessary. I'll provide further details about the additional screen and its purpose below.
Selected Improvements
Here are some key considerations for enhancing the user interface, visual appeal, and effectiveness of feature objects.
Better show custiomization options
Two key factors could contribute to effective feature objects: discoverability and clarity. Objects should be positioned for easy access, allowing users to find them readily. Additionally, the objects themselves need to be visually clear and recognizable, so users understand their purpose at a glance.
Current version. In navigation mode, a settings button is available that opens the quick settings menu. Car icons reside near other options, such as theme and map layers.
Revised version. The quick settings menu contains a variety of options. Grouping them into sections would improve clarity and provide dedicated space for car icons and voice settings. For demonstration purposes, the customization section is positioned above preferences.
The selected car icon itself could function as the button. It's constantly visible on the screen and interacts similarly to other screen elements like buildings, points of interest or roads. Additionally, Google Maps allows users to change their icon through the selected icon.
Some car icons could be placed on the map, where users might discover them during navigation. These icons could be either randomly distributed or attached to relevant physical locations, such as car dealerships, to provide additional context.
Refine objects screen
Current car icons are displayed in a small size, potentially limiting users' ability to see details. The human brain processes images faster than text. Therefore, increasing the size of car icons could allow users to quickly scan through options, reserving text descriptions for later reference.
While research suggests list of large blocks are generally preferred, a grid layout was chosen to balance displaying more objects on the screen with providing adequate space for the object images.
Current version. Objects with actions displayed on a single list.
Revised version, grid view of objects. Actions intentionally placed on a separate screen.
Car icons look different because they were shot from various angles. Using just one angle would make them look better (see below). Plus, it would save time shooting new ones since designers wouldn't have to worry about angles.
However, different models have different optical weight. This means some might appear too big or small compared to others even if shot from the same angle. It still need to adjust some icons manually to achieve a consistent visual weight for all, and probably can't be automated.
Voices are a bit different objects. They don't need pictures to work, but adding images could make them more visually appealing and help users distinguish between different voice options.
Current version.
Revised version.
Design an object screen
This project aimed to improve the effectiveness of ad formats for both users and businesses featuring brands within the product. While brands can gain exposure simply through appearing as objects, a dedicated object screen could offer even greater benefits.
This screen would serve several purposes:
Offer users more information about objects and their associated brands
Manage objects. Allow users to download, select, and delete them
Enable users to choose textures or models if applicable
Include links to brand webpages for further exploration
Allow to promote more objects from the same business.
Current version. There are three versions of one model – the arrow.
Revised version. The object screen could include all textures (and models) to eliminate duplicate content.
Giving the objects as a reward
Gamification can be a powerful tool to boost user engagement. By unlocking car icons or even voices through completing tasks (simple or more challenging), users might be encouraged to interact more with both the product and the obtainable objects.
These tasks could be different. For example, depend on a product usage, related to other products in brands ecosystem or even created by the business.
Unlocked objects could be displayed at different sizes to better fit the context. Additionally, a dedicated screen showcasing unlocked objects could be used to motivate users to unlock even more.
Status
The team started working on improving these ad formats, but product changes forced us to put it on hold. Currently, Yango and Yandex offer over 60 car icons and over 20 voices for users to choose from.
Yango and Yandex use car icons and voices to attract users. In 2024, Yango introduced new car icons, while Yandex created a video featuring a brown horse as the main character. This brown horse is available as a car icon in Yandex Maps, Yandex Navigator, and Yango Maps.
