TheStudioDesignSystem_CaseStudy_HeaderImage.png
 

OVERVIEW

The/Studio Enterprise seeks provide an on-demand supply chain platform that enables both SMB and large brand retailers. See it’s new design language.

Since the The/Studio Enterprise project encompassed two product designers working simultaneously on feature designs, setting a design system seemed essential to maintain consistency in style and visual language across all areas of the product.

 

ROLE, RESPONSIBILITIES, & DURATION

Lead Product Designer | The/Studio
Research, Information Architecture, Interaction, Visual design

January - April 2019

 
DesignSystem_Problem.png
 

Challenges

  1. Time and Prioritization

    Time wasn’t particularly on our side since the focus of Q1 for 2019 was to establish a MVP version of The/Studio platform. It was all hands on deck and finding time to to balance working on our Design System and designing out the features took effort.

  2. Getting the Team On-Board.
    A Design System is not a one-man project and if you want it to succeed you need everyone on board. We ultimately set up a one-hour ‘design system’ meeting every week to go over what we were working on and discussed what can be incorporated into the design system

 
DesignSystem_Solution.png
 

Following Atomic Design Methodology

This system is based largely on the principles of atomic design. This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture and proved essential for guiding our work in a unified direction.

We course-corrected when necessary during our weekly meetings and slowly, we started defining our standardized components.

An explanation of the atomic design framework. Illustration is not created by me.

An explanation of the atomic design framework. Illustration is not created by me.

 
 
Notification_DesignGuide1.png
 

In addition to documenting the design system components, I proceeded to document other design guidelines and rules to follow for other parts of the platform.

 
 

Documentation

My co-Product Designer and I discussed what platform we should use to document our design system. While there was applications such as Sketch and even online design system platforms, we decided to use Figma as our source master file since we were already working with Figma for our other projects. Figma gave us the ability to turn components into instances, which works like Sketch’s symbols.

 
 
 

Outcomes and Next Steps

Outcomes

Numerous hours of careful planning, sketching, and designing has brought the results desired for The/Studio’s Design System. Iterating through projects became more efficient and the launch of our MVP version of The/Studio Enterprise platform wouldn’t have been doable if this wasn’t set in place.

Next Steps

As The/Studio’s Enteprise platform grows, so will its design system.

The master file is currently shared in our Figma project and the code is currently being exported via Zeplin. In the future, an internal website documentation is most likely necessary to share with all designers, developers, and stakeholders who touch aspects of The/Studio’s platform.