Portfolio / Design System

Hello 👋🏼

My name is Nur Asyrof Muhammad, Product Designer based in Yogyakarta, currently designing AR/VR Experience at Arutala

Here is the featured project of my portfolio that represents what I can do in this Design System field.

image

J/BE Design System

Overview

J/BE or read as "JIBE" is a design and development agency specializing in e-commerce. In this project, I have a role as a designer hired by Polyform Studio to create a full set of the design system for JIBE so for the upcoming client that JIBE have, the company already have set of design kit that ready to use for a multi-eCommerce related purpose.

Finally this project is completed and have have output for more than 6000+ Components and 70 style guides and exported for any purpose development with Figma and Zeplin

Process and method

In this specific project, we use the Atomic Design System approach to solve the issue that "JIBE had for the huge project they need to re-edit and re-adjust almost all design they already have, and obviously need a better solution to get more efficiency of their design.

image

The process of this design system development divided into 5 stage from research up to design deliverable

👈🏼 see image

This research will contains early exploration about what and how this design system will finish and can be use and need to be confirmed by JIBE themself especially their design and developer team

image

👈🏼

So we come up with this research breakdown to cover any possible case that might have in the future development

Design

The design stage for this design system are everything that we already did in research in "research" stage including component list and deliverables.

image

👈🏼

The design stage for this design system cover up all atomic design system needs:

  • Atom
  • Molecule
  • Organism
  • Template

Tools

In this design system, I use Figma to create all components and variants and export all of the components, style guide, font, colors, etc to Zeplin.

Output Specification

All the 6K items come up with high detailed component concerns:

  • ABEM naming system
  • Paddings, margins, spacing, and grid styles
  • Auto-layout, variants
  • Inline integration with all colors and font styles

All of those need to apply to make sure all possible case and variants fully functional

here's some component sample 👇🏼

image
image

File Deliverable

After all these designs work finished and went through reviews. All items are ready to publish and use as it supposed to be use as design components.

  • Figma Components
image
  • Zeplin Styleguides
  • image
    image

Previews

image
image
image

Thank you,

Asyrof