Building a Comprehensive Design System
Details
Role
UX Designer @ LawDepot
Team
Andrew Chiesa (Director of Marketing)
Tools
Adobe XD
Deliverables
Slide decks
Technical Documentation
Presentations
Design system with 300+ components
Description
When I joined LawDepot the method of using our design system was very out-dated and had many issues, so I took initiative to properly document and build a proper design system in Adobe XD.
Problem
Ill-Defined Design System
Shortly after joining LawDepot, I started to wonder if there was a better way for us to maintain consistency across designs projects, different designers, and our development team. Before starting on this project, the solution for our style guide required copying and pasting elements from XD files scattered in various folders throughout our internal servers. Even once you were able to find the right file, the elements inside had some pretty glaring issues, including:
Lack of Consistency
Colors, typography, nested components... Everything was set on a case-by-case basis within it's own design file which led to inconsistency across the whole system.
Fractional Pixels & Spacing Problems
Using fractional pixels in our style guide was just sloppy and caused more work for us as designers because we would have to clarify with development what we actually wanted to be built.
No Micro-Interactions
Not making use of animations and interactions in prototypes meant that designers had to try to describe these things in long, wordy notes and documentation.
Solution
An Integrated Design System
Creating an integrated, universal design system within Adobe XD was the best choice for our company since the entire design team was already using Adobe XD on a daily basis. Adobe had recently added new features that allowed a more robust use of components including the addition of sharing components across an entire team, micro-interactions/animation, overrides, and different states. It seemed like a no-brainer to make use of all the features that were in XD to improve the workflow of everyone at LawDepot.
Approval
Getting Buy-In From Stakeholders
I developed a short proof of concept with a few of the main components that we used across the LawDepot site and pitched the idea to get stakeholder buy-in. Some of the main selling points:
Increase Speed and Accuracy
With drag-and-drop capabilities we would be able to design at a higher speed, AND at a higher fidelity. Win-win situation.
Consistency Across the Whole Design System
No longer would my components function any different from any other designer's. We would all be using the same components that came from one source of truth.
Invite Others to Design
With an easy-to-use design system, people outside of the design team would be able to build and share ideas across the company, thus increasing diversity of thought.
After showcasing my proof of concept, I was given the green light and put in charge of converting all the scattered XD files into a coherent, responsive component system that I would later train the entire design team on.
Results
A Complete Conversion of All Components
I created 300+ individual components, as well compiling all brand colors and typography presets to add to the design system.
With the addition of hover states, drop-downs, accordions, and other interactive components, prototypes within XD are now able to better communicate the ideas of designers.
Everything is responsive which means that designers are able to focus more on problem solving and creative thinking, and less on pushing pixels.
After adding all the components from our live site, I provided a training presentation on the new system. I was able to provide instruction for the design team on the details of how to use the system, and also open the doors for others outside of the design team to contribute to design at LawDepot.
Moving Forward
With Great Power Comes Great Responsibility
Building interactive components in XD is one thing, but maintaining that system, making updates and trying to help others in the company integrate this new tool into their workflow is an entirely different process that has been much slower moving. I am still learning in this area, but have learned to love the entire process as I have now taken on the title of ‘Asset Library Lead’ in the LawDepot design team.
Reflection
Lessons I will Carry Forward
I want to acknowledge the team at LawDepot for being willing to have the faith in me to carry out such a large project so early in my career. I loved being able to tackle such a wide-sweeping project that would be used to improve the lives of my fellow designers, developers, and others at LawDepot.
Some key things that I learned while working on this project:
Love of Design Systems
Micro-interactions, animations, pixel perfect designs. I loved using the principles of atomic design to build up a comprehensive design system for LawDepot.
A Lot of Work to Maintain
Like mentioned above, with so many moving parts and some of the errors from the previous design files carrying over, there is a lot of work to maintain and get everything just right.
Taking Initiative
Another shoutout to my managers at LawDepot for being willing to hear out my ideas and give me the time to fully flesh out this idea. I love to share impactful ideas with those I work with.