You must gather your party before venturing forth — a UX case study
Making design principles fun again.
This is my journey on how I helped institute a design system at a small civic tech company.
Like many software companies, NextRequest has reached the point where a design system has become necessary. Many folks have defined what is and isn’t a Design System (here is a good one that has a billion definitions), and many of the reasons other companies decided to pursue this project are the same reasons we did. Consistency, clarity, speed, scalability, modernity, performance, etc. etc. are all things we are hoping to get out of a new design system.
The hard thing is deciding how to start, especially when your product is already in production. Though we are concurrently embarking on multiple pieces of the project at once (a component inventory, for example, is already in progress), one of the first things I wanted to do is align our approach to how we make design decisions. We needed to create some grounded design principles!
What are design principles anyway and why do we need ‘em?
Plenty of people have great explanations for what design principles are, why your company should have them, and how they go about defining them (here, here, here). Most of the time they emerge as 4–8 clear statements that can be referenced whenever a product, service, or design decision is being made. Our three objectives are:
1. Align high level strategy with small day to day product design decisions. Principles should function as “northstar” guidance that the entire company gets behind when designing everything from small UX patterns to new products
2. Connect design decisions to our customer needs and quantitative data gathered from product use. All design principles are established through a combination of company vision/feedback and aligning that vision with real customer feedback/data. Therefore these principles act as generalized representations of what our customers feel is valuable and why they buy our product.
3. Reduce cognitive decision making. Deciding how to style a button, whether to hide or show all branching decisions, or how dense/simple a page becomes are just some of the examples I have personally dealt with in the past year. Without design principles, the cognitive load increases and takes away good mental energy for more important things!
So how are we going to do this?
Similar to how UXPin approached their design principles project, we wanted to get as many team members involved in this process from the beginning, laying the foundational buy-in for this project. Though we took a page (literally) from the UXpin playbook, we decided to augment their process to better fit with our smaller company size and split the first half of this process into a two part company wide idea generation workshop!
We wanted to come out of these two workshops with a somewhat abstract but semi-unified idea of who we are, why we do what we do, and why how we do it makes us better than our competitors. This allows us to do two important things:
1. Enact good user centered design practice. Our design principles should first and foremost align with the vision of the company, and the company is made up of this great humans who are taking part in these workshops.
2. Give Eric (our PM) and I a good feel for how others see the company’s value and approach to product design. When we start actually putting words to customer feedback and drafting some initial principles, they will be in the same network of ideas already discussed. If someone thinks a principle doesn’t align, we can dig back through those sessions to either show how it does align (or doesn’t, and that gives good reason to change/remove a principle).
We decided the best way to kick off this process was to run the two workshops on separate days during our mid year company retreat. This offered us a great full company buy-in and avoided any kind of work related conflicts (no external meetings during this week!). Each workshop only lasted one hour, but we came out with lots of great information and some really pointed revelations!
Workshop 1: Company Archetypes Quest
The very first activity was a slightly modified version of a branding archetypes workshop I first learned about through RAD Summit (shout outs to Natalia for leading this session and introducing the concept).
Using the cards in this book, the goal of this activity is to sift through 60 different brand archetype cards and choose the 3 that represents our company. The meta reason for this is to facilitate lively conversation across teams and stakeholders about what differentiates us as a company, why our customers like us and choose us, and maybe most importantly, why we do what we do.
I split the company into three teams, making sure that there wasn’t a group with more than one co-founder and team representation was diverse. Each group got their own set of 60 cards and first sorted them into four separate piles ranging from most representative of NextRequest to least representative of NextRequest.
Then they took the two middle piles combined them together, and began sorting these cards into binary yes/no piles, with the no pile being eliminated from the game along with the last representative pile from earlier.
Finally, after combining all the cards in the yes pile with all the cards in the most representative pile, they discussed which 3 cards would be the remaining representation of NextRequest. It wasn’t easy!
Ironically, (kind of) all three teams emerged with cards very similar to each other. In fact, all three teams picked the visionary card, and two teams included the citizen card and the pioneer card as part of their set. This was a great way to visualize our alignment. Even if the cards selected ended up being radically different group to group, it would have provided ample fuel for a great discussion.
Now that we had the collective archetypes chosen, it was time to put them to the test. Each group had to explain and justify how their archetypes address the wants and needs of NextRequest users. The meta reason for this is to make sure that the archetypes chosen were realistically aligned with how we see ourselves and what our customers are drawn towards.
By the end of this activity, we had a good collective sense of what everyone in the company valued and how they connected those values back to our users. Though the output here is very abstract, it was an excellent starting point for laying the foundation of this project!
Workshop 2: Design principles in analogous products
The next workshop was designed to build off the first workshop by grounding these abstract values in concrete examples and deepening the conversations between teams. The goal was to have everyone in the company come up with at least three product analogies (across a variety of categories) that NextRequest is like and explain why.
These analogies were outside of the bounds of software in order to think a bit more creatively and really get at the core of who we are and what makes us different. Each participant received a category and had to come up with 3 examples that embodies NextRequest.
The only rule was that those examples remain in line with the core archetypes that were selected in the previous workshop. Having these up on the wall while folks were coming up with their examples seemed to really help reinforce that connection.
After about 20 minutes of idea generation time, each participant read their three examples and explanations aloud to the room and posted them on the board. In order to understand which ones resonated the most, everyone received five sticker dots (four blue and one red) to up-vote examples they liked. This led to more discussion and helped us see what words, phrases, and feelings resonated across the company.
(BONUS!!) Workshop 3: Using even/over statements and reversibility testing
After getting back from the retreat, we decided we needed one last full brainstorm session to start bringing these ideas together. The goal in this one hour session was to take all of these thoughts and feelings about what are our product should aspire to be and transform those into design principles we can use to guide decision making.
Matthew Strom’s “What makes a good design principle” gave us the grounded rule based structure we needed. So before we started, I laid out his ideas for what makes a good design principle by sharing and reading through the post together as a group. Because the last two sessions were very abstract, I wanted the ideas to be very specific, applicable, and simple. Therefore, we asked everyone to write their design principles with two key things in mind:
- Every statement put forward was reversible (in order to avoid sweeping statements that are hard to test/quantify).
- Every statement should be formulated in an even/over format. Because with everything we choose to prioritize, there will be another thing we don’t.
Once everyone had a good sense of what we were working towards, it was time to generate ideas! Before the session, I setup a simple google document where everyone could write their ideas out in one collective place. This worked just as well (if not better) than post it notes, especially since most of the company is remote.
We emerged from the hour long workshop with 40 different draft design principles! The biggest takeaway was the ability to see what different teams were passionate about and what conflicts/synergies were emerging. Overall it was a really great way to set us up for the next phase!
Whats next?
After both activities, we have a lot of good qualitative data on our internal perception of the company. The next step is to utilize this data and align these analogies and draft design principles with our user research and customer feedback. Doing this will hopefully reveal some overlapping trends, and finalizing design principles will become much easier (and much more likely to be used and approved) if they are connected directly back to data!
If you are interested in more nitty gritty details, here is a link to a full outline of our process. Let me know if you have thoughts or questions or suggestions for improvement! Part two coming soon.
Shoutout to RAD Summit, UXpin’s design system process blogs, the folks who created the Archetypes branding card set, and most importantly, all the great employees at NextRequest who participated!
