About:
R7 Tempo is a weather forecast website, which makes it one of the most unique products within the R7 ecosystem. It helps thousands of people every day with their commutes and planning, offering accurate information quickly, clearly, and simply.
I was responsible for its entire creation, and with the help of the product and data teams, we were able to arrive at a simple interface that can be easily accessed on different devices or locations, especially important in a tropical country like Brazil, where the weather can change several times throughout the day.
This project involved working with a type of information and presentation model I had not previously designed for. But the project’s main challenge was creating a website capable of conveying information quickly and clearly, as many users access it while commuting to or returning from work. These users often rely on public transportation and are therefore more directly affected by weather conditions and sudden changes throughout the day.
In this context, accesses frequently happens on older devices and in crowded, high-distraction environments, like buses and subways during rush hour, factors that directly impacted the design choices.
The top of the page displays the city for which the weather forecast is shown, with a search field that allows users to quickly change locations.
Main information is structured into four sections following a clear chronological order: current conditions, today’s forecast, tomorrow’s forecast, and the outlook for the next 14 days. This structure allows users to quickly access the level of detail they need, from immediate conditions to short-term planning.
Within the current day and tomorrow forecast sections include a "More Details" action that expands the view to show hourly graphs for temperature, precipitation, wind speed, and humidity:
Iconography
R7 Tempo is a prime example of how certain products are completely different from what is commonly created within a brand. And that's where a well-structured and comprehensive Design System shows its value. Since R7 Tempo is a byproduct of R7, the visual appearance had to remain the same across both platforms, strengthening brand identity and offering user familiarity.
Some elements inevitably needed to be added to this specific part of the Design System, such as the icons representing the various weather variations. But, apart from that, the use of pre-existing R7 tokens and components greatly facilitated this task.
These icons represent all possible weather conditions. Their flat, minimalist design aligns with the R7 Design System, resulting in a clean and efficient visual language.
Results and Impact
Progress on this project was smooth, from the quality of information gathered during benchmarking and wireframing to component creation, prototyping, and final user testing.
Despite being a completely different type of service from anything I had worked on before, this project reinforced the importance of a concise and efficient design system, capable of supporting new needs, no matter how distinct. Clear and consistent communication with the product and development teams was also essential, especially in understanding how the data was received and translated into simple visual information for end users.
Years later, it’s still a product I use regularly, whether I’m planning a trip or simply deciding when to walk my dog based on the chance of rain. Being able to say that I was responsible for this website, and hearing that others rely on it just as often, is very rewarding.
