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

Our Design system uses a series of containers, rows, and columns to arrange and align content. It is designed to be responsive and easily adapt to the modular component

BREAKPOINT

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

Responsive design best practices2

VIEWTYPE

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

viewtype

CENTER VIEW
Uses when content is a Foam, Card, or a List - Each view scale has its body width value defined. Also, the margin from the center increases in size

FULLSCREEN VIEW
Uses when content is Collection of an Overview, Dashboard

The primary body grows horizontally, and the vertically aligned center margin between the header and footer grows

fullscreen
editorview

EDITOR VIEW
Uses when content is Configuration (1/3 and 2/3 layout), or Editor

The primary body(1/3) is fixed, while the secondary body(2/3) grows up until the breakpoints hit the next viewport
 

chart

EXAMPLE OF USE

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

building_blocks_1

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

Each UI component meets a specific interaction or UI need and has been specifically created to work together to create patterns and intuitive user experiences

Each UI component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

BUTTON

Bright Machines' buttons are responsive and auto-layout while we keep the padding rules. Primary, Secondary, and Tertiary Buttons are categorized by scale type and their behaviors

button
Buttons-lightershadow2

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

Our Input Field Graphic(Atom) is repeatedly reused in many different form components. Master Input Graphic is a foundation of Master Input Field Component(Molecules), which becomes a foundation of Text Fields, Select Lists, Search Fields, or any other foam components

input_field
input-v13

NOTIFICATIONS & ERROR HANDING

Bright Robotic Cells are feedback sensitive because one fail could cause a cascade of products to fail, which is direct to the cost. Therefore, various error handling UI was sectional. After the audit session, we have broken down into 6 different types - Toast, Banner, Modal Dialog, Inline, Badge, and One-off product specific error handling element (Robot Status Bar and Andon Lights)

andon_lights2

PERSISTENT ELEMENTS

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

mockup5

SEGMENTED CONTROLS

Segmented Controls are Selection Control, (Checkbox, Radio) Switch, and Toggle Button

LIST AND CARD

Cards are used in Grid View and the non-text-based list. We design it to be responsive

EXAMPLE OF USE

listview

ONE-OFF COMPONENTS

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

tool-menu-bar-tall
jogger
steppers-tall
slider

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)

DESIGN INSPIRATIONS

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.

IMG_1599
74d21eda12b9f71354ff8e9af52ac18f
09_feltron_-1-1
07@2x-1
07@2x-3-1
5a0b11cc8e6db24e71fa8f4860865bcb-1-1
04@2x-1
04@2x
map
04@2x-4-1
08@2x-2-1
dyson-specification2
IMG_5675
05@2x-3
53455a097272d707f5d6dce20e4c8048
f191373d6ab948064b3886751f56e15f
04@2x-3
c9868e674e8da50b50a34e12ad51f79e
IMG_5677
05_feltron_AR06_Readers_03
IMG_5674
brain_activity-5798eebf5f9b589aa9ae69b2
IMG_5676

EXAMPLE OF USE

Diagnostic4

KEY TAKEAWAYS

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.

Back to top Arrow
View
error: Alert: Content selection is disabled