01 Home

02 ABOUT

03 WORKS

04 CONTACT

Back to Works

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.

ProArt Website

Product

Website

My role

Lead UI Designer & Design System Architect

Timeline

Q3 2022 - Q2 2023

About ProArt

ProArt by ASUS is targeted at elite creatives — designers, video artists, content creators — who expect elegance, sophistication, technical excellence.

Revamp a cutting-edge website for ASUS's ProArt brand, adeptly encapsulating the brand's ethos and sentiment through an aesthetically refined visual interface, thereby enriching the overall web user experience.

Project Context

The existing ProArt website suffered from critical usability and brand identity issues that were undermining the company's position in the creative professional market. Users struggled with poor visual hierarchy, inconsistent brand representation, and accessibility barriers that excluded potential customers.

As ProArt expanded its product lines, the website needed to scale and support new categories. Through stakeholder interviews, competitive reviews, and usability testing, we identified both user pain points and business challenges.

Research & Discovery

Problem

Pain points & key findings

Insufficient color contrast

Low accessibility, especially for professionals working in varied environments.

Weak visual hierarchy

Users struggled to identify important content; pages felt cluttered and overwhelming.

Dynamic responsiveness

Layouts often broke or felt clunky on mobile and tablet, frustrating users.

New product lines, new pages

The website needed a scalable system that could easily expand to support future ProArt offerings without compromising usability.

Solution

The redesign addressed these pain points with a scalable design system that improved clarity, accessibility, responsiveness, and flexibility.

Visual hierarchy

We redesigned the website using a Z-pattern layout that naturally guides users’ attention from key headlines through supporting content and into calls-to-action. Establishing a clear text hierarchy through typography levels, spacing, and grouping improved readability and allowed users to scan and compare information more easily.

02 Improving Color & Accessibility

03 Responsive Design

Visual hierarchy

Improving Color & Accessibility

We developed a new color palette that met WCAG AA standards, ensuring sufficient contrast between text and background. By applying consistent color rules across the entire UI, we enhanced readability while reinforcing ProArt’s premium brand presence.

Responsive Design

We adopted a mobile-first approach and built a fluid grid system with clear breakpoints. This ensured the design scaled smoothly from small screens to larger displays, delivering a consistent and dynamic user experience across devices.

Visual hierarchy

Improving Color & Accessibility

Responsive Design

Visual hierarchy

Improving Color & Accessibility

Responsive Design

Design Highlights

“What Pro Says” Page

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

Hero & Gallery Section

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

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.

Insights

Stakeholders’ Perspective

"This design offer more discoverability and highlight a broader range of collaborations."

Product Marketing

Stakeholders’ Perspective

"This design offer more discoverability and highlight a broader range of collaborations."

Product Marketing

Stakeholders’ Perspective

"This design offer more discoverability and highlight a broader range of collaborations."

Product Marketing

Stakeholders’ Perspective

"This design offer more discoverability and highlight a broader range of collaborations."

Product Marketing

Users’ Perspective

"The carousel is interactive and includes detailed information, which works well to engage users."

Our TA

Users’ Perspective

"The carousel is interactive and includes detailed information, which works well to engage users."

Our TA

Users’ Perspective

"The carousel is interactive and includes detailed information, which works well to engage users."

Our TA

Users’ Perspective

"The carousel is interactive and includes detailed information, which works well to engage users."

Our TA

Performance Testing

"Animations need to be smooth and responsive across all devices for an optimal user experience."

Quality Testing Team

Performance Testing

"Animations need to be smooth and responsive across all devices for an optimal user experience."

Quality Testing Team

Performance Testing

"Animations need to be smooth and responsive across all devices for an optimal user experience."

Quality Testing Team

Performance Testing

"Animations need to be smooth and responsive across all devices for an optimal user experience."

Quality Testing Team

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.

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.

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.

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.

Impact

The redesign improved clarity, accessibility, and scalability for ProArt’s growing product ecosystem.

Enhanced user experience by making information easier to scan and content more engaging.
Increased brand trust by integrating authentic testimonials into the site experience.
Provided a future-proof framework that supports new product lines, campaigns, and collaborations.

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.

Let's get in touch

christyy@andrew.cmu.edu

Let's get in touch

christyy@andrew.cmu.edu

Let's get in touch

christyy@andrew.cmu.edu

Let's get in touch

hi@andrew.com

Channels

Threads

YouTube