Responsive Web Design — Suwanee Performing Arts

Suwanee Performing Arts is a non-profit organization located in the greater Atlanta Area. Their program offers young dancers, singers and performers opportunities to grow as artists in a professional environment.

The Preface

The Team

  • Modern responsive website design reflecting SPA’s style
  • Showcase the SPA organization and show people how they can get involved by donating, volunteering, attending performances
  • Narrate the organization’s through their web presence

The Design Process

Timeline: 2 Week Sprint

Our Research

We also conducted surveys that showed the majority of the people visiting performing arts websites were audience members. We also collected data showing. We also collected data that showed us that most people who visit the website will either be buying a ticket or searching for up coming performances.

The Stake Holders

  • Volunteers are mostly coming from parents of performers
  • Donations typically come from parents, friends, or family member of performers
  • Local businesses can partner with SPA as a part of their patron program
  • Desired feeling of the website: Excellence and Quality

The Users

From this data and user information we were able to identify an Problem Statement:

We have observed that the Suwanee Performing Arts Center has limited information available about performances, tickets, upcoming show, volunteer opportunities and scholarships. How might we help in arranging the information and the organization of their site so that users can easily access all the information they need and also, promote donations and ticket purchases and showcase excellence and quality.

Competitive Analysis

Ideation

The Site Structure

We then mapped out a User Journey Map, keeping in mind the touch points and emotions of our user, Cathy, as she navigated through the site.

The Visual Design

Using a Style Tile, we collected all of the visual data based on the general feeling of the site, user data, and data from the stake holders.

Typography: Palatino (a Serifed font)and Playball (a display font) were used because we were looking for combination of clean and artistic. We choose to use a serifed font as out main body text to provoke a feeling of excellence without looking too geometric.

Colors: a Limey Green is the primary color of the Suwanee Performing Arts Organization so the rest of the color palette was build around it. Teal Blue was added as a calming elements and to cool off the stark green . Also, a reddish Orange was used to compliment the cooler colors. All of this is tied together by the darkest Black, representing the dark stage of the performances.

Imagery: Our stake holders laid out exactly how they wanted the imagery to look with in the website. They gave us the words “Excellence” and “Quality” in order to build their website so the imagery needed to reflect. We only choose the best and most correct (referring to dancers and performers techniques) images to include in the website.

Sketches and Lo-Fi Wireframe

Mid-Fi Wireframe and Testing

A/B Testing: We chose to test two different features with A/B testing. The Hero’s call to action and the navigation bar. We slightly changed each feature and ran a few user tests to see which of the designs were most effective. Our notes are below:

  • Donation Button more effective than email generation due to the simplicity of a button opposed to a bar to type in you email. Also, the main focus of the organization is to collect donations and with an obvious button, more people clicked donate.
  • Wording for about page, “Our Story” was more effective than “ About Us”. More people Clicked “story” as opposed to a general “about” button.
  • Putting “Our Story” First created a better flow that putting it at the end.

Other User Tests on Mid-Fi: We tested our prototype with both users and our stakeholders. Based on the feed back we got we made the following changes to our prototype:

  • White text with green button was not visible enough
  • There are too many places to click on events
  • The navigation is not highlighted
  • Smoother User Experience = Take User on A Journey
  • There must be no dead ends on every webpage
  • Hero section could be smaller and place call to action cards to a upper position

Final Prototype

Reflections

We learned how to approach the stakeholder. We did rapid prototyping while discussing with our stakeholder to help bring their idea to life through clean design. Organization emits a feeling of excellence and quality, and we’ve learned a lot UI/UX tips from their perspective. We’ve also learn that designing a website is more like showcasing the story of the organization.

Working with SPA we an amazing experience and they provide an amazing service to the community. Their organization emits a feeling of excellence and quality. Now, so does their website.

I’m a multidisciplinary designer with experience in UX design, UI design, traditional graphic design, and video production.