Subframe Design System
Dycom’s UX team wanted to launch a design system, called Subframe, for developers and other corporate employees to use to create in-house solutions. In it, users would grab pre-coded components for their applications, find templates for product content, or review any of our internal branding guidelines. The team had begun to collect information on current UI components and patterns but needed my help tightening up the written content and ensuring that it could be navigated efficiently by users.
Subframe home page
My objectives:
Create a way to organize our content
Ensure users can effectively navigate
Determine and uphold standards for documentation within the design system
Process
Information architecture
A UX team member and I facilitated card sorts with our intended audience to identify some major groupings for content. We gave participants a list of things we’d put into our design system and asked them to sort them into categories as they saw fit. A few crazy diagrams came out of the process, but more importantly, we figured out the main way users would classify the contents of Subframe:
Pieces of an interface
Larger, more complex application features
Content related items
I used these groups to influence our initial structure and further analyzed the data to find trends in labeling. Once we were confident, we tested navigability with users.
Usability testing
Now that we had something to work with, we needed to validate that users could navigate through our offerings efficiently (i.e. they’re able to find what they need without straying from the intended path). I created a tree test in Optimal Workshop using our initial structure, then wrote out tasks for users to complete while looking through the tree. The charts below show how well our tree performed with users overall.
Users had varying levels of success when it came to differentiating what was an element versus a pattern, as well as some trouble when it came to finding UI elements nested within subcategories. We also noted that developers mostly understood these UI/UX terms, while non-technical employees struggled. I analyzed the notes collected during testing to generate verbiage that would better resonate with our audience, keeping in mind the varying needs of our users. In the end, we drifted away from typical interface design lingo and adopted labels that catered to a person’s reasoning for visiting Subframe.
Content design
I’ll be honest with you: coming into this position I had little to no idea what a design system was. So, I did a lot of external research to learn about them and what they had in common. Then, I took a hard look at our users (through a couple of interviews and preexisting data points collected by our team) to better determine what information they needed from Subframe. We also considered what guidelines we wanted to standardize among the design team.
Once I knew what we needed to document, I created documentation templates for our designers to use as they created the components and UX patterns for our design system. Once we fully documented our components, we made final decisions about what details we’d feature on each page based on our users’ needs. We introduced Subframe with a starting set of components and guidelines, based on the frequency of use within our product spaces. Instead of copying and pasting all of our documentation straight into the site, we scaled back on a lot of the details and focused on providing strong examples. Throughout this process, I reviewed all content for the final design system and monitored its progress in Jira.
Outcomes
In the end, we reimagined our traditional design system into something that would work better for our corporate crowd. Through these user research and content strategy efforts, we were able to:
Standardize a set of experience guidelines across our corporate offices
Reduce time spent searching for information
Increase adoption of Subframe
You can see in the below images the final menu system, split into coding resources for developers and content guidelines for general employees of the company. Click through to see how some of our components are documented and check out my Dycom Product Content Strategy project to see what we provided for content creators.
