1/4

An Internship Project at Microsoft

2018 Spring

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.

Goals

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:

Challenges

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

Ambiguous wording/buttons

Unclear hierarchy

 

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
Motion
Material
Scale
Depth
Light
Key Components

Examples of how Fluent Design system used in Microsoft's applications

Reveal highlight on buttons

Outlining hidden borders to reveal objects

Background acrylic

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.

Dropdown Menu

Cards

Tables

Blur Effect

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
Final Design
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.