Ratio Coffee
eCommerce Website Design & Development
Automated, pour over coffee machines that are as delightful to use as to look at.
A Quick Overview
I began working with Ratio in early 2019 as they were moving their eCommerce storefront to Shopify from WooCommerce. I worked closely with their team for 3.5 years on retainer and in a variety of capacities, most notably acting as their primary web designer and developer.
Roles: UX Audits & Reporting, UI Design, Branding Design, Shopify Web Development
Website Development
2019 - 2022
I began working on the Ratio site as the Ratio storefront was transitioning to Shopify from WooCommerce. Over the years of working with the Ratio team I took the led on many web projects throughout the site. I implemented technical updates like color swatches and custom out of stock messaging, did a complete product page redesign, updated the journal, redesigned the navigation experience, and implemented various Shopify tools and apps.
Our largest undertaking was a complete theme upgrade for the Ratio site which allowed us to redesign and develop many things in one go, making for a more seamless onsite experience.
UX & UI Work
2019 - 2022
Going hand in hand with development were the designs for the site. As the primary designer and developer for the website I was able to work very efficiently and implement changes quickly in partnership with the Ratio team. I performed a variety of work over the years including: UX audits, monthly & quarterly analytics reporting, redesigns of important onsite features, and a website branding update.
I created custom landing pages for use with paid campaigns to better track and analyze the data and traffic coming from various sources. The Ratio team saw a lot of growth during this time and while it's always hard to pinpoint which changes contributed to what growth, I feel confident that my work contributed to:
Increase in conversion rates especially on mobile
More seamless onsite experience
Site changes for a more accessible website
Consistent brand look and feel throughout the site
More user visibility into backorder status
Uptick in items added on to cart
Fewer overall abandoned carts
Branding Work
2021 - 2022
The core elements of the Ratio brand identity were fairly well established when I came onboard in 2019, but by 2021 we collectively agreed that the brand had evolved and matured and the branding should reflect that growth.
Before starting on the website overhaul process we took a step back to evaluate what a branding update would look like across all materials.
In partnership with the Ratio team I spearheaded a shift in the Ratio branding that was then used by other teams Ratio works with. This changed the way the Ratio brand is perceived in print and on the web. The main elements of this shift included a color palette update, new iconography style/direction, and an updated to font pairings and treatments.