Style Guide
As we moved to a new style platform, I saw an opportunity to update not just the content of our style guide, but the style guide itself. I proposed and created the business case, outlined the goals, and determined the timeline and deliverables. The aim was to modernize the internal style guide, but I also wanted to improve customer comprehension and content clarity. I established milestones and regular check-ins throughout the work to communicate our progress to stakeholders.
Research documents
Research & Wireframes
To identify our priorities, we conducted surveys and created focus groups of our consumers—UX designers, UX architects, and developers. This research informed our decision to focus on improving sitewide navigation and page structure. To improve navigation, we separated the structural elements of the style guide and used a card sort to determine the most natural navigation and page structure. With this feedback in hand, we created wires to reflect these preferences.
Wires
Working Code
We also collected suggestions from our customers. These included anything from the inclusion of additional file types to detailed design proposals.
One frequently requested feature was to include interactive and responsive working code. Designers and architects wanted to see how modules worked in action. After collecting examples of what we wanted and discussing any technical considerations with our developers, we added this item to our scope.
Navigation
To improve the navigation, we added persistent page level menus. These menu items jumped to the relevant page content.
Some designers and developers found searching for content through the menu difficult. They felt as though they had to guess at the content beneath the menus. We resolved also improved the main menu by revealing nested menu items within a mega menu.
Protoype Testing
I oversaw the creation of an interactive HTML prototype so that we could collect additional feedback and test our end user's ability to complete basic tasks like finding information on the page, navigating to specific information, and completing tasks. After testing, we delivered updated designs to the style guide content team to consume as they created the elements needed to populate the new style guide.