KOHL'S Holiday
Build-a-List
Holiday gift list site designed to engage people to give more and save more.
.png)
Holiday gift list site designed to engage people to give more and save more.
June to November 2022
Figma
Illustrator
Photoshop
After Effects
UI/UX Design
Market Research
Concept Ideation
Prototyping
Creative Director
Engineer Team
Production Team
UX Designer
Motion Designer
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:
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:
Created 2D animation assets and delivered to motion graphic designer for landing page final interactions design
Conducted comparative analysis of other eCommerce gift list experience
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.
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.
Two high level challenge were to:
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.
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.
.jpg)
Desk research study
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.
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.
.jpg)
Let's begin our story with a user entering a holiday gift shop factory
I explored various user flows and UX solutions through the creation of lo-fi wireframes and in-depth desk research. During the initial stages, I aimed to create an immersive gifting experience that would transport users to Santa's gift factory. The experience begins with a knock on the door upon landing on the page, which opens to reveal a gift list introduction. Users then select their intended recipient and choose the perfect gift for them. Finally, they can easily share their personalized gift list on social media.
.jpg)
User can select their favorite gift from conveyor belt
In the second round, my focus was on enhancing the conveyor belt experience of Santa's gift box. I came up with a unique design by creating an arch-shaped tunnel for the conveyor belt, which could potentially be applied to the overall interface. However, this playful and immersive experience resulted in limited space for product display.
.png)
.png)
Overall, what experience needed to be improved?
How I improved the experience?
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.
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.
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.
Throughout data capture page and recipient page, users can track their progress using the progress bar feature.
Users can select the intended recipient before choosing a gift, ensuring that their list is personalized.
Users can navigate gifts using the top category menu and add items to their gift list by tapping the “plus” icon.
As items are added, the progress bar number will increase. The “Next” button will be disabled until users select at least three items.
Users can save their gift list and share it with their online community, encouraging Kohl’s holiday event engagement.
Users are entered for a chance share and win a $200 Kohl's gift card.
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.