Edge UI Framework
Microsoft • 2022
CASE SUMMARY
I joined the Microsoft Edge team to collaborate and create a framework for the browser. Unfortunately, the old framework has gotten rigid and outdated. This framework aims to achieve efficiency and consistency by adopting newer methods of building components.
The new framework needs a responsive layout, good structuring, and spacing.
PROBLEM STATEMENT
Create a new framework for the Edge browser using a responsive layout.
Goal
Efficiency and consistency
PROJECT HIGHLIGHTS
CLIENT
Microsoft
TEAM
Principal Designer, Principal manager, UX Designer (Me), UX Designers 5x
Role
Collaborate with the team
Systems thinking (Design, build and document the framework)
Framework Goal
Process
A base set or subset is required for common items (Items with multiple usage, cards, flyouts, dialogs, pages). And then, extract instances from the base to reuse in the framework or other projects.
outcome
This is an example of the outcome expected to be achieved. We create a base for common items then copy an instance from it to use in other components.
Craftsmanship
We then went through the old asset library in Figma and rebuilt the components, including flyouts, dialog boxes, cards, pages, panes, and more.
Base Components
We established sources of truth by creating subsets for components inheriting recurring items. Having a source of truth makes applying change at a large scale fast, simple and easy. Instead of applying a change in a component set, it’s applied out onto the subset itself.
Layout (Documentation)
Style (DARK MODE)
Examples
