Vivacity Tech PBC

Estimated Read Time: 3 minutes

Vivacity Tech logo

Context

I joined Vivacity Tech PBC (EdTech) as a Product Design Intern, working alongside a supervisor and junior designer on Dream 3.0, its Chromebook management system. My work was completing Jira tickets to build and maintain the design system's Figma assets. My key deliverables were 30+ redesigned modals, several of them multi-step flows, and 5+ components I created and maintained within the design system. The components are still actively used by the design team today, and the modals are still in development.

Modal System Redesign

My main deliverable at Vivacity was redesigning the modals throughout the product, implementing a design system the team had just updated. I started by auditing the product to catalogue the modals, then worked slow and small before taking on more at a faster rate; some were redesigned quickly, others had multiple workflows or steps. By the time I finished, I had over 30 modals.

A Figma canvas showing the full scope of the modal redesign — dozens of modal frames labeled with actions like create, edit, delete, upload, and add asset.
The scope of the modal redesign work. A screenshot of the 30+ modals I worked on.
The Edit Ticket modal before and after the redesign. Before: a plain header and a single full-width purple Update button. After: an icon-badged header, cleaner fields, and a Cancel and Update Ticket button pair.
The Edit Ticket modal, before (top) and after (bottom) the redesign.

FileUploadBlock

The FileUploadBlock is my favorite thing I built at Vivacity. Rebuilding it for this site, I noticed the original's "uploading" stage showed "4/4 Files" the whole time, before a single file had actually finished, so here I made it count up honestly instead: 1/4, then 2/4 as each file completes. It's a small change, but it's the kind of detail I now can't unsee. I liked the component enough to rebuild it a second time in my own design system afterward.

Try it out! This is an interactive demo. Nothing you drop or select is uploaded or saved; the files never leave your browser.

Drag and drop a file here or click to upload

Accepted file types: .png, .jpg, .pdf

FileUploadBlock — Figma File

Components

Beyond the FileUploadBlock, I built and maintained a handful of reusable components for Dream, each with a full range of variants so the design team could drop them in without detaching. Two worth highlighting: LabelGroup, which packs one to eight labels into table and detail-card contexts, and IconCircle, which wraps an icon in a semantic color badge so status reads at a glance.

A selection of LabelGroup variants — filled and outline styles holding one through several labels, in horizontal and vertical orientations.
LabelGroup, fill/outline and 1–8 labels, with horizontal and vertical variants.
A selection of IconCircle variants — a rocket icon shown in several semantic colors across a range of sizes.
IconCircle, a range of sizes across every semantic color.

LabelGroup is still saving the team time today:

One that has saved me a lot of time is the LabelGroup component you made. It is so handy to have that in table and detail card components so I don't have to detach just to add more labels.

Kayla Marcus Junior UI/UX Designer, Vivacity Tech PBC

Takeaways

Working on Vivacity's design team gave me experience contributing to and working within an existing system rather than building from scratch. Every component decision had to respect what already existed: the colors, patterns, conventions. That constraint is what makes design systems consistent and worth keeping around.

More than anything, this internship clarified what I want to do next. I'm good at implementing inside a system, but it also showed me I'm happier closer to the problem, where it gets found rather than handed to me. That's the part of the Math Center Kiosk project I loved most: I noticed the problem myself, then designed the solution. That's what draws me toward product management.