La Colombe Coffee
La Colombe Coffee Roasters is an American coffee roaster and retailer headquartered in Philadelphia. Their mission is simple: change the world by making people happy with coffee.
Tasks
User Research
UX/UI Design
Wireframing + Prototyping
Visual Design
Development
Quality Assurance Testing
Migration + Launch
Project Timeline
May 2023 - January 2024
Role
Lead User Experience Designer
BUSINESS OVERVIEW
As we emerged from the global disruptions caused by the COVID-19 pandemic in 2020, La Colombe Coffee Roasters experienced a significant transformation which underscored the critical importance of their digital presence. With coffee lovers increasingly turning to online shopping, La Colombe saw a substantial increase in online demand, a trend that persisted even as the world began to open up again.
By 2023, it was evident that enhancing the user experience, streamlining the purchasing process, and strengthening the company’s digital footprint were essential steps not only to meet these new digital consumer demands, but also to lay a robust foundation for future enhancements to adapt to the evolving needs of customers. Additionally, work towards introducing a company rebrand was underway in order to capitalize on this digital momentum and ensure that La Colombe remained competitive in a growing market.
RESEARCH
"I started buying coffee on your website during the pandemic. Not having access to your cafes caused a bit of a panic, to be honest. I was beyond delighted when I found out how easy and reliable it is to buy coffee on your website. Since the pandemic I moved out of NYC (where I purchased coffee primarily in your cafes). Having continued access to all your coffee has been a life saver. I really don't know what I'd do without it.”
Locations "Regularly" Purchased
89%
say the site is their primary purchase channel
61%
of site users say it’s their only channel
THE CHALLENGE
La Colombe faced a significant challenge due to its continued reliance on Shopify 1.0 for its e-commerce platform, a version that had become notably outdated following the industry-wide transition to Shopify 2.0. The website I inherited as the sole in-house web developer and UX designer was initially developed by an agency that lacked specialization in e-commerce solutions, and with which La Colombe no longer maintained a relationship. Despite my work maintaining the site and introducing incremental enhancements, the limitations of the outdated Shopify platform impeded the integration of more advanced features that were standard among competitors and necessary for meeting marketing and sales objectives.
To continue providing customers with an exceptional shopping experience and maintain a competitive edge in the food and beverage market, it became clear that upgrading to Shopify 2.0 was not only beneficial but essential. Furthermore, this would serve as an opportunity to effectively communicate the company’s rebranding initiatives, ensuring that their digital presence remained strategically aligned and at the forefront of the coffee industry.
THE WEBSITE: PREVIOUS LOOK
GOALS + EXPECTATIONS
Avoid the need to to add a large number of apps/plugins to handle “basic” functionality and customizations
Launch in time for Holiday season (November 2023)
Updated design in line with company rebrand
Fully ADA compliant
Faster performance compared prior themes (~35%) which will improve both CVRs and UX. Although it’s difficult to quantify the speed improvement in advance, studies show that transactions increase ~8% for every 0.1 ms saved.
Cleaner codebase with updated architecture and improved navigation
Allow for faster content creation (e.g. many types of new pages can be created without involving engineering, freeing up internal engineering capacity for experiments, new features, etc.)
Supports new Shopify features, many of which require a 2.0 theme for compatibility (e.g. product filters)
Better SEO foundation, given faster performance and more flexible metadata
Important features to include in new theme: collection page filters, quickview, countdown clock + sliding promo bar, promotion tiles on collection pages, PDP buttons (rather than dropdowns), navigational breadcrumbs, product feature in megamenu
TECHNICAL CONSIDERATIONS
Shopify’s theme library: Purchase a theme (some options above) from Shopify’s store (~$300) and upgrade to 2.0 ourselves.
Impulse by Archetype (paid theme): This choice represents strong developer support from an experienced shop with feature-rich enough to support our main needs without too much customization. It may be less performant and lightweight than Dawn, but is more likely to be successful given our timeline. On the other hand, it may be weighed down by built-in customizations/flexibility we don’t want or need.
Dawn by Shopify (free theme). Another viable option that means more internal or contracted development is a customized version of Dawn created by us. It will likely be quite performant, but using it will force us either to add apps or write custom functionality ourselves where the free theme is lacking.
Both are feasible, but will take several months and will limit the flexibility of our design. It also introduces nontrivial risk that some backend integrations will break. Furthermore, we only have one developer at La Colombe.
Fully custom theme + contract with a Shopify development agency: I identified Kinful as a partner, given their wealth of Shopify expertise. Although significantly more expensive, it will be highly performant and customized for our needs, and would include a support retainer to ensure continuity. Additionally, this path would mean Kinful builds the theme in parallel with our work so that we can focus on UX and design that can serve as the foundation for future site improvements.
RECOMMENDATION
Our recommendation is to rebuild a new theme. With that recommendation, almost everything within the theme structure will need to be rebuilt. However, to ensure the migration between old and new goes smoothly, we’ll want to migrate only what’s necessary and clean up what does not need to be migrated ahead of time, including apps, scripts, product pages, collection pages, product tags, and any personalization integrations.
“By cleaning the slate and starting with a fresh code base, we'll likely wipe away a lot of bloated code/features that may have been used in the past but are no longer necessary. This would be a performance boost naturally just from starting fresh.”
-Kinful Developers
CUSTOMER PERSONAS
IDEATION + FINAL DESIGNS
