Design System
In 2017, I partnered with Duke’s CrUX team to lead a project for an open source software community to develop a pattern library for their product. The product was a learning management system (Sakai) which had been originally developed by four different universities that had merged their home-grown products into one. The product had been active with many contributors for more than a decade and UI inconsistencies were pervasive.
The first step in this project was to meet with a UX designer and visual designer on the CrUX team to build an understanding of the problems we were trying to solve, the scope of the project, and deliverables.
Problem : The product had inconsistent design elements throughout including buttons, navigation, icons, and other UI elements.
Scope : Only user-facing tools would be evaluated for UI inconsistencies; no admin tools would be considered as part of the project.
Deliverable : A pattern library would be established for the product making it easier to fix current inconsistent designs and make new development easier and more consistent.
We defined the following plan for the project:
UI Inventory –> Establish New Designs Patterns –> Build Consensus for Designs –> Research and Identify Pattern Library Solution
My main role in the project was to facilitate the UI inventory as a community-wide project, coordinate discussions for consensus on designs, and to facilitate discussions with developers on next steps for pattern library product selection and implementation. The new UI pattern designs were created by a visual designer on Duke’s CrUX team.
1. UI inventory
In collaboration with the CrUX team, I created UI inventory template in Google Slides for each tool in our scope.
I created a Google Sheet to track the overall progress of the project. Volunteers could sign up to inventory a specific tool and track their level of completion.
2. Establish new design patterns
When the UI inventory was completed, I worked with a visual designer on the CrUX team to create new UI patterns. My role in the designer’s process was to be the product expert and help her understand the use cases for tools and top tasks for each.
3. Build consensus for designs.
When the new design patterns were ready, I connected the designer with the community to discuss the designs. Issues and ideas would often come up that were out of scope for the project. I tracked these for the community by creating new Jiras or Confluence pages in our project space.
4. Research and identify pattern library solutions
Part of this project was to select the right pattern library product for the new designs. I partnered with a developer in the community to lead this aspect of the project. I connected him with staff at Duke who had experience with Pattern Lab and other products.
Outcome
Development work to implement the new design patterns started within a month after the community adopted them. Selecting a pattern library product proved more challenging. Two developers are currently evaluating Storybook.