This project centers around a website for a new play in development. I entered this project as the primary stakeholder (You’ll notice I’m the playwright.) As the lead producer of a non-profit theatrical production, my goals were to build out the web presence of the piece in order to lend credibility to the project for potential donors.
Our USERS:
We’re looking at Users in two main categories:
Donors: Early stages of development will see traffic from potential financial sponsors. We want to identify the value loop that will help them confidently donate funds to the project.
Our Donor Persona is Micah. He’s in his early 50s, with expendable income and and interest in funding local organizations. He uses current technology, but not comprehensively. He’s looking for a very painless donation process, which he will undertake either from his smartphone at lunch, or from his computer in his home office. He will interact with our website from the link sent in an email correspondence. The link will send him directly to the donation page for the show. In choosing his donation amount, he may want more information - at which point, he’ll seek the about or support page.
Audience Members: Once the play reaches a certain stage of development, the site will need to incorporate elements that will support audience decisions to come and see the show or otherwise engage with performances.
Our Audience Persona is Jess. She’s in her early 20s, friends with a primary stakeholder, and will purchase a ticket from a third-party ticket site through the Project Facebook Page. She will visit the site if/when a crowdfunding campaign is launched, in order to look through the options available to her. While reading the giving levels, she’ll notice that she is able to purchase some of the donor gifts at the online store. She donates at her intended giving level, and then shares the crowfunding campaign on her Facebook page.
Our Audience Persona is Ava. She is in her early 30s, a working professional looking for entertainment for herself and friends on a given weekend. They’re discussing it over brunch, and she pulls up a local events calendar on her phone. She’s interested in the show’s poster and clicks the follow through link, which drops her on the Events Page of the Ash Spitter website. She will want a trailer, a description, run time, and ticket price. She will want reviews to tell her she’s making a good choice in seeing the production. Once she and her friends have decided this show looks awesome, the purchase tickets choice will want to be painless. Putting in personal info on a site she’ll only use once deters her from buying tickets, but the Stakeholders thought of that and are selling their tickets through eventbrite, with which she already has an account.
OUR Goals:
Our first goal with the website is to encourage User participation in fundraising. It became clear that the majority of people who were going to visit this website at the funding stage of the project would be individuals or companies with whom the project stakeholders had personal or professional connections. This means that some of the labor of pitching the project will have been done in person. So our main task is to make the final steps of donating as painless as possible.
Content needs included: budget breakdown. Team Bios. Project description. Company mission. And supporting evidence that we can make the product happen and that it will be worth the investment. Since this is a performance, we’re looking at media - videos and photos.
The second major phase of the site would be when interactive elements for the community would become available: fundraising events, readings, and performances, etc. We’d be looking at integrating ticket sales in the future, as well as a store for merchandise.
Our constraints:
A site that non-developer individuals could edit and add to - without ruining the structure.
no money to invest in the website until funding had been secured, for which a website is useful (lil catch-22 right there)
no solid product to feature.
I had the good fortune of knowing a graphic designer, Allie Bittner from Kiss Creative, who was willing to lend her considerable skills to the project out of goodwill. I wanted to make the best of it and value her time, so we went with a website builder and theme, powered by Squarespace. Why? Squarespace was familiar and affordable, and I’m wearing many hats on this project.
FEATURES!
Features for the first stage are relatively simple - no logins or stores yet. We’ll break it down in to two tiers: Funding stage and Production stage.
Features for the Funding Stage:
Home Page: High-Res Poster and relevant links
About Page: Mission Statement. Team Bios and Headshots.
Events Page: Features of Past Events.
Support Page: Budget Breakdown. Giving Levels. Secure link to Donation site.
Contact Form
Social Media Integrations: Facebook, Instagram
Merchandise Page: Nothing yet, but let’s whet their appetites.
Development Page: Features of major stages of development.
Newsletter Sign Up
Features for Production Stage:
Home Page: Promo Video(s)
Development Page:
Events Page: Ticketing for Run
Support Page: Major Donors/Supporters features
Merchandise Page: Build out an online store using Shopify or a Print On Demand Site
User Login
Secure Payment Systems
Receipt Notification
Shipping tracking
SKETCHES
Now, I’m not saying these are pretty, or to scale, in any way. But we start where we start. these sketches has clarified the primary and secondary nav, and the overall simplicity of the site itself…for now.
From here, we move on to wireframing for the first Stage: The Fundraising Stage! We’re wireframing for a specific theme on Squarespace. The template is: Tremont.
I love this theme. It’s image forward - which works well with the highly visual nature of theater. It offers drama and simplicity. All around, easy to adapt and update.
Wireframing
The main concern here is working with Progressive Disclosure. Some people will want more info before hitting that Donate Button, and some will want to go right to our donation page.
Since we’re working without a dedicated developer, we’re trading features for ease of use on the backend. We chose to work off a template for that reason. As such, we’ll go from wireframing in Invision Studio to prototyping in the template itself.
The Website
We’re making a big jump here. I trust you can make the journey with me. This first version of the site was built alongside the content for it, which is a less than ideal situation.
Working within the theme, we learned additional limitations and quirks that took some adapting to, in order to ensure that a User could feasibly reach any part of the site from any page.