Introduction
Founded in 2021, Chinese Student Union (CSU) is an American-based student organization of UCSB that aims to provide an encouraging and unified community for individuals interested in Chinese culture.
In this project, I aimed to design a website for the club that includes comprehensive information about the organization's events and people.
Ideation
Goal
My goal was to create a comprehensive website for Chinese Student Union, a cultural club on campus.
Target Audience
Students at UCSB
Ages 18-22 (mostly ages 18-19, targeting underclassmen)
Students looking to make friends within their cultures
Points
The website should include all necessary information about becoming a member, events, Meet Us (staff)
The website should be persuasive – emphasizing social and cultural aspects of the club to “sell” the club to underclassmen
Use of visuals and pictures
The website should adhere to a cultural theme – Chinese culture is so beautiful and vibrant and recognizable, must not overlook that
Red and yellow color theme with cultural icons
The website should include all necessary information about becoming a member, events, Meet Us (staff)
The website should be persuasive – emphasizing social and cultural aspects of the club to “sell” the club to underclassmen
Use of visuals and pictures
The website should adhere to a cultural theme – Chinese culture is so beautiful and vibrant and recognizable, must not overlook that
Red and yellow color theme with cultural icons
The website should include all necessary information about becoming a member, events, Meet Us (staff)
The website should be persuasive – emphasizing social and cultural aspects of the club to “sell” the club to underclassmen
Use of visuals and pictures
The website should adhere to a cultural theme – Chinese culture is so beautiful and vibrant and recognizable, must not overlook that
Red and yellow color theme with cultural icons
Branding
Branding
Branding
Design
Design
Design
To start planning my UI design, I created a user flow to track a potential user's movement through the site.
I started with some low-fidelity wireframes to just let my creativity and ideas flow through Figma.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Manage bookings
Manage your bookings easily with built-in booking widget.
Showcase your listings
Show the best parts of your locations with style.
Highlight 3
Manage your bookings easily with built-in booking widget.
Highlight 4
Show the best parts of your locations with style.
Home page
Readers are greeted with a carousel-style photo gallery, with a Chinese chess inspired background.
As the reader scrolls down, they find that week's schedule of events, a short "About Us" section, and a gallery of photos.
Photos and schedule are used to display the most important parts of the club -- the people and social connections. This serves as incentive to join.
Meet us
Group photos and individual staff photos are displayed. This introduces the reader to the real people behind the club and site!
Memory vault
An aesthetic gallery of photos from the events over the years, which highlights the social aspect of the club.
Calendar
A month's calendar of all events and links to more information, so readers can get an idea of events coming up and make room in their schedules.
Home page
Readers are greeted with a carousel-style photo gallery, with a Chinese chess inspired background.
As the reader scrolls down, they find that week's schedule of events, a short "About Us" section, and a gallery of photos.
Photos and schedule are used to display the most important parts of the club -- the people and social connections. This serves as incentive to join.Meet us
Group photos and individual staff photos are displayed. This introduces the reader to the real people behind the club and site!
Memory vault
An aesthetic gallery of photos from the events over the years, which highlights the social aspect of the club.
Calendar
A month's calendar of all events and links to more information, so readers can get an idea of events coming up and make room in their schedules.
Home page
Readers are greeted with a carousel-style photo gallery, with a Chinese chess inspired background.
As the reader scrolls down, they find that week's schedule of events, a short "About Us" section, and a gallery of photos.
Photos and schedule are used to display the most important parts of the club -- the people and social connections. This serves as incentive to join.Meet us
Group photos and individual staff photos are displayed. This introduces the reader to the real people behind the club and site!
Memory vault
An aesthetic gallery of photos from the events over the years, which highlights the social aspect of the club.
Calendar
A month's calendar of all events and links to more information, so readers can get an idea of events coming up and make room in their schedules.
Home page
Readers are greeted with a carousel-style photo gallery, with a Chinese chess inspired background.
As the reader scrolls down, they find that week's schedule of events, a short "About Us" section, and a gallery of photos.
Photos and schedule are used to display the most important parts of the club -- the people and social connections. This serves as incentive to join.Meet us
Group photos and individual staff photos are displayed. This introduces the reader to the real people behind the club and site!
Memory vault
An aesthetic gallery of photos from the events over the years, which highlights the social aspect of the club.
Calendar
A month's calendar of all events and links to more information, so readers can get an idea of events coming up and make room in their schedules.
Web Development
Web Development
Web Development
Using HTML, CSS, JavaScript, and React. Coding in progress...