Beacon Design System is Illuminate’s style guide for documenting the look and experience for their family of products.
Beacon is Illuminate’s design system. It was created to implement foundational design principles in Illuminate’s products.
Research, Prototyping, Interaction, Visual design & testing, some coding
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.
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:
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.
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.
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