Making fans from first time visiters with daily engagement and education
Designing a mobile app to help drive engagement on the website through use of a mobile app.
Read moreChronicles of Elyria design system (CDS)
Creating direction and focus
Creating a scaleable & reusable design system from scratch to support design & engineering.
The Project
After noticing pain points during development cycles I took the initiative in coming up with a solution. Create a design system that encompasses the entire web product in order to create consistancy when create new web based projects.
The Team
Our team at the time was 100% on game development so there was no available support to create this project. Knowing how much we needed this in order to continue development of our web product I took the initiative and decided I would take on this task myself.
The Problem
Production Headaches
Our design & development process consisted of created one off experiences with no regards for our previous designs.
The Goal
Faster, Easier, & Consistant
Create a design system that when using will allow production to create new products in a faster & easier way than if they did not use the system.
Step 1
Finding the right framework
I was looking around at several different design guide frameworks trying to find something that would fit our needs. The hard part was because our website is a little bit of a Frankenstein I had to make sure it supported multiple languages, REACT, VueJS, asp.net, and plane old HTML.
This led me to a library called Storybook! Storybook is an amazing library that let me use live code to create the component library and supported any language I could throw at it. This combined with it's ability to have custom features that I could design and impliment easily made it a stand out choice from all other options.
Step 2
???
The next thing I needed to do was to figure out where to get started. I began by creating a list of all components we currently have on our website, starting with our v2 site which was built with REACT.
Once I began moving over the components into the style guide, I began to come across several problems that would slow down the development. Many of our components were not built to be flexible enough to exist outside of our website, so I took on the task of updating our components to be more adaptable. This was mainly done by scoping the SCSS to only be used inside the components themselves.
Step 3
Profit...err gathering user feedback
After doing my first pass on the style guide it allowed me to get some hands on testing with our development team using the tool.
I created a list of feedback from my team including, likes, dislikes, and suggested improvements. With this feedback I was able to create some quality of life features to address issues such as speed to impliment, and some preview modes that allowed them to see the components at different resolutions.
Results
Where are we now
After creating the initial Style Guide we found that feature releases for marketing pages had increased dramatically. Single static pages that would take 2-3 days were now being released in under a day. We also had more consistancy with all our brand since everything was being driven from a single source of truth. I was also able to include documentation using Markdown on each component that also informed the developers how each component was meant to be used, for example: "No more than one CTA button can be used on a page, and cannot be used next to a Primary Button." and other guidelines to help answer any questions that might be brought up during development.
