Becoming Vancouver’s #1 Festival Hub — Indian Summer Festival — A UX case Study
Indian Summer Festival — is a contemporary multi-arts festival that takes place over a ten days every July in Vancouver, Canada. Named as #1 of the five best Canadian Festivals “worth planning your summer travels around” by Westjet Magazine, the festival presents a combination of free and ticketed events, including music, ideas(writers & thinkers), visual art and public engagement. From novelist to Grammy award-winning musicians, international visionaries to oral storytellers, Indian Summer Festival has presented emerging artists as well as Nobel,Booker, Grammy and Oscar prize nominees on its stages.
— Julia Prezotto (Digital Content Specialist)
Case Brief
Vision of Indian Summer Festival
The vision is for an inclusive, diverse and culturally-rich society. Our mandate is to offer transformative arts experiences that centre and normalize cultural diversity. Our byline ‘Where Worlds Meet’, underlines our unyielding commitment to a pluralistic vision of the world and to nurturing a truly diverse audience. We believe that arts events like ours have multiple critical roles in creating a robust societal fabric, and in combating prejudice and racism. Arts events, especially those that are discursive in nature, have an important educational role, providing as they do, accessible entry points into complex subjects. At the heart of democratic values is a commitment to genuine dialogue and inclusion, as well as a willingness to see the diversity of Canada as a distinct advantage to build upon rather than an obstacle to overcome. Our intention with this project is to produce multicultural/inter-cultural arts events with a sharing and celebratory approach, but also to deal with complex and contested issues that we feel require debate in order to build a well-knit society.
It’s hard to find a strong website when it comes to a non-profit festival in Vancouver. ISF usually do not have funds to spend a lot of money building a website, even though it has a huge role in making festivals succeed. The website will be the Hub of information and the main way the audience can access tickets for ISF events.
After our first meeting with ISF, there was a clear gap between their current audience and potential reach of the audience. The objectives were to ensure retention with their current users. ISF found through newsletters of their older clients that they show the highest rate of engagement of ticket buyers. However the ISF team, Julia and Almira made it clear that their user would need additional help when navigating through their website.
Timeline: 3 Week Sprint
Role: UX Designer
The Problem
The current website for Indian Summer Festival (ISF) is a bit archaic. As tones of new information got added to the website over the years, it has become a challenge for them to organize the content. ISF is a nonprofit organization and hence does not have too many funds to redesign a website from scratch even though it has a huge role in making the festival successful. Most importantly they want people to be able to buy tickets and donate on the website.
After meeting the client and this information in hand we were able to identify our goals-
Our Process
Research Methods Used: organizational/domain research, survey, user interview, user testing on existing website, affinity mapping, comparative/competitive analysis
Planning Methods used: Affinity Diagram, Persona, Storyboard, MVP, User Scenario, Customer Journey Map
Design Methods Used: Paper Prototypes, Usability Testing, Low-Fi , Mid-Fi Prototypes, High Fi
0— Meet the Team
UX: Julima Gallardo, Mike Funergy, Shruti Dwivedi
UI: Mel Wu, Maria Hussain
1 — Research
Let’s break the website — what does this mean? The existing website, though it contains all the pertinent information, is not user friendly and information does not naturally flow, making it difficult for the user to find what they need.
Objective: Redesign the existing website to improve user flow so our user can find upcoming events and other pertinent information quickly and easily.
Methods used: organizational/domain research, survey, user interview, user testing on existing website, contextual inquiry, affinity mapping, comparative/competitive analysis, information architecture
User Testing on Existing Website
The UX team put the current website up to test — we gave users 4 main tasks to be completed on the website.
- Sign up for a Newsletter
2. Attempt to buy a ticket to a current or browse a past event
3. Name what is least important to most important of the Navigation bar
4.Give a Donation
“What if I want to donate $10? If $500 is the minimum donation this makes it discouraging to donate” — 23 yr old
“ I don’t understand the messenger icon on the side — thought it was a messenger rather than a news letter” — 34 yr old
“ This is a lot of text — I do not think I would read over this regardless” — 42 yr old
“ The content is there — but it does feel messy and hard to follow”- 29 yr old
A User Testing log was used to help track each user objectives and help find potential holes within the current website.
The team completed a Contextual Inquiry to help reference what mood and tone the non-profit was trying to set for the organization. After a quick interview with one of the founders the main objective was to bring two worlds together — Indian and western cultures.
Survey Findings
The ISF UX team sent out an Arts and Culture Survey — this was sent to multiple channels and outlets. Arts and Culture Survey was sent out to our personal channels, facebook art groups and slack channels for direct feedback.
Results: 60+ Responders
Our Survey — we found out:
Over 64% of our survey responders expected Information on the Newest Event
Current Website: showcased Donation and About Us Information.
46% of people do not care to make a personal donation and rank this as 1 out of 5.
42% of people do not care to view sponsors and partners and rank this as 1 out of 5.
Current Website: heavy information on sponsors and donations.
50% of people often do not sign up for a newsletter and rank this as 1 out of 5.
50% of people were neutral about accessibility info and rank this as 3 out of 5.
We ended — our survey with the following:
Over 50+ people out of 60 had no idea or heard of ISF prior to the survey.
Content Audit Log
The content audit log help us categorize key elements together and we needed to communicate with was added or eliminated from the site.
2 — Planning
The planning stage — Collaborate and blend all Business Goals,User Goals and our project goals together.
Objective: Re-design the existing website to improve user flow through our verified research findings.
Methods used: Affinity Diagram, Persona, Storyboard, MVP, User Scenario, Customer Journey Map
Affinity Diagram
What’s next? The next steps to move forward with our affinity diagram. The affinity diagram objective is to organize our findings from our research phase which includes all the interviews, surveys and domain research.
Collectively, as a team we all wrote these data points onto a sticky note and group common data points together.
This is what we determined within our final analysis
and from this synthesized the results into our persona — Evelyn.
Persona: Evelyn’s Night Out
Scenario: Evelyn finds an event she likes and looks up details on the website. Her friend can only go to a wheelchair accessible event and she wants to buy a ticket. Evelyn follows ISF on social media and signs up for newsletter. She decides to support the festival by making a donation to become a 'patron'.
Storyboard
Customer Journey Map
Scenario: Evelyn finds an event she likes and looks up details on the website. She express interests and searches for the event tries to naviaged to the website but is found frustrated. Her friend can only go to a wheelchair accessible event and she wants to buy a ticket.
User Flow
The team created a User flow to help figure out what screens we need to create. The user flow was used as a planning tool to help streamline user options when clicking through the app.
And we also planned out our entire user flow, all the time keeping Evelyn in mind, which gave us the skeleton for our design before moving on to paper prototypes.
The below example is a happy flow of what was presented to the ISF client.
MVP and Feature Finalization
The team wanted to create a minimum viable product. In order to do that we had to define a clear project scope. Our process included three feature prioritization methods to help determine our project scope: Eisenhower Matrix (urgency vs importance), Priority Matrix (effort versus impact), and Bucket Method (nice to have vs must have vs not needed).
3 — Design & Testing
Through our MVP feature finalization we sketched out screen flows to help us visually see how features would interact with each other. These low-fi interactions of the wireframes were the starting points into putting our ideas and feature concepts together.
Based on findings from our user testing of the current site, we incorporated an clear call to actions on the main website to to excite users about the experience ahead. This will help minimize the amount to clicking and exploring the user would have to go through unlike their current website.
The feedback received from User Testing was:
Through our Pencil prototype we had to adjust and break apart our design a number of times.
We took our low-fi prototypes to our current colleagues, classmates and parents and asked them to complete the following tasks:
- Sign Up for the Newsletter
- Explore and Buy a Ticket from the Event Page
- Donate to the Non-Profit through the form
In total we completed five iterations of our paper prototypes after receiving feedback from our users. The Team kept a user testing log to ensure that we found any common problems with the low-fi sketches.
1 — Individual UX Member Wireframe: Understand the scope of the layout
2 — Combined Wireframe and Feedback: Post feedback from stakeholders, instructors and other members. This help define any missing screens and holes within the flow.
3 — Final: Colleagues and Developer Feedback Final Prototype
Mid — Fi Prototypes
After completing our user testing we moved forward onto sketch to help build our mid-fi prototypes.
Here below are some of our mid-fi paper prototypes:
Testing Mid-Fi Quotes
“ I do not know the difference between ISF and ISF+”
“ I do not think you need the chat box — I would use it if ISF was a bigger company.”
“I would reorder the navigation bar. There are some information I really do not care for and seems like they are using a filler.”
“ Is there a way to condense “get involved”
As Directed by our Users through Feedback we decided to keep in mind 3 concepts for Evelyn:
1 — Function right information for the right time
2 — Condensed Information and ensure that the content was not heavy
3 — Confirmation and Verify (What does that look like for the users)
After our Mid-Fi completion we handed over to our UI team to help create a branding and High Fi design.
Style Tile (Ui Team)
Our UI team had concluded their own parallel research, planning, and design work. Making our project ready for its high-fidelity iteration.
Accessibility with Typography
Our client had request for the UI team to test out different types of text fonts and colour backgrounds — ISF is big on Accessibility and wants to ensure all users are able to see their content correctly. The team had understand the possibility of users who may be colour blind.
Hi — Fi Prototypes
The Handoff Process — Although all features were showcased we found a number of errors within the library and UI design. There is a relationship between the Library and Design Elements for the screens. UI team had to verify and double check a few symbols to ensure these design elements were consistent.
Final High-Fidelity Prototype
And here it is! For the culmination of our efforts, please view the final hi-fi prototype here:
Below are more screenshots for your viewing pleasure.
The Recap
Let’s Recap — Since our main focus was to understand to understand the arts and culture festival guest there is still lots of a portion of the site we would love to tackle.
The objective was that the existing website, though it contains all the pertinent information, is not user friendly and information does not naturally flow, making it difficult for the user to find what they need.
Use Feedback: Our user enjoyed many elements of the site in which were simplified and had direct call to actions and direct flows — the information from the events, donation and accessibility page was simplified through our clean cut designs.
Furthermore, the opportunity to explore additional ways of displaying the social impact that guest will be exciting!
Future Considerations
If we had the ability to push the project further than its set deadline the team would love to:
- Add a profile login feature where festival attendees can create a profile and book mark their favourite events
- Create a back end ticket management system, and sell tickets directly though the website
- Add AR/ VR for Accessibility. — Accessibility plays a strong role in ISF and live streaming events or podcasts can help users who are unable to make the physical events.
Takeaways
- Streamline Communication: Understanding both scopes and objectives from both UI and UX team — this team had strong communication between each other with our weekly check ins and check outs at the end of the days
- Client Feedback & Design: Remember to push the limits of the design despite the limitations the client has given us from the initial client kick — off meeting
- Teamwork: I was quite happy with the entire team work ethic and determination to complete the job compared to previous projects. — team members will make or break any project.
