ILLENIUM Store Redesign

mobile website

Unsolicited redesign of ILLENIUM online store

ILLENIUM Store Redesign

mobile website

Unsolicited redesign of ILLENIUM

online store

Date

January - March 2024

ROLE

UX Researcher
UX/UI Designer

skills

User Research
Wireframing
Prototyping

Tools

Figma

ILLENIUM is an electronic dance music (EDM) DJ and producer known for his melodic dubstep and future bass music. His merchandise is well-designed and can be seen everywhere at music festivals. However, despite the popularity of ILLENIUM merchandise, I was surprised when I found that his official online store does not offer a smooth product browsing experience. Therefore, I decided to conduct a case study on redesigning the ILLENIUM official online store.


Disclaimer: This unsolicited redesign project is solely conceptual and speculative. The redesign does not imply any association or collaboration with ILLENIUM brand.

view prototype

project overview

The Problem

Based on the user research, the main user pain points are:

  • Out-of-stock items are shown next to available items, which can be misleading and cause a delay in the searching process.

  • Users cannot see the quality or dimensions of items.

  • Shipping information is unclear.

The Goal

The redesign will aim to:

  • Decrease the time required for users to search for the products

  • Provide accurate sizing information, quality of products, and shipping information

  • Increase the accessibility of the website

design solution

The Solution

In order to respond to the needs of the users, the following modifications were made to the existing screens:

  • Changed the background color from black to white to increase the visibility of product images

  • Made the Search function visible on all screens

  • Increased the number of products that can be viewed at once on the Landing Page and Product Category page

  • Reorganized and renamed product categories in the Side Navigation Menu for greater clarity

  • Restructured the layout of the Product Details page to prioritize the information that the users want to see

  • Added edit and delete buttons to in the Shopping Cart allow users to make changes to their selections quickly if needed before checking out

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

MENU

X

VIEW ALL

COLLECTION

+

APPAREL

+

ACCESSORIES

+

MUSIC

+

LOG IN / SIGN UP

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

SEARCH...

X

ILLENIUM

FILTER

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

PRODUCT DESCRIPTION

SIZE CHART

SHIPPING INFORMATION

+

+

+

RELATED PRODUCTS

SHOPPING CART

X

+

+

SUBTOTAL

$ XX.XX

Taxes and shipping calculated at checkout

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

MENU

X

VIEW ALL

COLLECTION

+

APPAREL

+

ACCESSORIES

+

MUSIC

+

LOG IN / SIGN UP

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

SEARCH...

X

ILLENIUM

FILTER

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

PRODUCT DESCRIPTION

SIZE CHART

SHIPPING INFORMATION

+

+

+

RELATED PRODUCTS

SHOPPING CART

X

+

+

SUBTOTAL

$ XX.XX

Taxes and shipping calculated at checkout

Existing Version

New Version

Existing Version

New Version

Landing Page

1

Reduced the height of top navigation bar and hero image to increase space for displaying products

2

Moved search icon to top right corner

3

Grouped products into carousel view so that users can view more products at the same time

4

Changed background color to white to increase visibility of product images

Side Navigation Bar

1

Renamed and reorganized the product categories for greater clarity

2

Added Log In / Sign Up feature to allow users to view their current and previous order details

3

Added currency feature

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Product Category

1

Added breadcrumbs to allow users to navigate back and forth between pages easily

2

Changed “Sort By” to “Filter” feature so users can have more options to filter their search

3

Changed from one-column to two-column view to increase the number of items that can be viewed at once

Product Details

1

Moved product title and price to the top for visibility and consistency

2

Categorized product details into different sections to reduce clusters of text

3

Changed “Related Products” section to carousel view to shorten screen length

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Shopping Cart

1

Changed the shopping cart icon from a phoenix wing to an actual shopping cart to help users recognize the feature more easily

2

Added edit and delete buttons to allow users to make changes to their shopping cart

3

Changed the color of Call To Action button to highlight the element

user research

Research

Methods

In order to understand the user needs, processes, and emotions that people experience when purchasing a DJ merchandise online, I conducted user interviews with 5 participants who are in the following target group.


Target Audience:

  • Age 23-33

  • Have been to at least 3 EDM concerts

  • Include different genders

  • Live in metropolitan area

Personas

After the interviews responses are synthesized, I categorized various user groups into personas and created a user journey map for each.

Angelica

Interior Designer

Age: 29

Education:

University Graduate

Hometown: San Diego, CA

Family: Single

Bio

Angelica is a driven interior designerin LA. She also freelances outside of her day job to earn extra income. Although that leaves her with little time for hobbies or socializing, she still loves to go to EDM shows every now and then. She’s been a big EDM fan since college.

Problem Statement

Angelica is a busy interior designer and long-time electronic music fan

who needs flexibility of access to high-quality merchandise because she shops on multiple platforms and she wants to keep the merchandise as collectibles.

Goals

  • To be notified in advance when new merchandise will be launched

  • To buy high-quality merchandise to keep as collectibles

  • To be able to shop on multiple platforms

Frustrations

  • “I don’t have time to check when a new merch is going to drop. By the time I see the stuff I want, they’re already sold out.”

  • “Sometimes the images are too small and it’s hard to see the actual quality of the clothes.”


I’ve been to so many shows that I want to retire from the scene, but it’s still a lot of fun.

Jason

Business Analyst

Age: 23

Education:

University Graduate

Hometown: Princton, NJ

Family: Single

Bio

Jason is a business analyst in New York City. He enjoys socializing and exploring what the city has to offer. Jason recently started going to EDM shows after his friends invited him to join them at Electric Zoo music festival the year before. He likes to post pictures of every show he went on social media.

Problem Statement

Jason is a business analyst and a new EDM fan who needs a quicker way to buy new outfits that also makes sure they will fit on him because he needs them fast for the next event he’s attending.

Goals

  • To buy new outfits for the next event he is attending

  • To make sure things will fit and look good on him

  • To take the least amount of time to browse and order merchandise

Frustrations

  • “It’s hard to know how these outfits are gonna look on me.”

  • “For some DJs I have to scroll through the whole page before I can find an item that’s still in stock.”

  • “These websites don’t really show how long it will take to ship the items.”

I want to see so many DJs this summer and my favorite venue is Brooklyn Mirage.

Journey Maps

Persona: Angelica

Goal: To buy high-quality merchandise to keep as collectibles

Persona: Jason

Goal: To buy merchandise for the next event he’s attending

existing design analysis

Opportunities

To further identify opportunities for improvement specific to ILLENIUM online store, I created a screen-by-screen analysis of the existing mobile website using the the insights gained from the user research.

  • Animation can be distracting and might take extra time to load.

  • Users might not understand right away that phoenix logo represents shopping cart.

  • Search function is too hidden. Might be easier to find as a logo on top navigation bar.

  • Ambiguous category names that can have overlapping meanings,

  • How does this shirt look on an actual person?

  • Users care more about when the product will arrive.

  • Limited details for users who use a screen reader.

  • What do all these sizes mean? Needs a size chart.

  • If there are problems with a screen reader, how can the user hear this sentence at the end of the page?

  • Is there a way to edit order selection inside the shopping cart?

  • What if someone chooses a wrong size and they want to correct that here?

reflect

Takeaways

In hindsight, I learned that my user interview goal of "understanding the user needs, processes, and emotions that people experience when purchasing a DJ merchandise online" was too broad, as the responses I received were rather generic. Consequently, I researched ways to improve my

questions and came across a suggestion on Nielsen Norman

Group’s website to construct follow-up questions that extend

beyond a specific incident. In my future user interview sessions, I would first clarify the user research goal then develop the interview questions that are both directly and indirectly related to the goal.

Next Steps

If I could continue the project, the next steps would be to conduct two rounds of usability testing: the first round will be done on the existing online store, and the second round on the proposed redesign. I would request the participant to look for an item based on a set of criteria (i.e. "a black hoodie with a small graphic in the center of size M that can be delivered by next Monday"). Then, following the Think-Aloud Protocol, I would ask the participant to express their reasonings, feelings, and thoughts as they navigate each screen. The KPIs that will be measured would be the time required to complete the task, error rate, and user's satisfaction.

Date

January - March 2024

ROLE

UX Researcher
UX/UI Designer

skills

User Research
Wireframing
Prototyping

Tools

Figma

ILLENIUM is an electronic dance music (EDM) DJ and producer known for his melodic dubstep and future bass music. His merchandise is well-designed and can be seen everywhere at music festivals. However, despite the popularity of ILLENIUM merchandise, I was surprised when I found that his official online store does not offer a smooth product browsing experience. Therefore, I decided to conduct a case study on redesigning the ILLENIUM official online store.


Disclaimer: This unsolicited redesign project is solely conceptual and speculative. The redesign does not imply any association or collaboration with ILLENIUM brand.

project overview

The Problem

Based on the user research, the main user pain points are:

  • Out-of-stock items are shown next to available items, which can be misleading and cause a delay in the searching process.

  • Users cannot see the quality or dimensions of items.

  • Shipping information is unclear.

The Goal

The redesign will aim to:

  • Decrease the time required for users to search for the products

  • Provide accurate sizing information, quality of products, and shipping information

  • Increase the accessibility of the website

design solution

The Solution

In order to respond to the needs of the users, the following modifications were made to the existing screens:

  • Changed the background color from black to white to increase the visibility of product images

  • Made the Search function visible on all screens

  • Increased the number of products that can be viewed at once on the Landing Page and Product Category page

  • Reorganized and renamed product categories in the Side Navigation Menu for greater clarity

  • Restructured the layout of the Product Details page to prioritize the information that the users want to see

  • Added edit and delete buttons to in the Shopping Cart allow users to make changes to their selections quickly if needed before checking out

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

MENU

X

VIEW ALL

COLLECTION

+

APPAREL

+

ACCESSORIES

+

MUSIC

+

LOG IN / SIGN UP

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

SEARCH...

X

ILLENIUM

FILTER

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

PRODUCT DESCRIPTION

SIZE CHART

SHIPPING INFORMATION

+

+

+

RELATED PRODUCTS

SHOPPING CART

X

+

+

SUBTOTAL

$ XX.XX

Taxes and shipping calculated at checkout

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

MENU

X

VIEW ALL

COLLECTION

+

APPAREL

+

ACCESSORIES

+

MUSIC

+

LOG IN / SIGN UP

NEW ARRIVALS

FALL 2023 COLLECTION

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

SEARCH...

X

ILLENIUM

FILTER

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

ILLENIUM

JOIN THE FAMILY

SUBSCRIBE

E-MAIL ADDRESS

ILLENIUM

PRODUCT DESCRIPTION

SIZE CHART

SHIPPING INFORMATION

+

+

+

RELATED PRODUCTS

SHOPPING CART

X

+

+

SUBTOTAL

$ XX.XX

Taxes and shipping calculated at checkout

Existing Version

New Version

Existing Version

New Version

Landing Page

1

Reduced the height of top navigation bar and hero image to increase space for displaying products

2

Moved search icon to top right corner

3

Grouped products into carousel view so that users can view more products at the same time

4

Changed background color to white to increase visibility of product images

Side Navigation Bar

1

Renamed and reorganized the product categories for greater clarity

2

Added Log In / Sign Up feature to allow users to view their current and previous order details

3

Added currency feature

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Product Category

1

Added breadcrumbs to allow users to navigate back and forth between pages easily

2

Changed “Sort By” to “Filter” feature so users can have more options to filter their search

3

Changed from one-column to two-column view to increase the number of items that can be viewed at once

Product Details

1

Moved product title and price to the top for visibility and consistency

2

Categorized product details into different sections to reduce clusters of text

3

Changed “Related Products” section to carousel view to shorten screen length

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Existing Version

New Version

Shopping Cart

1

Changed the shopping cart icon from a phoenix wing to an actual shopping cart to help users recognize the feature more easily

2

Added edit and delete buttons to allow users to make changes to their shopping cart

3

Changed the color of Call To Action button to highlight the element

user research

ResearchMethods

In order to understand the user needs, processes, and emotions that people experience when purchasing a DJ merchandise online, I conducted user interviews with 5 participants who are in the following target group.


Target Audience:

  • Age 23-33

  • Have been to at least 3 EDM concerts

  • Include different genders

  • Live in metropolitan area

Personas

After the interviews responses are synthesized, I categorized various user groups into personas and created a user journey map for each.

Angelica

Interior Designer

Age: 29

Education:

University Graduate

Hometown: San Diego, CA

Family: Single

Bio

Angelica is a driven interior designerin LA. She also freelances outside of her day job to earn extra income. Although that leaves her with little time for hobbies or socializing, she still loves to go to EDM shows every now and then. She’s been a big EDM fan since college.

Problem Statement

Angelica is a busy interior designer and long-time electronic music fan

who needs flexibility of access to high-quality merchandise because she shops on multiple platforms and she wants to keep the merchandise as collectibles.

Goals

  • To be notified in advance when new merchandise will be launched

  • To buy high-quality merchandise to keep as collectibles

  • To be able to shop on multiple platforms

Frustrations

  • “I don’t have time to check when a new merch is going to drop. By the time I see the stuff I want, they’re already sold out.”

  • “Sometimes the images are too small and it’s hard to see the actual quality of the clothes.”


I’ve been to so many shows that I want to retire from the scene, but it’s still a lot of fun.

Jason

Business Analyst

Age: 23

Education:

University Graduate

Hometown: Princton, NJ

Family: Single

Bio

Jason is a business analyst in New York City. He enjoys socializing and exploring what the city has to offer. Jason recently started going to EDM shows after his friends invited him to join them at Electric Zoo music festival the year before. He likes to post pictures of every show he went on social media.

Problem Statement

Jason is a business analyst and a new EDM fan who needs a quicker way to buy new outfits that also makes sure they will fit on him because he needs them fast for the next event he’s attending.

Goals

  • To buy new outfits for the next event he is attending

  • To make sure things will fit and look good on him

  • To take the least amount of time to browse and order merchandise

Frustrations

  • “It’s hard to know how these outfits are gonna look on me.”

  • “For some DJs I have to scroll through the whole page before I can find an item that’s still in stock.”

  • “These websites don’t really show how long it will take to ship the items.”

I want to see so many DJs this summer and my favorite venue is Brooklyn Mirage.

Journey Maps

Persona: Angelica

Goal: To buy high-quality merchandise to keep as collectibles

Persona: Jason

Goal: To buy merchandise for the next event he’s attending

existing design analysis

Opportunities

To further identify opportunities for improvement specific to ILLENIUM online store, I created a screen-by-screen analysis of the existing mobile website using the the insights gained from the user research.

  • Animation can be distracting and might take extra time to load.

  • Users might not understand right away that phoenix logo represents shopping cart.

  • Search function is too hidden. Might be easier to find as a logo on top navigation bar.

  • Ambiguous category names that can have overlapping meanings,

  • How does this shirt look on an actual person?

  • Users care more about when the product will arrive.

  • Limited details for users who use a screen reader.

  • What do all these sizes mean? Needs a size chart.

  • If there are problems with a screen reader, how can the user hear this sentence at the end of the page?

  • Is there a way to edit order selection inside the shopping cart?

  • What if someone chooses a wrong size and they want to correct that here?

reflect

Takeaways

In hindsight, I learned that my user interview goal of "understanding the user needs, processes, and emotions that people experience when purchasing a DJ merchandise online" was too broad, as the responses I received were rather generic. Consequently, I researched ways to improve my

questions and came across a suggestion on Nielsen Norman

Group’s website to construct follow-up questions that extend

beyond a specific incident. In my future user interview sessions, I would first clarify the user research goal then develop the interview questions that are both directly and indirectly related to the goal.

Next Steps

If I could continue the project, the next steps would be to conduct two rounds of usability testing: the first round will be done on the existing online store, and the second round on the proposed redesign. I would request the participant to look for an item based on a set of criteria (i.e. "a black hoodie with a small graphic in the center of size M that can be delivered by next Monday"). Then, following the Think-Aloud Protocol, I would ask the participant to express their reasonings, feelings, and thoughts as they navigate each screen. The KPIs that will be measured would be the time required to complete the task, error rate, and user's satisfaction.

  • Let’s Connect - Let’s connect - Let’s connect -

©2024

TARA BOONKHUN

  • Let’s Connect - Let’s connect - Let’s connect -

©2024

TARA BOONKHUN

  • Let’s Connect - Let’s connect - Let’s connect -

©2024

TARA BOONKHUN