Slash app
Design System

Slash is a gig economy app that aims to connect people who need help with people who can help.

I am the product designer in charge of building the design system that can guide the product team, developing and designing, through an efficient developing process. The design system is done through Figma's Design System Library.

The Design System comes with two languages, contact me for more!

I created the new color palette, spatial system, and UI elements for Giloo's 2.0 online-streaming platform. The goal of this Design System is to come up with an engaging and flexible system that is easy to communicate with developers.

I created the new color palette, spatial system, and UI elements for Giloo's 2.0 online-streaming platform. The goal of this Design System is to come up with an engaging and flexible system that is easy to communicate with developers.

Foundation

Simple

Slash offers people a simple way to reach out for help. We know modern human beings have a lot going on in their everyday life. Often, what gets them the most are small things that they might not have time or the skill to fix. We want to facilitate them to get the help they need efficiently.

Considerate

Slash puts people's needs at heart and first. We understand that accompanying the needs for help and to help can be more unforeseen obstacles. We strive to think before anything frustrating happens to our users.

Icon

The design of the icons strived to be simple, informative, and universal. This way users can quickly grasp the meaning while not being overwhelmed. Since the icons can be for various usages in the app, each scenario's spacing is also specified.

System Icons

Spacing

The design of the icons strived to be simple, informative, and universal. This way users can quickly grasp the meaning while not being overwhelmed. Since the icons can be for various usages in the app, each scenario's spacing is also specified.

Icon with Text (L)

Icon with Text (S)

Icon with number

Special case for showcasing price

Icon with Text when Vertical

Components

Commonly used visual aids to inform users with information are unified. Under the umbrella of the components,  these elements possess the style and structure to create a clear hierarchy for users to follow. These elements include buttons, cards, tab bars, nav bars, and more.

Input

For each section (simple, encoded, search, paragrapg, etc)of input component, I set up five different phases: enabled, focused, typing, completed, error, and deactivated. Incorporating the figma design system, designers and developers can freely pick the correct component for the situation.

Simple

Encoded

Short

Mobile Number

Card Number

List

Lists are separated by their form and action. The form includes how many lines of text are included and if there's an icon. For the action, there are options of standard (for selection), chevron (for leading), and icon (for other use).

1 line

1 line icon

2 line

2 line icon

Push Buttons

Since the app has two sides of function (giving tasks, taking tasks), the push button are categorized into four functions (standard-give, standard-take, disabled, and destructive). Under each category, the buttons come with multiple usage of icon in the label and five sizes.

Standard-Take

Standard-Give

Destructive

Deactivate

Button Variations within Category

Composition

Through putting the icons and components together, abiding the spacing rules, I created several templates for some commonly used compositions. This way, it is easier for the team to create designs with the same visual identity.

Cards

Help Cards (for Requestors)

01 Looking

02-1 Completing-in progress

02-2 Completing-need confirmation

03 Solved

Help Cards (for Provider)

01 Applying

02-1 Completing-need confirmation

02-2 Completing-in progress
03 Solved
04 Map View
05 Search View

Pull Card

Content Discovery Tool

Giloo 2.0 Platform

Mobile App

Panony
Mobile Media