Arts & entertainment calendar website

Screen Shot 2015-09-27 at 2.10.30 PM.png

Objective:
Develop an online events guide for the performing arts community.

Key challenges:

  1. Organize a wide variety of information into an easy-to-navigate website
  2. Design a custom interactive database for hotels and events
  3. Manage a complex project, from planning with community leaders to photo shoot to testing to launch

The process:

  1. Information gathering & functional requirements
  2. Content strategy & information architecture
  3. Wireframes & prototype
  4. Visual design and building backend functionality
  5. Widget designs
  6. Test database functionality and cross-browser compatibility
  7. Train users
  8. Launch party to kick off website

My roles:
Information architect, UI designer, art director, project manager


functionality requirements.jpg

1. Information gathering & functional requirements

The initial request
The client originally asked for an annual brochure that would serve as an events guide and schedule to all performances in the area.

I pointed out that this format would be too limiting. It had more problems than I can list here, including:

  • No ability for additions/changes to the schedule after printing
  • Required planning a year in advance, through some performance groups only plan days or weeks in advance
  • No way for users to view the schedule from home, narrow their options when browsing, or sign up for updates
  • No guarantee funding would be available for next year

The solution
I suggested we develop an interactive website that would allow each performance group and each venue to post all their events, with no middle man - and no printing or distribution costs. 

I used examples of other municipalities' performing arts calendars as examples, and convinced the group to take their idea online.

I began interviews with representatives from the arts community and online research to determine the functionality needed. A summary of my notes is shown to the right.

Next, my task was to show (rather than tell) them the possibilities.

 I researched examples of well-functioning user interface designs for "widgets" such as mini calendars, info feeds, event detail pages, and more. Of course, their visual designs left some room for improvement!

I researched examples of well-functioning user interface designs for "widgets" such as mini calendars, info feeds, event detail pages, and more. Of course, their visual designs left some room for improvement!

 My online research turned up calendars that had the functionality we needed, but lacked the design sensibility we wanted.

My online research turned up calendars that had the functionality we needed, but lacked the design sensibility we wanted.


2. Content strategy & information architecture

Below is the visualization of the information architecture I pitched to the group. They agreed - a website was the best solution.


cc91d51d3daeec1b32fb67daa240e270.jpg

3. Wireframes & prototype

The website is structured similar to a social network. Every page is dynamically generated from a database based on user input.

  • Profile pages are created by the database for performance groups and venues, and each profile page features a calendar.
  • Category pages display a selection of excerpts of the profile pages with a category like music, and a calendar for that category.
  • Event pages display the information for each performance, and this information is also used in the dynamically-generated calendars.

An early draft of the visual design:

prototype.jpg

4. Visual design and building backend functionality

We used the wireframes as paper prototypes for testing and feedback, tweaking where necessary. Our main focus was the calendar.

We made access to the calendar easy from several entry points:

  • The mini calendar in the top right of every page. When the user hovers over it, it expands to show the selected day's events.
  • All pages of the website -- category page, profile pages, and venue pages -- feature a dynamically generated calendar.
  • The master calendar page allows users to filter events while searching.
    Above: When a user hovers over a date, it expands to show the day's events.

 

Above: When a user hovers over a date, it expands to show the day's events.

    Above: The master calendar allows users to search and filter events while browsing.

 

Above: The master calendar allows users to search and filter events while browsing.

category page.png
    I made forms in Wufoo to demonstrate the intended functionality to the developer.

 

I made forms in Wufoo to demonstrate the intended functionality to the developer.


5. Train users

Our custom database required custom training and documentation to ensure users could function independently without much support.

I held a session at our agency's offices to go through the functionality of creating an account, completing a profile, and adding events to the calendar. I also went over the rules and guidelines to prevent abuse of the system.

To the right is a help document that was provided after training.


 Invitation design for the launch party and live demo.

Invitation design for the launch party and live demo.

6. Launch party and live demo

We held a launch party and invited the entire Asheville performing arts community.

On stage at a large auditorium, I paged through the website and explained the functionality in order to generate excitement and reduce any intimidation around using a new system.

The website, launched in 2009, is still online and in use today. Check it out! www.livewireasheville.com

Although it could certainly use updates, especially adding mobile responsiveness and removing the Flash animations, its longevity as a desktop site is a testament to the quality of planning, design and testing that went into it.

The fact that many venues continue to take the time to upload information about their events using the technology developed in 2009 means that good user experience design is a worthwhile investment that will stand the test of time.

Due to lack of funding, it has not been updated, and that's okay!
(I'm glad we didn't go with the brochure idea.)