ProArt Web Design Revamp
Redesigned ASUS ProArt’s website to elevate brand identity, improve accessibility, and streamline content hierarchy, resulting in a more engaging and usable experience for creative professionals.
Product
Website
My role
Lead UI Designer & Design System Architect
Timeline
Q3 2022 - Q2 2023
Collaboration
Design Manager, UX Researcher, Marketing Team, Brand Team, Product Team, Developers
About ProArt
ProArt is ASUS’s flagship line built for elite creatives—filmmakers, designers, animators, and creators who expect precision and world-class craft.
The website is the brand’s primary touchpoint, but the previous experience failed to reflect ProArt’s premium standards. Our challenge was to rebuild the website’s foundation, enhance clarity, improve accessibility, and create a scalable system supporting rapid product and campaign growth.
Project Context
Prior to the redesign, the ProArt website suffered from:
Inconsistent brand expression
Weak hierarchy and cluttered layouts
Low accessibility and contrast issues
Disconnected components built by different teams
Breakpoints that failed across devices
A CMS that limited layout flexibility
These issues not only impacted usability—they hindered the brand’s ability to launch new products, campaigns, and creator partnerships efficiently. This project required problem reframing, alignment across marketing/brand/engineering, and designing for a scalable, cross-functional future.
Research & Discovery
Reframing the Problem
ProArt’s website could not scale with the brand’s growth, slowing campaign launches and undermining premium brand perception.
Users found the information structure unclear, the visuals overwhelming, and accessibility insufficient for professional environments.
How might we create a highly flexible, accessible, and cohesive website system that reinforces brand identity and scales across new product lines and storytelling formats?
Prioritization Approach
I identified issues during discovery and prioritized them with PM + engineering using an impact vs. effort matrix.
Phase 1 – Highest Priority : These directly influence engagement, comprehension, and brand credibility.
Phase 2 – Secondary Priority : These required deeper engineering investment and were scheduled for later sprints.
This decision-making framework ensured we solved the right problems first.
Key Design Gaps
Beyond the high-level reframed problem, we analyzed the existing ProArt website to identify the specific usability, accessibility, and scalability gaps blocking both user goals and business needs. These issues shaped our Phase 1 priorities and guided the design execution strategy.
Design Execution
Design Highlights
As ProArt expanded its product lines, there was a growing need for new pages that could highlight collaborations with artists, studios, and institutions. The “What Pro Says” page is a central storytelling hub, transforming the website from a static catalog into a platform for authentic voices.
Design Prototype
We focused on two critical areas: the Hero section and the Gallery section. These sections worked to inspire users while boosting engagement, anchoring the storytelling approach of the page.
Testing & Validation
I proposed three layout directions (A, B, C), evaluating each with marketing, brand, engineering, and QA. Layout C was selected for its stronger discoverability, flexible carousel structure, and smoother performance on lower-end devices.
Design System
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.
This system reduced design inconsistencies by 60% and accelerated future page development.
Delivery
For design handoff, we prepared a comprehensive design document including mockup assets, responsive layout specifications, component behaviors, and key design considerations. Weekly sprints with designers, developers, and marketing ensured smooth alignment, while continuous stakeholder reviews minimized rework and kept both brand and technical goals on track.
Cross-Functional Collaboration
I partnered closely with PM, engineering, marketing, brand, and QA to move from ambiguity to clarity and ensure smooth implementation across teams.
Final Design
The final ProArt website unifies clarity, accessibility, and premium brand expression into a cohesive, scalable system. Key pages—from the homepage to product flows and storytelling modules—were redesigned using consistent hierarchy, accessible color rules, and a flexible component library. The final design represents a polished, future-ready foundation for ProArt’s growing creative ecosystem.
Impact
Quantitative
+25% increase in page engagement
80% reduction in accessibility issues
60% fewer UI inconsistencies through systemization
Qualitative
Stronger premium brand perception
Faster campaign and product launches
Improved creator storytelling and content discoverability
More stable performance across devices
