ONLY Beverages

Subject
Website Redesign with Improved UI/UX
Client type
Industry
Food & Beverages
Services
E-commerce, Strategy, UX/UI Design
desktop macbook icon
Onlybev desktop hero
www.drinkonly.co/
mobile iPhone icon
Onlybev mobile hero

Complete Redesign with UI/UX Improvement

Only Beverage wanted a complete overhaul of their Shopify site to reflect their youthful brand image to their equally youthful and fun customers. Butter took on the e-commerce project and delivered a functional yet striking website.

Platform Objectives

Only Beverages engaged Digital Butter to redesign their existing Shopify site to exemplify their brand identity. Their site was not celebrating their robust brand and so we were tasked to visually bring their story to life and produce a website that would appeal to their target demographic.

Additionally, given that the subscription business model is becoming a norm in the modern e-commerce landscape, Only Beverages was eager to incorporate this onto their new site - something which we at Butter had to execute smoothly from the frontend and backend.

Onlybev Platform Objectives 720x820
Onlybev Platform Objectives 666x415

Technology

Their site was built using Shopify given its strong assortment of e-commerce functionalities. Additionally, as their previous site was made with Shopify, their familiarity with the platform played a part in the selection of the technology.

We used multiple plugins for the project including Rebuy (for Smart cart), Recharge for subscription, Stockist (map to show which stores in Hong Kong stock their products), and more.

We also custom-built the frontend of their Ajax cart, this is what appears when you add products to your cart. This feature is helpful for their business as it upsells by recommending other products based on the user’s current selection.

Rebuy logo
Recharge logo

Challenges

One of our challenges lay in conveying both the volume and subscription prices on the same product page in a digestible manner. The way we overcame this was by ensuring our design of their product pages used clear signifiers (ie. buttons in different colours) for their customers to delineate between the 2 prices. Also building out a dedicated Subscriptions block on their product pages acted as a reference point to clarify any questions surrounding their subscription model.

Even though we used the Shopify theme Dawn as our framework, we custom-built the entire site based on our designs. This meant that some functionalities that we intuitively expected to be built in, needed to be built manually with restrictions in place for an optimally user-friendly experience from the backend and frontend.

Lastly, as it was difficult to educate their audience on their unique selling points (USP) on their previous site, and so we had to hone this properly on the new site. We did so by striking a balance between the image and text ratio to ensure that their information was palatable and presented in an eye-catching manner. Adding custom-fitted animations, marquees, and refining their colour palette all played a major part in communicating their USPs successfully.

Onlybev 851x700
www.drinkonly.co/
mobile iphone icon
Onlybev mobile showcase small 01
www.drinkonly.co/
mobile iphone icon
Onlybev mobile showcase small 02

Results

We created a site for Only Beverages which brings to light their USPs on their bold homepage. The smooth animations have helped elevate their brand storytelling, while the exploration of their brand colours has helped bring out their fun-loving personality. All these elements work in concert to differentiate them from their competitive landscape.