Exploring Old Time Values & Rhythms

Sierra Pilcher
Jul 12, 2018 · 8 min read
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.

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

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

Existing Website

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 Courtesy of WebAIM at https://webaim.org/resources/contrastchecker/
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.

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.

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.

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.

Surveys

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.

Survey Findings

Interviews

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

Interview Findings

Findings In Summary

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

Planning

Affinity Diagram

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

Affinity Diagram

User Personas, Scenarios, & Stories

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

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.

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.

Journey Map:

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

Customer Journey Map for the Existing EVOS Website

Storyboard

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.

Feature Prioritization

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

Site Map

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.

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.

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.).

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

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.

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.

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.

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.

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.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade