top of page

Sightbox Website

UX Audit & Redesign

Sightbox is a service that helped connect patients with eye care professionals and made getting contact lenses hassle-free by providing concierge-like service of the experience from appointment booking all the way to home-delivery of contacts.

 Define 

Problem

Sightbox rate of conversion and website traffic was not as high as our growth marketing team anticipated by the end of Q2.

​

In an effort to increase the conversion rate for Sightbox, the marketing team wanted to understand where pain points were in the user experience of the website.

 

This research would result in recommendations for a website redesign encompassing content and visual design to be handed off to our developer.

 

In addition, the website was not compliant with WCAG.

 Define 

My Role

2Research.png

Research and audit the existing content and UX of the Sightbox website.

2Design.png

Design new solutions for the site map, and incorporate visual design. 

2Accessibility.png

Ensure WCAG accessibility compliance.

 KEY CONTRIBUTORS 

Lead Product Designer, Sightbox Marketing Team, Local Creative Agency and Engineers, to launch this project. 

Process

 Define 

 Discover 

Design

Deliver

 Discover 

Usability

Research

Methodology

Over a period of 2 weeks, we conducted interviews with 9 internal users and project stakeholders to uncover high priority issues.

 

The design team and I had the users go through the experience of landing on the Sightbox website, and asked them to narrate their experience throughout.

Findings

1

Confusion set in around the description of the product offering which was very eye-opening for me.

2

Multiple "how it works" sections (3 different versions) left some users unsure of how long the process would take/what would be required of them. 

3

Internal users knew Sightbox offers two plans, but called out we don't highlight that on our homepage, a missed opportunity for dailies users. 

4

Majority of users said an entire page of testimonials felt unnecessary, some suggested more info on the pricing/plan description.

OG_SB_WEBSITE_03 Copy 3.png

1

OG_SB_WEBSITE_03 Copy 2.png

2

OG_SB_WEBSITE_03 Copy 4.png

3

OG_SB_WEBSITE_03 Copy.png

4

Simple-contacts-screen-grab.png
blue-apron-screen-grab.png

 Discover 

Competitive

Research

Findings: 

Common thread "how it works" formula in Subscription service model, which lends to user expectations of content. Modern design systems.

 Discover 

Accessibility

Testing

It became an important goal to make sure in the redesign that we revised our color system to pass the standards for WCAG accessibility.

​

I ran our brand color palette being used on the website through accessibility tests on the web and discovered many failures for WCAG compliance.

X

Process

 Define 

Discover

 Design 

Deliver

Original site map

 Design 

Site maps

Starting with user maps helped me understand the website’s current user journey into the sign-up flow.

 

With the insight of my lead product designer, I iterated on a revised site map with the inclusion of new content and a journey with less dead ends.

SB_Site-Map_OG.png

New & improved site map

New additions:

  • A more in depth pricing/ benefits page

  • The sign up page from anywhere

  • An about us page

  • Sightbox Blog

SB_Site-Map-NEW.png
WF_01.jpg
WF_02.jpg
SB_REDESIGN_HOME_low-fi.png
SB_REDESIGN_PRICING PAGE_low-fi.png
SB_REDESIGN_PRICING PAGE_low-fi.png

 Design 

Wireframes

Then I moved on to sketches and low-fidelity wireframes of the new site.

Modifying existing modules on our Wordpress site.

​

I used Sketch and Figma to iterate through the design process.

 Design 

Hi-Fi 

Prototypes

With the inclusion of visual design I was able to breathe a little more life into the designs. 

​

The high-fidelity mockups of the newly revised site architecture with new pages, accessible colors, and revised messaging finally “clicked” for the marketing team’s needs.

SB_REDESIGN_PRICING PAGE.png
SB_REDESIGN_HOME.png
SB_REDESIGN_ABOUT-US.png

 BONUS TESTING

These mockups were also used in user testing on UsabilityHub to gauge between the two major design options for the “how it works” section. The Vertical story-telling approach won.

X

SB_REDESIGN_HIW_01.png
SB_REDESIGN_HIW_02.png

Process

 Define 

Discover

Design

 Deliver 

 Deliver 

Outcome

After the initial site re-design we saw our traffic drive up XX%.

After the redesign of our sign-up flow, we saw conversions jump to XX%. We also saw engagement- the number of interactions, time on each screen- increase.

 Deliver 

Learnings

I learned a lot about the process of auditing a website and optimizing for conversions.

I learned about the process behind site-mapping, revising site architectures, and fufilling user expectations (During the user research process, I was surprised to see how many users were confused about what the product offering was and site navigation). I particularly enjoyed learning about accessibility standards, and helping usher Sightbox into compliance. 

​

bottom of page