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.
Product
Website, E-Commerce
My role
UI Designer
Timeline
Q4 2021 - Q4 2022
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.
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.




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.

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.
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.




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

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.


