KOHL'S Holiday
Build-a-List

Holiday gift list site designed to engage people to give more and save more.

Kohl's Holiday Build-a-List microsite design
Duration

June to November  2022

Tools

Figma
Illustrator
Photoshop
After Effects

My Roles

UI/UX Design
Market Research
Concept Ideation
Prototyping

Team

Creative Director
Engineer Team
Production Team
UX Designer
Motion Designer

Key Contribution

As a UI/UX designer on the team, I collaborated with clients, art directors, the engineering team,  junior UX designer, and motion graphic designer to provide and receive feedback. My objective was to gain insights into user needs and develop a feasible timeline for achieving the client's business goals. In the team, I played the following roles:

User Experience

Responsible for developing concept lo-fi UI ideations.
Designed a responsive microsite for mobile, tablet, and desktop to integrated feedback into final hi-fi prototype.
Key features ownships:

Kohl's Holiday Build-a-List icon
Landing page micro animation
Kohl's Holiday Build-a-List icon
User data capture page
Kohl's Holiday Build-a-List icon
Product wish list page
Interaction Design

Created 2D animation assets and delivered to motion graphic designer for landing page final interactions design

Research & Development

Conducted comparative analysis of other eCommerce gift list experience

Project Overview

The KOHL's Build-a-List sweepstakes microsite was an innovative way for the brand to interact with customers during the holiday season. The sweepstakes, which ran for five weeks, offered participants the opportunity to win a KOHL's gift card. The microsite was designed to be easily accessible to users from anywhere in the US, enabling everyone to participate and have a chance to win. As a part of a larger physical one-day Christmas pop-up experience in New York City, the sweepstakes microsite helped KOHL's expand the reach of their holiday campaign beyond the online space. This allowed them to create a more immersive brand experience for customers, resulting in a successful and memorable holiday season for the brand.

Project Goals

The main goal is to assist users in creating a personalized gift list that can aid them in making informed shopping decisions and generating shareable content to engage their online community, ultimately resulting in a more positive shopping experience.

Challenge

Two high level challenge were to:

  • Minimize the user flow, and link users to KOHL’s website do any additional purchase
  • How to keep users engage til the end and share their gift list on social media
Kohl's Holiday Build-a-List animation

Design Process

The design process starts with conducting user research and analyzing competitors to gain insight into the behaviors of people creating gift lists. Next, I focused on creating user flows to identify potential pain points and areas where user experience could be enhanced. By using this user flow, I created grayscale wireframes to define a user-friendly interface. Once the UI was approved, I built a prototype to allow stakeholders to test the functionality of the design. The final stage of the process involves development and testing, where I handed off the design assets to the engineering team for implementation. Internal usability tests were conducted to ensure that the design works seamlessly across various browsers and devices.

Kohl's Holiday Build-a-List microsite user flow

Research

General holiday online shopping user flow

As the holiday season approaches, people begin to search for the perfect gifts for their loved ones. My study of the holiday shopping flowchart reveals that building a gift list follows a similar pattern to adding items to a shopping cart on an eCommerce site, as both actions demonstrate the user's intent to make a purchase. Moreover, creating a gift list presents a unique opportunity for online retailers to engage with their users and promote their products to a wider audience. By incorporating a user-friendly and visually appealing gift list feature, online retailers can encourage users to spend more time on their site, ultimately increasing the likelihood of a purchase.

Kohl's Holiday Build-a-List holiday online research shopping user flow

Desk research study

Kohl's Holiday Build-a-List holiday online research
Kohl's Holiday Build-a-List holiday online research
Kohl's Holiday Build-a-List holiday online research

Concept

Build a gift list that not only provides you a way to plan holiday shopping ahead, but also gives you and your community a chance to win $250 Kohl's rewards.

About Kohl's build a list

Kohl's Build-a-List was a 5-weeks-long sweepstakes microsite belonging to Kohl's.com to celebrate the 2022 Holiday season. The value is to highlight the products from Kohl's e-Commerce site and encourage social sharing to win a prize.

How do users build a gift list?

To participate in the sweepstakes, users must log in their contact information, select a gift recipient, and choose a minimum of three gifts (up to eight gifts) to generate the final social sharing video. Upon completion, they will be redirected to Kohl's website to shop their gift list.

Kohl's Holiday Build-a-List holiday UX viewKohl's Holiday Build-a-List holiday IRL event photo

User Flow

Our aim was to create a seamless and intuitive flow for users to add products to their gift list and share it on social media. To achieve this, we implemented a progress bar that indicates which step the user is on and how many products they have already selected.

Kohl's Holiday Build-a-List holiday UX user flow

Wireframe

Overall, what experience needed to be improved?

Kohl's Holiday Build-a-List holiday UX wireframe before

How I improved the experience?

Kohl's Holiday Build-a-List holiday UX wireframe after

User Interface

The final UI design I created offers a responsive microsite experience that caters to mobile, tablet, and desktop users. During the earlier stages of UI development, I discovered that the arch-shaped tunnel design was limiting the interface's ability to display more products. To address this issue, I replaced the arch shape with a rectangular shape, which created a larger and more usable area.

Landing page

To create a more engaging user experience, I worked together with a motion graphic designer to add an animated gift box conveyor belt to the opening sequence.

Introduction Page

The introduction page is designed to guide users through the process with a step-by-step animation, which ensures they can easily complete the gift list building tasks.

Data Capture Page

Throughout data capture page and recipient page, users can track their progress using the progress bar feature.

Kohl's Holiday Build-a-List holiday UX
Recipient Page

Users can select the intended recipient before choosing a gift, ensuring that their list is personalized.

Kohl's Holiday Build-a-List holiday Recipient Page
Product Page

Users can navigate gifts using the top category menu and add items to their gift list by tapping the “plus” icon.

Kohl's Holiday Build-a-List holiday Product Page
Product Page

As items are added, the progress bar number will increase. The “Next” button will be disabled until users select at least three items.

Kohl's Holiday Build-a-List holiday Product Page
Content Creation

Users can save their gift list and share it with their online community, encouraging Kohl’s holiday event engagement.

Kohl's Holiday Build-a-List holiday UX
Social Sharing

Users are entered for a chance share and win a $200 Kohl's gift card.

Kohl's Holiday Build-a-List holiday UX

Reflection

I played a key role in the UI and UX development of Kohl's holiday gift list project, which garnered over 117,000 site visitors. In the design process, I learned that even the smallest design changes can impact the user experience completion rate. I also need to open-mind when I do product design. While I may disagree with the initial design, I remain adaptable to ensure that the final product aligns with both user and business goals.

Throughout the design process, I experimented with various UI solutions, including an arch tunnel and conveyor belt experience. However, after testing, I found that the arch shape made it challenging to display multiple products, requiring excessive scrolling by users. Consequently, I made the interface more user-friendly by using a vertical scrolling approach, which is more intuitive for users and aligns with the business goals of saving time and money. I kept the tunnel and conveyor belt experience on the landing page and increased the number of product display rows on the gift selecting page to enhance browsing efficiency.

What I also learned the scrolling affects user attention and engagement from the "Scrolling and Attention" study by CX Partners. To improve the overall experience completion rate, I chose to use the vertical scrolling approach, which is already familiar to users. I learned the importance of balancing a delightful experience with a realistic user experience. Design with users in mind and remain mindful of every design decision.