Slash Design System

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!

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

Icons are often used with other elements such as text for various purposes. To unify the visual experience and the breath of the app, I set the spacing rule when icons are used with other elements.

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