Microsoft Fabric UI



Microsoft Fabric is an open source framework for Office Customers. Fabric's customers include large corporations, who rely on their developers and designers to deploy the Office components into internal platforms.





UX and Art Director | 2016



Walkthrough of final Web App

Problem



When Microsoft released the code packages for Developers and Designers, they were lost. They were left searching through developer forums, open-source platforms, & customer support. The Office team was strained trying to support these demands. Microsoft's needed a destination where these customers can have access.

Solution



I was hired to solve how these tech designers can find the resources they need so they can successfully complete their projects. The solution was to build a responsive web app that contained libraries of styles and components. It was also a destination where designers had access to tutorials, templates. blogs and support.

My Role & Process



I worked as the UX designer and Art Director. I worked with the leadership team, research team, and technology team to develop, brand, and design the materials needed to complete the project.

Project Length: 7 Months
Team: 4 Members
Role: UX Design, Art Direction
Tools: Sketch, Adobe CS,
Invision, HTML/CSS Editing

  • one | Information Gathering Created with Sketch.

    I began by interviewing stakeholders and internal Microsoft developers who both use the technology and others frameworks.
  • Two | Design, Test, & Iterate Created with Sketch.

    After ideating IA, Landing Pages, and content pages I tested them on my users and adjusted accordingly.
  • Three | Visual Design & Branding Created with Sketch.

    As the Art Director, I worked with visual designers and writers to create the final product and marketing designs
  • Four | Conclusion Created with Sketch.

    After completion, I tested with 4 developers and 3 designers for qualitative feedback


Wall Review (left). Whiteboarding User Flow (right)

Information Gathering & Research





I started by interviewing internal designers and developers who were also users. Since there wasn't an established destination for the devs to store their resources, they threw the code on open source platforms like GitHub. This caused confusion for creative and business owners.

GitHub was the location for most of Fabric's code and components. This frustrated most of Fabric's customers.

I began researching the Microsoft Dev Center, Material Design, Bootstrap, and Foundation. I compared these platforms, completed a heuristic evaluation, and re-assembled their happy paths. I found the best sites were the ones who were simple and not over-designed. Their sole purpose was dedicated to helping tech designers complete their tasks.

I interviewed internal Microsoft developers and asked them to show me the path they take when they look for the code. In this session, I discovered they look directly for queues like "Download Code Package.” When I interviewed designers, this was not something they were looking for.

When information gathering was complete, it was clear I needed to make a destination that was designed for designers and developers. My takeaway was that designers look for different queues than developers. For example, coders are looking for code. 95% of the time they need to easily find a string of code and get out. They're not too interested in styles or color. Designers like to browse/absorb content. As they work on a task, they hop around different aspects of the style guide to help them with decisions.

Design, Test, & Iterate



Fabric Responsive Web App on multiple screen sizes


After gathering my research, I proposed we build a responsive website that will live in the Microsoft Developers Center. The site will have clear paths for Designers, Developers, and Managers who need to develop components in their Office Products. I also proposed we create a blog where the studio can post events regarding the product.



I went through iteration processes where we had to find the right design for new and experienced users.

Sketching and thinking through design, before I begin working on the computer is my process through my projects. In this sketch, I am working through the balance of the space, contrast, and graphical ideas.
In these three panels, I am showing the evolution of the homepage hero space. My intention was to create jump-pads where users can navigate depending on their goal. As we tested, the notion to design this direction proved to be comprehensive for our users.
Here is a diagram from the results of an affinity diagram. In this case, I synthesized component pieces into stepped themes. I used this hierarchy to design my patterns on the content pages and other areas of the site.
Designers had the ability to style their own color palettes provided by the Microsoft studio. I created a tool where the user can choose a theme and generate the code.

Visual Design & Branding



I was the Art Director for the Fabric Project. I wanted to approach the aesthetics with the same patterns I developed for the site architecture. I thought about the context of the user while they were absorbing content. I also considered the elements from the Microsoft Design Language that best suited my product design.


Blog (Left) Getting Started (Right)

I created the styling and UI palette.

Conclusion



It's always nice when you get to spend a year working with the resources you have at Microsoft. Having access to a talented team is a great experience. We launched the project in the summer of 2016. The first 60 days, the project was released for internal testing with the Office studio designers. This was the first Microsoft Open Source platform where a community of designers has access to once protected Office technology materials. Customers responded well to the tools and future Microsoft groups modeled this site for other framework guidelines.

The project was showcased at the 2016 Ignite Conference in Atlanta, GA.
"Fabric makes it easy to build a custom user interface (and experience) in Office and SharePoint. You can spend the majority of your cycles on the actual business rules - the things that really matter!"
~Contributing Writer, Network World
Napster Listeners Network | A.D. / UX | 2015
Coming Soon

I'd be happy to have a thorough conversation about my projects.
if you have a project you need help with, contact me at:



paul@paulrileycreative.com


Inspired by music, fueled by coffee, love to cook, and spend time socializing with incredible people.