SanWu Drama Club

Mobile & Desktop official website design for Chinese Drama Club in University of California, San Diego.

ezgif.com-gif-maker (9).gif
 
ezgif.com-gif-maker (10).gif

Overview

 

Team size: 4

My role: researcher, sketching, prototyping, visual design

Tool used: Figma

Duration: 2 months


 

About SanWu

SanWu Drama Club, also known as Chinese Drama Club(CDC), is a student organization at UCSD founded in 2017. They have several great shows on campus in the past two years with an audience size of 200. Each quarter, they organize drama related activities and present their latest drama. They would like to have an official website to showcase their previous shows and attract more people to join them. My team cooperated with CDC and designed both desktop and mobile web pages for the organization.

 

Research

Needs of the Stakeholder

To ensure our design fulfill our client’s needs, we arranged an in-depth talk with CDC’s president and marketing committee chair. From the talk, we concluded their major requirements as follows:

Group 164.png
 

Needs of the Potential Customers

After analyzing the needs of the stakeholder, we narrowed down the potential customers of the website into three categories:

Core Member of CDC

Passionate Theater Audience

Potential New Member of CDC

We conducted semi-structured interviews with 9 volunteers in total, 3 for each category, analyzed their needs and expectation of the website using affinity modeling and built 3 personas to assist with design:

Frame 1.png
Frame 3 (9).png
Frame 4.png
 

Competitive Analysis

To learn the market trends and to get inspiration for our design, we researched on and analyzed 2 Chinese organizations’ official sites:

Group 204.png

 And 3 drama related organizations’ official sites:

Group 205.png

We analyzed them in five aspects including Branding, Functionality, Content, Site Architecture, and Design.

image 23.png

And learned from them:

Group 211.png
 

Bottom Lines

 Based on our research, we concluded 3 bottom lines for our design:

  • Potential newcomers can learn about the club as quick as possible

  • Passionate audience can get the information about the club’s latest show as quick as possible

  • Core members can get clear and quick access to their information

 

Design

System Flow

Screen Shot 2020-11-22 at 15.53.58.png

 

 

Sketches & Low-Fidelity Prototype

Sketches:

Group 166.png

Low-Fidelity Prototype:

Group 167 (1).png
 

How We Meet Our Bottom Lines

Potential newcomers can learn about the club as quick as possible:

 
Group 171.png
 

Passionate audience can get the information about club’s latest show as quick as possible

 
Group 171 (1).png
 

Core members can get clear and quick access to their information

 
Group 172 (2).png
 

Usability Test

 To find out what part of our design worked and what didn’t, we performed on-site speak aloud test with 4 potential users.

 

Key Findings:

3 out of 4 subjects reports there is too much content on each page which makes them confusing,

2 out of 4 subjects reports they don’t know the purpose of the site only looking at the landing page,

2 out of 4 subjects make wrong predictions when we ask them to predict the contents of a page from its label in the hamburger menu.

 

How did we improve:

  • It might be better to reduce the word amount of a page and to distinguish the text size to highlight the text hierarchy.

Group 203 (1).png
 
  • Making photos swipe left and right can reduce the congestion of the interface and allow users to freely control which photos and the number of photos they want to browse.

 
Group 204 (1).png
 
  • The purpose of the club should be shown more straightforwardly on the homepage, putting a video about dramas by the club might be helpful.

 
Group 206.png
 
  • Changing the word choice for the hamburger menu will make our users understand the contents in each page better, the word should be chosen on the bases that implying all possible contents of the page.

 
Group 207.png
 

Final Design

 

Reflection

This was the first time I do a research & design project with the inclusion of both a stakeholder and customers. The experience was new to me because often time there were conflicts between the need of users and the requirement of the stakeholder, e.g. the stakeholder wants to show its sponsors in a more visible position, while most customers want to have the interface as concise as possible. Having the involvement of the stakeholder throughout the research and design phase really helped us to make sure what is the bottom line of the stakeholder and what is the biggest benefit I can get for the customers, which made our design more reasonable to both the stakeholder and the customers.

 

Feature Highlights

ezgif.com-gif-maker (9).gif

Quick access to featured events and shows

 

Clear timeline with posters and introduction to quickly learn about the club

ezgif.com-gif-maker (11).gif
 
ezgif.com-gif-maker (12).gif

Concise and clear documentation for each event

 

Well organized hierarchy with detailed information for each member

ezgif.com-gif-maker (13).gif
 
ezgif.com-gif-maker (14).gif

Descriptions of each position and easy to apply

Previous
Previous

ShangJing Website Redesign (UI/UX Design)

Next
Next

WMWS (Game Production)