intern bg.png

K12 UX Design Intern

Migrated and expanded the existing design system for K12

Overview

I worked at K12 from June - August as a UX Design Intern. My responsibility was to work on the design system of K12 and my main focus was on creating reusable components for multiple platforms and documenting the components pages. 

Collaborators

UX Designer

UX Research

Visual Designers

Engineers

Background

The single source of truth for multiple platforms. 

K12 is a company that provides different levels of education, from kindergarten to Grade 12. So it has more than 10 platforms for different users like teachers, learning coaches, and students that can vary a lot in age. So K12’s design system needs to find a way to give a guide for people who are working on different platforms. 

Problem

From high to mid-fidelity

K12 does have a design system on Confluence. However, the design system on Confluence documents mostly high fidelity components that only apply to certain platforms. Moreover, due to the nature of Confluence, the designer can only upload screenshots of design that took a lot of time to do it, so most of the design on confluence were no up to date. So people need to find the design in multiple sketch files and duplicate them since there was also no reusable components Sketch library. 

So when K12 decided to move from Confluence to Zeroheight (a web tool use to document design system), we decided to create more generic and medium-fidelity components that excel at letting designers or who come to the design system think about components at the highest level without being bound by details or certain style of a specific platform.  

Process

Audit

Conducted a comprehensive audit of the current UI inventory.

Based on one of the platforms,  I identified all the components used there. For example,  I found all the variations of the card components and identified different states and interactions these cards had.

Build

In Sketch, I created a  library of the generic version of all components and made them into symbols which other designers can create a high fidelity one by simply changing color and text. 

 

 

Research

After having the Sketch library, I looked externally to the market. What were other companies doing with their design systems that I can learn from? I found that Shopify’s Polaris, Google’s Material Design, and IBM’s Carbon Made design systems inspired me the most.

Result

New information architecture for components page

So combining what special about Zeroheight and K12, I came up with a new information architecture for individual component page to address key design and development needs.

Zeroheight walkthrough

Impact & Feedback

At the end of my intern period, I have created about 20 components page with a reusable Sketch library. 

 

I asked the UX team including designers and research, engineers and marketing for feedback on what would help them the most. I received some very valuable feedback that helped us improve the pages to a point where they could be most effectively used.

" I really love the fidelity of the component which gives me a high-level overview of how to use this components and if I am working on a specific product it also links the specific style guide which is perfect. "

 - Matt, designer

" It is really what I am looking for when creating brand images for products, I don't have to dig into tons of Sketch files or ask designers which saves a lot of time. "

 - Jean, marketing 

Copyright © 2020 by Janice Lixiang Zhou