Design Systems

Why do you do this this way??

My path through the UX discipline has been like building a design system. First, I was a front end developer, which led to curiousity as to why I was coding page elements and layouts a particular way. That led to wondering why the route we’d have users take to do what they came to a site to do, alongside the seemingly obvious revelation “Oh! We’re making these for people!” The visual display of UI elements and their attributes all had meaning and rationale, the text, for clarity for the intended audience. All very evident in hindsight, but learning the minutae of UI design, interaction design, information architecture could be very long trails to follow, so when I would reemerge, the interconnectedness of all of these aspects of design became realized. Beyond that, not only did the different elements of UX design relate to one another to form the entirety, but the ability to convey that to the developers in a way that was clear and extensible became essential. I’ve spent the latest segment of my work life focusing on this approach.

A briefing on Design Systems – gets long, feel free to skip to get to my examples below!

So that brings us to some examples of design systems I had a significant role in creating. They’re always built on the hard work of previous designers, engineers, product folk, and so on, but I’m not only adept in doing so, I outright enjoy it.

Keysight

Style Guide: Basic UI Elements (Dark mode)

An early draft portion of the greater UI Style Guide driving Keysight’s PathWave software initiative:

Screenshot of Keysight Design System Basic UI Elements
Sample shot of Basic UI Elements from the Style Guide. The image above and the link below will take you to the interactive prototype.

https://zk1wqw.axshare.com/#p=basic_elements&c=1&g=0

Style Guide: Specific Components – Documentation Wizard and NEP
Example from Keysight Style Guide
Sample shot of Specific Components from the Style Guide. The image above and the link below will take you to the interactive prototype.

https://fkd8qb.axshare.com/#p=numeric_entry_panel

Keysight’s software ecosystem was denser than a platinum dumptruck, so building out complex components became necessary, as not only did individual applications on individual devices have elaborate functionality, we were working towards bringing them all together on the common PathWave platform. (see my Case Study: PathWave for more).

Interaction model and information architecture: Keysight Learning Systems:

Sample image of the Learning
Sample shot of the interaction model and information architecture prototype for the Keysight Learning System Onboarding Application. The image above and the link below will take you to the interactive prototype.

https://hi18ne.axshare.com

This project stands out because even though it doesn’t get to finished UI designs, I worked with the Keysight DevOps department to create a system to help onboard new DevOps folks with the enormous technology stack they used. Research into their tools and processes, environments in which they would work, the flow of what they did as DevOppers, all of this fed into how the information was architected, presented, and interacted with other nodes of info. It’s not often you get to start with a concept from the ground up – most learning systems suck. This one ended up being good, and streamlined their onboarding process a great deal.

Anthem/Elevance Health

Look upon our design work ye mighty and despair!

Our design team at Anthem had a lots of leeway to explore design concepts with the goal of improving and innovating some of their more exploratory application ideas. While much of the pixels-on-the-screen work ended up in a digital graveyard, a design system began to coalesce around these efforts. No design work is ever done in vain! (We know that’s not true, but it makes us feel better to think so…)

Here are a couple of examples of early stage design system work. Don’t let the informality fool you – heart & soul were poured into these, and remained guidelines for future work.

Early draft of proposed Style Guide for our work with Anthem
The ur-Design System “Design.Something.”, named by cherished fellow designer Szuting Chen.
Icons and Images portion of Anthem Style Guide prototype
Elements became components, components became sheets, and so on and so on and so on…

Attempt to embed the Figma prototype in 3…2…1…

Ok, WordPress doesn’t let us embed Figma (or Axure) prototypes any longer, so please feel free to peruse this example in Figma:

https://www.figma.com/file/v2SVqLIqHd7MUC3iYEDEjB/Design.-Something.?node-id=0%3A1