Café William
Café William is a sustainability-minded coffee brewer and café. They came to us looking for a Shopify website redesign along with their brand overhaul. They are a beloved Quebec cafe that aspires to be a Canadian household name, so the digital experience will be the first impression they make on a Canadian consumer.
The goal is to modernize and establish a strong brand image amidst the sea of coffee businesses popping up. Their edge is sustainability and their humanness of being a family business.
The project kicked off with a few brand elements and a moodboard for the photoshoot handed to me; then working closely with the branding team, we handed off the design within 2 weeks to the developer.
Role: UX design, UI design
Subtle Motifs to Showcase the Brand's Big Mission
With a quick turnaround time for the project, we prioritized low effort, high reward modifications to the Shopify theme.
Wave motif
Throughout the pages, this motif acted as dividers and embellishments - not only does this give a nod to their sustainable practices, it also adds a touch of playfulness and boldness that compliments the art direction bespoke product images.
Responsive + accessibility
Small modifications were recommended to keep responsive design and accessibility top of mind. (i.e. hover states, considering treatment of text on images etc)
Storefront to Online,
Local to National
As Café William aspires to expand from a Quebec staple to a Canadian Classic, the product detail page was critical to push for consumer's ease for online purchases.
Digestible + scannable
The page is customized to showcase the myriad of formats the beans come in, the option to learn about their coffee subscription, as well as the story and making-of the product.
Out with the long copy and bullet points, in with a breathable and scannable page of digestible details with visual interest.
Before the facelift:
❃ copy heavy, lacks storytelling
❃ confusing site architecture
❃ underutilized brand elements
After the facelift:
❃ leaning into the sustainability mandate
❃ featuring colorways and photography
❃ digestible, accessible, scalable
