Helping a global enterprise client find their digital brand and create a cohesive product experience.

Problem: A global risk management and insurance brokerage company was looking to establish a set of design standards for a holistic user experience and visual style across their digital products. The client’s product teams were using an inconsistent set of homegrown patterns or taking cues from brand identity guidelines intended mostly for marketing purposes.

Solution: During the course of three months, my team and I created a digital style guide that addressed the client’s concerns and helped 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 Tool Kit.” Soon after, the concept became a new offering my agency provided to clients called “Digital Standards Tool Kit” or DST.

Affinity mapping

 

Before we got to the design phase, however, we had to go through several activities to ensure we were making the right design decisions for the guide. I had a hand in every activity, but some more than others.

Stakeholder Quote

Key project activities

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.

We surfaced initial themes to help our project team 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 tool kit in a format that would foster collaboration and provide source files of design patterns and code snippets.

Stakeholder Quote

Quotes from stakeholder interviews

 

Stakeholder Interview Summary

Stakeholder interview summary excerpt from Excel

 

Identifying Themes

Identifying themes from stakeholder interviews

 

Design System: As the Senior UX Designer on the project, I led the ideating and wireframing of the design system concepts created in low fidelity to support the visual design of 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.

 

Whiteboard sketch of Simple Flow Concept

Whiteboard sketch of Simple Flow Concept

 

Whiteboard sketch of Complex Flow Concept

Whiteboard sketch of Complex Flow Concept

 

Along with the wireframes, I provided annotations for my designs and called out elements and/or interactions important for usability testing:

Company and product branding

Top-level and second-level data visualization

Current location within the application

Call-to-actions and tabs

 

Results: Our team delivered the tool kit to the client in three months and we 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.

Landing Page

Example page from the Software UI Toolkit (client name removed for privacy)

Project Details

Duration: 6 months (2017 – 2018)

Team: Jay Janowicz (Engagement Manager), Mason Maygar (Lead Experience Architect), Elizabeth Steward (Senior Experience Designer – UX), Eddie Breidenbach (Senior Experience Designer – UI/Visual Design), and Riley Alonge (Senior Experience Researcher)

My responsibilities: Experience design (UX and interaction design) and usability research support

Tools: Adobe Illustrator, Sketch, InVision