Projects

Edee Mobile App Design

/ Contract Full-time 2023

Profile Design Revamp

/ Full-time 2022

Design System Creation

/ Full-time 2022

RoS Mad Libs Board

/ School Project 2022

Liven Magazine

/ School Project

Tokyo Tonight

/ Freelancing 2023

Others

Home

About

Poster Gallery

Resume

Project Overview

In collaboration with a fellow designer, I created Figma design system to bring consistency in the usability and visuals of the company's web application.

Final Outcome

Creating a transparent and detail-oriented design system not only improved the product's accessibility but also reinforced the company's brand identity. It also sped up the designers' workflow and noticeably made communication between design and dev teams more transparent.

tools used

Figma

scope of work

  • Design System,
  • UI Audit,
  • Research

A snippet of the design system

About MeaningfulWork

MeaningfulWork offers a smart web platform that connects skill-based volunteers to non-profits with similar causes, to make a bigger and better impact in the world. MeaningfulWork was founded on the belief that everyone has the responsibility and ability to ensure the health and sustainability of our society and environment.

The Motivation

previous design guide

Slow, ambiguous, redundant workflow

The previous design guide was ill-defined, was missing a lot of components, and had vague component descriptions. This led designers to use a “make it as you go” approach every time they designed a feature. This slowed down the design process due to increased amount of guesswork when building features.

Inefficient communication between design & dev teams

Incomplete documentation of  components such as their specs, and different states a component can form made communication between dev & design teams inefficient and not transparent.

Incoherent & unprofessional look & feel

The increased amount of guesswork for designers and developers during the development process made the final look & feel of the product incoherent as it reflected the ill-defined design guide.

The Motivation

We started out by doing a UI audit of the entire platform to assess how many components and states have been created so far. This helped us to get an aerial view of all the needed and not-needed design variations we had on the platform.

UI Audit of the whole platform

Based on Brad Frost’s Atomic Design framework, we categorized the audited components into atoms, molecules, and organisms. Using the framework also helped us to better understand how different components came together to form bigger features and make up the entire platform.

Various button components with different shades of blues

Inconsistent use of color

Different shades of blue were used for multiple components. When repeated throughout the platform, it made the overall look of the application inconsistent and unprofessional. Too many colors outside the MW brand colors were being used, weakening the company’s brand identity.

heavy interactive elements without defined states

Undefined states

Many interactive component’s states were missing, leaving the work to be done by the developers. This slowed down development time and also sacrificed the final look and functionality of the component.

Various progress bar designs

Repeating components

There were many designs created for one component. We believe this happened due to the previous designers having to create the components from scratch every time they designed a feature, and not having one coherent place pull the components from.

Input text field components with inconsistent corner radius and padding sizes

Irregularity of styles & sizes

There were many variations of specifications for a single component for no apparent reason; including varying values of corner radiuses of the textboxes, drop shadow sizes for buttons, and padding and margin sizes among similar components.

Our Proposal

The team’s design process was slow, painful, and unproductive. We were an agile team that wasn't able to design with agility because of our disjointed work environment
benefits of design system
Our proposal eventually convinced everyone of the advantages of having a design system. We were then able to shift our priorities to creating a long over-due design system.

Redefining the primitives

We felt a need to redefine the design foundation of our platform starting with revisiting colors and typefaces as a way to further our brand.
Typeface Research
The right typeface is a crucial part of communicating the tone and personality of a brand. MeaningfulWork’s existing typefaces, Poppin and Open Sans are one of the most commonly used font choices by designers and businesses. There was a chance to reinforce MW's brand standpoint by finding the right typefaces that better fit the brand.

Research & Converge

We converged with our research of the new candidates for heading and body typefaces. We did many rounds of voting to narrow down to our typeface pair, Sora and DM Sans.

Final Typeface

We chose Sora as our new heading typeface. The playful curvature of its letterforms invoked the friendly and inviting personality of MeaningfulWork.

DM Sans was chosen for the body typeface as its geometric, sans serif characteristics made it especially legible in small text sizes.

The two typefaces’ matching X-height also make them a visually comparable.

Creating & Documenting Text Styles

Once the typefaces were chosen, we looked at different variations of text styles (such as headings, subheadings, body, labels, etc.) used in previous wireframes to determine the Figma text styles we need to define. We documented the specs (font weight, font size, leading, etc.) of the text styles for mobile and desktop breakpoints and created Figma text styles for designers to use.

Color Research

From the UI audit, we saw a need to document 3 different color groups: primary, neutral, and alert.

To account for flexibility while designing for different states, we defined the tones and shades of each color ranging from 0 (Lightest) to 1000 (Darkest). This was also useful when I was creating the brand icons and illustrations as it reduced ambiguity when selecting colors.

Building components

Figma UI Kit as a reference

We used the Figma UI kit as a reference for building the components. Seeing other designers’ component creation processes helped us to follow the best standard practices for creating components in Figma. This meant documenting the various states and design variants a component could have in an organized, reusable format.

Building atoms & molecules

We started out by building atomic/molecular level base components such as buttons, navigation bar, tabs, etc. that were expected to be the more static elements of the platform compared to the larger elements.

Apply, Experiment & Test

Our first application of the design system was through the revamp of the Sign Up feature. It was our first opportunity to fully componentize the final frames with the reusable components.

Sign Up was a perfect feature to test the application of the design system since the feature required extensive use of basic components such as the form fields, dropdown menus, buttons, status notifications, etc.

By the end, we have defined most of base-level components and a few larger components (such as within-page modals, pop-up modals, steppers, etc) which were reused in much bigger feature design project such as the Create Opportunity feature.

I will be happy to walk through how we communicated our feature to the dev team using the handover file and design system components in a meeting :)

Living Design System & Impact

Enabling agile workflow

All the upcoming features were built using the design system components which meant we were constantly updating the atoms, molecules, and organisms. Our Figma design system soon became one of the most frequently used file amongst designers to store the most up-to-date components that make up every feature in our web app.

Setting initiative for new way of working

Bringing more organization and structure to the designers' workspace set the initiative for the dev team to join in. By aligning the dev team's CSS Storybook and our design system file, the communication of the components became more transparent and efficient between the two teams.

A living document, our single source of truth

Our reusable design system has now become our team's most valued single source of truth that ensures future features are consistent with MeaningfulWork’s branding. It also thoroughly communicates the design standards of the platform to people from within and outside the design team.

Instagram |LinkedIN |
© Katie Park, 2022