Fluent Design Studies
An Internship Project at Microsoft
This project explored how Microsoft's Fluent Design system can be applied to a web application – the social artificial intelligence platform by Microsoft Xiaoice. This project was done individually during my internship at Microsoft.
Address Usability Issues on Current SAI
Apply Fluent Design to SAI
Explore Fluent Design on Web App
Showcase Product on a Marketing Site
About SAI Platform
The SAI Platform provides solutions and business support
for social media / We Media marketing and management. This platform is powered by the Artificial Intelligence product:
1. The fluent design has never been applied to a web-based application. All previous designs were done for desktop applications. There are a lot of limitations for a web app to apply the fluent design.
2. Microsoft is still working on refining the fluent design. While I was working on this project, they updated or released new features and guidelines once in a while. So I had to quickly make changes to adapt to their new guidelines accordingly.
3. I needed to make decisions on when, where and how much of the fluent design elements I should apply. I spent a lot of time experimenting on the most appropriate design.
Problems with Current Design
Inconsistency between pages
The overview is the first page users see after logging on the platform; however, there isn't much information shows on the overview page. It's too general, it would be nice to provide some links to the subpages, but there isn't any.
The hierarchy of buttons and tabs are a little confusing. Using card is an easy way to show contents like these article with images but could explore more styles.
The way how controls are used in this is very confusing. The style of the table is a bit overwhelming.
Fluent Design System
Examples of how Fluent Design system used in Microsoft's applications
Reveal highlight on buttons
Outlining hidden borders to reveal objects
Partial transparent material that helps to establish a visual hierarchy with light & depth
Early Explorations with Different Components
The idea of fluent design seems abstract to me when I first start to redesign the pages. So I separated the pages into different components and did a lot of variations with each component. And also, I found it easier to get feedback from others on a single component.
How much is too much?
Another challenge was I need to figure out what’s the appropriate amount of fluent design that needs to be applied onto SAI. And all the existing examples for fluent design are desktop apps, there are a lot of limitations for a web app to apply Fluent Design.
Because the pages are static, the only fluent design elements I could apply was “reveal light”, “create depth” and “acrylic materials”. When I tried to put these elements on everywhere possible, I realized they just simply don’t work.
There are reasons behind each move, the light only reveals after you interact with the elements. The depth only makes sense when there are multiple layers of hierarchy. And the acrylic materials only function as the background for secondary contents.
Layout & Hierarchy Exploration
Insights & Learnings
Insights and Learnings from Internship
Working on projects:
If you find it hard to get started on a large project, try to dissect the problem into smaller parts and solve them one by one.
Learn to collect feedback from others, but also learn to make decisions on your own.
It doesn’t hurt to try more variations. Sometimes you will have to see it in order to know if it works.
Working with people:
Understand that different people will play different roles in a project, and their opinions coming from different perspectives will affect your decisions at different stages of the design process.
It’s important to know how to effectively present ideas to people coming from different backgrounds.
Take advantage of the review sessions. Observe how other designers solve problems and don’t hesitate to ask for help.