01 Home

02 ABOUT

03 WORKS

04 CONTACT

Back to Works

ASUS E-Commerce

The ASUS e-commerce optimization project aimed to make online shopping easier, more accessible, and enjoyable. The focus was on improving the product configuration flow, making customization transparent, accessible, and user-friendly.

ASUS E-Commerce

Product

Website, E-Commerce

My role

UI Designer

Timeline

Q4 2021 - Q4 2022

Collaboration

1 Design Manager, 1 UX Researcher, Product Team, Developers

Project Context

ASUS’s e-commerce site faced growing business demands, rising user expectations, and competitive digital benchmarks. Analytics, surveys, and feedback exposed issues that were directly impacting conversions and brand trust.

The redesign aimed to simplify the purchase journey, improve accessibility, and modernize the site’s look and feel while balancing business constraints and tight timelines.

Research & Discovery

We began with a UX audit of the existing site, supported by analytics, surveys, and usability testing. The findings revealed five major usability and accessibility gaps:

Insight - 1

Poor placement of action buttons

CTAs were subdued, buried, or visually weak, making it difficult for users to act at the right moment.

Insight - 1

Poor placement of action buttons

CTAs were subdued, buried, or visually weak, making it difficult for users to act at the right moment.

Insight - 1

Poor placement of action buttons

CTAs were subdued, buried, or visually weak, making it difficult for users to act at the right moment.

Problem

Before (Problems)

Low Engagement: Customers struggled to find what they needed, leading to frustration and site abandonment.
Poor Navigation: Confusing structure and menus made browsing difficult.
Lack of Transparency in Customization: Pricing and spec updates weren’t clear, causing hesitation and mistrust.

After (Goals)

Improve Usability: Simplify flows, clarify hierarchy, and make CTAs prominent.
Enhance Accessibility: Meet WCAG standards with better contrast, spacing, and interaction design.
Boost Engagement: Create a visually modern, intuitive experience to keep users exploring and converting.

Focus Area

While ASUS’s e-commerce site had multiple usability issues (navigation, accessibility, unclear CTAs), this case study focuses on a critical issue in the product configuration flow.

Customers felt uncertain about whether their choices were applied.
Pricing updates weren’t visible or consistent across devices.
The lack of transparency reduced trust, causing hesitation and abandoned purchases.

Focus Area

While ASUS’s e-commerce site had multiple usability issues (navigation, accessibility, unclear CTAs), this case study focuses on a critical issue in the product configuration flow.

Customers felt uncertain about whether their choices were applied.
Pricing updates weren’t visible or consistent across devices.
The lack of transparency reduced trust, causing hesitation and abandoned purchases.

Process: Tackling the Configuration Flow

Understanding User Needs:

Flexibility: Easy customization without confusion.
Transparency: Real-time pricing/spec updates.
Visibility: Always know current selections at a glance.

Design Exploration & Validation

Configuration functions

To address the lack of feedback in the configuration flow, I explored how to notify users of real-time price and spec updates when they selected different options. I ideated and prototyped five approaches chosen to cover a spectrum of visibility, continuity, and clarity.

We compared these prototypes through preference testing and A/B studies with users and stakeholders. The results showed that embedded notifications with distinct color and dynamic text were the most effective, as they kept updates visible at the point of action, reduced cognitive load, and provided immediate trust-building feedback across devices.

Five design approaches:

We proposed three layouts, testing each with stakeholders for user experience and technical performance.

Why Layout C?

Showcased a wider range of collaborations, offering diverse content.
Used a carousel gallery for a dynamic, user-friendly experience.
Delivered smoother animations and faster load times across devices.

Text-based notifications

Contextual messages placed directly next to the selected option.

Tooltips

Hover-based tooltips that reveal information when users interact with an option.

Within Color Indicators

Using color cues to indicate selection states, changes

Notification Bar

A fixed notification bar at the top of the page to inform users of updates.

Toast

Temporary, minimal pop-ups that appear near the bottom or side of the screen.

Text-based notifications

Contextual messages placed directly next to the selected option.

Tooltips

Hover-based tooltips that reveal information when users interact with an option.

Within Color Indicators

Using color cues to indicate selection states, changes

Notification Bar

A fixed notification bar at the top of the page to inform users of updates.

Toast

Temporary, minimal pop-ups that appear near the bottom or side of the screen.

Text-based notifications

Contextual messages placed directly next to the selected option.

Tooltips

Hover-based tooltips that reveal information when users interact with an option.

Within Color Indicators

Using color cues to indicate selection states, changes

Notification Bar

A fixed notification bar at the top of the page to inform users of updates.

Toast

Temporary, minimal pop-ups that appear near the bottom or side of the screen.

Final Design

On desktop, notifications are embedded directly within the configuration selector, giving users real-time, in-context updates on pricing and specs. On mobile and tablet, notifications are always visible with distinct backgrounds, ensuring critical information isn’t missed on smaller screens.

This design embodies two core UX principles:

Recognition over recall → users see changes instantly without relying on memory.
Visible status → selections and pricing updates remain on screen, building confidence and trust.

This design embodies two core UX principles:

Recognition over recall → users see changes instantly without relying on memory.
Visible status → selections and pricing updates remain on screen, building confidence and trust.

Design Rationale

We chose embedded, always-visible notifications because they balanced clarity, trust, and accessibility across devices. The main trade-offs were:

Screen space: Persistent notifications occupy more visual real estate, but testing confirmed the benefits outweighed the cost.
Development effort: Real-time updates required additional engineering work, but this investment was justified by the expected boost in usability and conversion.

We chose embedded, always-visible notifications because they balanced clarity, trust, and accessibility across devices. The main trade-offs were:

Screen space: Persistent notifications occupy more visual real estate, but testing confirmed the benefits outweighed the cost.
Development effort: Real-time updates required additional engineering work, but this investment was justified by the expected boost in usability and conversion.

Delivery & Hanfoff

To ensure smooth implementation, I delivered detailed Figma specs outlining states, behaviors, and edge cases. I also documented updates in the design system to make them reusable across other flows. During QA, I worked closely with developers to validate interactions and confirm accessibility compliance.

To ensure consistency and scalability, we developed a modular design system:

Core Styles: Defined typography, color palettes, and grid system aligned with ProArt’s brand identity.
Reusable Components: Built a flexible library of cards, buttons, carousels, and testimonial modules.
Scalability: Enabled rapid iteration and seamless integration across multiple pages.

Other Design Outcome

Beyond the configuration flow, I also contributed to improving other key areas of the e-commerce experience. These updates tackled related usability and engagement challenges and ensured the site worked as a cohesive whole:

Navigation & Content Hierarchy → Introduced a redesigned navigation bar and reorganized page hierarchy to make product discovery faster and more intuitive.
Marketing Features → Added event-focused elements like a countdown bar to promote time-sensitive campaigns and drive urgency.
Fixed Action Bar → Designed a persistent bottom bar highlighting the price and Buy button, improving visibility of primary actions and streamlining the checkout flow.
Protocards → Explored and tested multiple layout variations (e.g., product card configurations, Buy page layouts) to fit different shopping scenarios and optimize clarity.

Impact

The e-commerce revamp delivered measurable improvements across usability, accessibility, and scalability. The redesign not only increased user engagement, with clearer navigation and more interactive shopping features, but also set the foundation for future scalability by introducing reusable modules aligned with the design system, making feature iterations faster and more consistent.

To ensure consistency and scalability, we developed a modular design system:

Core Styles: Defined typography, color palettes, and grid system aligned with ProArt’s brand identity.
Reusable Components: Built a flexible library of cards, buttons, carousels, and testimonial modules.
Scalability: Enabled rapid iteration and seamless integration across multiple pages.

Product visibility improved

Direct purchases by users increased

Addressed UI accessibility issues

Product visibility improved

Direct purchases by users increased

Addressed UI accessibility issues

Reflection

I gained valuable lessons that will continue to shape how I approach future work:

Data-Driven Design → Research and analytics are essential for uncovering the right problems and guiding decisions that truly impact users.
Accessibility Matters → Designing for inclusivity not only broadens reach but also ensures a more equitable experience for every customer.
Design Systems → Building and maintaining scalable systems fosters consistency, speeds up iterations, and creates long-term efficiency for the entire team.

To ensure consistency and scalability, we developed a modular design system:

Core Styles: Defined typography, color palettes, and grid system aligned with ProArt’s brand identity.
Reusable Components: Built a flexible library of cards, buttons, carousels, and testimonial modules.
Scalability: Enabled rapid iteration and seamless integration across multiple pages.

Hi, let's connect.

Home

Work

Lab

About

Next up

Actian - AI for Observability

Contact

christyhsinyuyao@gmail.com

Next up

Actian - AI for Observability

Contact

christyhsinyuyao@gmail.com