cornell measureless club website

Fall 2014
measureless
Site

For my Introduction to Web Design and Development class, my group's client was Cornell's Measureless, a Christian music group that aims to bring “the light of God to the Cornell community through acapella music.” Our goal was to create a responsive and visually pleasing website that catered to their needs and included PHP and Javascript elements.

Research

We interviewed our clients to establish their target audience and the focus of the website, which is mainly to attract members of the Cornell Christian community. Their target audience includes:


Personas

Our team discussed with the President and Outreach Director of Measureless as well as the club to find out more about the target audience and develop personas. The group maintains close relationships with its audience through personal friendships and also has an informed idea of other audience members through the Christian community network on and off-campus.

Brainstorming

Based on our research, we made a listed of our clients and audience’s needs and wants. For each one we brainstormed potential designs to accommodate the need as well as justifications.

needs and wants

Then we laid out the information architecture of the site and figured out what content we needed to obtain from out clients.

information

Sketches

I created preliminary sketches of the website look based on the client’s wish for and “clean and simple design”.

sketch sketch sketch

After receiving all of the content for the website, I generated wireframes to organize the information.

Home Page

wireframe

About Page

wireframe

Members Page

wireframe

Initial Website

Using HTML/CSS and PHP, we coded the first version of the website and covered all of the client's basic needs.

site site

Testing Round 1

Selecting Users
We asked our client of potential users to test on, and were referred to the following people, all of which are either Christian Cornell students and/or actively involved in the Christian community at Cornell. This matches our target audience exactly and was very straightforward as the client knew its target audience well enough.

Designing Tasks
We made designed tasks that were common things most users would do upon using the website. This involved looking for information, navigating the architecture, and watching videos of the a cappella group. We also designed tasks that would involve the users interpreting the design, colors, contrast, proximity, alignment, and repetition clues to aid them in completely each task.

Changes Made
We adjusted the alignment on the Get Involved page so that related information would be in better proximity to each other (users had a harder time before finding audition information).

We changed the logo to highlight on hover, so that it would be more obvious it was a link (users were having trouble spotting the Home page link). Additionally we used jQuery to make sure the logo bounced on hover and prompted the user to click on the link.

We adjusted the color scheme of the Media page after users mentioned trouble reading the text.

We changed font of member text so information is easier to read and more attractive on the Member information page.

We changed color of application email on Contact Page for contrast so interested applicants can find it easily. We also added an application form and PHP form such that application forms can be uploaded for auditioning purposes. The upload code works such that a file other than PDF/doc/docx cannot be uploaded to the server.

Testing Round 2

task

Colorblind Testing

Our site works for the color blind, based on our results from http://www.color-blindness.com/. Below you can see some of our results when testing with our About page and our Get Involved page. These two pages were picked because together they cover the entire website’s color scheme.

colorblindness test