Fly Eyewear

E-commerce Mobile Website Case Study

October 2020

Problem

Fly Eyewear is a an eyewear retailer looking to increase online sales. They need to improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience. Data shows that 50% of users browse the site without moving any items to their shopping bag, and 70% of users who do move an item in their shopping bag abandon their items at the registration page.

User

Anyone who wants to purchase eyewear regardless of their reason to buy.

Solution

I designed two solutions that would help users determine which eyewear they like best based on relative features. One way is comparing favorites through a comparison chart and the other is starting a poll so people can vote on their favorite. I also designed a guest checkout option for users who don't want to sign up for an account to checkout.

Duration

3 Weeks (October 2020)

Role

Solo Project – UX / UI Designer

Tools

Eyewear brands and retailers view e-commerce sites as an opportunity for them to increase their profit margins, appeal to a larger audience, and expand their business model beyond brick-and-mortar. However, if not executed correctly, users will grow increasingly frustrated and be more likely to drop out of online checkout.

Shopping cart abandonment has been an ongoing struggle in e-commerce conversion rate optimization. In 2019, 1.79 trillion dollars were forfeited in abandoned carts and 97% of those customers were mobile users.

Additionally, online retailers who provided guest checkout gained a 45% increase in conversion rate. Giving customers the option to either checkout as a registered user or a guest has helped streamline the process and strengthen the checkout funnel.

Advantage – Saves Time & Cost

Buying eyewear online saves trips to the optical store and allows the customer to effortlessly scroll through thousands of options and shop around with ease. Buying online can also save the customer between 30-75% by comparing prices between multiple retailers.

Disadvantage – Fit & Prescription Issues

Customers run the risk of having size and fit issues when ordering online. They are limited in options and are at a disadvantage if the style they ordered is not as expected. Some customers also depend on receiving feedback from professionals or a companion during their shopping trip.

Competitive Analysis

I evaluated three companies that have an e-commerce mobile website to see how industry leaders have approached similar problems and achieved similar business goals. This would then help lay down the foundation for my own approach and design layout.

In order to address my problems, I analyzed their approach on two task flows:

Flow 1 – Browse Options & Add to Cart

Flow 2 – Checkout as Guest

I then separated my findings into three categories – Likes, Dislikes, and Action Items.

The most notable takeaways from my analysis were:

–> Keeping focus on the product – clean layout, organized carding, and clear imagery.

–> Providing multiple ways to browse through product – categories, filters, sort options, and multiple page views.

–> Making it easier for the user to find what they are looking for – recommendations on similar searched products, comparison chart, and suggestions based off a quiz.

–> Streamlining the purchase funnel – keep information relevant to the product or task, bring attention to call to action buttons, and don't request more information than needed from the customer.

Guerrilla Usability Testing

For the last step in my discovery stage, I chose to conduct a guerrilla usability test remotely with 5 participants interacting with a benchmark brand's mobile website. The brand chosen was Warby Parker. Warby Parker is an eyewear retailer who's made an impression with their e-commerce website because of its clear messaging, clean UI, and efficient navigation system.

The participants were given task scenarios to complete the following tasks:

–> Browse products
–> Compare products
–> Add product(s) to cart and check-out

In addition to the task scenarios, I asked the participants follow-up questions concerning their thought process and overall experience. I then took my findings and separated them onto digitalized post-its to begin affinity mapping.

Affinity Mapping

After breaking out my findings onto post-its, I grouped them by interviewee and then regrouped them into categories based on the consumer buying process:

–> Problem or Need Recognition
–> Information Search
–> Alternatives Evaluation
–> Purchase Decision
–> Post-Purchase Evaluation

Based off this research, I already started to see commonality between the participants and could empathize with the complete end-to-end user experience.

Site Mapping

I kicked off my design stage by creating a map to visualize the architecture of the mobile-site. I incorporated a hamburger menu on the home screen to avoid visual clutter, and plan to hide the sub-categories in an accordion to minimize cognitive load.

I also chose to keep the 'Likes' and 'Cart' pages available on the home screen for easy accessibility while navigating the site and searching for product.

User Flows

After vetting through my research, I brainstormed how to approach my problems and created user flows for my solutions. I decided to explore two options for comparing products and one for shopping bag abandonment.

For comparing products, I designed two solutions that would help users determine which eyewear they like best based on relative features. One way is comparing favorites through a comparison chart and the other is starting a poll so people can vote on their favorite. I also designed a guest checkout option for users who don't want to sign up for an account to checkout.

–> Flow I – Compare Styles (Chart)

–> Flow II – Create a Poll

–> Flow III – Checkout as Guest

Flow I – Compare Styles (Chart)

Flow II – Create a Poll

Flow I – Compare Styles (Chart)

Features the full end-to-end experience of starting on the homepage, finding a product category to browse, viewing a product detail page, 'liking' a product/style, viewing all past likes on the favorites page, then choosing to compare styles in a chart. Once the user gets to this point, they are able to select products from their favorites, compare their style details side by side, and then add product(s) to shopping bag.

Flow II – Create a Poll

Similar to Flow 1, this option is located on the favorites page and would begin after the user has already liked a few styles and added them to their favorites.

This flow is broken down to 4 steps:

–> Select Styles

–> Take Pictures

–> Share Poll

–> Track Results

Throughout this process, users will select styles based off their favorites; have the option to take virtual try-on pictures with the glasses they selected; share the poll either through social media or directly with a link so friends and family can vote on their favorite; then provide information so they can track and see their results.

Flow III – Checkout as Guest

This flow begins on the shopping bag page with a product ready to purchase. The user is given the option to either sign in or checkout as a guest. After selecting guest, they are asked to enter their name and email, shipping information, payment information, and then select a shipping option. Once their correct information is entered, the user is asked to review their order and confirm. The last page is an order confirmation listing the order details.

The first round of usability testing was moderated and conducted remotely with 5 participants interacting with the clickable low-fidelity prototype. The test session lasted about 20-30 minutes with each participant. The participants were selected based on previously or currently looking for new eyewear to buy. They all use their mobile services regularly (4+ times a week).

The primary goals were to:

–> Discover any usability issues and provide opportunities for improvement
–> Receive feedback on overall impression of the interface, layout, and features
–> Determine if the creative solutions improve the experience from browse to completion of checkout

The participants were asked scenarios that completed the following tasks:

–> Browse products
–> Add a style to favorites
–> View favorites
–> Create a poll
–> Compare options
–> Add to shopping bag
–> Checkout as guest

Style Guide

Before starting my high-fidelity wireframes, I put together a style guide to set a clear aesthetic direction for the site.

The style is clean and classic with a minimal color palette made up of grays and one primary color. Two font types are used and the icons are basic with clean line work.

After addressing all the issues discovered from my first round of usability testing and creating my style guide, I digitized my low-fidelity sketches to high-fidelity wireframes. The main changes/updates I made from the first round of designs include:

–> Email request after creating a poll to track results

–> Adding page and feature descriptions

–> Including additional 'skip' and 'edit' options

–> Expanding the homepage to multiple feature pages
–> Updating the layout of the product detail page

The second round of usability testing was also moderated and conducted remotely with 5 participants. Out of the participants, 2 of them participated in the first round of testing and 3 were new. I chose to do this so I could see how the iterative designs improved, but also ensure learnability is not affecting the research findings. The test session time, goals, and requested task scenarios were the same.

Overall, the testing went well with no issues. Both returning participants reacted positively to the high-fidelity wireframes and felt that all of their issues had been addressed from the first round of testing.

Lessons Learned

The biggest lesson I learned was that users respond well to an online shopping experience that best emulates a simplified version of an in-store experience. The online shopper values convenience but doesn't want to feel overwhelmed. E-commerce sites need to be product focused and have a clear checkout funnel, while remaining simplistic in its design, features, and functionality. I learned to approach features with a quality over quantity mindset so they can best serve the customer for support while also driving the conversion rate of sales.

Fly Eyewear

E-commerce Mobile Website Case Study

OVERVIEW

DESIGN PROCESS

STEP 1: DISCOVER

Research

The Online Shopping Experience

Cart Abandonment

The Eyewear Consumer

Advantage – Saves Time & Cost

Disadvantage – Fit & Prescription Issues

Competitive Analysis

Click here for the full breakdown of my findings.

Guerrilla Usability Testing

__________________

Affinity Mapping

STEP 2: DEFINE

Personas

User Insights

How Might We..?

STEP 3: LO-FI DESIGN

Site Mapping

User Flows

Low-Fidelity Sketches

After finishing my user flows, I moved on to hand sketching all my screens. I chose to hand sketch so I could quickly work through my solutions to begin testing and validating.

Flow I – Compare Styles (Chart)

Flow II – Create a Poll

Flow III – Checkout as Guest

STEP 4: VALIDATE R1

Usability Testing

Issues Ranked by Priority

Click here to interact with the prototype

STEP 5: HI-FI DESIGN

Style Guide

High Fidelity Wireframes

STEP 6: VALIDATE R2

Usability Testing

__________________

Click here to interact with the prototype

CONCLUSION

Lessons Learned

Next Steps