S.J.Zhang
 

Background

I worked at illesteva full-time as a Graphic Designer and was hired to revamp the brand’s e-commerce experience and improve online brand image.

This case study documents some of the UX decisions and processes designing illesteva.com. During the design process, I was both the designer and project manager on our side, periodically bouncing ideas with our strategy intern, who I primarily work with on marketing creatives.

 
 
 

Designer on the team

1

Time

Oct-Nov 2018

 
 

Before Redesign

 
 
 

Key Insights

When I started designing, I had already worked with different functions of the company for a few months. I worked with the e-commerce team daily on marketing graphics. Communication with retail staffs was also frequent, as I supported creatives for all ten retail stores.

I was quite familiar with the business, it’s competitive edge in the market and our customer demographics. Tasked to completely scrap the old site and redesign from the ground up, I interviewed the business owner and everyone in the e-commerce team in order to narrow down the key insights that would drive the design process.


 
 
 

1

Most mobile customers come from social media profile link are looking for a specific style. Getting to the Product Listing Page fast from the landing page is crucial.

 

2

A lot of customers call to inquire what style best suit their face shapes. They sometimes also ask about the colors that fit their skin tones, so displaying color options are important.

 

3

We have new styles arriving every week, however 80% of online revenue is driven by our most iconic style. We want to diversify our online sales without losing revenue from the classics.

 
Screen Shot 2018-11-15 at 10.26.24 PM.png
 
 

Solution

A mix of priority and Information Architecture need, I structured the design sequence as follow:

  1. Navigation Bar - Structure how products are discovered

  2. Landing Page - Call-to-Action directly to desired Product Listing Page

  3. Product Listing Page(PLP) - New display structure

  4. Product Detail Page(PDP) - New customization flow

There has been plenty of back and forth, side projects born out of the process, but for the clarity, this documentation is going to follow the same order.

 
 

Navigation Bar

The challenge that we face is that we offer a wide range of products while one category drives the majority of our online sale. Not because of how we lead our customers, but because of what the company is known for. Below are the categories ranked by sales volume.

  • Women Sunglasses

  • Men Sunglasses

  • Women Opticals

  • Men Opticals

  • Bags

  • Umbrellas

Before we had six links in primary navigation, including an all-category sale page and a link to store locations. We wanted the brand to feel less promotional, so the sale link has to be less visible somewhere else. After mapping different ways of structuring the navigation, including parallel displays of all of them and different ways of grouping them, we settled on below.

 
 
Navigation Order@2x.png
 
 

We then brought in the shopping bag icon, currency/country drop down and the search function. Since shopping bag icon on the top right is a convention that customers are used to, for increasing conversion, we followed custom. Naturally, the currency/country drop down should be placed next to it so user can double check before going into the cart. We had a little debate on the location of the search icon and if it should be an expanded input field or just a magnifying glass icon. Talking to the customer service person who is responsible for calls and web chat, we were made aware that our customers don’t know frame names except for the few classics the brand is famous for(much like the Wayfarer of Ray-Ban). Since the overall search demand is proven low, while both solutions show similar engagement in our a/b testing, we collapsed the search function into an icon, only expand when clicked. Initially I thought it was more logical to place the search button next to the product navigation links, so that everything about discovering product stay together as well as everything about finishing the transaction. At the end, since search icon serves more as an action trigger like the dropdown and shopping bag icon, placing it on the right also renders a nicer visual balance and leave more room on the left for future product offering expansions.

 
 
 
 
 
 

Later in the development stage, I advocated placing a link to the Face Shape Guide together with the product navigations since it’s also an element that ”helps you find your fit” and should be easily accessible at any stage of the shopping process. Placing the search icon on the right gives enough space on the left to promote a page like that.

 
 

Landing Page

The landing page was a top priority for us, first impression is of the utmost importance in fashion. Both to drive conversion and improve user experience, I centered all the design decisions around the goal of helping customers to find what they like.

Since our desktop conversion is still higher than mobile, I started with desktop UX first. We wanted to give exposure to new style drops, while keep pushing our best sellers to generate revenue. Since we are known for a few signature styles, and they drive 80% of our online sales. We decided to leave the top “hero” images to those classics in stylized images of their latest color options. Our latest drops will come right under them as listed products.

The development also gave birth to two new pages: Face Shape Guide & Lenses and Prescription that we believe that will help us reduce pre-sale inquiries and increase conversion. We placed them right under new styles.

 
 
 

For more goal-oriented mobile users, I simplified the call-to-action buttons to be “almost“ the only thing most users tap upon entering. Product categories were moved into the side menu and the announcement bar were moved under the sticky header so it would slide away when scrolled.

 
 
 
 
 
 
 

A large proportion of our mobile traffic comes from our Instagram profile page. For customer seeking a specific style after seeing one of our posts, the clear call-to-action buttons on the top to the Product Listing Pages are important. To keep mobile users distract-free toward Product Detail Pages, we hid the Face Shape Guide and Lenses and the Prescription page from the landing page. They are still accessible from the footer.

 
 
30fps+100c.gif
 
Home-m – 16@2x@2x.png
 
 
 

Face Shape Guide

A lot of customers call our e-commerce line to inquiry what style best suit their face shapes. In order to help different customers finding their best fit, why not take our in-house guide online? We debated if we should do an educational page on how different frames compliment different face shapes or have the customers choose their face shape type and deliver the recommendations to them.

 
 
 
 

Considering there are already numerous detailed guides on the internet for the education, what they don’t offer is the ability to filter through the collection illesteva has to offer, we decided to go with the latter strategy.

 
Face Shape Guide UX@2x.png
 

Product Listing Page

Color options are hard to display. For appliances, they usually aren’t the primary factor that influences buying decisions. However, with fashion products, the availability of color options changes everything. There are a few industry standard ways of displaying color options of the same style, such as round color swatches and minified images. We wanted something tailored for the way we offer products. Our product line usually starts with a general style, called a series. Within series there are different collections offering different materials, sizes, collaborations. At the bottom layer, we usually have 4-12 color options within each collection. It’s structured like this:

 
 
 
Group 493@2x.png
 
 
 

I talked to our retail staffs and walked around small fashion accessories stores around SoHo. I wanted to see how brick-and-mortars balance between displaying curated selection and displaying diversities. On a digital interface, the equivalent would be to display bigger images or more styles. After a lot of different sketches, I came to this structure features one main image represent the series big enough you can see the screw’s color, and all the color options within the collections on the right. If a user wants to quickly skim through all of the shapes(series), keep the eyes on the left column and no repeated shapes shall come up.

 
 

Product Detail Page

We are proud of our craftsmanship and meticulously designed details. We believe instead of thumbnails that customer has to click through or hover over from left to right, a scroll is more natural. We designed the PDP features large product & fit-model images on the left that scrolls vertically, while color swatches and other elements on the right stay static. When all images have been shown, the right move up with the rest of the page, and we enter the footer area.

 
 
 
Group 441@2x.jpg
 
 
 

Prescription and Polarization

Our Sunglasses don’t come polarized while some customers want them to be. For short-sighted customers, we also offer adding prescription to sunglasses.

Since the majority of our online shoppers just want a pair of fashion sunglasses, we decided the customization flow shouldn’t show without being specifically clicked on. I wire-framed two options. Option 1 is component-based, where polarization and prescription have their own buttons and it’s like adding customization components to your glasses. Option 2 is a guided flow, you can just add to bag, or enter a customization flow. Once you decide to enter the flow, you go through the entire flow. Within the flow, at different stages, you can either choose an option or leave it on default as NO, and click through it. Although it’s one more step for a customer who only wants one of polarization or prescription, it’s easier for most customers to be guided through a flow. Users shouldn’t need to leave the page to do research and come back to make customization decisions.

Below showing the customization shopping sunglasses and optical.

 
 
 
 

Animated Flow

The flow work across desktop and mobile. There had been two phases for the development, the version shown above is the second phase. The first phase flow is animated below to illustrate the process.

 
 
 
 

Flow Animated

1280l.gif
 

*The flow content has been updated since animating this in AE, as well as text sizes and other elements on the page.

 
 
 

Phases

There had been two phases of the PDP development. After I finish designing the second phase, I had to leave for grad school before the design was handed to developers. The versions shown in the Product Display Page section are all second phase work with the exception of the animated mobile flow which was done during phase one.

 
 

Reflection

This case study only documented a few key decisions, there are a lot more pages that was designed with care. As much as I am really proud of achieving this much and being responsible for the entire website, I wish that I had another designer that I could collaborate and critique each other’s work with. Handling and designing this project on my own was a very rewarding learning experience, but for a better result I believe a teamwork environment is more suited for a project of this size.

As I have mentioned above, I wasn’t able to stay at illesteva long enough to see all the development work being completed. Since the development was divided into stages, the design process was only two month from Oct 2017, then we did a V1 launch. V2 updates were still in the work when I left for grad school. I handed over the design system and the responsibility of overseeing rest of the front-end work to my successor.

For this project, my lack of front-end capabilities prompted me to start studying JavaScript, HTML & CSS while I was on the job. One of my biggest frustration was the font weights. Since I did all the design work in Adobe XD, all my font usages were in local fonts. Though we loaded the same Adobe TypeKit Font on the final site, font weight differences between web fonts’ numbered tiers and local fonts’ descriptions were still noticeable.

 
 

UI Design

Since this UX process page is focused on business oriented decisions, if you haven’t had a chance to browse through the UI page before coming in here, check out the visual site design below.

 
 
 

SEE MORE OF MY WORK FOR ILLESTEVA

Marketing | Posters | Campaign Video