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
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
Updating...