HuggOPTix
Website Redesign

Revamping and reenergizing an e-commerce store to provide the best user experience possible.

Project Overview

Role
UX Designer, UI Designer
Timeline
Four weeks, Summer 2023
Challenge
HuggOPTix is a family business that does the majority of their sales online.
In order to increase their conversion rate, HuggOPTix needed a redesigned e-commerce website that prioritized user experience.
Project Outline
  1. Discovery
  2. Research & Analysis
  3. Solution & Design
  4. Results
An e-commerce site homepage that is outdated and lacks good design.
Before
An e-commerce site homepage that is updated and modern.
After
Jump to Final Product

Discovery

HuggOPTix’ online store was originally developed as an MVP to facilitate online sales, and it hasn’t changed since the first iteration.
The site was suffering from dramatically low conversion, and sales were suffering.
HuggOPTix came to me to redesign their online experience and revitalize their sales. What they got was a fresh website that prioritized user experience and turned their business around.
The Opportunity
The website had to stay in Shopify so HuggOPTix could continue to leverage essential integrations.
HuggOPTix is a small family business without the resources to hire a developer in addition to a designer, so the design needed to be built using non-custom Shopify patterns and components.
The new huggoptix.com would leverage the updated sitemap that they invested in earlier this year, with the goals of increased sales and conversion rate through improved user experience.
A selection window from Shopify that shows out-of-the box components that are available to choose.

Research & Analysis

For this project my research focused on the experience of the current site, while also exploring industry standards and best practices.
Primary Research
I interviewed key stakeholders in the company, as well as users of the site and product to better understand the problem.
Interviewees consistently agreed on a few particular pain points:
  1. A "clunky" interface that felt thrown together.
  2. Confusing pages with too much or not enough information.
  3. Overly packed product pages that hid important content such as reviews.
A clunky, outdated, and crowded product detail page for an eyeglass retainer.
A clunky outdated product listing page for an eyeglass retainer.
Site Audit
The audit results largely confirmed the concerns from the user research, and revealed further visual design issues:
  1. Poor use of color
  2. Awkward images
  3. Lack of alignment and hierarchy
  4. Dead-end pages with no contextual links
Competitive Analysis
Analysis of three direct competitors and one indirect competitor revealed a common layout that leveraged solid UX foundations
The homepage of PilotFish, a seller of eyewear retainers that competes with HuggOPTix. It is attractive and balanced.
The homepage of Chums, a seller of eyewear retainers that competes with HuggOPTix. It is attractive and balanced.
The homepage of Croakies, a seller of eyewear retainers that competes with HuggOPTix. It is attractive and balanced.
The homepage of Goodr, an indirect competitor of HuggOPTix that sells sports glasses. It is attractive and balanced.

Solution & Design

With a strong grasp of the core issues and a plan to solve them, I moved forward with design efforts.
This included a new visual identity to better match the brand, an updated color palette, and a UX overhaul.
Visual Identity
Modern design conveys a friendly but professional aesthetic that emphasizes the products. Rounded corners and updated textual hierarchy lead to a more comfortable site experience.
Visual storytelling is leveraged through the optomized images and scroll animations that keep users interested while not distracting from the products.
An updated homepage for HuggOPTix that has an attractive hero image, strong text, and attractive product cards.
A collage of a video, a product listing, and a product image that shows an improved visual identity.
A color palette including a white, grey, black, blue, and red.
Color Palette
It was necessary to revamp the color scheme to better convey both structure and intractability.
Blue and Gray were added as structural supports, allowing for the brand Red to be repurposed exclusively for primary actions.
Contextual Links
Each page now provides links to relevant information to allow user to follow paths of content throughout the site with and develop trust and understanding of the brand and products.
Links and product cards at the bottom of pages keep users engaged with the site and avoid dead ends that kill conversion.
A web page showing product listing cards and a review from a customer with an accompanying image and a link to see more reviews.
A balanced and modern product detail page with clickable drawers for product information.
Declutter Information
The new drawer pattern leverages progressive disclosure to prevent overwhelming users with information. This allows users to explore at their own pace while feeling in control of the information that is available.
Reduced vertical scroll also allowed more important information, such as reviews, to be surfaced higher on the product pages.
An improved homepage for HuggOPTix that uses improved colors, text, images, and structure.
HuggOPTix.com

Results

HuggOPTix launched a marketing campaign in conjunction with the new website launch and immediately saw massive improvements across all metrics.
Months later, the quarter-to quarter changes reveal that the new site performs far beyond the previous version by focusing on positive user experience.
Conversion Rate Increase

1322%

Sales Increase

11.8X

More Case Studies

Contact