Lettisia Toha
UX designer

Adding a Feature

Creating a registry feature for Nordstrom

Project Overview

Client: NORDSTROM (unsolicited)
Nordstrom is a global retailer well known for its high-end apparel selection and its impeccable customer service. Adapting to market trends, Nordstrom has also ventured into selling non apparel selections from diapers, electronics to personalized items.

Duration: 80 hours

My Role: End-to-end UX/UI Designer

Problem:
Nordstrom members have to go elsewhere to host their registries and losing out on the opportunity to collect Nordy points for rewards.

Solution:
Creating a registry feature that will be integrated on Nordstrom's website to ensure a seamless experience while providing the same standard of service that Nordstrom offers in addition to a few more perks.

Design Thinking Process
I sought to DISCOVER what the users need, motivations and pain points with their current process. DEFINE the scope of work and the screens that would need to be designed. DESIGN solutions in the form of wireframes and high fidelity prototype. TEST a prototype on real users, and IMPROVE the design based on feedback.
Adding a Feature

Research Goals:

  • Uncover market gaps by understanding current market trends for gift registry features

  • Gain deeper insights by comparing registry features by close competitors and analyzing their pros and cons

  • Discover users’ habits, needs, thoughts, process, pain points and how they try to solve current challenges 

  • Identify which platform (desktop vs mobile) is being used most for creating, maintaining and buying from registry

Methodologies:

  • Market research

  • Competitive analysis

  • Survey

  • Individual interviews

Adding a Feature
Adding a Feature

What Are Others Doing?

I looked at close competitors whose businesses focus on apparel and secondary competitors who are large retailers selling household products with a percentage in apparel.

I did a comparison on the features each company has for their registry function.

Adding a Feature

Understanding Users

A large number of respondents is necessary to validate hypotheses quantitatively. Included open ended questions and provided participants with a few multiple-choice answers (and an Other option). Survey was created in Google forms and distributed to the target audience, mostly married women or mothers, Nordstrom membership not specified.

User Interview:

Five parents were interviewed, four women and one man. Three are Nordstrom members while the other two are not. Two interviews were carried out in person and the rest virtually.

Insights:

Identifying Current Problems

Taking into account the entire research findings, I created an affinity map to help focus what was heard, categorizing and coming up with potential solutions.

Adding a Feature
Insights from interviews were used to develop the persona of Erin

Insights from interviews were used to develop the persona of Erin

Adding a Feature

Empathizing with the Persona

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.

The steps of the user journey were determined by merging several recollections from the user interviews from Nordstrom members participants.

Conclusion from Research Stage

Design a feature that:

  • Makes it easy for members to add items directly from Nordstrom's website

  • Lets members leverage Nordy points

  • Gives plenty of options not only specialized to Nordstrom's items

Read the full research report here.

Adding a Feature

Time to Prioritize

With the knowledge of what the users expect and what the competitors do, I was able to start to define the website's scope. I started by creating a list of features complete with description, reasons and supporting evidence.

Adding a Feature

Mapping It Out

I then build a sitemap to understand the interactions required for a user to create a gift registry. It is important as the designer to visualize a more in-depth user's hypothetical journey that includes different choices or difficulties the user might face navigating the website.

Adding a Feature
Adding a Feature

Flows

From the sitemap I was able to see how users would flow through the website. Mapping out the flow not only provides more clarity on the functionalities of the registry feature, but also helps me decide if the sitemap is logical and easy to navigate or not.

In this scenario, our persona Erin is trying to create a registry and add an item to the registry.

Adding a Feature
Adding a Feature

Sketches
I started the design process with low fidelity wireframes. This is the way I iterate through many design options quickly. The focus were on two main pages, the landing page and the registry homepage.

For this exercise I realized that my ideas tend to deviate too far from Nordstrom's so naturally most of the ideas were crossed off. I spent a long time browsing Nordstrom website and took notes of their design choices in order to make the feature look seamless and in par with the company branding.

Wireframes

I created the first mid fidelity wireframes in Figma and used this version as a prototype for user testing. I decided to create an interface that was consistent with the company branding, taking inspiration from the current account settings page.

The design has to be minimalist, organized and inviting while maintaining a sense of familiarity. It had to establish trust while bring informative. Each element was considered when constructing these rough wireframes. These helped set the standard for the rest of the design process. 

Adding a Feature
Adding a Feature

Layout Changes

On the product page, I changed the content styling slightly by going with two columns layout for the description text. Current Nordstrom's website design populates only the half left side with text but leaves the other half blank. I believe it is a better use of space since I have more content to show.

Same goes for the customer reviews section. Nordstrom's current website design only has half of the left side of the entire page populated with text and customer images below it. This makes for a long scrolling. I moved the pictures to the right in a carousel style to decrease scrolling.

Adding a Feature
Adding a Feature

User Testing

3 participants participated in the testing. 2 were previously interviewed for the research phase while the other one did not although familiar with the project already. Each session ran for about 30 minutes.

Scenario:
You are an expecting parent and a Nordstrom member. You want to register for your baby shower at Nordstrom. Create a baby registry and add a stroller worth $700-800.

Testing Insights

The test went relatively well with everyone completing their scenario without hints. All complimented how clean and accurate representation of Nordstrom the design is. However, some pages need further work as some things are confusing.

Wins

  • Users had a delightful, streamlined experience

  • Design successfully recognized as Nordstrom's extension

  • The information included was informative and thoughtful

  • Guides were helpful and increased users' confidence

Adding a Feature

Small Updates

Text sizes and signing in as customer instead of creating new account.

Structural Changes

  • Reconsider the flow of onboarding steps

  • Reword and add more explanation to why the sensitive question is necessary

  • Add guidance or callouts to the "add item" menu

Learning Points
Explanation matters. Words matter. Sometimes the best intention can get lost in translation. Regarding that sensitive questioning about how are you welcoming the baby, it came up a lot during my interviews. Most people were asking me why is that question necessary. After hearing my reasoning of how some mothers who are adopting might not want to see articles regarding pregnancy, they actually appreciate the idea. However, the delivery wasn't quite forthcoming.
Adding a Feature
Adding a Feature

Improving the Design

Based on what was heard during usability study, I made changes to the onboarding process, writing more explanation, and adding guidance to the add registry dashboard page.

Moving On to High Fidelity

I took some images from Nordstrom directly and tried to find similar style photos from other sources. It very hard to find as Nordstrom's photos are unique to them. Given more resources I am confident I would be able to match the photos as closely as possible to Nordstrom's aesthetic.

Test out the final prototype below!

Reflection & Next Steps

Working for a company with an already very established branding is indeed more challenging that I thought it would be. There are certain things that I want to change but decided against for it will decrease familiarity. I believe I managed to choose smartly and work subtly by keeping the improvements to a minimum.

This is one of my passion projects as I love Nordstrom and being able to create solutions that will improve parents' life. Parenting is already hard enough and finding/asking/buying for things you need should not be a daunting task to do.

Given more time, I would like to create more screens for viewing the registry in both user and guest views, in addition to developing the registry app. With more resources I would like to find better photos that are more in line with Nordstrom's style.