Primer, 2023
Primer went through a pivotal transition in 2022-2023. We switched our product from Clubs to Microschools. To support this transition, I made some updates to the design system! This impacted the school experience for 300 students and their families, 20+ teachers, and 10+ admins.
Note: I was the only designer on the team so I was managing the design system while designing the product as well ~
Primer started out with Clubs. It was an online space for kids to pursue their interests. We had clubs for chess, artists, gamers, naturalists, musicians, and many more!
Chess Club was one of the last clubs we made. Read the case study here!
In Clubs, the goal was magic. We wanted this to be an inspiring place for kids. We went through a rebrand in early 2022 with Jessica Strelioff and Danielle LaRoy to help us create that magic. You can read the case study by Jessica here.
Primer's new illustration by Paulina Almira.
In late 2022, we transitioned to Microschools, which are small schools of ~15 students that support self-paced learning for all students. We wanted families to trust that we are a serious school, while keeping some of the Clubs magic (just toned down a bit). Jessica and Danielle helped us shift our visuals and tone to that.
The Shift.
The new website!
As we began building the tools to support the school ecosystem, I recognized the need for new components and a new style for the product. Below, I highlight a few design system changes we made for this new era of Primer.
But first some principles.
Our tagline up in the office.
We didn't have official design principles, but I knew our design system should embody bits of our operating principles and values:
We believe, with the right environment and support, kids can seriously explore their academic interests and passions. Just because they're young doesn't mean they can't create projects about music composition or astrophysics.
In the design system, this looks like creating visuals and language that inspire them to pursue passions and don't just treat them like kids in the traditional sense.
Primer is creating a new type of school. It's breaking out of the traditional classroom and embracing a new frontier.
This entails reflecting on current systems and innovating on it.
We want Primer to be a magical place for kids. It's not just a school; it's a space where you can learn without limits.
Magic in the design system is all about creating delightful and thoughtful experiences through illustration, color, and animation.
Now for the exciting part... components!
I noticed the need for multi-select as we created more admin-related tasks and actions. I expanded the dropdown component to include multi-select items, using existing base components.
Existing components I used to create the multi-select.
The multi-select dropdown in its glory.
One of the use cases was creating incident reports. Educators should be able to select multiple at a time because incidents often aren't defined by one category.
Ahsoka vs. Mandalorian?
School systems need tables for all sorts of directories, rostering, and lists in general. There's typically a lot of data to parse through and it can be dense. To make the table more easy on the eyes, I added a little bit more spacing around the rows, rather than trying to pack in as many rows as possible above the fold.
Tables and their rows.
Some use cases included directories, rosters, and documents. Here's the student directory:
The Mos Eisley campus looks like a rowdy one.
We needed more obvious notifications and errors for our users. Previously, our notifications to kids on Clubs were mostly about comments and posts. Now we had uses cases like document errors, attendance alerts, and more that required action.
Banners galore.
Here's the banner in action on the parent dashboard.
Banners for all.
Illustrations were one of the main ways we created magic. In Clubs, we would crop the illustrations for club cover images. For Microschools, I isolated the main objects and used them for empty states and backgrounds.
The beautiful illustrations ready to be collaged.
Here are some places we used the illustrations!
Empty states on the parent dashboard.
I created various crops of the illustration for abstract background options on the student dashboard.
A design system never ends, but in a short turnaround time, the design system evolved into one that fits Microschools while retaining the spirit of Clubs. Though my main focus during this transition was the product, I thoroughly enjoyed getting into the details of each component and thinking about all the various states! Excited to see how it grows as Primer builds out the schools.