top of page
Desktop Mockup 04 (3).jpg


  • Defining the Design System

  • Information Architecture

  • High-Fi prototyping

Building a Design System
Designing an Interactive System to Showcase Programs and Activities Effectively

Potential Users

Crucial role in communicating with parents, students, and community members (Residents of the local community interested in participating or attending public events and exhibitions!

Problem Statement:

  • The current design fails to ignite curiosity and foster deeper engagement with the school's programs and resources,

  • The design of the website is insufficient, leading to challenges for students and parents in navigating directly to the relevant pages.


Business Goals:

  • Enhance Content Presentation: Optimizing content presentation within the design system to make it more engaging and visually appealing, sparking curiosity and interest,

  • Incorporate Interactive Features: Adding interactive features such as multimedia elements, dynamic content, and engaging visuals to create a more immersive and informative experience,

  • Gather and Integrate User Feedback: Continuously gather feedback from users to identify pain points and preferences, and incorporate this feedback into ongoing design improvements.


Over the past three years, CCSA school has received substantial feedback on the usability and user-friendliness of its website, particularly from parents and students. The following are frequently asked questions from various users regarding navigation and accessing information:​​

How can I find the schedule of each course?

Where can I see the tuition fee for each program?

How can I find the courses related to a specific age?

Where can I see the tuition fee for each program?

What are the main material for each course that need to be provided before attending courses?

Why I can't figure out which course has been designed for which type of program (Online/In-studio)?

Is there any page to discover more about the experience of previous students and achievements?

Competitive Analysis:

Employed competitive analysis to evaluate and compare the website features, usability, and design system against those of similar educational institutions. This process helped to identify industry standards, best practices, and areas where the website could improve to better meet user needs.


Design System:

In this design, I explored the process of building a design system for the Art School website. The goal was to create a cohesive and intuitive user experience that would address existing usability issues and better showcase the school's diverse programs and activities.


  • Consistency: Establish a unified look and feel across the entire website

  • Usability: Improve navigation and accessibility to make the site user-friendly for students, and parents

  • Engagement: Enhance the visual appeal and interactivity to spark curiosity and maintain user interest

Color Palette

Frame 1000001914.jpg


Frame 1000001915.jpg







Information Architecture (New design)

CCSA User flow (3).jpg

Final Design

Home Page

Program page

bottom of page