TONIC CBD

─ A digital rewrite for one of the earliest movers in the CBD industry.

Year
2020
role
Lead UX Designer
Client
Project
Web Design, Creative Strategy, Ecommerce
TONIC CBD

The perfect blend of simplicity and elegance showcased through a shiny new website

After discovering a revolutionary blend of CBD and botanics, the founder of TONIC - Brittany Carbone approached our team with a vision to build a new platform to showcase their latest line of CBD products. Our solution - Combining modern web technology and critical UX principles to create a website that is modern, intuitive and compliant.

Visit site

TONIC CBD

A digital platform that yields results

Keeping TONIC's governing principles of balance, connectivity and harmony in mind, our goal with the new website was to create an aesthetic that is clean and subtle yet showcases the products and brand personality as the primary visual focus. The 4 key elements we focused on to achieve the desired results were: a clear navigation, effective information architecture, optimized product landing pages and an easy checkout process.

Only the essentials

With mobile viewership steadily increasing, our goal with building for mobile and tablet breakpoints was a design that’s more content-focused, and therefore user-focused. Our focus was also for the new website to appear as seamlessly on phones and tablets as desktops with compacted imagery and graphics and content hierarchy that enables users on handheld devices to digest information in bite-sized pieces of content. Images and videos were optimized for speed to reduce load time that often impacts mobile websites.

Clean and functional

For TONIC's new web platform, our strategy was to create a clean, modern design that primarily highlights their products and botanical imagery. This reduction in visual clutter prevents shoppers from being overwhelmed with excessive content, allowing the site to generate sales through a focus on products. The minimal design is further accentuated by visible grid lines to reinforce structure and hierarchy to the information.


Product Detail Page

Giving TONIC's blends the platform they deserved, our approach with the Product page was to showcase all necessary information above-the fold. This includes:

  • High quality product photos
  • Important product specs: name, benefits, ingredients, sizes, prices, key features.
  • Buy and save for later buttons.
  • A detailed product description
  • Social proof/customer reviews.

In addition, the rest of the page includes necessary literature for users interested in learning more about the product. The product page ends with prompting users to view related products where we highlight any upsells and cross-sells.

What's My Vibe Quiz

Staying on track with their holistic focus to educate customers, our team collaborated closely with TONIC to reformat portions of their funnel by developing a step-by-step online quiz that helps curious customers discover the blend that could work best for them. The quiz is a cleanly laid out 5 step digital questionnaire with descriptive options for users to navigate through their current concerns and needs and ultimately find a TONIC product that aptly identifies the right option for them. This quiz, a feature unique to the industry, mainly targets first-time CBD and adaptogen seekers.

Intuitive cart experience

With the goal of an increased conversion rate, we created an intuitive cart experience styled as an interactive floating stroller. This interactive cart slides as soon as the user purchases an item, changes the quantity or removes the product from the shopping cart with the price and quantity updating with every change. The side cart is equipped with an overlay that refocuses the users attention to their cart and allows them to exit and resume shopping or checkout and complete their transaction.