Top DTC Eyewear Brand

A leading DTC eyewear brand hired Terakeet to boost its traffic, but the surge in visitors led to a decline in conversion rates. With just 60 hours of UX allocation, I led a strategic redesign of their content hub to address these challenges, implementing both quick wins and a long-term success plan.

Role

Senior UX Designer (acting as UX Lead)

Duration

6 weeks (60 hours), 2024

Tools + Skills

Figma, UX Audits, Competitive Analysis, Developer Handoff, Roadmap Creation

Team

Terakeet - SEO Director, Content Manager, Project Manager, Customer Success Manager, Developers

Jump to:

The Problem

The brand's content hub was attracting traffic but struggling to convert new visitors.

With limited UX resources in their contract, I was brought in to tackle these challenges quickly. Over six weeks, I managed both the strategic planning typically handled by a UX lead and the hands-on design work.

The Problem

How could we quickly integrate shopping into the blog experience?

Taking the Lead

I created a clear roadmap for the project:

Focused Discovery: Conducted a targeted UX audit and informal competitive analyses to identify key gaps and opportunities.
Detailed Mockups: Designed high-fidelity mockups with detailed developer notes for precise implementation with minimal oversight.
Optimizing Key Pages: Identified top-performing pages with high potential to enhance conversion rates.
Content Alignment: Developed a content guide to ensure future posts followed best practices for conversion.

Understanding User Intent

Who: Users arrived through organic search with varying intent. Most users sought education, such as eye health, while others landed on pages deeper in the funnel.

Behavior: Content hub pages had a 90% exit rate, with most users leaving after viewing one article. Only a few explored additional content or moved toward shopping, and those were from product-related articles.

Opportunities: The brand's strong reputation presented an opportunity to convert information-seekers. We needed to guide users toward purchase while respecting their original intent.

Targeted Research

Assessing Opportunities

I initiated a UX audit to identify key factors hindering conversions. The audit revealed issues with usability, inconsistencies, and a lack of shopping opportunities.

Additionally, I performed an informal competitive analysis to explore improvement opportunities. With a tight timeline, I focused on finding strategies to enhance user guidance through the content and integrate products.

Two side-by-side annotated screenshots titled 'Article - General' and 'Article - Shoppable,' highlighting issues with a website's design. The 'General' section points out problems like excessive white space around images, ad integration placement, and excessively tall related thumbnails. The 'Shoppable' section highlights issues such as missing headings in product galleries, pixelated imagery, limited clickable areas, and oversized product thumbnails. Each issue is color-coded by priority, with a detailed explanation alongside screenshots of the webpage in question.

Slides from the UX audit

Internal Communication

I compiled my research findings into a recommendation tracker to guide the design phase and ensure all issues were addressed.

Additionally, the blueprint served as a communication tool for the internal team, many of whom were working with a UX designer for the first time. Keeping them informed allowed me to work independently while ensuring they knew what to expect.

Spreadsheet with columns for Done, ID, Page, Location, Issue, Explanation, Device, and Priority. Items marked as done are greyed out. Items include differing navigations, adding conversion touchpoints, weak first impressions, etc

Blueprint for Issues to Address

Identified Issues

The research found that the content hub faced several challenges that were likely impacting user experience and conversion:

No Path to Purchase

There were no clear shopping opportunities, limiting the transition from browsing to purchasing.

Inconsistent Design

Differing patterns between the blog and store increased mental load and affected user trust.

Poor Mobile Usability

Excessive heights required too much scrolling. This limited the visibility of available content and CTAs.

Lengthy CTAs

Banners were not following CRO best practices, potentially causing users to overlook calls-to-action.

Efficient, Impactful Design

I leveraged the main site’s design framework to streamline the process and deliver maximum impact, achieving several key benefits:

Consistent Design: I reverse-engineered design patterns from the main website, ensuring consistency without needing the full style guide.
Optimized for Conversions: Using proven design patterns created a seamless experience that boosted conversion opportunities.
Faster Development: Referencing existing components allowed developers to implement code more quickly.
Time Management: Freed up resources to focus on UX content and guidelines, supporting long-term project success beyond my involvement.

Integrating Navigation Experiences

I aligned the header and footer with the main site to direct users to high-value pages, addressing low engagement with category pages. Blog links were moved into dropdowns to prioritize conversion opportunities while keeping content accessible. Mobile navigation styling was adapted to ensure a consistent, on-brand experience tailored to the content hub.

A mobile phone screen shows a webpage with a menu listing six shopping categories: "Home Try-On," "Eyeglasses," "Sunglasses," "Contacts," "Accessories," and "Get a prescription." Each category has a corresponding blurred image next to the text.

Main Mobile Navigation

A mobile phone screen displays a webpage with a menu open. The menu contains six options: "All About Eyewear," "Eye Health," "How-To Guides," "Fashion and Lifestyle," and "Shop now." Below the menu, there's a promotional text about glasses, mentioning features like scratch resistance and UV protection, with a "Shop now" link beneath it. A blurred image of an eyeglasses case is visible at the bottom

Original Mobile Navigation

A smartphone screen displaying a navigation menu similar to the previous one but with fewer options. The options shown include "Learn," "Home Try-On," "Eyeglasses," "Sunglasses," "Contacts," "Accessories," and "Get a prescription." Additional links at the bottom include "Locations," "Favorites," "Download our app," "Sign in," and a promotion for 20% off the first contacts order.

Updated Nav w/ Closed Dropdown

A smartphone screen displaying a navigation menu with options such as "Learn" (which is an open dropdown) "Home Try-On," "Eyeglasses," "Sunglasses," "Contacts," "Accessories," and "Get a prescription." Additional links at the bottom include "Locations," "Favorites," "Download our app," and "Sign in."

Updated Nav w/ Open Dropdown

Curating the Homepage

I redesigned the homepage to guide users through a curated journey that seamlessly integrated shopping, enhancing engagement and conversions.

The original chronological layout missed opportunities to engage users and drive conversions. I restructured the design to create a more purposeful user journey, highlighting shopping-related articles, collections, and promotions.

webpage section with a large blurred image on the left and a list of article titles on the right. The titles include topics like "What Kind of Glasses Should You Get?" and "Different Types of Lenses for Glasses." The section is titled "Find The Best Glasses for You."

New feature to showcasing articles centered on products

A webpage section titled "Shop Collections" featuring four blurred images representing different categories: "Shop Eyeglasses," "Shop Sunglasses," "Shop Contacts," and "Shop Accessories."

New feature to showcasing articles centered on products

A webpage section with a blurred image of eyeglasses on the left side and a heading on the right reading "How To Buy Glasses Online: Find Your Next Pair in 6 Steps." The article is medically reviewed by Dr. Camellia Letafat, and there is a "Read more" link below the title.

Updated the hero article to only show purchase-driven articles

banner promoting an offer to try on five frames at home for free. The banner includes blurred imagery in the background, with two buttons labeled "Shop Women" and "Shop Men." There is also a link to take a quiz to find your frames.

New banner promoting unique value proposition

The original hero didn't effectively guide users towards purchasing. I revamped it to feature shopping-centric content, optimized the layout, and aligned it with the brand's aesthetic. This made shopping opportunities more prominent and helped users visualize available products easily.

A smartphone screen showing an article titled "How To Buy Glasses Online: Find Your Next Pair in 6 Steps" with a blurred image of eyeglasses in the background. The article is part of a series titled "All About Eyewear," with a "Read more" link at the bottom. A "Trending" section appears below the main content.

A smartphone screen displaying a webpage with the heading "Find The Best Glasses for You." Below the heading, there is a large blurred image, followed by a title that reads "Glasses Styles and Shapes: The Frame Names You Need To Know." Underneath are smaller thumbnail images with accompanying titles related to eyeglasses.

A smartphone screen displaying an article titled "Can You Get Prescription Sunglasses?" with a blurred image of sunglasses. The article is part of a series called "All About Eyewear," with a medical review by Dr. Camellia Letafat. A "Read more" link is visible below the title.

A smartphone screen showing a vertical list of articles with blurred thumbnails. Titles include questions such as "Can You Wear Contacts With Pink Eye?" and "Can You Get an Eye Infection From Contacts?" The screen features a clean, minimalist design with a focus on the text titles.

Homepage views on Mobile

Optimizing Articles

Improving Product Integrations

I adapted existing patterns to optimize product galleries in articles. The contrasting background helped products stand out, even at smaller sizes. The overflow scroll on mobile avoided overwhelming users with excessive height. On desktop, I condensed the galleries to keep them within the user’s immediate view to align with reading behavior.

I also expanded the clickable area of product thumbnails to make product selection easier. Additionally, I updated the language to suggest more options to encourage further exploration.

A design comparison showcasing a webpage section titled "Best Glasses Shapes for a Triangle Face." The comparison includes both desktop and mobile layouts. The desktop view displays a row of round eyeglasses with blurred images and text labels such as "Redacted Rose Water" and "Redacted Oak Barrel with Riesling." The mobile view shows a more compact layout with a vertical arrangement of eyeglasses and accompanying text. The section features an update that includes a "Best-selling round glasses" label above the eyeglasses, highlighting the recommended products for users with a triangle-shaped face.

Before & After of the Article Product Integration

Addressing Usability Concerns

I focused on improving the overall usability and readability of the blog, especially on mobile devices. Updates included optimizing content visibility and enhancing the layout for a more balanced and engaging user experience. These changes made the blog more accessible and enjoyable to browse across all devices.

Developer documentation comparison showing the current and updated versions of a webpage article titled "What Is Glaucoma?" for both desktop and mobile views. The audit highlights updates like a new article header, breadcrumbs location, and styling updates.

Developer documentation for the usability updates

Optimizing Content

I used the remaining time to analyze Google Analytics and identify high-traffic pages with strong conversion potential. After pinpointing these pages, I reviewed and recommended content updates to maximize potential.

Additionally, I developed a content guide for the team to ensure future posts align with our optimized conversion strategy, even without a dedicated UX designer. The guide emphasized scannability, clear and concise headlines, and user-friendly text.

Several overlapping website screenshots annotated with feedback notes, focusing on areas for improvement in a webpage's design and content. Highlights include suggestions such as removing redundant intro text, shortening headlines, improving content accessibility by moving text from images to the page, and adding product-specific sales pitches. A data table at the top provides insights into landing page performance metrics. Additional notes focus on updating styling and simplifying instructions, particularly in sections like 'How to Measure Glasses' and prescription renewal offers.

Page-specific recommendations in the spreadsheet that help determine them

Overcoming Setbacks for Successful Launch

Days before launch, we faced a major setback: a last-minute developer change with unfinished critical updates.

Fortunately, my background as a developer made me a stickler for thorough handoff files. I quickly stepped in to provide guidance, even sharing existing code from previous builds as a reference. I prioritized the QA to help the new developer focus on the most critical changes first. This proactive approach and adaptability allowed us to meet the tight deadline despite the unexpected hurdle.

Zoomed out figma artboard of sections in dev mode

Developer Handoff in Figma

A Baseline for Testing

The main objective was to build a solid foundation for future testing and optimization. Even without updated data, the positive client feedback suggests we’re on the right track.

The previous design had so few conversion opportunities that A/B testing would have been too time-consuming. By establishing a solid baseline, we’ve set the stage for more effective testing and ongoing improvements.

Takeaways

Quick Wins Matter

Small, targeted updates can lead to immediate improvements in user engagement and conversions.
Adaptability is Key

Effective problem-solving, flexibility, and organization were crucial in overcoming unexpected challenges.
Clear Communication Drives Success

Effective communication with the team through clear roadmaps and regular updates was vital.
Build a Strong Foundation for Growth

A strong design sets the stage for ongoing improvements by creating a baseline for measurement.

I appreciate that Lauren can work with little oversight. We got a nebulous task, and she jumped right in and gave an excellent deliverable that superseded the client team’s expectations. Her work was also met with rave reviews from the client.