La Colombe Coffee Roasters

I redesigned the UX + UI of La Colombe’s ecommerce site to improve user experience while meeting WCAG AA compliance standards. Efforts resulted in a 15% increase in online sales, which have helped sustain the business through COVID-19.

LaC UI

ROLE

Lead Designer

TIME FRAME

5 Months

COMPANY

O3 World


Overview


La Colombe Coffee Roasters is a US-based coffee roaster and retailer with locations all across the country. Their premiere drink, Draft Latte, can be found in grocery stores such as Walgreens, Target and Whole Foods, as well as hotels and cafes.

To support the continued growth and reach of their product, La Colombe was looking to refresh their digital commerce presence. In order to improve the overall user experience and reach WCAG-compliance, La Colombe needed a website overhaul that would ensure a consistently positive brand experience for both new and returning customers while driving and growing online sales.

What I Did

 

This project kicked off with a robust discovery and research phase, which included competitive research, landscape and analytics analysis, content audit and third-party tech audit. The research culminated in a project roadmap that prioritized key features and functionality that supported both La Colombe’s business objectives and goal to achieve WCAG 2.1 Level AA accessibility standards.

LaC_Landscape-1.png
LaC_Landscape-2.png
LaC_Roadmap-1.png
LaC_Roadmap-2.png
 

BUILDING THE FOUNDATION

After wrapping the Discovery phase, I worked closely with La Colombe’s marketing and commerce team on the new site’s information architecture, user experience and content strategy. Utilizing the research findings, I designed a new sitemap to better organize La Colombe’s product catalog and simplify the ordering process. I then facilitated a workshop with their team to define the overall structure and hierarchy of content on individual pages and templates. This workshop helped to then wireframe a new e-commerce experience that supported their business goals and customer needs.

Final Sitemap for La Colombe redesign

Final Sitemap for La Colombe redesign

LaC Homepage
LaC Product Detail
 

A NEW LOOK

Part of the redesign was updating La Colombe’s visual design to align with the brand’s newly-revamped style guide and product packaging. I began the visual design process with an exploration of competitive brands, exploring new ideas around the tone, feeling, mood, and visuals of the new site. I used this research to gather input from the La Colombe team to define the direction for style tiles and high-fidelity designs. The process was highly iterative, working with the La Colombe marketing team to align on an approach.

The final design was developed and launched March 2019 and sales increased by 15% and have held steady through COVID-19, supporting the business as their primary source of revenue.

Redesigned product packaging. (Courtesy of La Colombe Coffee Roasters)

Redesigned product packaging. (Courtesy of La Colombe Coffee Roasters)

LaC Homepage UI
product detail - desktop.png
LaC UI Mobile