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!
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.
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.
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
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
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.
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.
Mobile Number
Card Number
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.
Button Variations within Category
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.
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