Project summary

When I joined Vendasta, there was no UI guide in place for the corporate website, and this severely hindered the visual consistency across the site. Our existing brand guide only covered basic visual needs, such as CTA buttons, font choice, and colour usage. However, it lacked the necessary depth to ensure consistency in UI elements like typography, buttons, and reusable design patterns. Recognizing this gap, I collaborated with Jill to build a comprehensive design system for the corporate website, laying the foundation for a more cohesive and scalable user experience.

The Vendasta UI Design Guide became the cornerstone of this effort, establishing standards that aligned with the company’s brand vision and ensured consistent, user-friendly designs across all digital touchpoints.

Typography and visual hierarchy

A critical starting point was typography. When I arrived, there were no consistent guidelines on font sizing, heading styles, or text hierarchy, leading to significant inconsistencies from page to page. This lack of structure created confusion for both users and designers, making it harder to establish a recognizable brand identity.

To solve this, I developed a typographic system that standardized font sizes across all headings and body text. This not only improved legibility but also made the website feel more cohesive. I ensured that heading levels were consistent, with clear guidelines on where and how to apply them for different types of content, creating a predictable user experience that built trust.

Buttons and hyperlinks

Before we developed the UI guide, buttons and hyperlinks lacked consistency, with different styles appearing throughout the site. Our priority was to standardize the use of buttons for primary and secondary calls to action (CTAs), as well as ensure accessibility best practices were followed.

We introduced clear, hover-state guidelines for both CTA and hyperlink buttons, ensuring a uniform look across all pages. By adding underline and colour-change hover effects, we made links more intuitive and accessible, improving usability for all users.

Repetitive UI elements

To speed up design workflows and ensure visual consistency, we needed to create reusable patterns for common UI elements like iconography, list styles, accordions, forms, toggles, and tooltips. Previously, each of these elements was being redesigned from scratch for every new page, leading to both inefficiency and inconsistency.

By systematizing these repetitive components, we were able to streamline the design process, reduce errors, and create a more cohesive brand identity across Vendasta’s corporate website. This not only saved time for the design team but also helped establish stronger, more recognizable branding.

Colour: building a unified brand

In order to build a strong, unified brand, we had to start with the fundamentals, and colour was a key aspect of this. I proposed a new primary and secondary colour palette to fit the brand’s growth and unify all touch points.

During this process, I presented to our senior leadership team (S-Team), showing the importance of colour in shaping user perceptions. According to research by the Institute of Colour Research, users judge products online within the first 90 seconds, with colour influencing 62% to 90% of that judgment. With these insights, I emphasized how colour could reflect Vendasta’s personality and create a stronger, more recognizable brand.

Primary colour updates

Our first step was to refine the existing colour palette. We introduced a darker version of Vendasta’s green for improved CTA visibility and accessibility, while also adding “Vendasta Navy,” a new corporate colour that offered contrast and depth. This navy tone, initially introduced in presentations, was quickly embraced as a core brand colour, elevating our digital and marketing assets.

Secondary palette:

We developed a complementary set of secondary colours that aligned with both the Vendasta platform and our white-label product brands. This ensured cohesion across our entire suite of digital products, creating a unified user experience no matter where customers encountered our brand.

Accessibility: creating an inclusive experience

Although Vendasta isn’t required to adhere to Canada’s WCAG standards, I led an initiative to begin implementing accessibility best practices throughout the website. Focusing on areas like text contrast, link naming conventions, and page structure, we aimed to make the site more accessible to a wider audience.

Accessibility is a critical factor in creating a positive user experience. For example, ensuring sufficient contrast between text and background colours is vital for readability, while properly tagging elements like buttons and images enhances usability for assistive technologies. We conducted an accessibility audit to identify areas for improvement and implemented a checklist for both new designs and existing pages to ensure ongoing compliance with best practices.

Future stages: uniting brand and product

After presenting the new colour updates and typographic guidelines to Vendasta’s senior leadership team (S-Team), we successfully gained approval to proceed with the proposed changes. We moved forward with testing and ultimately adopted the new primary and secondary colour palettes. This included the introduction of a darker green for CTAs and the “Vendasta Navy,” which became a key part of our brand’s identity.

We conducted A/B tests on various website pages to validate the impact of the new colours. Although proving conversion improvements through colour changes alone was challenging due to the complexity of user behavior, the feedback from our design team was overwhelmingly positive. The updated palette gave designers greater creative flexibility, allowing for more sophisticated and cohesive designs. As a result, we successfully unified our corporate website’s visual identity, creating a stronger brand presence that resonates across all digital and marketing touchpoints.

With the new system in place, we’ve laid a solid foundation for continued brand evolution, ensuring that Vendasta’s visual identity remains scalable, accessible, and adaptable as the company grows.

Results

This project was a significant undertaking, with results that improved Vendasta’s overall brand cohesion. By creating a standardized UI design guide, we were able to:

• Streamline the design process and reduce inconsistencies.
• Empower designers with the tools to create visually cohesive and user-friendly designs.
• Establish a foundation for future iterations of Vendasta’s digital presence.

The evolution of the Vendasta brand is ongoing, but this project was a key step in ensuring that the company’s website, products, and marketing assets align under one cohesive visual identity. Our work on this UI guide has set the stage for continued growth and refinement in the years to come.

Reflection & key learnings

This project highlighted the complexity of building a design system from the ground up, especially in a fast-moving environment. One key takeaway was the difficulty in directly measuring the impact of visual changes like colour on business outcomes, as many other factors influence user behavior. A/B testing for colour alone proved insufficient, prompting us to focus more on holistic improvements across the entire user experience.

Despite the challenges, we learned that a strong, flexible design system is essential for brand scalability. Designers felt more empowered, and we were able to move faster on new projects while maintaining a high level of consistency and quality. The guide has proven to be a valuable resource, and we will continue refining it as Vendasta’s brand and product offerings evolve.

Ⓒ Amanda Nogier