about me

works

archive

contact

2024-2025

HYTE Product Detail Page Refresh

HYTE Product Detail Page Refresh

HYTE Product Detail Page Refresh

HYTE’s product detail page moved from a generic “view & buy” page to a decision-support experience. I led the refresh to clarify hierarchy, surface variants/trust info, reduce scroll fatigue, and smooth the path to checkout.

HYTE’s product detail page moved from a generic “view & buy” page to a decision-support experience. I led the refresh to clarify hierarchy, surface variants/trust info, reduce scroll fatigue, and smooth the path to checkout.

HYTE’s product detail page moved from a generic “view & buy” page to a decision-support experience. I led the refresh to clarify hierarchy, surface variants/trust info, reduce scroll fatigue, and smooth the path to checkout.

UI/UX

UI/UX

Role

Role

UI/UX, Visual Designer

UI/UX, Visual Designer

Team

Team

2 Designers, 1 Developer, 1 PM

2 Designers, 1 Developer, 1 PM

Timeframe

Timeframe

Jan 2025 – Present

Jan 2025 – Present

Tools

Tools

Figma, Adobe XD, Illustrator, JIRA, Microsoft Clarity

Figma, Adobe XD, Illustrator, JIRA, Microsoft Clarity

Problem

Problem

HYTE’s PDP relied on a generic “view & buy” template. It supported basic navigation but gave users little help making confident decisions. Variants and compatibility were buried, trust details weren’t visible near the CTA, and the gallery pushed key content below the fold. On mobile, small tap targets caused mis-taps and backtracking. Overall, fragmented information created scroll fatigue and slowed the path to purchase.

HYTE’s PDP relied on a generic “view & buy” template. It supported basic navigation but gave users little help making confident decisions. Variants and compatibility were buried, trust details weren’t visible near the CTA, and the gallery pushed key content below the fold. On mobile, small tap targets caused mis-taps and backtracking. Overall, fragmented information created scroll fatigue and slowed the path to purchase.

HYTE’s PDP relied on a generic “view & buy” template. It supported basic navigation but gave users little help making confident decisions. Variants and compatibility were buried, trust details weren’t visible near the CTA, and the gallery pushed key content below the fold. On mobile, small tap targets caused mis-taps and backtracking. Overall, fragmented information created scroll fatigue and slowed the path to purchase.

Objectives

Objectives

Given the limited project time, we focused on the areas that would create the most impact for users and business:

Given the limited project time, we focused on the areas that would create the most impact for users and business:

Given the limited project time, we focused on the areas that would create the most impact for users and business:

Build your own PC

Build your own PC

Curate compatible components directly on PDP

Streamline Flow

Streamline Flow

Reduce friction and scroll fatigue

Ensure Consistency

Ensure Consistency

Apply tokens/components for reliable interactions

Simplify Clarity

Simplify Clarity

Consolidate details and keep the page on brand

Clarify Status

Clarify Status

Show availability & shipping to reduce confusion/support load

Research & Insights

Research & Insights

We audited the old PDP, synthesized backend logs, Clarity heatmaps, and connected site analytics to map current PDP behavior. With limited time, we focused on the most critical problems affecting the users.

We audited the old PDP, synthesized backend logs, Clarity heatmaps, and connected site analytics to map current PDP behavior. With limited time, we focused on the most critical problems affecting the users.

We audited the old PDP, synthesized backend logs, Clarity heatmaps, and connected site analytics to map current PDP behavior. With limited time, we focused on the most critical problems affecting the users.

Summarized User Journey Map
PDP Flowchart (Old vs New)
Users Needs vs Business Goals

Constraints & Decisions

Constraints & Decisions

We had to play inside a legacy CMS, so no from-scratch rebuilds or fancy new layouts. Brand rules stayed, and we kept AA contrast + page weight in check. The old page made people scroll forever (and mis-tap on mobile), and we only had eight weeks. So we went token-led, not from-scratch: reorder the top (title/price/variants/CTA), put trust info by the button, tighten the gallery, lock in variant states, and ship a sticky mobile CTA with real tap targets. Same system, smarter structure, faster to ship and easier to use.

We had to play inside a legacy CMS, so no from-scratch rebuilds or fancy new layouts. Brand rules stayed, and we kept AA contrast + page weight in check. The old page made people scroll forever (and mis-tap on mobile), and we only had eight weeks. So we went token-led, not from-scratch: reorder the top (title/price/variants/CTA), put trust info by the button, tighten the gallery, lock in variant states, and ship a sticky mobile CTA with real tap targets. Same system, smarter structure, faster to ship and easier to use.

Design decision

Design decision

After narrowing down the collected data, I started diving into drafting ideas and discuss with with our remote team to discuss my pov that which one would ideally fit above criterias to move forward with. Then i laid out a quick flow with the selected framework to make the flow, compatibiility and make sure we’re align with our goal.

After narrowing down the collected data, I started diving into drafting ideas and discuss with with our remote team to discuss my pov that which one would ideally fit above criterias to move forward with. Then i laid out a quick flow with the selected framework to make the flow, compatibiility and make sure we’re align with our goal.

Visual drafting & execution

Visual drafting & execution

Visual drafting & execution
  1. Visible Hierarchy

We used an above-the-fold 70/30 split screen to surface what shoppers need first, title, price, variants, and CTA, so they can decide faster with fewer backtracks.

Before

After

  1. Seamless storytelling

To reduce scroll fatigue, we moved long content into an on-demand modal: tap to read, close to return. It keeps the page light, the story's clear, and the sections well-separated.

Before

After

  1. Guide users with build confidently

We added curated cross-sell + compatibility picks on the page so users can assemble their build without leaving the page or worrying about fit.

Before

Feature doesn't exist

After

  1. Smooth shopping experience

We added an intuitive slide-in cart that gives instant, in-context added/error feedback, reassuring users without interrupting their purchase decision while stays right on page.

Before

After

  1. Increase credibility from start

We consolidated the review section and placed it to the top to establish trust early.

Before

After

Handoff & Post-staging QA

We prototyped both viewports and had a meeting of walkthrough how the features and flow works to our devs. I worked on possible scenarios and QA the flowchart to ensure smooth handoff to our devs. (Excluded staging site for confidential purpose.)

We prototyped both viewports and had a meeting of walkthrough how the features and flow works to our devs. I worked on possible scenarios and QA the flowchart to ensure smooth handoff to our devs. (Excluded staging site for confidential purpose.)

We prototyped both viewports and had a meeting of walkthrough how the features and flow works to our devs. I worked on possible scenarios and QA the flowchart to ensure smooth handoff to our devs. (Excluded staging site for confidential purpose.)

Iterations

After our developer had an outcome of the warehouse/inventory logic, we shipped the bundle feature. It was a quick turn, landed before post-staging QA, and now lives as a reusable component in our library, supporting attach and conversion.

After our developer had an outcome of the warehouse/inventory logic, we shipped the bundle feature. It was a quick turn, landed before post-staging QA, and now lives as a reusable component in our library, supporting attach and conversion.

After our developer had an outcome of the warehouse/inventory logic, we shipped the bundle feature. It was a quick turn, landed before post-staging QA, and now lives as a reusable component in our library, supporting attach and conversion.

Outcomes

Outcomes

Outcomes are being measured via ongoing A/B tests. We’re monitoring cart add rate, checkout starts, mis-taps on mobile variant picks, and support tickets. Initial signals point to improved hierarchy, reduced scrolling/backtracks, and a smoother add-to-cart flow. Below are the public V1.1 prototypes, test it out yourself!

Outcomes are being measured via ongoing A/B tests. We’re monitoring cart add rate, checkout starts, mis-taps on mobile variant picks, and support tickets. Initial signals point to improved hierarchy, reduced scrolling/backtracks, and a smoother add-to-cart flow. Below are the public V1.1 prototypes, test it out yourself!

Outcomes are being measured via ongoing A/B tests. We’re monitoring cart add rate, checkout starts, mis-taps on mobile variant picks, and support tickets. Initial signals point to improved hierarchy, reduced scrolling/backtracks, and a smoother add-to-cart flow. Below are the public V1.1 prototypes, test it out yourself!

Desktop 1920w

Desktop 1920w prototype

Desktop 1920w

Mobile 390w

Mobile 390w prototype

Mobile 390w

Reflection

Reflection

When I first looked at the PDP, I was thinking in screens. But users don’t buy screens, they buy certainty. Most people want three answers fast: Is this the right variant? Will it fit my build/setup? When will it arrive? Framing the work around those questions changed the decisions I made.

Because of time and tech limits, a full rebuild wasn’t smart, so we chose a token-led refactor instead. The wins showed up in small, practical ways.

A big challenge became a growth point for me was empathizing with engineering and prototyping the details so we shared the same language. Building that understanding took compromise and time, and it helped us grow as a team.

When I first looked at the PDP, I was thinking in screens. But users don’t buy screens, they buy certainty. Most people want three answers fast: Is this the right variant? Will it fit my build/setup? When will it arrive? Framing the work around those questions changed the decisions I made.

Because of time and tech limits, a full rebuild wasn’t smart, so we chose a token-led refactor instead. The wins showed up in small, practical ways.

A big challenge became a growth point for me was empathizing with engineering and prototyping the details so we shared the same language. Building that understanding took compromise and time, and it helped us grow as a team.

When I first looked at the PDP, I was thinking in screens. But users don’t buy screens, they buy certainty. Most people want three answers fast: Is this the right variant? Will it fit my build/setup? When will it arrive? Framing the work around those questions changed the decisions I made.

Because of time and tech limits, a full rebuild wasn’t smart, so we chose a token-led refactor instead. The wins showed up in small, practical ways.

A big challenge became a growth point for me was empathizing with engineering and prototyping the details so we shared the same language. Building that understanding took compromise and time, and it helped us grow as a team.

See more

See more

Check out more: HYTE Elastic Materials
Official website: HYTE

Check out more: HYTE Elastic Materials
Official website: HYTE

TOP

© 2020–2025 Designed by Sena Lim. Don’t steal, unless you're a raccoon.

© 2020–2025 Designed by Sena Lim. Don’t steal, unless you're a raccoon.

This site was built between naps and breakdowns.

This site was built between naps and breakdowns.