Responsive UI Pattern Library

A code-based design system supporting multiple product lines

Project Synopsis

A UI library comprised of working code examples and guidelines encompassing brand, aesthetic design, behavior and proper use of common UI components, compound-components and patterns.

The Problem

The organization I was working for had nothing in place for UI standards or templates. Designers and front-end developers were creating the same UI patterns and components over and over again. Common design changes across product lines were painful and slow. A common front-end approach and supporting codebase were desirable.

Goals

• Translate brand and product style guidelines into a pattern/inheritance-based SASS/CSS library
• Create a website showcasing common UI components, groupings and layouts in HTML5 & CSS3
• Collaborate with development team to create foundational code repository to be utilized by all new products

Process & Contributions

• Reviewed all enterprise products to determine what components, compound-components and patterns should be included in project
• Decided to utilize Bootstrap framework for responsive layout and built-in javascript components — a well documented framework ensures everyone implements UI components in the same manner
• Collaborated with front-end developers to create a git repository to act as a baseline for all product builds
• Created sample layouts and patterns in a reference website. Each example included information regarding intent, implementation, class name and other details
• Collaborated with front-end developers to determine best third-party js frameworks that worked well with common components and patterns -E.G.: typeahead.js, toastr.js, etc.

Outcomes

A web-based pattern library with documentation paired with a git repository acting as a foundation for all product builds.

• Developers loved the examples and documentation!
• Reduced design cycles and development time. Developers could now take lower-levels of fidelity in prototypes (or even wireframes) and translate them into beautiful, branded layouts
• Product Owners were very pleased with the increase in design to development efficiency
• Product code-base now ensures use of semantic and syntactically accurate HTML
• Product Sass/CSS inheritance scheme is clear and based on a common framework - everyone can interpret easily and contribute new layouts in a consistent manner
• The “ui-shared” repository is continuously updated based on new product features and needs
• UI-based technical debt has been reduced to near non-existent :)

The pattern library consists of a set of pages dedicated to related component types

A small, default, large and full-page modal is included. Examples explain things like, text elements to use for different sections, how to use grid layout in content and what types of buttons to use and where.

Examples of all common components with brand styling override are showcased. Implementation guidelines and design considerations are explained.

Common typography/text element scenarios

Variations on grid layout spacing

What I Learned

• A great deal about best practices utilizing third-party frameworks and how to customize bootstrap properly (using SASS variables not static CSS).
• The value of collaborating with the front-end developers was immeasurable. Having a full understanding of how components are built and implemented allows for more informed decisions throughout the design process.
• Creating a systematic approach to UI design and implementation doesn’t “automate” the process. It just makes it more efficient and lends toward stronger cross-team collaboration.
• The Product Owner and development teams developed a stronger respect for design processes. Rather than solely focusing on feature design, more time is now allotted to design systems and front-end architecture.
• This system opened the door to stronger design systems. I was given the green light to pursue similar methodologies for the design team. We are currently developing a design system in Sketch.

Next Case Study →