Cornell Eastern Music Ensemble

The design process of a client based website. All the code for this website can be accessed here: Code

Website

Summary 概括

The Cornell Eastern Music Ensemble (CEME) is an ensemble at Cornell that aims to promote Asian culture through Eastern music and repertoire through performances, cultural events, and beginner instrument workshops.

The Problem 问题

The Cornell Eastern Music Ensemble was missing a Website as a source to attract potential members to apply to CEME.

Previously CEME had their own website made by a former member on WebFlow, but the member graduated and the website plus its contents were lost. So we had to make a website completely from scratch.

Through Client Talks the following features were requested.

The Process 过程

The Goals 目标

We started by building questions we could use to conduct User Research on the Cornell Student Body, making sure the questions where on topic but not too specific to allow the interviewees to give many different responses.

Doing an analysis on the answers collected from the User Research we decided on the following goals for the website.

The Audience 观众

After settling on our goals, we discussed who we were going to cater the website to. We agreed on the audience being people who are searching for information about the CEME club specifically (trying to gauge the vibes, style, performances or audition information) or searching for organizations that fit their taste of music in Eastern/Asian cultural music and instruments.

Design Exploration 设计探索

To get inspiration we explored websites that were related to the Cornell Eastern Music Ensemble in some way, the three websites we ended up using for reference were:

All these websites featured very commonly used design patterns, such as top navigation bars, collapsible hamburger menus, image carousels, etc...

And they all had a unique look or feel that allowed one to “feel” the group the website was made for.

These 3 websites were great inspiration for the CEME website.

Content Organization 内容组织

Now we had to figure out how many pages we wanted the website to have, and what the contents of each would be.

We had the following pieces of content and we had to sort them into pages.

We iterated on different pages we could form with this content 3 times, and we settled with the following.

Visual Theme 视觉主题

Once we settled on our content it was time to start making a brand out of CEME.
We thought of 3 themes that could make CEME stand out as it’s own brand.

We selected Theme 1: Modern Chinese Culture.
These are some of the features we developed for the theme:

• Colors: minimalistic colors of black and white and lighter colors (beige, paper-like pastel tones), one key bright color as a point color for the website
• Shapes: Simple square/rectangle shapes with sharp borders that give a simple, chill style that fits the cultural style
• Imagery: Chinese calligraphy, symbols, with a watercolor style, watercolor images in the background
• Typography: Watercolor calligraphy style fonts for headers or titles, more simple straight minimalistic fonts for longer text

We chose this theme provides a good insight into what the club’s style aims to be like, which is good for the audience in that they can have a general idea of what the club will be like at first glance without having to delve too deep.

Page Planning 页面规划

The four of us designers took a page of the website to layout.

The page I worked on was the home page.

Design Iterations 设计迭代

We first laid out the correct structure using HTML and CSS, and then started styling it. The following is the home page using the first design iteration.

All the pages had the same beige/brown theme, but we felt dissatisfied with the overall look of the site at this point and took notes of changes we wanted seen on the next iteration.
Some changes were to make the header larger, to make the carousel arrows inside the image, to add Chinese characters, and to change the color scheme.

All of these changes were implemented in our next and final design Iteration.

Final Iteration 最终迭代

Takeaways 要点

This project really gave me insight into working with a team, everybody had expectation which allowed everyone to work very efficiently since nobody wanted to drag the team down. Iterating on everyone’s ideas was a big part of this project which lead to the consensus best result for the website.

Apart from that it showed me the true importance of User Testing and finding an audience. Had we not done those things, the website would be broader and would lose its focus.