The Challenge
Marketing Our Innovation
The primary goal for this project was focused on two branches of the HLC user experience: connecting retail and brand partners with our portfolio of services and improving our industry-leading B2B store.
My role: UX design, UI design, research, copywriting
Old homepage which offered virtually no information about HLC's value to their business
The First Solution
Refined, Deliberate Messaging
As the project lead, I collaborated over the course of months with stakeholders across the company to ensure all new page content was up-to-date, accurate, and effectively articulated.
The most central element to the new site was the Retailer Services section. Content highlighting these business tools was completely missing for prospective customers on our current site, so it was critical we got it right this time.
To accomplish this, I worked closely with our digital marketing team to craft messaging and implement an intuitive user flow with clear and consistent calls to action.
Example of value proposition card components built for our Retailer Services pages
The final site was an important step forward towards partnering with prospective customers and brand partners. It better positioned the company to capture marketshare from our competitors and created a centralized hub for increased inbound marketing initiatives.
As we neared launch and were running short on time, the team identified a few key opportunities to be implemented in a phase two:
• A collection of pages highlighting the company's Brand Services
• A new blog, focused on further educating retailers on the smart value HLC offers
• A rebuilt Resource section, housing everything from program details to downloadable assets
The Second Solution
A Modern, Refreshed UI
Nearing five years since its launch, our B2B site was showing its age. But a complete redesign was both unfeasible and not necessary — HLC had a solid industry reputation for its B2B experience.
But our team felt it was the right time to make improvements since work had to be done anyway in order to properly integrate it with the new marketing site.
Before any design thinking, I looked at data from Google analytics to identify any user behavior that would indicate changes to the site architecture were necessary.
Two significant changes were made—first, we removed the Brand page section completely as virtually no users visited those pages. Second, after an internal audit of the sub-navigation structure, select pages were migrated to different primary navigation for a more coherant user experience.
The most glaring element I needed to fix first and foremost was the site's typography — Roboto Condensed. We originally chose it because the site had been built with a max-width content container of 1350px and the condensed family lended itself to fitting more in smaller spaces.
But for the new site, I proposed we expand it to 1700px, which allowed us to not only use a more readable typeface, but increase the minimum pixel size for text site-wide. After researching solutions, I chose Google's Inter for its excellent readability for better accessibility.
Next, I identified the most critical pages in which users interact with through their buying journey and rebuilt their core components in Figma. These mockups served as a guide to our developers as they began to prioritize their to-do list.
Inconsistency was a common issue throughout our site, so my next goal to improve the overall design system for colors, buttons and iconography.
I fleshed out our basic color library using variables and kept visual accessibility at the front of my mind with improvements like WCAG-compliant color contrast.
My biggest takeaway from working on this design system was just how substantial the efficiency gain is once it's properly implemented. I found I was cutting my wireframe and prototyping time by up to 50%.
Old mobile UI (L) and new (R)