Reducing Redundancy and Creating a Consistent Visual Library Using Design Systems

Reducing Redundancy and Creating a Consistent Visual Library Using Design Systems

Reducing Redundancy and Creating a Consistent Visual Library Using Design Systems

Team

Project Manager, Lead Front-End Developers

My Role

Lead UX/UI Designer

Date

March 2022 - June 2022

Client

Heretto

About this Project

The team at Heretto reached out to me to work on redesigning their website's help documentation site. Heretto clients needed an accessible and functional Help Page that has embedded videos, and other helpful tools for their business needs.

The Challenge

Heretto at this time had only an template used for their help desk website. However, this template was very cookie-cutter and did not have any of Heretto's visual branding and other key functionalities needed for their clients. As well as, there was no design framework where designers and developers can gain reference from.

Heretto at this time had only an template used for their help desk website. However, this template was very cookie-cutter and did not have any of Heretto's visual branding and other key functionalities needed for their clients. As well as, there was no design framework where designers and developers can gain reference from.

The Design Solution

My solution was simple, redesign the existing help page that aligns with Heretto's branding, and create an established design system to alleviate redundancies and increase design workflow between designs and developers.

My solution was simple, redesign the existing help page that aligns with Heretto's branding, and create an established design system to alleviate redundancies and increase design workflow between designs and developers.

Before Jumping
Straight Into Designing

The product manager and I worked together to establish the help site's new visual identity. I created a Style Style and presented a series of proposed visual designs to the CEO, CTO and lead developers.

My Process: Wireframes

I designed the wireframes based on the help site's sitemap flow. I created all the wireframes from the homepage, search page, other relevant pages and also mobile pages for responsive design.

My Process: Design System

I designed the wireframes based on the help site's sitemap flow. I created all the wireframes from the homepage, search page, other relevant pages and also mobile pages for responsive design.

Finalized Component
Design Library

I designed the entire component design library consisting of:

Component name:

A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.

State changes:

Recommended defaults and the subsequent changes in appearance.

Annotations:

Page annotations and descriptions to understand what component you were looking at.

Breakpoints:

Any size indication and breakpoints for the developers.

and finally what I learned…

and finally what I learned…

and finally what I learned…

and finally what I learned…

What's Next?

Testing


It would be nice to name this design system. But most importantly, further testing would be required to address any potential user pain points. Observing designers using the system and noting pain points to resolve in future releases would be a critical next step.

Future Updates & Considerations


As a constantly evolving system, Version 1.0 is square one. Version 2.0 would include the following:


For all components:

  • Usage guidelines & examples

  • Detailed specs

  • Code documentation

  • Updated Image guidelines


As Heretto's business continues to grow and mature, identifying commonalities to contribute back into the system for others to use should become inherent in our design process–the virtuous cycle!

What I've Learned

I learned to present and voice my design ideas and rational to various stakeholders throughout the company. I understand what the pain is like when developers aren't sure what size button and what font size is necessary for the project. I learned that documentation is KEY - it saves me and the company a lot of time and money on this project.


Lastly, this was a remote project, I was fortunate enough to have a Product Manager that trust in my abilities and collaborated and communicated with me throughout the ups and downs of the project.

Let's make amazing projects together!

Let's make amazing projects together!

Let's make amazing projects together!

Let's make amazing projects together!