Enterprise Digital Style Guide
Project Overview: A global risk management and insurance brokerage company was looking to establish a baseline set of design standards for a holistic user experience and visual style across their digital products. Their product teams were using an inconsistent set of homegrown patterns or taking cues from brand identity guidelines defined by their marketing team.
Problem: The client needed a set of design standards and library of UI components that fostered consistency, simplicity and intuitiveness when product teams redesign a legacy component or build a new product. They were looking for a digital style guide easy enough for non-designers to understand how certain components could work together, but flexible enough for designers and engineers to build digital solutions no matter the product requirements.
Solution: My team and I proposed a set of activities and services to help us create a digital style guide that would address the client’s concerns and help their teams improve consistency across their product ecosystem, as well as build powerful new products. In the end, we created more than just a guide – we created a design system using Atomic Design methodology, inspired by Brad Frost, combined with design template files, code snippets and items of reference for best practices on usability, content strategy, and UX. We called it a “Software UI Toolkit.”
Activities and services included:
Stakeholder Interviews: We conducted interviews with six key client stakeholders and asked questions to elicit insights into the client’s process for building products as well as their needs and desires for driving an improved user experience across their product ecosystem. Through the interviewing, we identified core user groups of the toolkit and how they might leverage it.
Competitive Analysis: Working in parallel with the stakeholder interviews, we assessed the client’s competitive landscape, focusing on digital applications. We surveyed the offerings from their top three competitors (as identified jointly between the client and our design agency) as well as examples of cutting edge technologies and material design.
Existing Product Analysis: Following the competitive analysis, we assessed the legacy design systems in existing client applications. My team and I took a deep dive into 15 products to establish baseline assessments of each product’s design system.
Digital Brand Expression Workshop: We conducted a 1-day workshop to build alignment and definition for the digital brand prior to beginning work on the new set of design standards and components. Activities included confirming brand personality traits and reviewing mood board designs.
Design System: Armed with insights from the interviews and analysis, my team and I created an interface strategy for a new design system to be used across the client’s digital products. We created concepts that served as examples of how components and patterns could be used in a simple or complex user flow.
Usability Testing: We tested the simple and complex concepts along with the design standards to evaluate affordance, accessibility, and intuitiveness through a series of usability tests with the people who would be users of the final toolkit. Results from the testing informed improvements to the toolkit as well as recommendations for improving usability when updating legacy systems or building new products.
My role on the project:
Stakeholder Interviews: Working with the lead UX researcher on the project, I analyzed and synthesized results of the stakeholder interviews we conducted at the outset of the project. I led a large portion of the synthesis, discovery of themes, and writing the summary report while the lead researcher was dedicated to another project half-time. Together, we surfaced initial themes to help our internal and the client develop a strategy to measure the success and impact of the toolkit. One of the key findings was learning that product teams acted in silos by making design or development decisions independently. From this insight, we decided to create the toolkit in a format that would foster collaboration and provide source files (Illustrator) of design patterns and code snippets.
Design System: As the Senior UX Designer on the project, I led the ideating and wireframing of the design system concepts created first in low fidelity to help the visual designers create high fidelity prototypes for usability testing. I created a “Simple Flow” concept to illustrate patterns from the client’s products that require a small number of inputs for outputs like robust data visualization. The “Complex Flow” concept demonstrated how the new patterns could solve for more complex inputs that might need to connect to third-party vendors or data sources; and then allow for customizable outputs.
Along with the wireframes, I provided annotations for my designs and called out elements and/or interactions important for usability testing:
Complex Flow wireframes:
Our team delivered the toolkit to the client within three months and included not only a fully customized Bootstrap v4 theme, but also reference sections on accessibility guidelines, branding standards for their software, example UI animations and more. Product teams were able to immediately start using the new Software UI Toolkit to begin the process of updating their legacy systems and create innovative new products.