The Roasters Pack
Overview
Summary
The Roasters Pack is an e-commerce platform focused on delivering curated, high-quality coffee experiences through their subscription services. The site offers users to explore and discover a variety of roasts from top-tier roasters around the world. It features interactive elements such as quizzes that help customers discover their perfect coffee match.
Roles and Responsibilities
I was tasked to collaborate with the lead UX/UI designer to revamp the Shopify site to give users a more intuitive and interactive experience. I have personally developed and refactored code for
- Subscription Quiz
- Gift Quiz
- Main Blog Page
- Corporate Gifting Page
- Advent Calendar Page
- Cart Page
- Cart Drawer Section
and even had a hand in developing features to The Roaster's Pack's sister site: Leaderboard: The Coffee Game.
There was positive impact on the new Subscription quiz. After a week of Split URL testing, there was a positive 19.81% more conversion rate compared to the old quiz. This was tested with 277 unique visitors (non-repeat customers).
Challenges and Solutions
Challenge #1
One challenge that I was faced with was refactoring the code for the Subscription and Gift quizzes. Although they may look similar, they are functionally different.
I was tasked to completely reformat the design and refactor the code to iterate over 250 products to make sure that the customers could get their perfect coffee match.
The code was a bit dated (to my understanding, it was over 10 years old) and I got to refactor the code and introduce more modern JavaScript to make the quizzes run smoother and efficiently.
Challenge #2
Another challenge was to learn the Shopify's Liquid syntax quickly. Liquid files can contain HTML, CSS, and JavaScript but one of the most important aspects to Liquid code is that they can retrieve data from the Shopify's store's database. This made working with objects important and now it comes as second nature to me. I am also able to create custom Liquid blocks and sections that non-coders can use on the Customize side of Shopify!
Conclusion
Overall, this was a great opportunity
Miscellaneous
Tech Stack:
HTML, CSS, JavaScript, Liquid, VWO Testing
Check out some of the links!
Coffee Subscription & Monthly Club for Canadians | The Roasters Pack