o to 1 CSS/HTML Design System
Overview
Engineering-centric design standards focused on reusable components and easy-to-access documentation. This pre-Figma design system was created to help the engineers build faster and increase visual consistency.
Engineering Feedback
4 out of 5 engineers said that it was “easy to implement”
Engineers estimated that it speed up build times by ~ 15%
Overseas contractors could create branded pages “right away”
My Role
Sole designer embedded in the in-house engineering team.
Product Owner of visual consistency, user experience, and stakeholder management for the engineering team.
Blended role of Product Manager and Product Designer with Agile responsibilities.
Responsibilities
Created universal design standards for the Admin version of the software, ensuring consistency across pages.
Ensured the design standards were scalable for future conversion to a user-facing version, considering different client branding needs.
Developed a proprietary design system and created comprehensive documentation to facilitate efficient implementation by engineers.
Wrote SCSS & HTML in Codepen
Process
Audit
I began with an audit of the admin side, documenting UI elements and inconsistencies.
Stakeholder Interviews
I conducted interviews with stakeholders and engineers to gather requirements, understanding their needs for flexibility across multiple code languages (Ruby, Rails, etc.).
Project Plan
Based on the requirements, I collaborated with engineers on the project's scope and I mapped out the design strategies.
Development
I designed the common elements and patterns. Then I wrote CSS/SCSS samples in CodePen for the elements and submitted it to the engineers feedback. One round of refinement and we were ready to test it.
Testing
I worked closely with a full-stack engineer to test the first version of the design system on a staging environment containing various code languages and frameworks. We identified and addressed spacing issues in older Ruby pages through iterative testing and adjustments.
Documentation
I created detailed documentation and cheatsheets in Confluence to support developers, which significantly reduced the learning curve and sped up development time, according to engineer feedback.
Page Conversion
I managed the rolling cadence of page conversions, continuously updating the documentation and components based on feedback and testing on multiple devices and browsers.
Confluence Documentation Examples
Outcome
Ultimately, the system included various elements with props, layouts, and common patterns defined. We also added React-based page templates to the library for the new features. These additions speed up development time and increase adoption.