UX design · IA design · User research

Elements design system — IA design

Creating a toolkit to help new and current members of the Product team understand how we design and develop our learning experiences.

Role
UX Design, IA Design, User Research
Cross-functional collaborators
Content (Learning Experience), Visual Design, Implementation Specialist (Dev)
Live site
elements.everfi.com
Elements design system homepage

Overview

Elements is a design system resource that helps multidisciplinary teams at EVERFI understand how we ideate, design, and develop our learning experiences. As UX Designer, I was tasked with defining a scalable information architecture for Elements and designing that structure cohesively.

Solution approach

Previous attempts at defining our process had no particular architecture or hierarchy in mind — we knew what we wanted to say about each topic, but not the order or how topics related to one another.

First iteration of the Elements design system

Research

I met with our content writers to understand what they wanted to say and how, then interviewed newer and existing employees to find the knowledge gaps and understand how the toolkit could set them up for success in day-to-day work.

Information architecture and hierarchy

Next, I defined the layers of information and their hierarchy, breaking down every topic area into the what, why, and how.

Elements information architecture structure

Page layout design

With the information hierarchy as a blueprint, designing the page layouts moved faster than expected. I ran a comparative analysis against Polaris, Material Design, Canvas, Primer, and other established design systems to understand industry standards and validate the proposed solution.

The main goal for end users was to be able to quickly scan a page and find:

  • What the topic was about, and its sections, concepts, definitions, usage, and examples
  • Why it was important to do it the described way
  • When to use it
  • How it could be readily implemented

I applied that same hierarchy within each page: describing a concept always followed the same principle — what it was, why it’s used that way, when to use it, and how to implement it.

Page layout before the IA redesign
Page layout after the IA redesign

Final thoughts

Like many design systems, Elements will always be a living document. This approach still covers most of our product development needs, but it keeps evolving as EVERFI grows and new needs test it. Since launch, we’ve moved toward more concise information on each topic while always following the core principle of prioritizing the what, why, and how — which makes Elements an essential toolkit for the entire Product team.

← All work