My Mini-Design System With Entrepreneur XD/CC Library

Designing from scratch loses its fun after you make the same button 30 times. We as the designers, needed something that would increase productivity, efficiency, and consistency across every project.

Approach

Context

We have a small group of designers in-charge of an ever-growing amount of projects and tasks. Each project requires us to move quickly while at the same time, maintain the look and feel of Entrepreneur’s digital presence. The goal was to create a tool that would allow us to better scale and easily sync future updates.

Getting People Onboard

Convincing coworkers that spending 100 hours of combined work now will save us countless hours later is a difficult task – especially when that time consists of tedious work like taking inventory of styles on a site that has gone through many a redesign. Thanks to the fact that there are more designers than ever advocating for design systems, and an abundant amount of Chrome plugins, this task gets a lot easier. Despite all of that, design systems are still a tough sell when those who need to be sold aren’t the ones who see the biggest impact of such system.

Knowing this, instead of spending my downtime checking my Instagram, I spent it creating a design system.

In order to get my fellow designers to become believers, I needed to create a mini-system that allowed us to quickly access the exact font styles used across the Entrepreneur site. Though it would be small, my mini-system would empower us to focus on the experience and usability, rather than having to guess at colors and font styles.

Sticking With It

Throughout this initial process, I combed through Medium and InVision posts on the most effective ways to get a design system to be a seamless part of a design workflow for those who don’t work from one. The most valuable bit of information I saw was that in order for a design system to be successfully implemented, you need to have people start using it as soon as something useful is built. Meaning, if you just have font stylings, get those in the hands of other designers because they don’t have to spend an extra 30 seconds to confirm if the font style on the site matches.

Not only does this save time but it shows the mini-design system adds value to the team.

The benefit of using the Adobe Suite is that any designer with an internet connection has access to shared documents and assets that sync when updates are made. With this in mind, I created an Adobe XD document (equivalent to a Sketch library) and one CC Library so that each of our team members not only had access to consistent design elements but could also maintain and update styles as they change over time.

The CC Library would be used for projects that required less rigid consistency of UI elements and more creativity while adhering to the Entrepreneur brand.

The Adobe XD document would serve as the main source of “truth” for all of our projects that needed consistent UI elements, colors, and font styles.

Takeaways

Pleasant Surprises

An unexpected bonus for having these styles setup was that they helped our design team with our advertising tasks.

The design team frequently get requests to mockup advertising slots with our client brands so they can see how their brand would appear on Entrepreneur.com. With this mini-system, we could speed up this process since we no longer needed to worry about font accuracy when placing a brand name inside a page comp or brand title above our native articles. Once we stumbled through a couple mockup projects, our template files were pristine and virtually plug-in-play.

Not only did this free our team members’ time enough to focus on tasks that would constantly be put on the back burner, it also decreased the amount of stress involved making sure the page was using the correct styles and colors.

Keep It Rollin’

The most difficult aspect of this mini-system project is making sure that we keep it up-to-date. Luckily Entrepreneur.com doesn’t get a rebrand each quarter but there are smaller components that we are constantly creating and implementing thus making sure that they are properly archived in a timely manner is crucial.

Going forward, I have suggested that we have quick weekly meetings (a quick ~20 minute meeting) to make sure that everyone is on the same page when a certain style or component needs to be added or removed from the system.

My thought is the more communication surrounding the system we have, the more it can grow and be maintained.

If we can keep this mini-system going, we could eventually get to a point where our developers might see that a more fully-fledged design system would be beneficial to them when building out pages. It could both decrease the amount of time spent focusing on styling and serve as a source of “truth” for a large part of the company.

Update

A great tool if you’re looking to get started fast with a github hosted design system is docsify. Super awesome!