Design System & Pattern Library Creation & Maintenance
Summary:
Company and Year: Elsevier (2020 through 2022)
Products: ClinicalKey and ClinicalKey Now responsive websites
My Role: Senior UX & UI Designer on ClinicalKey and ClinicalKey Now
Tools: Figma
Deliverables: Design Pattern Library to support multiple, multi-language, multi-national products
The Business Ask:
"Design over 100 screens, and create a design component library based upon it, but also based upon an existing native mobile app, and also improving upon the core corporate design system, and also is usable in six languages. And can be built in budget. You know. No big deal."
What I Did:
- Content Inventory of design patterns
- Design of 100+ product screens, while standardizing design patterns in all
- User validation of design patterns
- Heuristic reviews of existing pattern usage, to identify all ways a component was used. (See the "link library" below)
- Constant collaboration with Core Corporate Brand and Corporate Design System team
- Constant collaboration with Lead Programmers, to ensure code matched design
Designs and Process:
3 Things I Learned:
It's so important to keep user testing data in the design system itself. This helps explain the "why" as team members change.
Respect the core -- meaning the corporate Design System -- but derivate where user validation has proven you should, We changed our primary typeface because our product's content pages were so long.
A Design System is a living thing. Changes we made for our product found their way back into the core system, thereby improving all users' experiences!