Create a details list for our Coherence Figma UI Kit and Code Libraries.

TIMELINE
two months

MEASURE OF SUCCESS
• We want all teams to be using a flexible cohesive data grid
• Designers can make their compositions faster
• Reduce work for developers and designers

FINAL DELIVERABLES
A set of product agnostic guidance for this control thinking of it in terms of a system
• Accessibility built-in
• Visual design created
• Interaction design created
• Motion design built-in
• Functionality documented and built-in
• Scalability built-in
• Coded
• Added to toolkit

OUTLINED A CREATIVE BRIEF

DEFINED WHAT A DATA TABLE IS:
In the Coherence system ­— it is any display of information in tabular form, with rows and/or columns named, with data stored in, or derived from, a database.

DEFINED WHO NEEDS THIS?

USER 1: Coherence product designers in studio, or on a vendor team

SCENARIO: They are designing an experience for HR, employees or a Microsoft sales team. Their product requires a tool to densly display data for their customers. They are looking for a pre-built component that fits their flow and has been formatted with Microsoft functionality, animation, and look and feel. They want a seemless product that they can quickly pick up and place in to their design and easily customize it for their needs.

PAIN POINTS: They want to be able to ease their developers workload
by using a reusable component that is already coded and direct their developer to that componet. They are transitioning from XD to Figma. We will need to provide a bullet-proof component for them to quickly work with.

USER 2: Coherence engineers in studio, or on a vendor team

SCENARIO: These engineers may or may not have a designer. They are either being directed by a designer to pick up a code component from the Fabric, or they are building the product themselves and have accessed our code library. When they pick up the component from our site, their expectations are that the component is
accessible, has been tested, is compatible with their code, and
is customizable. Right now, they are going to other systems such
as Item Scope, or Kendo Grid, and then customizing it. This takes more work because they are lacking our visual styling. They need documentation to answer any questions they may have in terms
of what’s been tested, what bugs there may be, and if accessibility has been implemented.

PAIN POINTS: They often don’t have a designer and have too much to do. They need to lighten their load and focus on implementation and testing. They are not designers. They have too many places to look for documentation.

GATHERED REQUIREMENTS
Talked with as many teams as I could, looked at UI Kits.

LOOKED AT COMPETITORS

LOOKED AT OTHER DATA TABLES

LOOKED AT OTHER MICROSOFT PRODUCTS

REFINED
• Created requirements
• Simplified patterns and functionality
• Broke components and functionality in to modular pieces

GATHERED FEEDBACK, ITERATED AND VALIDATED
• With developers
• Management
• Designers

BUILT IT
• Created final visual design tools
• Worked with motion designer
• Worked with developer to implement code
• Worked with developer to implement accessible patterns
• Delivered final documentation

WHAT I LEARNED
• This component used nearly every part of our system and exposed holes that we had in our Coherence toolkit
• Have regular meetings often
• I could have used a PM. I got a little trapped in the requirements