Windows 11 Cards Design

Weather & Finance Cards | Visual Exploration | Interaction Design

Background

In the weather and finance product lines at Microsoft, there are kinds of products using weather cards and finance cards which include the Windows 10 system, Windows 11 system, Microsoft website, Bing browser. The sizes, content and visual styles of these cards will be changed among different scenarios.

My role

I individually designed all the weather cards for different platforms including Windows 10 system, Windows 11 system, Microsoft weather website and Bing browser. My work includes competitor analysis, designing user flows, interface, experience and collaborating cross-functionally with product management, engineering, data analytics and other cross-functional teams to oversee the user experience of the product from conception until launch.

In addition, I completed the first version of finance cards.(It was launched in the Windows 10 system) When I was transferred to the weather team, other colleagues were responsible for the later design work of the finance cards and I was mainly focus on the weather cards.

Check & supplement of weather icons

The icons of weather are very important because they appear in many of the company's products and every user who view the weather information will notice them. We have received feedback from users before that our weather icons are not comprehensive and hard to distinguish, so before I start the design work of weather cards, I conducted a competitive product analysis and improved our weather icon system.

Check of current icons

Competitor analysis & Sollutions

I chose six weather products for competitor analysis. They cover the most popular and professional people favorite products on the market. They are: Apple weather, Weather.com, Windy, AccuWeather, Moji and Yandex.

Weather cards design

The picture below is the weather card I saw for the first time and the important information I extracted from the product manager’s document.

Competitor analysis

I downloaded 12 mobile weather applications and chose 6 of them to do a competitive product analysis, using the widget function on the iPhone and viewing the card's design of different products.

Exploration of weather cards - iteration 1

Impact: The first version of the design brought back good data after internal testing. The DAU of the weather website has increased by more than 50%🏆, mainly because the user experience of the cards has become better, and more users are willing to pay attention to the weather cards and go to the weather website to see more information by clicking the "See full forecast" button.

Exploration of weather cards - iteration 2

We had a quick iteration. In the second version, we did an A/B test in the small card(300*163) and added the big card (300*304). The reason we created big cards was that we allow users to change the position of cards, when they move the weather card to a big place, the small card can expand to a bigger card showing more weather information.

The main difference between the small cards in the A/B test is one kept the "See full forecast" button and another removed it. Then I did an exploration of the card design.

Then, we chose the four cards below to do our user test.

Impact: When we did the Test B (removed the "See full forecast" button), the DAU of Microsoft Weather website reduced 20%, it was a serious accident! 🤯 According to our analysis, the main reason for the decline in data was that there was no "See full forecast" button on the card in Test B, and it was difficult for users to know that this card was clickable.

Therefore, in the final version of the design, we chose the option A and also kept the button in the big cards.

Now the weather cards for all the platforms includes that in Windows 11 system were launched successfully! 🎉

devices.jpg

In Windows System, when you click the taskbar, you can view many different cards, including the finance card, sports card, weather card, etc. Therefore, when designing weather cards in this system, I need to follow the overall frame design and maintain the same visual style as other cards.

But at the same time, the weather card has its characteristics. For example, the weather icon and the temperature are the most information for the entire card. We can enlarge the size of these two kinds of information. In addition, the background of the weather card can correspond to the current weather conditions instead of using a solid color.

Impact

🎓 What I learned

  • Try to be a designer with product thinking. As a designer, if you just complete the design work based on the product manager's document, such design work has no soul. When you're confused about some details or have a better solution, be brave to communicate with your colleagues. Remember, you work for one team.

  • Collaborate actively with cross-functional teams. After the second version of the card was launched, in Test B, we found that DAU was reduced by 20%, which is a very serious accident. But we also understand the importance of the button for the card, which helped us quickly iterate out the third version of the design, letting DAU come back to the normal value and increase by more than 60%.

  • Learn to express opinions confidently. When there is a conflict between design ideas and product requirements documents, find a strong reason to convince the product team and they will rethink the problem with you. For example, due to the limited space of the small card, it is difficult to put down a lot of information. I suggested removing the update time and data source in the small (300*163) cards and keep them in the big (300*304) cards. Finally, the product team adopted my opinion.