Saks 5th Avenue home page redesign | Portfolio | Marlene Stoffers Product Design

Saks Fifth Avenue - Home page redesign

Objectives:

User goals: To discover editorial content and product recommendations to each user’s individual brand, category, size, price and stylistic preferences.

Business goals: To raise the conversion rate and test inline shoppability for customers who have entered through the home page. Traffiic is high for web: 50% of users complete their purchases via desktop web, with 62% of users selecting home page editorially-driven promos.

My role:

During March/April '20, I created visuals and UI solutions for the MySaks home page. Collaborating with the Lead UX Designer and Research to assess user feedback, data, presenting my prototype to key stakeholders.

I created medium-fidelity wires, user flows and test scripts. Testing was done remotely, moderated by our in-house researcher. This project is currently on hold, due to the pandemic.

The personas

David, 46 Owns a production company

He loves to dress well, but finds that most department stores cater to female clientelle.
David's income is $186K, and is not married. He purchases gifts for his sister, is a SaksFirst member, but does not have VIP status. He purchases up to 5 high-end pieces per year.

Rachel, 51 SVP, tech startup

Frequent spender & engaged across Omnichannel, using ASOS and Trunk Club. She is married with 2 children, with an income of $215k.
She has a SaksFirst membership and VIP status. She purchases 2 high-end pieces per month.

Customer insights

We conducted market research to drive our site redesign

Findings:

Offering choice and control

Users expressing have content tailored towards their gender.

Shopping on Instagram

65% of our users explore fashion options via Instagram, with 34% following beauty and fashion influencers.

Desktop or mobile?

50% of users complete their purchases via desktop web, with the possibility that the current app experience is lacking.

Relevance

Customers are looking for product recommendations to each user’s individual brand, category, size, price and stylistic preference.

Collaborated with Brand to identify visual language

Home page redesign

Mobile

After users expressed their desire to have content tailored towards their gender and shopping habits, we tested shopping filters for Men and Women. The response was positive, so we continued explorations for a "men's" and a "women's" experience.

Allowing users to focus on products tailored for them

When users come to the site on first entry, they are prompted with a "men's" section and a "women's" section. If they are a return user, and not signed in, a cookie would recognize the device and remember the gender they've chosen. The customer can always tap on the hamburger menu to change pages.

The sample below shows the menu open. After card sorting with users, men required different menu items. We took out "Bags" and "Beauty", added "Grooming", and "Jewelry" changed to "Jewelry & Watches".

Inline editorial shopping

We tested the effect of shoppable editorial images. Hot areas on the photo would allow the customer to add to bag immediately, and continue browsing without leaving the page. Testing revealed that users were more likely to add items to their bag if they knew they would not have to exit their browsing experience.

Home page redesign

Desktop

We kept the "task perception" low, delivering an editorial feel to convey the Saks fashion authority status. Personalization and "Shop the Look" make product recommendations more relevant, appealing and enticing. The page was designed to be streamlined, simpler and ‘easier to digest’.

We offered personalized content, based on passive browsing. If customers select certain colors, products, styles, sizes, etc., (based on our product matrix) they would be presented with items they might be interested in purchasing the next time they enter the site.

The results

4 iterations & testing

Personalization: Presenting the option to shop for "men" or "women" creates a tailored experience.
Inline editorial shopping: A common practice on Instagram, inline shopping means that users can remain on the editorial page. During testing, users added more items to the shopping bag.

Task perception: Higher percentage of positive reactions, with less clutter, allowing for more browsing time on home page.
Search: Less usage of search functionality, as page seemed more editorially focused.
Design system: I created a scalable system and style guide, making efficiency rates higher for design and engineering.