Project details

Modeled off of a real-world business, I redesigned the website for a store in an upscale Denver neighborhood that sells eyeglasses and sunglasses both online and in store. The redesigned website offers users a way to try on eyewear at home prior to committing to purchase for twice as long as similar competitors.

Challenge

The website of this brick and mortar business lacked architecture with only four category filters (men’s, women’s, sunglasses, and eyeglasses). The site used a mega filter, which was massively too large, and covered a good chunk of the visible shopping area. Additionally, the look and feel closely mimicked larger competitors resulting in no clear differentiation.

Role: UX Researcher – UX/UI Designer

Contribution

Contextual Inquiry
Affinity Mapping
Card Sorting
Wireframing
Prototyping
High Fidelity Mockups

Tools

Sketch
InVision

Solution Overview

I created a distinctive, responsive website that gives users a better way to browse products, try on eyewear without coming into the store, and replace broken pairs of glasses quickly without distraction.

Discovery

User Research

As a first step, I conducted interviews with eyeglass wearers to understand the most important decision factors when purchasing glasses, and what they experience as the least enjoyable part of the process. Additionally, I lead users through card sorting exercises to inform the development of categories for the information architecture of the site.

Furthermore, I spent time in the actual store to observe users trying on eyeglasses, and consulted with sales people to gain further insight into the steps for buying eyewear from start to completion.

Personas

Using affinity mapping, I synthesized qualitative data from the user interviews into themes and developed two user personas. These personas primed the evolution of the user flows for the website.

Ideation

Sitemap & User Flow

To represent the structure of the information architecture, I created a sitemap. This helped to show how the pages were related to each other. To demonstrate how users related to the pages, I created user flows based off of my two personas.

Sketching & Wireframing

I put pen to paper and began brainstorming what the pages might actually look like. During this time, I also conducted research of existing ecommerce sites and common UI patterns to figure out what would be intuitive to users as well as modern.

I brought my sketches into digital life by creating wireframes. When these gray, boxy Frankensteins of a website were complete, I programmed clickable hotspots in a prototyping tool and sought out 6 users for testing. It’s alive…sort of.

Design

After testing and iterating wireframes – testing and iterating again, and testing and iterating some more – I contemplated the final design. Because this was a concept project, I imagined what KPI’s for this client might be might be.

From user interviews, I learned that the original website looked very close to a well-known competitor’s website in the eyewear industry. Increasing brand recognition sounded like a sensible goal for a real-world business.

The new website design leveraged an “Organic Chic” feel with a soothing color palette of teal and purple, modern lines, and images featuring natural elements. This was a contrast to the old website (and current leading competitor) that used edgy black and white and photography without models. When the new design was presented to users, the overall response was positive with notable distinction between the competitor website and the new update.

Annotations

In order to detail interactions for development, I created an annotated report. This report described the intricate interaction behaviors and functionality of dropdowns, modals, navigation, carousels, and form fields.

What I Learned

During the user research, I was genuinely surprised at how personalized the process for shopping for eyewear is for consumers. The card sort activity revealed that there was no consistent way that eyewear shoppers categorized the products. Being able to browse the entire inventory and then drill down to specific styles was important.

I was also surprised to see this type of behavior “in the wild” when I observed shoppers in store and when I spoke to the sales people. For a person buying new eyewear, the process starts with trying on every pair in the store.

Once I created my wireframes, I learned that my checkout process for people buying products versus trying products were so similar that users were weary that they would be charged for their “try box.” So, I changed the language, icons, and added text to reassure users that they would not be charged.

This discovery really taught me how important the wireframing stage is in iterative design. I really enjoyed the process of taking my ideas to users, getting feedback, changing the designs based on feedback, testing again, and iterating multiple times. It was really important to get that feedback before going into my high-fidelity mockups so I didn’t have to redo work that took more time to complete.

Had a developer been coding this website, it would have been even more important to ensure confidence that users would have a positive experience on the site.