Sharpen 100-Day Design Challenge — Day 2
Overview
Duration: 90 minutes (including design and writing post time)
Methods: Mood boards, Quick prototyping, Unmoderated user testing
Tools: Figma (Mood boards & Quick prototyping), UsabilityHub (Unmoderated user testing)
Business goal: Microsoft prioritizes inclusion, innovation, education, and social values in its digital software and hardware products brand.
Design goal: Design a blog theme for Microsoft to attract users to the updated news from this company effectively and help the business promote their great values of products — focusing mainly on information architecture and visual design within 2 hours
Problem
To takeaway: There are two main problems found from the top taskbar menu. It takes 2–4 steps to get to where users want to be on the site. This problem may cause frustrations for blog readers.
(1) The All Microsoft tab is confusing as users may understand this tab is about the company. However, when users choose the All Microsoft, there is a lot of information about all their products and services.
(2) The Transform is understood as a part of the main menu by users’ learning behavior. Yet, on the Transform page, there is no Official Microsoft Blog for users to go back.
To reduce the fractions that can happen, I came up with the proposed solution and analyzed it with the users after that.
Proposed solution
Organizing the information on the top of the taskbar menu offers values to both users and the company.
- Blog readers feel easy to understand and convenient to find info that they are seeking.
- Microsoft can get more people updated on the news about innovation, inclusion, and other positive social benefits and know more about their products.
Design process
STRATEGY
Mood boards
Based on the inspiration of the brand colors of Microsoft, I collected their featured products’ colors to create color and font guidelines for the blog theme.
In this case, I used:
- red color for ‘The Official Microsoft Blog’;
- orange color for ‘Microsoft On the Issues’;
- blue color for ‘The AI Blog’;
- purple color for ‘Transform.’
Insights: By maintaining color and font from Microsoft, customers easily remember the brand while visiting their blogs.
DESIGN
Quick prototyping
By reorganizing the information on the top taskbar menu and underlining each tab by different colors, it is easier for users to obtain the information.
Also, I changed ‘All Microsoft’ into ‘Microsoft Products’ to help users feel more confident to browse for the information.
In the quick prototyping phase, I focused on 2 main features:
(1) Main blog menu includes:
- Official Microsoft Blog
- Microsoft On the Issues
- The AI Blog
- Transform
This helps users concentrate on information’s categories.
(2) Microsoft Products replace All Microsoft so that users can explore the products if they are inspired by the values from blogs.
Insights: By focusing on what matters to both users’ needs and Microsoft’s brand, I did quick prototyping to iterate the site based on key features.
TEST
Unmoderated user testing
To know if the users feel comfortable using the blog, I invited my friend to run a quick five-second test. The result was pretty positive.
Insights: To reduce the bias, I asked the friend who comes from an accounting background to run the test.
Reflections
Within 2 hours, I learned to put myself into users’ shoes and help people get the information more effectively. This challenge is a great chance to practice combining good information architecture and visual design. I got a better result by applying the Pareto principle — 80% of the outcomes comes from 20% of the effort.
Microsoft is a great company and if I could work with them, I would do the next steps:
- Doing more user interviews and moderated user testing to ensure the design is meaningful for the users
- Applying Microsoft Inclusive Design Guides to develop the blog more inclusive
- Doing heat map and running A/B testing to find the ways to help the users more engaged with the company’s blogs and news
Thank you for your reading. Please do not hesitate to reach me out if you have any questions or collaborate in any design projects. I am excited to learn from you. Also, please “comment” or “clap” to help me more motivated to share exciting ideas. Thank you! 😊
Please let me know how you know me so I can respond as quickly as possible. I cannot wait to hear back from you! Here is my email: thythanh1201@gmail.com
Disclaimer: The design is my practice and idea. It does not belong to any companies’ property.
