Work

Work

UX/UI Design

UX/UI Design

Luxury E-commerce

Luxury E-commerce

B2C

B2C

Shopping Flow Redesign

Shopping Flow Redesign

Non-disclosure Agreement: All details and visual designs in this case study have been altered and rebranded to protect the employer’s intellectual property.

Summary

Elevating a luxury e-commerce shopping flow to increase conversion.

Summary

Mobile Prototype (Updating)

Role

Role

UX/UI Designer

UX/UI Designer

Tools

Tools

Figma

Figma

Team

Team

3 Front end developers

4 Back end developers

3 Front end developers

4 Back end developers

Scope

Scope

User Research

User Flow

Wireframing

Visual Design

Prototyping

User Research

User Flow

Wireframing

Visual Design

Prototyping

Timeline

Timeline

November 2025 - January 2026

November 2025 - January 2026

Role

UX/UI Designer

Tools

Figma

Team

3 Front end developers

4 Back end developers

Scope

User Research

User Flow

Wireframing

Visual Design

Prototyping

Timeline

November 2025 - January 2026

I was introduced to the team during an initially tight launch deadline of 3 weeks with the goal to enhance the brand’s UI. My goal was to create a new, seamless shopping flow with an elevated shopping experience for users and encourage conversion through design choices. I will be focusing specifically on the final shopping flow from browsing through a collection page, the product detail page, and final customer checkout experience. After my reviewing the original flow, I discovered two issues:

I was introduced to the team during an initially tight launch deadline of 3 weeks with the goal to enhance the brand’s UI. My goal was to create a new, seamless shopping flow with an elevated shopping experience for users and encourage conversion through design choices. I will be focusing specifically on the final shopping flow from browsing through a collection page, the product detail page, and final customer checkout experience. After my reviewing the original flow, I discovered two issues:

Problem 1

Problem 1

Did not have an impression of a high-end skincare brand

Did not have an impression of a high-end skincare brand

Problem 2

Problem 2

Limited user research for a tight 3-week launch deadline

Limited user research for a tight 3-week launch deadline

Problem 1

Did not have an impression of a high-end skincare brand

Problem 2

Limited user research for a tight 3-week launch deadline

Research

Research

📚 To quickly evaluate and redesign the shopping flow in time, I used a heuristic evaluation, conducted market research, developed a user persona and adjusted the user flow

📚 To quickly evaluate and redesign the shopping flow in time, I used a heuristic evaluation, conducted market research, developed a user persona and adjusted the user flow

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

During my initial audit of the previous designs, I considered brightening the page by using softer colors and using a white background since the old version utilized a lot of dark, desaturated colors. Since it did not have an initial impression of an e-commerce brand and I had both limited user research and time constraints, I conducted a heuristic analysis to identify specific areas for improvement. From my evaluation, I began compiling new design elements that I thought were necessary for a high-end brand and started adjusting the user flow from what was missing.

During my initial audit of the previous designs, I considered brightening the page by using softer colors and using a white background since the old version utilized a lot of dark, desaturated colors. Since it did not have an initial impression of an e-commerce brand and I had both limited user research and time constraints, I conducted a heuristic analysis to identify specific areas for improvement. From my evaluation, I began compiling new design elements that I thought were necessary for a high-end brand and started adjusting the user flow from what was missing.

Market Research

Market Research

Market Research

🏢 Companies:

🏢 Companies:

🏢 Companies:

📈 Key Trends:

Clean use of white to highlight colorful product photo advertisements

Bestsellers right below hero section

Collection or promotion of offerings

Targeting specific skin care concerns

📈 Key Trends:

Clean use of white to highlight colorful product photo advertisements

Bestsellers right below hero section

Collection or promotion of offerings

Targeting specific skin care concerns

📈 Key Trends:

Clean use of white to highlight colorful product photo advertisements

Bestsellers right below hero section

Collection or promotion of offerings

Targeting specific skin care concerns

✅ Strengths:

Conveys important product features quickly through iconography and information hierarchy

Clean product collection layouts

Product photos are vibrant and convey a high-end experience

✅ Strengths:

Conveys important product features quickly through iconography and information hierarchy

Clean product collection layouts

Product photos are vibrant and convey a high-end experience

✅ Strengths:

Conveys important product features quickly through iconography and information hierarchy

Clean product collection layouts

Product photos are vibrant and convey a high-end experience

❌ Weaknesses:

A few product pages may have long scroll lengths on mobile

Some don’t have before/after comparisons for result references

❌ Weaknesses:

A few product pages may have long scroll lengths on mobile

Some don’t have before/after comparisons for result references

❌ Weaknesses:

A few product pages may have long scroll lengths on mobile

Some don’t have before/after comparisons for result references

There were key trends I noticed during my competitive analysis of similar high-end brands. A majority of the UI designs used black for their touchpoints or a combination of their primary brand color with it. The layouts were also brighter to feature colorful aspects of the products, from the skincare to the packaging as part of the branding. Lastly, the product detail pages were laid out to describe the product with interactive experiences and ritual usage/benefits to complement the product benefits. Considering these elements, I began redesigning the layouts of the different pages to make the website visually appealing and more intuitive using new colors and iconography.

There were key trends I noticed during my competitive analysis of similar high-end brands. A majority of the UI designs used black for their touchpoints or a combination of their primary brand color with it. The layouts were also brighter to feature colorful aspects of the products, from the skincare to the packaging as part of the branding. Lastly, the product detail pages were laid out to describe the product with interactive experiences and ritual usage/benefits to complement the product benefits. Considering these elements, I began redesigning the layouts of the different pages to make the website visually appealing and more intuitive using new colors and iconography.

Since there was not much user research or time to conduct user interviews, I used my market research and heuristic evaluation combined with what the stakeholders mentioned was their ideal customer to create a user persona to help guide my design process on what potential users may want to know when browsing a high-end skincare site.

Since there was not much user research or time to conduct user interviews, I used my market research and heuristic evaluation combined with what the stakeholders mentioned was their ideal customer to create a user persona to help guide my design process on what potential users may want to know when browsing a high-end skincare site.

User Persona

User Persona

User Persona

User Persona

User Persona

“I’m hoping to find something with quality ingredients to help hydrate my face and reduce fine lines.”

“I’m hoping to find something with quality ingredients to help hydrate my face and reduce fine lines.”

“I’m hoping to find something with quality ingredients to help hydrate my face and reduce fine lines.”

Celine

Celine

Celine

Age: 32

Age: 32

Age: 32

Education: Bachelor’s degree

Education: Bachelor’s degree

Education: Bachelor’s degree

Salary range: $98,000-$125,000

Salary range: $98,000-$125,000

Salary range: $98,000-$125,000

Gender: Female

Gender: Female

Gender: Female

Needs & Goals:

I need to find something that feels hydrating, but also has anti-aging ingredients to help keep my skin firm. For me, I want to have something that feels like an experience while using it.

Needs & Goals:

I need to find something that feels hydrating, but also has anti-aging ingredients to help keep my skin firm. For me, I want to have something that feels like an experience while using it.

Needs & Goals:

I need to find something that feels hydrating, but also has anti-aging ingredients to help keep my skin firm. For me, I want to have something that feels like an experience while using it.

Frustrations:

It has been difficult to find something that has the results I want or finding skincare with all the information I want to see so I know I’m spending my money on something with quality.

Frustrations:

It has been difficult to find something that has the results I want or finding skincare with all the information I want to see so I know I’m spending my money on something with quality.

Frustrations:

It has been difficult to find something that has the results I want or finding skincare with all the information I want to see so I know I’m spending my money on something with quality.

Celine has been looking for some new skincare products to address some of her concerns. She wants to make sure that the ingredients are high-quality so she doesn’t mind indulging herself a little to improve her skincare routine. However, she also wants it to feel like it’s an experience since she’ll be paying a little more than other brands.

Celine has been looking for some new skincare products to address some of her concerns. She wants to make sure that the ingredients are high-quality so she doesn’t mind indulging herself a little to improve her skincare routine. However, she also wants it to feel like it’s an experience since she’ll be paying a little more than other brands.

Celine has been looking for some new skincare products to address some of her concerns. She wants to make sure that the ingredients are high-quality so she doesn’t mind indulging herself a little to improve her skincare routine. However, she also wants it to feel like it’s an experience since she’ll be paying a little more than other brands.

While evaluating the original user flow and design, I rerouted some of the user flow into a new version to help guide my design process and included new pages that were missing for visual reference.

While evaluating the original user flow and design, I rerouted some of the user flow into a new version to help guide my design process and included new pages that were missing for visual reference.

User Flow

User Flow

User Flow

User Flow

User Flow

Start / End

Start / End

Start / End

Order Confirmation

Order Confirmation

Order Confirmation

Customer opens home page

Customer opens home page

Customer opens home page

Process

Process

Process

Payment Processing

Payment Processing

Payment Processing

Product detail page

Product detail page

Product detail page

No

No

No

Yes

Yes

Yes

Collections page

Collections page

Collections page

Home page

Home page

Home page

Cart Preview

Cart Preview

Cart Preview

Decision

Decision

Decision

Processed

Processed

Processed

Checkout

Checkout

Checkout

Add to cart

Add to cart

Add to cart

Input

Input

Input

Customer info

Customer info

Customer info

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

No

No

Conceptualizing the redesign

Conceptualizing the redesign

💭 I began the design process with lo-fi wireframes of the new designs and selected a few iterations that were the most usable

💭 I began the design process with lo-fi wireframes of the new designs and selected a few iterations that were the most usable

Most changes for the redesign were within the home page, collections page, and product detail page as I made some layout adjustments. I focused mainly on creating new product cards after stakeholder feedback and made some adjustments to the product detail page based on what I noticed in my heuristic analysis. I also removed some redundancies that were occurring in the product detail page.

Most changes for the redesign were within the home page, collections page, and product detail page as I made some layout adjustments. I focused mainly on creating new product cards after stakeholder feedback and made some adjustments to the product detail page based on what I noticed in my heuristic analysis. I also removed some redundancies that were occurring in the product detail page.

Lo-Fi Wireframes

Lo-Fi Wireframes

Lo-Fi Wireframes

COMPANY NAME

COMPANY NAME

Shop All

Bestsellers

Our Story

Rewards

Complimentary shipping on all U.S. domestic orders

Shop now

New Product Ad

New Product Ad

Bestsellers

New

Lunar Collection

New product collection

Exclusive to Sérène Beauty

Curate your Skincare Routine

Gift set with a purchase over $250

Exclusive Membership Rewards

Mission and Values preview

Product Name

Product Name

Product Name

Product Name

Short description

Short description

Short description

Short description

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

Add to cart

Add to cart

Add to cart

Add to cart

Best

Best

Best

Best

(2,456)

(2,456)

(2,456)

(2,456)

Join our exclusive membership club

Lorem ipsum dolor sit amet consectetur. Ultrices risus.

CTA

Customer Care

Legal

Company

Company

COMPANY NAME

COMPANY NAME

Shop All

Bestsellers

Our Story

Rewards

Complimentary shipping on all U.S. domestic orders

Product Name

Product Name

Product Name

Add to cart

Lorem ipsum dolor sit amet consectetur. At.

Product Name

New

Add to cart

Lorem ipsum dolor sit amet consectetur. At.

Gift Set

New

Product Name

Product Name

Product Name

Product Name

Product Name

Short description

Short description

Short description

Short description

Short description

Short description

Short description

Short description

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

Add to cart

Add to cart

Add to cart

Add to cart

Add to cart

Add to cart

Add to cart

Add to cart

Best

Best

Best

Best

Best

Best

Best

Best

(2,456)

(2,456)

(2,456)

(2,456)

(2,456)

(2,456)

(2,456)

(2,456)

Join our exclusive membership club

Lorem ipsum dolor sit amet consectetur. Ultrices risus.

CTA

Customer Care

Legal

Company

Company

Sort by:

Bestsellers

Home > Shop All

8 Products

Lorem ipsum dolor sit amet consectetur. Tellus elit sed sit sit. A rhoncus facilisis orci pulvinar purus pharetra.

Lorem ipsum dolor sit amet consectetur. Tellus elit sed sit sit. A rhoncus facilisis orci pulvinar purus pharetra.

Bestsellers

Bestsellers

Shop All

Bestsellers

Gift Sets

Exclusive

New

Discover (Story)

COMPANY NAME

COMPANY NAME

Shop All

Bestsellers

Our Story

Rewards

Complimentary shipping on all U.S. domestic orders

Join our exclusive membership club

Lorem ipsum dolor sit amet consectetur. Ultrices risus.

CTA

Customer Care

Legal

Company

Company

Short description

Lorem ipsum dolor sit amet consectetur. Purus sed interdum et lacinia tempus arcu. Vel sodales arcu lobortis faucibus. Feugiat dictum leo adipiscing massa potenti nibh lectus in porttitor. In iaculis leo sagittis senectus proin congue ipsum turpis. Viverra nunc commodo nam auctor massa purus diam. Potenti nisl.

Lorem ipsum dolor sit amet consectetur. Purus sed interdum et lacinia tempus arcu. Vel sodales arcu lobortis faucibus. Feugiat dictum leo adipiscing massa potenti nibh lectus in porttitor. In iaculis leo sagittis senectus proin congue ipsum turpis. Viverra nunc commodo nam auctor massa purus diam. Potenti nisl.

Free complimentary shipping for purchases over $250.

Earn XX points

(X.X oz/ X mL)

$XXX.XX

(2,456)

Product Name

Product Name

Benefits

Lorem ipsum dolor sit amet consectetur. Ac ullamcorper adipiscing nam habitasse mi sed.

Lorem ipsum dolor sit amet consectetur. Ac ullamcorper adipiscing nam habitasse mi sed.

After 6 weeks of use

After 6 weeks of use

94%

94%

97%

97%

93%

93%

95%

95%

Of users saw improves in elasticity, plumpness, and skin barrier.

Of users saw improves in elasticity, plumpness, and skin barrier.

Benefit 1

Benefit 2

Benefit 3

Clinical Results

Ritual Use

Reviews

Step 1

Step 2

Step 3

Lorem ipsum dolor sit amet consectetur. In.

Lorem ipsum dolor sit amet consectetur. In.

Lorem ipsum dolor sit amet consectetur. In.

Lorem ipsum dolor sit amet consectetur. Quam.

Lorem ipsum dolor sit amet consectetur. Quam.

Lorem ipsum dolor sit amet consectetur. Quam.

Based on a clinical trial of 100 women around ages 27-35.

Suggested Ritual Products

Key Ingredients

Shipping

Returns & Exchanges

FAQs

Size

Size

1

Add to cart

Product Name

Product Name

Product Name

Product Name

Short description

Short description

Short description

Short description

$XXX.XX

$XXX.XX

$XXX.XX

$XXX.XX

Add to cart

Add to cart

Add to cart

Add to cart

Best

Best

Best

Best

(2,456)

(2,456)

(2,456)

(2,456)

4.8

4.8

Based on 2,456 user reviews

Write a review

Sort by: Most relevant

Rating

Lorem ipsum dolor sit amet consectetur. Urna cursus

Lorem ipsum dolor sit amet consectetur. Urna cursus

Lorem ipsum dolor sit amet consectetur. Urna cursus

Verified Review

Verified Review

Lorem ipsum dolor sit amet consectetur. Senectus aliquam in placerat justo quam. Dolor tellus diam ut eu. Et et magna nisi suscipit fringilla nulla. Diam proin nam sit turpis sagittis dictumst in in placerat. Gravida at rhoncus aliquam purus.

Lorem ipsum dolor sit amet consectetur. Senectus aliquam in placerat justo quam. Dolor tellus diam ut eu. Et et magna nisi suscipit fringilla nulla. Diam proin nam sit turpis sagittis dictumst in in placerat. Gravida at rhoncus aliquam purus.

Lorem ipsum dolor sit amet consectetur. Senectus aliquam in placerat justo quam. Dolor tellus diam ut eu. Et et magna nisi suscipit fringilla nulla. Diam proin nam sit turpis sagittis dictumst in in placerat. Gravida at rhoncus aliquam purus.

Name

Name

Name

Date

Date

Date

1 | Viewing 3 of 6 reviews

COMPANY NAME

COMPANY NAME

Shop All

Bestsellers

Our Story

Rewards

Complimentary shipping on all U.S. domestic orders

Checkout Preview

Express Checkout

Customer Information

Ship to

Pay with

Shipping Method

Standard Shipping

$6.90 (estimated delivery around 7-10 days)

$12.90 (estimated delivery around 3-5 days)

Express Shipping

Apple Pay

Google Pay

OR

First Name

Last Name

Email Address

Phone Number

Street Address

Name on Card

Credit Card Number

Apartment, suite, etc. (optional)

City

Expiration Date (MM/YY)

State

Security Code (CVV)

Postal Code

$XXX.XX

Subtotal

$XX.XX

$XX.XX

Shipping

$XX.XX

Estimated Taxes

USD

Total

$XXX.XX

Short description

Product Name

Size

1

$XXX.XX

Short description

Product Name

Size

1

$XXX.XX

Short description

Product Name

Size

1

Apply

Pay Now

Gift card

Back

COMPANY NAME

COMPANY NAME

Shop All

Bestsellers

Our Story

Rewards

Complimentary shipping on all U.S. domestic orders

Order Confirmation

Thank you for your order. Once your order is shipped, you will receive an email with tracking information.

Shipping Information

Shipping Method

Tracking Information

Standard Shipping - $6.90 (estimated delivery within 3-4 days)

First Name Last Name

123 Deer Lane

Los Angeles, CA 91328

$XXX.XX

Subtotal

$XX.XX

$XX.XX

Shipping

$XX.XX

Estimated Taxes

USD

Total

$XXX.XX

Short description

Product Name

Size

1

$XXX.XX

Short description

Product Name

Size

1

$XXX.XX

Short description

Product Name

Size

1

Order Received

On the Way

Delivered

Filter

Sort by:

Bestsellers

Bestsellers

Recently Added

A to Z

Z to A

Latest

A to Z

Z to A

Summary


Recommended for


Benefits +


Ingredients +


How to use +

Home

Home

Home

Collections

Collections

Collections

Product Detail

Product Detail

Product Detail

Cart

Cart

Cart

Checkout

Checkout

Checkout

Order Confirmation

Order Confirmation

Order Confirmation

I used what I had for my lo-fi wireframes, however, there were some aspects that needed to be changed for the final design after discussing with the developers when they were working on implementation and testing.

I used what I had for my lo-fi wireframes, however, there were some aspects that needed to be changed for the final design after discussing with the developers when they were working on implementation and testing.

Key Design Decisions

Key Design Decisions

🖊️ I utilized most of what I originally had in my lo-fi wireframes, but made some adjustments for the final design in the hi-fi wireframes

🖊️ I utilized most of what I originally had in my lo-fi wireframes, but made some adjustments for the final design in the hi-fi wireframes

Collections Page

Collections Page

Collections Page

google.com

google.com

google.com

google.com

V1: Old Product Card Style & Layout

V1: Old Product Card Style & Layout

V1: Old Product Card Style & Layout

V2: Updated Product Card Style & New Layout

V2: Updated Product Card Style & New Layout

V2: Updated Product Card Style & New Layout

Originally, I used a different filter bar and kept the rounded corners on the cards to save the developers’ time since we had a tight deadline during the original deadline. However, we received an extension with a new deadline, so in the second iteration I changed the filter bar to match the new card designs and added more filtering options to allow for better customization. I also added in a new variation selector within the product cards after the developer team let me know they finished adding support for product variations. This would help users see their options as a preview before clicking the cards to learn more. I also extended the photo size to touch the edges of the card to better highlight the product compared to the first version where the image was slightly smaller due to the rounded corners and centered placement. The stakeholders preferred the new card look and the second iteration will be used for launch.


To make the user experience more engaging, I added alternative product cards that would highlight different products while scrolling through the collections page. This would allow users to see a lifestyle version of the products and would be more interactive as users scroll through products when more are eventually added. The stakeholders enjoyed the idea so it will be included in the site launch.

Originally, I used a different filter bar and kept the rounded corners on the cards to save the developers’ time since we had a tight deadline during the original deadline. However, we received an extension with a new deadline, so in the second iteration I changed the filter bar to match the new card designs and added more filtering options to allow for better customization. I also added in a new variation selector within the product cards after the developer team let me know they finished adding support for product variations. This would help users see their options as a preview before clicking the cards to learn more. I also extended the photo size to touch the edges of the card to better highlight the product compared to the first version where the image was slightly smaller due to the rounded corners and centered placement. The stakeholders preferred the new card look and the second iteration will be used for launch.


To make the user experience more engaging, I added alternative product cards that would highlight different products while scrolling through the collections page. This would allow users to see a lifestyle version of the products and would be more interactive as users scroll through products when more are eventually added. The stakeholders enjoyed the idea so it will be included in the site launch.

Product Detail

Product Detail

Product Detail

google.com

google.com

google.com

google.com

Product Detail

Product Detail

Product Detail

Since the stakeholders want to have an elevated look, I utilized more whites and brighter colors to compliment vibrant product palettes, as well as new iconography for users to easily identify and skim specific sections. I also added in new colors to highlight specific touch points and information throughout the page. I also changed the design from a popup modal to a full size page to accommodate additional product information and increase detail space. In the original design, there were some areas that were redundant such as multiple product descriptions at the top and middle zones so I removed them and readjusted the layout. For the 2nd deadline, the developers added variation support, so I returned to the design to create an updated version to include variation options.

Since the stakeholders want to have an elevated look, I utilized more whites and brighter colors to compliment vibrant product palettes, as well as new iconography for users to easily identify and skim specific sections. I also added in new colors to highlight specific touch points and information throughout the page. I also changed the design from a popup modal to a full size page to accommodate additional product information and increase detail space. In the original design, there were some areas that were redundant such as multiple product descriptions at the top and middle zones so I removed them and readjusted the layout. For the 2nd deadline, the developers added variation support, so I returned to the design to create an updated version to include variation options.

Cart Preview

Cart Preview

Cart Preview

google.com

google.com

google.com

Cart

Cart

Cart

The cart preview kept a similar look during the redesign with some minor changes to improve the functionality after feedback from the engineers. I included an “X” button for a faster product removal method instead of changing the quantity selector to 0. I also made the buttons a little smaller when we added in variation support to accommodate the product card size. The product variations were added as well so users can see the specific variant they’re purchasing before checking out so they don’t get confused or feel misled over which product they’re checking out.

The cart preview kept a similar look during the redesign with some minor changes to improve the functionality after feedback from the engineers. I included an “X” button for a faster product removal method instead of changing the quantity selector to 0. I also made the buttons a little smaller when we added in variation support to accommodate the product card size. The product variations were added as well so users can see the specific variant they’re purchasing before checking out so they don’t get confused or feel misled over which product they’re checking out.

Checkout → Order Confirmation

Checkout → Order Confirmation

Checkout → Order Confirmation

google.com

google.com

google.com

google.com

google.com

google.com

Checkout

Checkout

Checkout

Order Confirmation

Order Confirmation

Order Confirmation

The checkout page remained mostly the same for the redesign with some minor adjustments and visual design changes to match the rest of the site. To reduce the amount of white space on desktop view, I used a two-column design for entering checkout details and the order summary on the side for quick reference. The payment button is also located below the order summary to ensure users review their order before confirmation. The only issue was before the launch, the developers were having trouble implementing the gift card feature and experiencing 3PL integration issues. Due to the tight deadline and payment integration complications, the gift card feature was ultimately shelved for future implementation.


The order confirmation page also remained mostly the same, however, for the redesign, I added in new iconography to help add more visuals and make it look less plain. I also made sure the tracking icons were clear with what they symbolized so users can understand right away their order’s status. I also added in product quantities and the product variations.

The checkout page remained mostly the same for the redesign with some minor adjustments and visual design changes to match the rest of the site. To reduce the amount of white space on desktop view, I used a two-column design for entering checkout details and the order summary on the side for quick reference. The payment button is also located below the order summary to ensure users review their order before confirmation. The only issue was before the launch, the developers were having trouble implementing the gift card feature and experiencing 3PL integration issues. Due to the tight deadline and payment integration complications, the gift card feature was ultimately shelved for future implementation.


The order confirmation page also remained mostly the same, however, for the redesign, I added in new iconography to help add more visuals and make it look less plain. I also made sure the tracking icons were clear with what they symbolized so users can understand right away their order’s status. I also added in product quantities and the product variations.

Prototype

Prototype

💻 After confirming all MVP were included within the design, I created the first prototype

💻 After confirming all MVP were included within the design, I created the first prototype

Usability Issues

Usability Issues

During the testing, the developers encountered some multi-cart functionality issues with the new product variation feature in the cart preview and checkout product cards. While the final product card was approved, it was slightly too long on mobile. There were also functionality issues applying gift cards to the checkout total.

During the testing, the developers encountered some multi-cart functionality issues with the new product variation feature in the cart preview and checkout product cards. While the final product card was approved, it was slightly too long on mobile. There were also functionality issues applying gift cards to the checkout total.

Optimal Solutions

Optimal Solutions

I had to make some minor text layout adjustments to the checkout order preview cards after talking with the developers to come up with a new solution after they encountered implementation issues with product variants. I also shortened and adjusted the product card information layout since it was slightly too long for the mobile version after testing.


Due to time constraints, I removed the gift card option in the checkout page since the developers encountered 3PL payment integration issues they weren’t sure they could resolve and test before launch, so it was shelved for the future.


After the stakeholders’ feedback, I also added a saved addresses and payment methods dropdown for users to speed up the checkout process for registered users.

I had to make some minor text layout adjustments to the checkout order preview cards after talking with the developers to come up with a new solution after they encountered implementation issues with product variants. I also shortened and adjusted the product card information layout since it was slightly too long for the mobile version after testing.


Due to time constraints, I removed the gift card option in the checkout page since the developers encountered 3PL payment integration issues they weren’t sure they could resolve and test before launch, so it was shelved for the future.


After the stakeholders’ feedback, I also added a saved addresses and payment methods dropdown for users to speed up the checkout process for registered users.

Reflections

Reflections

📝 Once the prototype was delivered, I felt there were still many elements I could improve upon

📝 Once the prototype was delivered, I felt there were still many elements I could improve upon

Takeaways

Takeaways

My major challenge during this design process was the initial 3 week deadline to recreate a full e-commerce website for both the internal and consumer side. While I managed to do so, I had to sacrifice time for more thorough research which I feel could have improved my design choices.


The second challenge I faced was keeping in mind how the consumer side design will affect the vendor side since at the time, I had limited experience designing for B2B dashboards and accounts. In the future, I’ll be considered how the functionality could be implemented from an internal vs. consumer view perspective.


I experienced some difficulty creating a balance between user engagement, information, function, and design, specifically for the collections page and implementing a combined reviews and user-generated review section. While not yet launched, my design choices were done around the idea with more product information avaliable within the detail page that were missing or redundant, it can help convert users to make an informed decision. Adjusting the flow by adding in some missing pages were also done to make the checkout flow more seamless and less confusing so users don't leave.


In the future, anything related to 3PL will have a higher design priority to take into account if they may encounter implementation issues. As the front-end and back-end teams had trouble with payment and shipping integration, I’ll design it first if there are multiple features so they have more time to ship.

My major challenge during this design process was the initial 3 week deadline to recreate a full e-commerce website for both the internal and consumer side. While I managed to do so, I had to sacrifice time for more thorough research which I feel could have improved my design choices.


The second challenge I faced was keeping in mind how the consumer side design will affect the vendor side since at the time, I had limited experience designing for B2B dashboards and accounts. In the future, I’ll be considered how the functionality could be implemented from an internal vs. consumer view perspective.


I experienced some difficulty creating a balance between user engagement, information, function, and design, specifically for the collections page and implementing a combined reviews and user-generated review section. While not yet launched, my design choices were done around the idea with more product information avaliable within the detail page that were missing or redundant, it can help convert users to make an informed decision. Adjusting the flow by adding in some missing pages were also done to make the checkout flow more seamless and less confusing so users don't leave.


In the future, anything related to 3PL will have a higher design priority to take into account if they may encounter implementation issues. As the front-end and back-end teams had trouble with payment and shipping integration, I’ll design it first if there are multiple features so they have more time to ship.

Thank you for reading my case study!

Thank you for reading my case study!

Next up:

Next up: