Manhattan Developer Hub
SUMMARY
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 the 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.
ROLE: UX/UI Designer
TOOLS
User Research, Survey
Competitive Analysis
User Persona
Ideation, Definition
Site Map, User flow
Wireframe, High Fidelity Prototype
User Testing
Adobe XD
Photoshop
illustrator
InVision
Trello
Slack
Miro
TEAM
Our team is comprised of 3 members each providing unique advantages. I worked with UX/UI Designers Courtney and Asha to recreate the Suwanee Performing Arts Organization’s (SPA) website keeping in mind these key features:
-
Modern responsive website design reflecting the 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
PROCESS
Timeline: 2 Weeks
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 interview 3 Theater Goers and 2 Performers. The most important information we gathered from these interviews is shown in the Affinity Diagram below:
SURVEY
We also conducted surveys that showed the majority of the people visiting performing arts websites were audience members. We also collect data that showed us most people who visit the website will either be buying a ticket or searching for upcoming performances.
STAKEHOLDER
After researching our user groups we contacted the stakeholders to get further feedback on the organization itself. We conducted an interview with the stakeholders 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 the SPA as a part of their patron program
-
A desired feeling of the website: Excellence and Quality
USERS
After speaking with our stakeholders, we finalized our User Personas to reflect the workings of the organization. We have, Tim Conner, a father of two ballet dancers who volunteers and donates to SPA, and Cathy Johnson, a dancer who takes part in the SPA’s ballet program.
From this data and user information we were able to identify a Problem Statement:
We have observed that the Suwanee Performing Arts Center has limited information available about performances, tickets, upcoming shows, 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 gain insight into 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 the local organizations 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 features 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 into a Prioritization Matrix in order to figure out which ideas were most important to the user and also the most impactful to the organization.
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 stakeholders, we organized a Site Map to layout the structure of the site.
We then mapped out a User Journey Map, keeping in mind the touchpoints and emotions of our user, Cathy, as she navigated through the site.
VISUAL DESIGN
We created mood boards in order to gather inspiration to match the feeling of emotions of the organization. The stakeholders 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 reflect a modern look that emitted a sense of quality, which is the most essential component our stakeholders 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 stakeholders.
Typography: Palatino (a Serifed font) and Playball (a display font) were used because we were looking for a combination of clean and artistic. We choose to use a serifed font as our 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 built around it. Teal Blue was added as a calming element 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 stakeholders laid out exactly how they wanted the imagery to look within 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 on the website.
SKETCH & 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 into a Lo-Fi Wireframe using Adobe XD. Here are examples of the lo-fi wireframe we created:
MID-FI WIREFRAME & 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 your 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 feedback we got we made the following changes to our prototype:
-
White text with a 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 single webpage
-
Hero section could be smaller and place a call to action cards to an upper position
FINAL HI-FI PROTOTYPE
REFLECTIONS
The biggest takeaway is that we learned how to approach the stakeholder. We did rapid prototyping while discussing with our stakeholders to help bring their idea to life through clean design. User Testing was another key to the redesign of this project. The organization emits a feeling of excellence and quality, and we’ve learned a lot of UX/UI tips from their perspective. We’ve also learned that designing a website is more like showcasing the story of the organization.