A Practical Example of a Cohesive Design System for UI students

As more and more organizations adopt design systems to ensure consistency and efficiency across their digital products and services we wanted to provide a clear and consistent visual standard that students can follow, ensuring that their work is cohesive and professional-looking.

The problem

One of the deliverables that we ask of students is creating a design system of their Capstone project, however the team noticed how many of the students weren’t completely understanding the purpose of the design systems, and missing key elements that would be of use to developers if they were actually creating these in the industry.

My role was to create a UI library for an already existing app (taken from Figma Community) for the students to use as inspiration.

The Process:

01

Collect Student Feedback

Collect user feedback from our current students and what difficulties they are having with the current content as well as from past students and what they utilize in industry currently.

02

Create a Design System

Re-design lab content to be easier to follow along for varying levels of skill as well as provide more details on what an industry level design system looks like.

03

See Improvements

See students properly create and implement a redlined Design System into their own work using  the Atomic Design structure.

Selected Pages of UI library