While at human, I collaborated onsite with the OppenheimerFunds design team to create a system of UX designs. The designs accommodated dozens of hypothetical content types. While this basic system was in use by the production team, we jumped into creating a proper design system.

The primary challenge with the design system was to extend the new minimalist branding into a UI toolkit. We also streamlined variations found with different button styles, text sizes, etc. I also unified any inconsistent colors or typographic examples.

The 5-step design strategy:

1. Audit existing web pages, patterns, and UI elements.
2. Organize groupings and propose a design plan.
3. Deploy a basic style guide outline.
4. Execute the design plan in phases starting with UI elements.
5. Create a knowledge base and populate with content.

Discovery and Planning

Several archetype pages were identified. These would anchor the design system, while serving to illustrate working examples. The pages were to be designed at high fidelity using actual content, though the real template work is handled by the "section layouts" and UI elements.

"Section layouts" are templates that contain generic imagery, text, and UI elements in a 12 column grid. Because at the time we had no idea what the final content needs would be, we created as many flavors of sections as we could think of. Sections with 1 column, 2 column, 4 column, with images, without images, inverse color treatments, etc.

After designing each section layout template, we held an intensive weeklong work session alongside the development team, guiding them to implement the template designs within the production environment. With the team now under less pressure, the design team was freed up to start the design system.

Designing the System

My charter and core objective was to streamline plus unify existing elements. The secondary objective was to expand the UI toolkit to including elements that are missing or otherwise useful. Seeing all the UI elements next to each other revealed gaps in the UI toolkit, much like a periodic table might suggest an element is missing from a certain sequence.

Following atomic design principals, UI elements were designed at multiple sizes, including colors, forms, buttons, tables, and typography.

A mini-audit of the icon system revealed that around 60 icons were needed. Existing online icon sets were scrutinized from a stylistic viewpoint, but no particular set had every icon that was needed. We decided to start with the closest baseline set of existing icons, plug the gaps with custom designs, then iteratively change the design of the whole set until it was more to our liking.

UX Design Support

While creating the design system, I split my time designing UX for website landing pages and iPad app screens. While this slowed progress on the design system, it did allow me to pressure-test a practical application of the system's elements in production.

The lesson learned is that it's important to iterate on some final page templates, to calibrate the elements for actual web usage and validate the decisions being made. This is a back-and-forth process from the smallest atomic elements to the largest template organism. As we build out the entire design system, we'll cover off on sections, components, and alternative variations as needed.