COMPANY
Bright Machines
ROLE
UI/UX
DURATION
4 Month
TOOL
Figma, React
BM Design System
Our team continuously developed and iterated the Design System by conducting several audit sessions for Desktop and Robotic SASS. My role was to build a foundation of Design language, including style guidelines, common interaction patterns, design consistency, behavior documentation, and the UI Kit.
Our goal was to create cross-collaboration between teams by developing a foundation of Bright Machines' common design language. Allow alignment of all designers and handovers result in less back and forth between designers and developers and reduced friction.
ATOMIC DESIGN SYSTEM
Here at Bright Machines, we built our Design system followed by the Atomic Design System Principles while we have given our own terminology. We divided it into five stages, beginning with the Graphic(Atom), Component(Molecules), Module(Organism), Layout(Template), and finally, ends with View(Page). This system is fully structured and demonstrated in Figma assets. It is flexible to iterate as we design and reusable yet, persist in the design patterns
GRID SYSTEM
We started with research and found out the product resolution to our breakpoints. Our V2 and V3 feature applications are desktop-based, the Robotic interface is retina size, and its control pad is tablet size. So we have broken out Large Desktop, Standard Desktop, Small Desktop, and Tablet sizes
Then we collected existing views to operate the audit session. We validate layout patterns and cluster them into three different view types. Bright Machines uses Center View, Collection View, and Editor View with various content
![[1440] Left-align2](https://www.thejadekim.com/wp-content/uploads/2022/06/1440-Left-align2.png)
TYPE, COLOR SYSTEM
Bright Machines' V1 through V3 feature applications use 'Inter' typefaces
We broke out type scales based on display headings, utility headings, paragraph styles, and supporting styles. We also add contextual usage and examples as a reference. Color matrices broke out by elements, including primary, secondary, and supporting colors
This Type and Color system are also available in Figma Style assets
UI BUILDING BLOCKS
Each UI component has its own master components, which become the Default State
Master Component is a form of â‘ Content: the top layer of elements includes Typestyle, or an Icon â‘¡Overlay Graphic: background of the container â‘¢Container: the wrapper. And the Instance Component inherits that Master Component. â‘ Mater Component â‘¡Child Content: States, additional elements
UI COMPONENTS
BUTTON
LARGE BUTTONS
When performing an action on the entire view
Primary - The Primary Action (Submit, Deploy)
Secondary - Secondary Action (Cancel, Test)
SMALL BUTTONS
Primary - When an individual (primary) action (List Header)
Secondary - When secondary action or multiple occurrences of actions without hierarchy (e.g., List Item in List View)
Tertiary - When used to act on a subset of form elements
FORM FIELDS
NOTIFICATIONS & ERROR HANDING
Persistent Elements are the Primary (App) Header, Secondary (Content) Header, and Navigation. We named it Persistent Elements because it is used on the every-single page, including between features. To reduce the time to create HiFi mocks, we also created a template that includes a View with Persistent Elements Module
Segmented Controls are Selection Control, (Checkbox, Radio) Switch, and Toggle Button
Cards are used in Grid View and the non-text-based list. We design it to be responsive
EXAMPLE OF USE
Stepper, Slider, Tool Menu Bar, and Jogger are non-universal but feature-specific components. Tool Menu Bar use on the Robotic Interface when users customize their own UI Diagnostic Dashboard. The jogger is used when users control the actual robot arms. Stepper and Slider are used in Teach or On-boarding views
EXAMPLE OF USE
RESPONSIVE DESIGN
Every Component that I introduce here is based on the desktop size, which we called the 'Base Component', and it's built responsive, available for the Robotic Interface (Retina 1920*1080)
When this task was given, I first thought of who's the end-users. Our current market users are tech-heavy developers. Instantly, in my head, when I think of what was the color pallet that engineers use the most when they're working, it is a dark background with colorful type colors. That's where our dark theme came from.
On the other hand, Bright Machines is about the manufacturing industry - meaning that we're dealing with complex lines, numbers, and enormous data. My team wanted to bring that into our design and convert it into refined visuals. We collected the inspiration, which met with our concept from the book of Broadway Nassau Train Station from Unimark Design Studio, Product Specification Manual papers, and anything we see in our daily lives.
EXAMPLE OF USE
OPPORTUNITY TO PROVIDE AN INTERNAL UX SOLUTION
This project was a great opportunity for me as a UI designer. I was thrilled to take charge of and work on this project because I learned that this Design System isn't just for the visual, but it is also a UX problem that I need to solve for our team.
ATOMIC DESIGN SYSTEM
I knew that Atomic Design System is a fundamental design system that UI designers should refer to. However, not many designers have an opportunity to build their Atomic Design System from scratch due to time-consuming and costs. What I felt while I was working on this project, I thought I wish my school could've tough me more about this so I didn't have to spend extra time on the silo because it needs a lot of practice as well. Well, it can depend on which tool you're using, but here I'm talking about Figma and React tools. In the end, after a lot of documentation work on how to use this Design System while you're working, some designers, who were not familiar with Figma, she/he could be able to use proficiency. I was REALLY happy to see her finally using our Design System in their work!
THE 'TEAM WORK'
Even though I was in charge of this project, I never want to say this work is done by myself. It is teamwork. My peer designers, who were way more experienced than myself, helped me a lot to iterate, gave me feedback, teach me. I value more on this experiences than the final result.
CLICK TO VIEW AUDIT