Jésu Cardenas
Helix, the front-end library, was effective for quickly transitioning ideas to the web. Teams were building features rapidly to meet a sales-driven design process. However, this method doesn't always translate to well-designed features. Sometimes it may result in a disjointed and frustrating user experience.
Accessibility
Product management
Design systems
UI/UX design
Product strategy
Creative direction
Web
B2B SaaS
3 months (2021)
To fix this dumpster fire, I was tasked with building mirror components that were aesthetically redesigned but kept the current functionality. The new visual aesthetics aligned with the popular consumer-facing interfaces. This allowed the design team to propose simple, cohesive, and effective solutions before spending tremendous development resources. The control of design returned to its rightful owners: the designers. We created prototypes to gain buy-in from stakeholders, which helped secure resources for key projects, ultimately resulting in significant savings of time and resources by not working in the wrong direction.
We established guidelines for spacing increments, typography, and color, creating a solid foundation. We opted for a simplified color palette, using black as the primary color and incorporating various shades of cool gray. This raised an important question for our design team: would a color-blind person be able to notice and differentiate between different design states with this color palette? This consideration ensured that our design system was both accessible and user-friendly.
While designing components, color was used as a visual cue to help important elements stand out. One example is when an element is focused, it is surrounded by a two pixel colored border to draw the user's attention. This helps users quickly identify and interact with crucial form elements.
The control of design returned to its rightful owners: the designers. We created prototypes to gain buy-in from stakeholders, which helped secure resources for key projects, ultimately resulting in significant savings of time and resources by not working in the wrong direction.
Stewardship of the design system is crucial to ensuring basic standards are met when the components, icons, and styles, are used in prototypes and production. 1:1 meetings, video walkthroughs, and overall hype-building are essential to get the team to love and use the new library. Spacing, typography, color, and space increments are the foundational elements of a design system and should be carefully though out and used consistently.
Accessibility
Product management
Design systems
UI/UX design
Product strategy
Creative direction
