beacon design system

Beacon Design System is Illuminate’s style guide for documenting the look and experience for their family of products.

Design

Overview

Beacon is Illuminate’s design system. It was created to implement foundational design principles in Illuminate’s products.

Role

UX Designer

Research, Prototyping, Interaction, Visual design & testing, some coding

The Problem

Illuminate’s core web app was built off of Bootstrap 2.0. At the time the company did not have a design style guide for their products which resulted in inconsistency throughout their applications. When user tests were conducted, many users complained that the system was outdated and cumbersome.

old-itembank

Discovery

To get a better understanding of Illuminate’s identity, my team and I reviewed Illuminate’s current system and mapped out all of the important components. We printed out all the inconsistencies we noticed and posted them onto a wall for a better visual.

The inconsistent items included:

  • Buttons
  • Form elements
  • Modals
  • Notifications
  • Pagination
  • Tables
Component Wall

The Solution

Our solution was to create a design system with a component library that developers could reference to create uniform and well designed applications. We decided to build a style guide in Figma and then implement the designs into our front-end framework, Vuetify.

Atomic Design

Our team was assigned to read the principles of Atomic Design which helped us create components at the “atomic" level first before moving on to “molecules” and “organisms”. This helped us strategize a systematic way to tackle all the inconsistencies that we needed to reform.

Colors Typography
Button Components

Project Takeaways

While building out the design system, I was reminded that good designs are created with users in mind rather than our personal preferences. I learned to prioritize an easy user experience over trendy aesthetics. My goal as a UX Designer is to create user experiences that are intuitive to navigate without prior training.

Back to Projects

Interested?

Let's talk about our next project together!

arnoldjchang@gmail.com Download Resume