Fox Design System
PROJECT
Retrofit a UI component library for data driven, journey enterprise app. Clean up SCSS libraries, consolidate UI elements, create UI reference library, and distribute qualitative accountability between product and engineering teams.
DESIGN
The Fox design system originated by collecting a list of basic UI elements from the enterprise application and hosting them in a Frontify style guide. Once the style guide was hosted, I removed extraneous design elements from XD and Sketch sticker sheets, and provided templates for components, color pallet, and typography. After the design team was aligned, engineers provided local hosting for a live, styled website. I worked closely with engineers to ensure the design and engineering elements mirrored each other. As new component are styled and added to the system documentation, UI elements are refactored to promote consistency.
STANDARDS & PROCESS
In Early 2017 FOX launched, however, the application was overshadowed by usability issues and obvious design inconsistencies. Although Fox utilized Material design, engineering was kicked off during a beta phase of Angular. Certain technical debts were never resolved. UI colors, components, and usability expectations changed from screen to screen. These problems caused inefficient resources, inaccurate story pointing, late releases, and confusion when to reject features with noticeable qualitative problems.
After collecting helpful resources, I held lunch and learn sessions (with Pizza!) to share insight on how the engineering and product teams could work on a central system of UI components. I provided examples of current design systems, and examples of inconsistency within different FOX modules.
The first step was creating a source of truth. I centralized sticker sheets in XD and Sketch to ensure basic Material and custom components were consistently branded, modular, and accurate. Unused components were removed and archived. All design components were hosted on Frontify.
Once the design team had consistent resources, the stickers sheets were translated into live code. Hex variables, font headings, spacing ‘helpers’, icons, and other modular elements were translated into the application.
The second step was creating a process. The UX and visual design team met regularly in order to review prototypes, design elements, and usability patterns for FOX and other applications. Interaction design inconsistencies were caught ahead of time, and costly implementation mistakes were avoided.
Lead engineers were included in conversations when the design system need to be updated or changed. Eventually, this lead to a process to formalize amendments and contributions.
After comparing different resources, we quickly created a basic process to suit our own needs:
