Focus 01
Hero section
Story-led hero with creator proof and partner logos. The first impression that frames evaluation.
ASUS ProArt · Consumer Web
ProArt Global Website
I rebuilt ASUS ProArt's global site around how creators evaluate tools. Foundation work came first, then a creator-validation hub and a reusable design system.
ProArt Website- Product
- ASUS ProArt
- My role
- Lead UI Designer
- Timeline
- Nov 2022–May 2023
- Team
- DMURMK+3
TL;DR
Premium products. No clear path to choose.
I rebuilt ProArt's global site so creators could move from curiosity to a confident choice: decision-led product pages, a creator hub the old architecture couldn't support, and a component library marketing reused for later campaigns.
Page engagement
+25%
Creators spent more time on product pages once the decision structure was in place.
New page type
What Pro Says
I designed and tested a creator-validation hub that only became possible after the foundation was in place.
How it scales
Reusable DS
Campaign pages ship from shared components instead of one-off rebuilds.
Problem
The site showed products but didn't help people choose.
ProArt is the flagship creator line at ASUS, a company generating NT$500B+ in annual revenue across 70+ countries. It serves filmmakers, designers, and animators who expect precision in the tools they choose. The hardware earned that trust, but the site was organized around products, while creators arrived with a decision to make.
Research and stakeholder interviews revealed a consistent pattern: professional creators came to the site with evaluation questions, not browsing ones. The information existed in pieces. The structure to connect it didn't.
- Can I trust ProArt for professional creative work?
- Which product fits my creative workflow?
- Where can I go next to buy or explore?
Users had to interpret specs alone, compare across disconnected pages, and guess what mattered. At this price point, confusion means people leave without deciding.
Reframe
From website redesign to decision system.
Research confirmed the issue wasn't visual. The site had no layer for guiding evaluation decisions, and every local fix would break again without a shared foundation.
Before: Original ProArt site — product-led navigation with no evaluation path.. After: Redesigned ProArt site — story-led creator hub with decision-oriented structure..
My approach
What to solve first was itself a design decision.
Before designing screens, I mapped every gap against an impact × effort matrix with PM and engineering. Phase 1 had to hold Phase 2, not become a surface we'd rebuild in six months.
Design highlight
A page the old site couldn't support.
As creator partnerships grew, peer validation became essential. Creators trust other creators who already made the decision they're facing. The old architecture had no room for that story.
I designed "What Pro Says" as a dedicated storytelling hub where artists speak directly to people evaluating the same tools. This page only became possible because Phase 1 gave us a modular system that could hold a new page type.
Focus 02
Gallery section
Modular carousel explorations for partner and creator stories. Twelve layout patterns before narrowing.
Insights from testing
Stakeholders
Marketing, brand, and engineering needed a layout that could hold varied creator stories without bespoke rebuilds for each partnership.
Users
The carousel is interactive and includes detailed information, which works well to engage users.
Performance
Layout C performed smoothly across lower-end devices and was built for modular CMS extension as new partnerships came in.
What we fixed
Three changes that made evaluation possible.
01
Capability → proof → action
I adopted a Z-pattern across product pages. Capability leads, creator validation builds in the middle, product action comes last.
02
WCAG without losing brand
I aligned typography, palettes, and contrast rules with ProArt's identity, fixing failures that blocked use in varied professional environments.
03
Same evaluation flow, every device
I defined a responsive grid and component rules so the evaluation path holds on desktop, tablet, and mobile.
Design system
The foundation every page builds from.
I delivered core styles, reusable components, and engineering-ready specs so future pages could scale without recreating the same decision problems.
Typography, color palettes, and a responsive grid. The rules every future page starts from.
Final design
What shipped on asus.com.
Key pages rebuilt with consistent hierarchy, accessible color, and the shared component library. One coherent system across desktop, tablet, and mobile.
Impact
What changed after launch.
Two measurable outcomes from the shipped system.
/ 01
+0%
Page engagement
Creators spent more time on product pages once the decision structure was in place, measured against the pre-redesign baseline.
/ 02
0%
Accessibility issues resolved
WCAG-aligned contrast and type rules replaced failures that had blocked professional use across varied environments.
Reflection
When users can't choose, the problem is structure.
Looking back, the problem was never missing information. It was missing structure. Since this project I sequence foundation work before expansion pages, and I start from the decision people are trying to make rather than the interface.