Creating a Design System to Unify FrontStream's Panorama Platform

Creating a Design System to Unify FrontStream's Panorama Platform

Creating a Design System to Unify FrontStream's Panorama Platform

0 to 1

0 to 1

Product Design Lead

Product Design Lead

Acessible Design

Acessible Design

Mentoring

Mentoring

A classroom table with a laptop and phone displaying the redesigned assignment workflow

Overview

I led FrontStream's design system initiative by creating the process, designing components myself, and mentoring team members.

The team had a goal to reduce discrepancies, eliminate the need for designers to recreate components, and provide clarity to the Engineering team.

Full case study available upon request

ROLE

Lead User Experience Designer

RESPONSIBILITIES

Led design of 75% of the components

Mentored junior designers

TEAM

3 UX Designers, 1 UX Design Manager, 3 Software Engineers, 1 QA

Key Results

Streamlined

design workflow

Accelerated

development time

Key Results

Streamlined

design workflow

Accelerated

development time

Approach

Prioritization

The team collaborated to create a component development sequence, beginning with core design tokens and basic components, then prioritizing based on component relationships and active project requirements.

Component Creation

I developed a process where each component’s assigned Designer researched other design systems, audited our existing instances, and led team discussions.

I designed 75% of the components and mentored junior Designers on the rest.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class

Once a direction was established, the Designer created the component file and added it to the library.

When I wasn't the lead Designer, I advised on best practices for creating components.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Implementation

I partnered with Engineering to bring the design system to life across all platform touchpoints.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Results

Streamlined

design workflow by providing a reusable component library

Accelerated

development time and handoff with standardized design patterns

Streamlined

design workflow by providing a reusable component library

Accelerated

development time and handoff with standardized design patterns

Streamlined

design workflow by providing a reusable component library

Accelerated

development time and handoff with standardized design patterns

This project helped align both the Design Team and the Engineering Team to create a more cohesive platform for users.

What I Learned

  • The biggest impact for my professional growth and development was how I acted as a mentor.

  • I learned I have more of a "show don't tell" kind of philosophy, especially as the majority of the discussions were visual.

  • Most importantly, I learned that I truly enjoy NOT having to ask a question because the other designs had already thought about it.

Create a free website with Framer, the website builder loved by startups, designers and agencies.