Overview: While working as the Principal Designer for Optimal it was my role to manage and design all creative initiatives for our core product catalog. OnlineU is our flagship product and was in dire need of a design system to help with brand consistency, collaboration and publishing velocity. I built this system along with our updated brand schematic from the ground up. The following is a glimpse into some of the key elements and considerations that went into this system.
OnlineU – Design System
The
Problem
With any small company the issue of bandwidth was a common pain-point. Our writers were needing extra time to identify components and patterns they wished to leverage by digging into past examples. This was creating a bottleneck in our process and was hindering our ability to publish content in a timely manner, a major issue in an SEO driven environment.
Overview: While working as the Principal Designer for Optimal it was my role to manage and design all creative initiatives for our core product catalog. OnlineU is our flagship product and was in dire need of a design system to help with brand consistency, collaboration and publishing velocity. I built this system along with our updated brand schematic from the ground up. The following is a glimpse into some of the key elements and considerations that went into this system.
The
Problem
With any small company the issue of bandwidth was a common pain-point. Our writers were needing extra time to identify components and patterns they wished to leverage by digging into past examples. This was creating a bottleneck in our process and was hindering our ability to publish content in a timely manner, a major issue in an SEO driven environment.
The
Challenge
Assemble
Starting from the ground up to identify, gather & organize a system that cross-functional teams can use with ease.
Document
Outline all design context to thoroughly remove the need for unnecessary communication amongst non-designers.
Train
Teach teams how to use this system to ensure accuracy along with ease of use.
Design System Overview
Foundations
Visual elements that determine brand voice and assist in user engagement.
Documentation
Context that help to provide clarity and ease-of-use.
Foundations Breakdown
Style Guide
Our pre-existing style guide was our starting point. We kept with design standards around items such as grids, type handling, color theory, button styling, form fields and more.
Building Blocks
Key system assets are built and maintained in this space. This space is also leveraged for design iterations around new tools meant for user testing.
Components
Available components organized within buckets to help our content team reference, identify and notate the specific components they wish to use.
Tables / List
A collection of our available table and list components that range from the simple to the elaborate.
Patterns
Sections of content that follow a pre-determined set of rules to help with consistency around design, messaging, and brand voice.
Templates
This is a new area of our design system that is currently being built. We’re templatizing our various articles based on our publishing categories, defining sections which determines content order and dictating component availability. The goal is to create a stronger sense of brand consistency and further reduce the variables involved with our publishing process.
Documentation Breakdown
A great deal of context is implemented around various elements to give our system a high probability of success while also setting it up for longevity.
Design System Overview
Foundations
Visual elements that determine brand voice and assist in user engagement.
Documentation
Context that help to provide clarity and ease-of-use.
Foundations Breakdown
Style Guide
Our pre-existing style guide was our starting point. We kept with design standards around items such as grids, type handling, color theory, button styling, form fields and more.
Building Blocks
Key system assets are built and maintained in this space. This space is also leveraged for design iterations around new tools meant for user testing.
Components
Available components organized within buckets to help our content team reference, identify and notate the specific components they wish to use.
Tables / List
A collection of our available table and list components that range from the simple to the elaborate.
Patterns
Sections of content that follow a pre-determined set of rules to help with consistency around design, messaging, and brand voice.
Templates
This is a new area of our design system that is currently being built. We’re templatizing our various articles based on our publishing categories, defining sections which determines content order and dictating component availability. The goal is to create a stronger sense of brand consistency and further reduce the variables involved with our publishing process.
Documentation Breakdown
A great deal of context is implemented around various elements to give our system a high probability of success while also setting it up for longevity.
