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

As a part of the Georgia Tech User Experience Boot Camp, we were challenged by our instructor to create a responsive web design for an existing non-profit organization. In our search for the right organization that suited our group we came across Suwanee Performing Arts website . This organization appealed to us because we are all creatives and preferred to work with an organization that complimented our personalities. Their site was last updated in 2012 and we believed we could give them not only a fresh looking site, but also could provide a well organized and results driven website.

The Team

Our team is comprised of 3 members each providing a unique advantages. User Interface Designers Courtney, Asha and Cindy set out to recreate the Suwanee Performing Arts Organization’s (SPA) website keeping in mind these key features:

• 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

Because of the nature of this project, we set our timeline to implement each piece of the design process in order to redesign the structure as well as update the brand of our client’s website.

Timeline: 2 Week Sprint

Our Research

After creating Proto Personas, we discovered our users were categorized by 2 groups: the “Theater Goers” and the “Performers”. We carefully crafted interview questions for each of our users and set out to find answers. We interviews 3 Theater Goers and 2 Performers. The most important information we gathered from these interviews is shown in the Affinity Diagram below:

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

After researching our user groups we contacted the stake holders to get further feedback on the organization itself. We conducted an interview with the stake holders and took away some key points:

• 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

After speaking with our stake holders, we finalized our User Personas to reflect the workings of the organization. We have, Tim Conner, a father of two ballet dancer who volunteers and donates to SPA, and Cathy Johnson, a dancer who takes part in SPA’s ballet program.

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

As a way to goin insight about the common practices among Performing Arts Organization, we conducted a competitor analysis. We searched for both non profit and for profit arts organizations. We focus mainly on local organization as they would be direct “competitors” of SPA. We looked into both the competitive advantages and disadvantages. This was helpful because we were able to gain a sense of what feature were important for this particular type of website.

Ideation

When the research was complete, we began Ideation using all of the knowledge we had gained from both the stakeholders and outside sources. We used the I Like, I Wish, What If method. We then organized our ideas in to a Prioritization Matrix in order to figure out which ideas were most important to the user and also the most impactful to the organization.

The Site Structure

As a group, we used Card Sorting to determine the architecture of the visual design. Because of the site’s small nature, we were able to define a small enough number of categories and we decided not to include a dropdown in our final site design. After several rounds of card sorting with users and discussing site navigation with our stake holders, we organized a Site Map to layout the structure of the site.

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

We created mood boards in order to gather inspiration to match the feeling of emotions of the organization. The stake holders have a specific green brand color so we needed to keep that in mind when selecting our color palette. Other things we saved on our Mood Board included site designs that reflects a modern look that emitted a sense of quality, which is the most essential component our stake holders gave use to build their site around.

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

Based on the User Flow, we started sketching ideas to try different layouts, buttons and pages. After the rough version, we compiled all those ideas in to a Lo-Fi Wire frame using Adobe XD. Here are examples of the lo-fi wireframe we created:

Mid-Fi Wireframe and Testing

After completing the Lo-Fi Wireframe, we began using our style Tile to build out a full style guide. We worked together to create a home page with our desired style and created the style guide from there.

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 didn’t just deliver a site, we delivered an opportunity for the Suwanee Performing Arts organization to grow, both in their web presence and in their business as a whole. Because we made the site responsive, mobile users can now smoothly navigate the site without trouble. We also made the whole website easier to navigate and included key things the users expressed need in finding. Another area we aimed to improved was their email generation, volunteer and donation rates.

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.