Published on | Prototyping: From UX to Front End — Medium Julie Luu Mannheimer Shout out to Stephen Hathaway for creating a design system template for us to use as a starting point

How I stayed organized while managing a design system

Anyone who has worked with me before knows that organization is my expertise. A tidy person by nature, I’m always looking for ways to work smarter and more efficiently. (Thank GOD for Sketch plugins!) Having been tasked with creating several design system libraries at the agency where I work, I have become somewhat of a subject matter expert on keeping all the files, parts and pieces organized throughout a cumbersome process. Creating a design system library is about creating order out of chaos: It requires both a wide perspective and attention to detail. (Not to mention keeping your teammates and your client happy.)

Recently, I was tasked with leading the creation of a design system for a large healthcare client. It was the most challenging and rewarding project I have done thus far. The client came to us with over 300 product sites, each with their individual brands and components. (If you’re thinking ‘Holy S***!’, imagine how we felt!) We were asked to create an agnostic design system library the enterprise could apply across all their product sites to create a consistent user experience, regardless of different brand styles.

During the design process, I ran into range of challenges, from Sketch implementation issues, to how to best delegate tasks across other designers on the team.

In the spirit of shared knowledge, here are a few things I learned in the process:

Organization is everything

Imagine you’re having your family over for the holidays, and you’re sprinting through the grocery store 5 minutes before closing to find that all-important missing ingredient your apple pie has to have. You’re sweating, you’re getting nervous, and for some ungodly reason, all the signage is missing. It is the stuff of nightmares.

For a lot of us, that feeling is all too real. Have you ever spent hours building and creating something, only to realize it was already done in another file? Or you open someone else’s work, and have no idea what the user flow looks like? As iterations of projects get passed around teams, it can be easy to lose track of who has done what, where.

I’ve had to work with messy and flattened files (Yup, I’ve had to redline a flattened design image more than a few times back in the day), and know how frustrating it is not to be able to find what you need.

I always say, “Pass off any deliverables the way you would want to receive them.” Align with your team on a file-naming convention that allows for easy organization and retrieval. Remember that as other designers and developers open your Sketch file, the more organized it is, the fewer questions you’ll get!

Tip: Determine naming conventions and buckets as a team before you begin working. When I created this most recent library, I used Material Design’s naming and organization structure as a model. But when the developers needed something different based on how they had set up their features, we ended up having to rework the naming convention of the features and components. This took up a day of valuable time that could have been spent elsewhere. (Luckily, if you do end up in this boat, here’s a Sketch plugin to batch rename and replace.)

Communicate with your developers

Asking strategic questions early will set you up for success. Ask your developer partners how they want assets and files passed over. What will this be built in? What is our preferred cadence for passing off files? Is it every week? Every other week? Even after you establish a working style and cadence, make sure you maintain close communication with one another.

Tip: As you determine your typography styles, assign the style name to the relevant layer in Sketch. For example, if I use a header style in the design, and we determine it will be named “H1,” I name that layer H1, so that it’s easily identifiable in Sketch or InVision Inspect. (Only do this if you are sure those type styles will not be changing anytime soon.)

Clear roles and expectations

Assign someone to be the Design System owner, who will ensure methodical organization of the Sketch library. The owner should manage updates and push changes in the master Sketch library for the rest of the team to start using. Maintain open communication, and create a backlog of update requests and new items to be added into the library.

Design system libraries are unique

The reason why Material Design works for Google is because it was made for Google. It can be great to learn from what other libraries are doing, as long as you remember that each system is unique to the business needs of the product. Before implementing a design system, align on the business and communication goals that will be useful to your organization. Don’t add in animations for the sake of adding animations just because other design system have them.

Tip: Take your time workshopping with designers and developers to discover what functions and components might be unique to your website/product. Make sure any requests align with your business and communication goals and user needs before investing time and resources in new features.

Conclusions

When built correctly, creating a design library can move very quickly, allowing you to spend more time crafting a great experience for your users. On our project, the key to ensuring that designing pages and functionalities moved quickly was using the power of organization, clear communication and defined roles and responsibilities. Because of our organized approach, we spent less time building and more time evolving components. We focused on creating a seamless user flow, and working with our developers to meet the pilot launch date.

I’m always learning, and looking for new ways to work more efficiently. So tell me, what are your tips and tricks for managing large design system libraries?

Resources

Plugins

Taming the Beast was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Taming the Beast

Cool stuff, every week

More Articles