Exploring Old Time Values & Rhythms

Image for post
Image for post
EVOS 2018

“…A sustainable festival that fosters the community of local old time musicians and brings generations together.” — Damian Ritchie, EVOS Organizer

The Brief

The East Vancouver Old Time Social (EVOS for short) is a sustainable festival and social that fosters the community of local old time musicians and bridges generations through old time values and rhythms. Since 2016, the festival includes concerts and old time dancing lead by experienced dancers and dance callers, music and dance workshops where participants can work on their skills with seasoned musicians and dancers, as well as open jam sessions where participants can create and play music with one another regardless of experience, skills, training, or instrument.

Image for post
Image for post
The Vision of EVOS

EVOS already had an existing website that my team and I would need to revamp. We needed to show users what EVOS was about and demonstrate the old time feeling and values that the festival hoped to spread.

The Team

Image for post
Image for post
The Team

On this project, the team was going to be comprised of only UX Designers, and so there was the added challenge of attempting the UI side of the project on our own. I was teamed up with Mara, Flo, and Nikki; three lively, talented designers. We set out to find the current users’ thoughts, likes, and frustrations about the existing website.

Research

At first glance, the colour scheme did not seem to reflect the old time vibe that EVOS was hoping to portray. The header was comprised of a dark blue background colour with grey text. Running the colours through an online colour contrast checker, we found that the combination failed to meet the Web Content Accessibility Guidelines (abbreviated as WCAG in the image below). To meet the AA guidelines, text colour contrast must be at least 4.5:1 for normal text and 3:1 for larger text. AAA guidelines require a colour contrast of 7:1 for normal text and 4.5:1. The current colour scheme came in at only 2.20:1, making it difficult for users to read.

Image for post
Image for post
Image Courtesy of WebAIM at https://webaim.org/resources/contrastchecker/
Image for post
Image for post
Header Size on the Homepage

The header, while unfixed, almost took up the entirety of every page on the website. The red line illustrates how much of each page was lost to the header.

Image for post
Image for post
2 Page PDF File on the Schedule Page

Under the header, the Schedule page consisted of a 2 page document in a pdf viewer. The amount of information squeezed into this document (festival history and values, locations, map, sponsors, organizers, performers, nearby restaurants, and the actual schedule itself) made it difficult to read.

Image for post
Image for post
Slow-Scrolling Gallery on the Media Page

Once past the header, The Media page contained images from the previous years’ festivals. Users had to navigate through a slow-scrolling image gallery in order to browse the images — a long, tedious and time consuming process for users.

Image for post
Image for post
Contact Form Tucked Into the Homepage

Another point of concern was that the only way users could contact the festival was through a form tucked into the homepage. Users had to scroll past the header and hero banner to see a form titled “Ask Us Anything.” Our concerned was that it could be missed by users.

We put out two surveys: one for music festival goers (potential users), and one to the EVOS performers and attendees. To better understand what aspects of the site we needed to highlight, we asked our potential users what made them want to attend a festival. We found that the main deciding factors in order or most to least importance are the performers, ticket price, and location.

Image for post
Image for post
Survey Findings

We interviewed music festival goers to further delve into what features make people want to attend festivals.

Image for post
Image for post
Interview Findings

In addition to the information above, we found that users had the following frustrations with he current website:

  • Users felt that the header was too large and took up too much room
  • Users did not really know what the festival was about (the website was not conveying the old-time feeling and values that they hoped to)
  • The embedded PDF viewer was difficult to use, with one user going as far as saying it, “…was impossible to read on mobile”
  • Users wanted a way to listen to the artists they are unfamiliar with to see if they would enjoy the type of music played at the festival
Image for post
Image for post
Image for post
Image for post
Quotes from an EVOS Performer and a Music Festival Goer

Planning

Using all the data we gathered, we put together an affinity diagram to visualize the needs and frustrations of our users.

Image for post
Image for post
Affinity Diagram

From the Affinity Diagram, we were able to develop two personas for our potential users:

Image for post
Image for post

Winston’s User Stories:

  • I want to attend an old-time musical social so that the local old-time music scene grows.
  • I want to jam with budding musicians so that I can share my experience and expertise.
Image for post
Image for post

Georgia’s User Stories:

  • I want to connect and jam with other old-time musicians so that I can better my musical skills.
  • I want to join a like-minded community so that I can share my passion for old-time music with others.

Below is a customer journey map of current users on the existing website.

Image for post
Image for post
Customer Journey Map for the Existing EVOS Website
Image for post
Image for post

We developed a storyboard to illustrate the use of our website. In this storyboard, a young woman is searching for an old time music festival to attend as her friends mostly attend pop music festivals. Upon finding the EVOS website, she learns about the banjo workshops offered during the festival and buys a ticket so she can attend and enjoy playing her banjo with other old-time and folk musicians.

Following the data our research provided us, we listed out the features that we needed to incorporate in our designs.

Image for post
Image for post

The last step before we started wire-framing was knowing how each page connected to one another. To see this visually, we created a sitemap.

Image for post
Image for post

Design

With all of our planning done, we moved onto wire-framing. Through our Design Studio sessions, we mapped out where key elements of our site should go and then further refined our ideas through discussion and user testing.

Image for post
Image for post
Mobile Paper Wireframes

In the mobile version of the schedule, we needed to condense a lot of information in a way that was convenient and legible for users. We thought drop downs for each day of the festival would be intuitive for users and decided to test them in our prototype. We also rearranged the information so that users could see the type of event (Kick-off Party), the venue (The Astoria), and the times of activities occurring (7:30 Doors open, etc.).

Image for post
Image for post

In the desktop version, we arranged the information in the same way, except each day was given a section of the page.

Image for post
Image for post

Usability Testing

Through usability testing, we were able to find elements of our site that we needed to alter in order to better meet our users’ needs.

Image for post
Image for post

One of the first changes to be made was in the header; when we asked users to find the schedule of workshops, users were unsure which page they should navigate to (schedule or workshops?). To mitigate confusion, we combined Schedule, Performers and Workshops into a sub menu under the Schedule tab. We also added the Volunteer page to the header, as one of the festival’s goals was to increase their number of volunteers so that the festival can continue to run in a sustainable manner.

Image for post
Image for post

The next change was made to the homepage. We realized that users wanted to see the list of performers before anything else, and so we moved our performers list to the top of the page instead of under the festival dates/times and ticket prices.

Image for post
Image for post

The next change was made to the schedule: we moved Friday beside Thursday, and Saturday to the bottom of the page. Since users read left to right, this improved the flow of the page.

Image for post
Image for post

As users wanted a way to listen to the performers’ styles of music, we added a youtube button onto each performer’s information card so that users could navigate to each performer’s channel and listen to their music in one click.

Image for post
Image for post

The last change made was to the contact form. Users found that the FAQ section was not needed, so we took it out and used the space to improve the layout of our contact form.

Prototype

Finally, click below to see our prototypes.

Click here for the desktop site.

Click here for the mobile site.

Summary

Future iterations of the app could include the following features:

  • Add to calendar button
  • Email notifications when tickets become available
  • Countdown to next year’s festival

In three weeks, my team and I were able to produce a website that users found intuitive and easy to navigate. We improved the functionality of the existing website and helped it to reflect the values of old-time music and dance through iterations of design.

Before you go

Clap 👏 👏 👏 to support a budding designer
Comment 💬 with your questions, concerns, observations, and reflections
Follow me to stay up to date on my articles

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store