JUMP TO
0%
DURATION
November 2023 – February 2024
Keywords
Digital transformation, branded experience
Live Site
Phil & Sebastian Coffee had a newly redesigned packaging system, but not yet a digital presence that could carry the same level of craft online. The redesign was about translating that new brand language into a website that felt equally considered.
Phil & Sebastian Coffee is one of Canada’s favorite artisan coffee brands. As the company rolled out a new packaging system, the website needed to catch up and carry that identity online.
I worked on several key parts of the redesign, including the navigation, coffee glossary, and subscription flow, in collaboration with Joshua Vizzacco, Lindsay from pb+j, and founder Phil Robertson. Built on our ShopFront framework, the project moved quickly, with a full component library developed in two weeks to support the redesign and future campaigns. The result was a more flexible system under the site, with 123 reusable components and 14 templates, and a 62% increase in coffee subscription within two months.
The old site had three major problems. First, it no longer matched the new brand. The packaging had evolved, but the digital experience had not. Second, the structure was making the site harder to navigate than it needed to be, starting with the category system and the way key paths were organized. Third, and most importantly, the subscription flow was broken. It introduced too much friction at the moment of commitment, and people were dropping off instead of converting.
The old site
A big part of my work was making the site easier to move through without losing the brand’s character. I restructured the navigation around clearer paths, clarified the product hierarchy, and gave subscription a more prominent place in the experience. I also worked directly with Phil to redesign the subscription flow into something simpler and more enjoyable to use.
I designed a new landing page for subscription, as a place where people can learn how it works at a glance.
The subscription flow is simplified from 5 steps to 3 steps
The last step, quantity, is tricky for many new customers. I came up with a coffee slider to translate how much coffee they drink into how many bags of coffee in P&S packaging will meet their needs.
The slider also works for multiple coffee types.
