K12 UX Design Intern
Migrated and expanded the existing design system for K12
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.
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.
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.
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.
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.
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.
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.
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