graphic design
web design
content creation
digital design
product design
ux/ui design
Maps help users solve their everyday tasks. For example, navigating locations and finding specific places. As a product, Maps include several services: search, public transport, navigation, and taxi.

Users often face obstacles while trying to accomplish their tasks, and the product should help them overcome these challenges. For example:
– provide advance information about traffic congestion and suggest alternative routes;
– inform users about road closures in the city and build routes that avoid inaccessible areas;
– warn users if a place is about to close;
– suggest faster alternatives, such as taking a taxi instead of a bus, or more affordable options, for example combining a taxi ride with the metro.
Yandex map + weather
Yana Kruchinina
Valentina Belokhvostova
Polina Karpova
Credits
Yandex Practicum
Client
prototyping
design
testing
wireframing
research
Weather directly affects navigation scenarios: during a snowstorm, moving around the city becomes more difficult, and sometimes it’s better to stay at home.
Problem
Define an effective way to integrate Yandex Weather into Yandex Maps in order to improve users’ everyday decision-making and increase engagement within the Maps product.
Task
Implement a widget that shows weather conditions along the route and suggests alternatives when weather impacts travel time, comfort, or safety, with the goal of increasing successful route completion and user retention in Yandex Maps.
Solution
User story choosen
I conducted an ICE scoring to identify the most critical pain point and, based on it, formulated a user story: «When I plan a trip, I want to see an accurate weather forecast at key points along the route and at the time of arrival, so I can adjust my route or prepare in advance»
CJM and user persona
The customer journey map revealed that the main dissatisfaction related to weather-aware navigation occurs at the route planning stage, specifically when users enter the starting point and destination
Interwiev
We interviewed four participants from different cities across Russia, aged between 23 and 33. All respondents work in different fields and actively use navigation apps in their daily lives. For some, navigation is an essential part of their work, while for others it serves as a tool for time planning and route building
Сompetitor analysis
We conducted a competitive analysis of seven services that combine map and weather functionality. Based on this analysis, we formulated hypotheses for user interviews with representatives of the target audience
Research process
Additional visual cues were required to improve clarity and usability
Users encountered limitations of the prototype’s initial functionality
Participants expected a weather layer rather than individual weather icons on the map
In the initial design, some elements were not noticeable enough for participants
A low-fidelity wireframe was created and tested through prototype-based interviews with participants aged 24–44 who regularly use maps and pay attention to weather conditions before leaving home
Wireframing and testing
I designed a widget that displays weather conditions along the route and suggests alternatives when weather impacts travel time, comfort, or safety. The widget also collects user feedback on whether the proposed route optimized for current weather conditions was helpful
Final prototype
Leave your feedback to make the feature better
I decided to implement this weather widget in Yandex Maps because it preserves familiarity for users: the widget’s UI is consistent with the Yandex Weather app. Testing showed that users found this approach clear and easy to use — the interaction was intuitive, and the widget reduced friction by eliminating the need to switch between two separate apps
Overview
Color codes
Background
Gradient Day Clear
#335DB8 #45A0E7
#2B3F7D
Gradient Fogy Rainy
#78818D #57616D
Gradient Night Rainy
#011039 #5B74B7
Gradient Night Snowy
#050721 #1F223B
#3B4664
Primary
#5B74B7
Secondary
#011039
Tertiary
#FFFFFF
Quaternary
#424473
Buttons
Primary
#62B9FB
Secondary
#62B9FB
Tertiary
#3584F0
Gradient
#62B9FB #3584F0
Text
Primary
#FFFFFF
Secondary
#EBEBEB
Tertiary
#4D4D4D
Icons
Primary
#66AFEB
Secondary
#FFB300
Gradient Primary
#9FC7FF #9BC1F5
Gradient Secondary
#FFB301 #FFC533
System components
Primary
#FFFFFF
Secondary
#EBEBEB
Tertiary
#CCCCCC
Icons graphic elements
Primary
#196DFF
Secondary
#FFFFFF
Tertiary
#19B498
ekaterina shprints
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website