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.

Solution Approach

Previous attempts at defining our process were designed with no particular architecture or hierarchy in mind. We knew what we wanted to say about each topic, but we didn’t understand order and interrelatedness.

Research

As a first task, I met with our content writers to understand what they wanted to say and how they wanted to say it. I followed that by interviewing newer and existing employees to understand better where the knowledge gaps were and how this toolkit could better set them up for success on day-to-day tasks.

Information Architecture and Hierarchy

My next step was to define the different layers of information and their hierarchy. I broke down all topic areas into the what, why, and how.

Page layout design

Using the designed information hierarchy as a blueprint, designing the page layouts was a quicker task than expected. I started by doing a comparative analysis between other design systems such as Polaris, Material Design, Canvas, and Primer, among others. This helped me understand the established industry standards and common denominators that other successful systems used. This was a great guide to help me validate and design my proposed solution.

One of the main goals I wanted for our end users was for them to be able to quickly scan through a page and find:

• What the topic was about and quickly identify its different sections, concepts, definitions, usage, and examples

• Why it was important to do it in the described way

• When to use it

• How it could be readily implemented

I used the same established hierarchy on the individual parts of a page. For example, when describing a specific concept it would always follow the same set of principal, what the concept was, why it’s used that way, when to use it and how to implement it.