Starting a Design Evolution
This article is not about how to create a design system rather a personal recollection of how I co-led this initiative during its early phases and all the lessons learned along the way. There are already many resources online on how to create design systems. I hope this serves as an inspiration when you are implementing one.
One of the most exciting projects that I worked on at Unbounce was defining the product’s design system. It was the most rewarding experience seeing how it started as a design-led initiative and became one of the top product priorities. By the time I left the company, the team was in full-swing with redefining and building the style guide and patterns. There are big updates coming soon so if you’re using Unbounce, get ready to be blown away!
Problems
Like any project that we work on, the first step is always to identify and understand the problem.
Inconsistencies in User Experience
This is the most obvious issue we wanted to tackle. We would get user feedback around poor user experience, oftentimes detailing all the unexpected interactions they’ve had in the app. We didn’t have a set of design standards so every designer was coming up with their own design solution.
Battle of opinions
Most visual design decisions were based on our own opinions. We followed trends or designed what we thought looked good. When it came to design critiques, those opinions took over the conversation.
Independently working on the same solution
Sometimes two designers would design the same pattern without consulting each other. As a result, we would end up with multiple versions of the same thing. This problem was compounded when those designs were used to make more complex patterns such as forms and tables.
Surface level conversations
When it was time to hand off our designs to the developers, they would come back with questions around hex values, spacing and all those little details. We were lucky to work with developers who care about the quality of our designs but the follow-up conversations were just inefficient.
I could go on with all the problems that were brought by the lack of a design system but thankfully there are a lot of design articles that already cover that topic. We knew the only way to solve these problems is by having a design system that includes a style guide and a component library.
Challenges
We were faced with a multitude of problems during the early stages of this initiative. It was everyone’s first take on defining a design system. Back then, resources were limited so we relied on each other’s skills and determination.
Complex product
The biggest challenge we faced was dealing with a complex seven-year old product. From mapping the information architecture to seeing what’s under the hood, we knew we were facing a behemoth of a task. There were so many areas in the product that we uncovered during the audit.
Competing priorities
Since this was a design-led initiative, we still had responsibilities with our own project teams. Queue the weekly agile ceremonies, design sessions and all other recurring meetings. It was a long process to get this effort in constant motion.
Even more complex team structure
Unbounce was going through its growth phase. We were experimenting many different ways to manage changes in structure and culture. One of which was adopting Spotify’s agile development framework. It was great sharing context within our squads but it was tough to share knowledge between chapters.
It wasn’t going to be an easy route but we knew we needed to improve the situation. Also during that time, our team just grew from three to six product designers. We were still finding our ways to work well with each other.
Process
One thing to remember before starting a design system is that it will never end. It will always be evolving and growing. The following is how we brought it from an idea to a concrete team objective.
Acknowledge the problem and provide a solution
The pain of not having a design system was initially shared between product design and frontend teams. It was a constant struggle when producing design assets. Project timelines sometimes got pushed back because of long production cycles. We approached the problem from that angle. If we want to be efficient in delivering value to our customers, we need to have a design system. We translated that issue to a business opportunity.
We kicked off the initiative before it became a hot topic in the industry. We didn’t have Shopify Polaris or Airbnb DLS to refer to back then. It was a team effort to combed online for ideas on tackling the issue. We needed to find a potential solution before approaching the leadership team for buy-in. If we’re bringing a problem to the table, we better have ways to solve that.
Device a plan and assign champions
Solving complex issues should always start with a plan. Tackling design systems requires systems thinking. To get a clear view of what we were going to tackle, we first looked at the information architecture of the product. We then took that opportunity to optimize it.
We used the RACI framework to assign tasks to individuals. One designer would lead the information architecture updates, one to kick off standardizing the patterns, and so on. We also dedicated Thursdays to focus on this initiative since Unbounce allows one day of the week for professional development.
For visual design, we followed Brad Frost’s approach to Atomic Design. We opted to manage all the patterns and documentation on Frontify. And to host the React UI components, the frontend team planned to build a library, which would then link back to the new style guide.
Get support and buy-in from the leadership team
With a solution and plan in mind, we approached the leadership team for support and buy-in. Thankfully they understood the problem so it was easy to prioritize this initiative. I’d like to stress that this is the most crucial step in the process. If your team doesn’t have support, education is the key. There are many online resources highlighting the benefits of having a design system so please do your homework.
Audit and define the anatomy of the product
Divide and conquer is the most effective tactic when auditing the product. This step took some time to complete. To speed it up, we even had some help from the frontend team to create an interface inventory.
It’s a tedious process but the hard work pays off. Conducting team audits helped us create opportunities for learning and alignment, which is crucial for having a successful design system.
Roll up the sleeves and get to work
With a shared understanding of the breadth and depth of the product, we officially started the creating design system. We tackled the basic elements such as colours, typography, layout and iconography first before moving to patterns such as buttons, forms, etc. Every week, we would gather and review everyone’s progress. For the next few months, we rallied until the elements and patterns were defined in Frontify. Doing it as a group helped keep accountabilities in check plus it was a great team bonding activity.
Learnings
I was heavily involved with the design system initiative during its early phases. By the time I left Unbounce, we already defined the new guidelines and have started rebuilding basic and advanced design patterns. Being able to see it come to life was the highlight of my experience. If your team is just about to embark on this journey, here are a few things to keep in mind to ensure a successful liftoff.
Be open
The idea to start this initiative came from the creative team. Back then, the creative director presented a mockup of what the Unbounce portal and builder could look like. We took that concept and worked our way backwards until we got to the very start of our design system. The best ideas can come from anywhere so when starting this initiative, be open and inclusive.
Start small
When we kicked off the new style guide, we started with colours and type. I handled standardizing the app colours while another designer took on typography. With these two elements combined, we were able to start building basic patterns like buttons and modals. From there, we started asking for help from both product design and front-end teams. Members multiplied and so did the speed and outcome.
Communicate
Nothing can beat the power of collaboration. Creating a design system involves multiple individuals with different backgrounds and discipline. There’s no one owner of a design system. Everyone working on the product is affected by it. In order for a design system to be effective, you have to communicate well and learn when to ask for help.
Credits
Kudos to the Ricky, Alecia, Denis, Sarah, Denise, Brian and Macarena for kicking this off and continuously working on it. It takes a village to raise this initiative to life. Big thanks to Miles, Carter, and the rest of the leadership team at Unbounce for the incredible support we had from the get-go.
I’m thrilled to see the fruition of these efforts in the near future. It has been a privilege to witness the beginnings of it and I’m even more excited to see the evolution of the product now that there’s a design system set in place.
Shoutout to Denis Suhopoljac for providing valuable feedback on this article.
