Users
Pattern Library & Component Library - UX Designers and UI Developers
Design System - UX Designers, UI Developers, Business Partners, Leadership
Objective
There are around 10 decentralized teams with 2-3 designers on each team spread out across the company. There were unclear design standards for the internal applications and no pattern library to pull components from. This resulted in applications looking and functioning differently across the organization.
Goals
1. Document all components
2. Work with internal team members to create a pattern library with XD components
3. Collaborate with developers to build react components based on the components ensuring that interactions, spacing, and colors adhere to guidelines
4. Bring everything together into one centralized place (we used Sharepoint for our Design System)
Process
Step 1:
Document and create an inventory of all the components. This was a huge task because we have 30+ applications spread across 10 different domains. I went through each application and took screenshots of components we had in each of the applications. Some of the components are pretty standard (such as typography, buttons, font icons, etc.) so those were a little easier to capture.
In addition to the screenshots, I also reached out to each designer to provide me with components that I may have missed while putting together the inventory. I wanted this to be a collaborative effort, so I made sure to include the internal designers as I was working on this. We use Material UI for our front-end framework, so I also reviewed and listed out components from there, noting any overlap or items missing.
Mapping Out Components
Using Card Sorting to Organize Components
Finalized Component Inventory
Step 2:
Start creating pages and components in Adobe XD. I started with the simpler components because it's always best to start with the smallest components and work up from there, basically building up to more complex components.
During the creation of the components, I grouped them in the asset panel in meaningful categories. I also included usage guidelines on each page that housed a component. In the future, I plan to add working examples to this so that designers can see the components in use. Since we deal with such complex data-heavy applications, it's crucial to see how an application is using a component.
Working file showing assets/components in the left panel
Started with Button Components
Started with Brand Colors and Usage Guidelines
Step 4:
Work with developers to build components in Storybook. I've started collaborating with developers in creating our reusable react components based off Material UI. However, Material UI doesn't cover all of our needs internally, so the components will be built based on Material as our own Florida Blue library.
It's important that I'm collaborating with the developers at this point, because as they build out the components, I need to ensure that they are ADA compliant, function appropriately, and have styles that match the standards.
Below is an example of the start of our library in StoryBook.
Storybook Component Creation
Final Step:
As I'm working on the pattern library, I am also documenting standards and guidelines in Sharepoint. We explored other tools to house our design system, but were limited by what we could use internally. I schedule my time where I work one day on the component creation and another day on documenting in Sharepoint. I kind of go back and forth between the two things as I'm working.
Outcome
This new pattern library has allowed our internal design teams to start creating UI's that look and feel the same as each other. Designers can take the published XD library and pull it into their working XD file. They can then drag and drop components onto their page to create a UI.
Note: We are continuously updating and adding patterns as needed so the link below is still a work in progress. Please expect unfinished components and/or standards.