Project
VoiceStory.
Duration
February 2020.
Role
UX Designer.
Project Overview.
Everyone has a unique story to tell. When I first heard that phrase I didn’t exactly know what it meant. For many, storytelling is a healing and transformative process that helps them cope with life's greatest challenges. I came to understand this a few weeks later thanks to our client, VoiceStory.

VoiceStory is a very unique non-profit organization striving to let everyone know that they have a voice and story in this world. Winston, the founder of the organization, often mentioned that we carry this “filter” with us at all times and it stops us from truly connecting with other people. This is especially true in cities — like Vancouver — which can lead to a feeling of isolation and depression.

VoiceStory is on a mission to break down these barriers and build a safe, inviting, and authentic community. They tackle these challenges by hosting monthly speaking events and workshops where members of the community are asked to share a personal and intimate story about themselves. In turn, these stories inspire and resonate with attendees helping them understand that they aren’t alone in this world.

Armed with a new perceptive on storytelling, my team and I set out to understand how we could further engage the existing community to communicate VoiceStory’s message by addressing pain points and barriers through an app.
My Team.
My team of 5 set out to bring the app to life in only 3 weeks. Rob, Maggie, and Kat would tackle the UI aspects while Sylvia and I were tasked with the UX portion of the project.
View Prototype
RESEARCH
Interviews.
We conducted 5 in-depth interviews with VoiceStory community members. Each interview ranged from 35–60 minutes in length and provided us with some fantastic insights. Interviewees ranged from people who attended a live event or workshop to members of the community that had already been a speaker.
Question: Tell us a little bit about your experience with VoiceStory.
"I felt very welcome and didn’t feel singled out which allowed me to be myself. People moved from superficial conversations quickly to deep intimate stories…"

"I originally went because a friend was a speaker at the event and it was a really amazing experience. I then wondered if I could get up there and talk about a story I have."

Question: What makes VoiceStory different than similar organizations?
"Heart-centred — totally different from toastmasters which is a canned performance.You aren’t going to a perfect performance."

"The people that come out are just lovely. It's not going to be stuffy. People just show up and are authentic. And I think that's rare in our world."

Question: What is the reason you attend VoiceStory events or workshops?
"I believe that VoiceStory has kind of helped me get to a place where I’m creating my own dream ventures. Because of the process of becoming a speaker."

"The environment that they put on. You don’t have to put on a false face in any way. Which I thought was really nice."

Question: What has stopped you from attending more?
"I’m a busy person. I like to be busy.It’s really availability."

"If I can go then I most likely will. I don’t research the topic because I well trust that it will be a good event."

Question: Do you have anything suggesting to improve the VoiceStory experience?
"Maybe something to do after the event. I want to remember the messages from the show."

"I feel like they have it down to an art. I did get the dates mixed up for my first event. Maybe make it the dates and locations more clear."

Question: If VoiceStory were to have an app what kinds of features would you like to see?
"The first thing I was thinking of was to have future events. They have a new location now. Definitely a quick place to go find the events and buy tickets from there. I guess it could also have videos."

"I would like to see it as a resource I suppose. Like where it has all the VoiceStory stuff."

Interview Insights:
  1. Content disorganization, confusion regarding venue details, ticket purchasing issues, as well as wanting to relive the key messages they learned after the event.
  2. Most users didn’t see the value in an app that could aid in speaking events or workshops.
  3. Phone were considered a distraction that would limit face-to-face connections.
  4. All interviewees mentioned that they’re extremely busy and they all live pro-active lifestyles.
  5. All mentioned that a centralized information hub for all things VoiceStory would be valuable to them.
Survey.
In order to get the insights we required; we decided the best option would be to deploy two different surveys to two different audiences.
VoiceStory Community Members (Survey 1):
The first survey was sent to the VoiceStory community. The goal of this survey was to gauge where their current pain points lie with VoiceStory and how we could potentially improve their overall experience using an app.
Takeaways from the Community Survey:
  1. Live Q&A was the top requested feature. It was also mentioned 65% of the time in the open-ended questions where we asked for VoiceStory improvements.
  2. The audience of VoiceStory was much older than we anticipated. In total, 65% of the responses were in the age range of 46–65. This was re-enforced verbally by our client.
  3. For the most part, users again didn’t seem too interested in an app that would aid them during the actual event. In-event features accounted for a low percentage of overall requested features.
  4. Users would like to see a feature that allowed them to apply to be a speaker.
Public (Survey 2):
The second survey was sent out to a more generic audience. In this case, we wanted to learn more about their previous experience at live events. We were trying to uncover some pitfalls that they experienced along the way.
Takeaways from the Public Survey:
  1. Having easy access to event information was mentioned 70% of the time in the open-ended questions. It was becoming clear that event information would have to be a core function of the app.
  2. Just like the VoiceStory community survey, the ability to connect with speakers was a highly requested feature. This got us thinking that we could build in a speaker directory that had links to the speakers' social media or email.
Contextual Inquiry.
After the survey was closed, It was now time to add some context to our research by attending an actual event. My team went to a VoiceStory event as well as another comparable storytelling event. Our mission was to observe and record potential users’ activities within the proper context of a storytelling event. We also wanted to briefly interview someone to gain further insight.
Takeaways from Contextual Inquiry:
  1. The experience would be next to impossible to replicate via an app, especially for older generations.
  2. Audience members seemed incredibly engaged the entire time. Not a single soul left until the end.
  3. Lots of families attended the event together and it was a very social event.
  4. Older age range with attendees being mostly 50+.
Planning.
Using an Affinity Diagram it was now time to organize and make sense of our data. We started by writing out each data point on a sticky note and categorized them based on 11 different themes/topics we spotted. This included demographics, traits, wants, needs, behaviour and so on.
As we went through the process it became clear that there were patterns in the data with data points springing up multiple times.
Patterns in the data:
  1. Authenticity is very important to the VoiceStory attendees.
  2. They’re a busy time-strapped bunch.
  3. They want the ability to purchase tickets via the app.
  4. Full details of the upcoming events including speaker bios and other relevant event information is a must.
  5. They want a regular scheduled Q&A with the speakers at each event.
  6. Easy access to the VoiceStory video library including the ability to filter by theme and date.
Personas.
Our research-based personas split up into primary and secondary. We chose the speaker personas as our primary persona because ultimately the final outcome of a VoiceStory attendee is to become a speaker.
Journey Map.
Our Journey Map helped us see the user's ideal journey from learning about VoiceStory to becoming a speaker. Using this diagram we were able to identify where the opportunities lie in their journey over time.
  1. Preparation for Event: Start by providing them with all the necessary information about the upcoming events. This would help relieve any uncertainly surrounding critical information about the event.
  2. Post-event we see two opportunities. First, we want attendees to be inspired and consider becoming a speaker. Having an easy place to do this would help bridge that gap. Secondly, we want attendees to rewatch the video of speaks so the messages in the stories can resonate with them even after the event has completed. This could be accomplished by providing the latest videos through the app as well as attaching them to the event listings page.
Core App Features (MVP).
Using the bucket method we categorized the feature list into must-haves, nice-to-haves, and not needed features. The must-haves would ship with the first version of the application.
The Affinity Diagram outcome. I had a lot of fun making this one.
Sitemap.
Using the planning and research assets we constructed our sitemap, laying out the information architecture foundation for the app. The red box elements represent the top-level navigation. The green boxes are content at a lower level to the top-level navigation. The grey box elements are additional settings and content that will exist in certain areas of the app (i.e. — a hamburger nav on the homepage).
The Affinity Diagram outcome. I had a lot of fun making this one.
User flows.
Our primary user flows for purchasing a ticket, watching and favouriting a video, researching upcoming events, and applying to be a speaker.
Designing & Testing.
Heading into the design phase, we were now ready to put pen to paper and design some screens based on our research and planning assets. This was an exciting milestone in the project as it truly felt like the project was progressing into something tangible. To start, my UX team member and I started out by sketching some low-fi paper prototypes. From there, we decided on which design elements we wanted to keep and which to remove. This allowed our next paper prototype iteration to be much more consistent in visual and functional design.
Paper Prototypes.
The second iteration of the paper prototypes were ready to be tested out to spot any changes that needed to be implemented. Below is an example of a typical flow that a user would take in order to purchase a ticket for an upcoming VoiceStory event.
Paper Prototype Usability Testing.
We recruited a number of users to test out our paper prototypes to ensure our user flows, design, and logic made sense.
Usability Scenarios.
In the first usability scenario, we wanted our users to purchase a ticket through the app. Issues we found from the design ranged from confusing copy in the checkout funnel to the inability to find their tickets afterwards. The second usability task, we tasked our tester to apply to be a speaker at an upcoming event. The final scenario was to watch and favourite a video.
Changes Made to Prototypes.
  1. 2 of the tester were confused with some of the checkout copy. In particular, they didn’t understand what ‘Ticket Information’ was. Due to this, we changed the copy to ‘Contact Info’. This update appeared to clear up any confusion around the user data we were trying to capture.
  2. The primary navigation copy was also an area for improvement as there were some uncertainty and inconsistencies in the copy specifically around accessing a purchased ticket. To make it clear where they needed to go to view their ticket(s) we updated the bottom navigation from “Tickets” to ‘My Tickets’ and changed the headline from ‘My Upcoming Event’ to ‘My Tickets’.
  3. Finally, we had a developer run through the ticket purchase scenario and he mentioned that we would want them to login or signup before continuing through the checkout funnel.
Mid-Fi Wireframes.
The digitized version of the same user flow as the one depicted in the paper prototypes above. This sequence details the typical flow to purchase a ticket to an event.
Wireframe Usability Testing.
The final step before handing the wireframes off to UI was to run it through a few more usability tests. This time the usability test was a bit more contextual as we had users run through our test scenarios using a phone.
Changes Made to Prototypes.
  1. Identified and fixed areas where the user would get “stuck” in the app. This happened when they would navigate several levels deep into the app.
  2. Keep it simple was some other feedback we got on the designs. The user specifically mentioned that we spread out the content over too many pages instead of just having everything on the same page (i.e. — All the event and ticket info on the same page).
  3. Providing more feedback on user actions. For instance, it was unclear that the user had favourited a video because the primary indicator was lower down the page. To fix this we pushed it further up on the page. This would have only come to our attention if we ran our usability tests on a phone.
Visual Design.
The design team took our wireframes and branded it with the VoiceStory colours and other visual design elements. Below shows the 4 primary or top-level screens of the app. Each page corresponds to the bottom navigation with an explore, event listings, tickets, and user profile pages.
View Prototype
BIG ANNOUNCEMENT.
With all the hard work we put into this project, there was no guarantee it would actually get developed. There were a total of six community projects up for consideration, however, only two would be selected for development. We are happy to announce that out of the six teams, our VoiceStory app was selected to be developed. We could not be happier for VoiceStory and cannot think of a more deserving organization.
Testimonial from our client.
Future Considerations.
Live Q&A.
Live Q&A was one of the most requested features of the app, however, we never added this feature into the app. There were several reasons for this including development challenges and practicality. In most cases, this could be something just implemented into the event itself and didn’t really require an app to do so. This information was handed off to our clients.
Add Video Notes.
There are certain parts of a video that resonate with the viewer. Having the ability to save or add notes to a segment of the video would be an interesting feature and something that would provide value to the community.
Coaching Tips.
Coaching tips could be incorporated into the app since the ultimate goal is for community members to tell their own story. As shown in the quote below, it could be something that aids them in their speaker preparation.
“Writing and preparing a story is something I don’t consider for a phone… maybe something that helps people with last minute prep so they can use their phone before going up to give a presentation…”
— Storytelling Coach & attendee at The Flame
Authentic Photography.
Include more personal photography images of the live events. If the timeline allowed us to do so, we would have liked to take more VoiceStory photos as that would help communicate the authenticity of the events.
Conclusion.
3-weeks went by incredibly fast for this project and I am super proud of what myself and my team accomplished in such a short period of time. Even more satisfying is knowing that it will get developed. This should bring a whole new set of exciting challenges.
Final thoughts & Takeaways.
  1. Time management is critical: Compared to other groups doing other community projects, we had fewer team members and overall less experience among the group. This made time management essential. It seemed like we were always slightly behind compared to other groups and we had to make this up by working harder. I would have liked us to work a bit smarter and manage and set concrete deadlines.
  2. Design for the user: I am continuously surprised by how users accomplish tasks within an app or website. When you’re deep into a project, biases can emerge about how things should work, however, you always have to refer back to the user. Ultimately, a designer’s opinion of how an app should work should mean nothing.
  3. Bring testing in sooner: Due to the aggressive nature of the project deadlines, it was difficult to make time for user testing throughout the entire process. The deadlines caused us to only do this near the end of the project which affected the final outcome and created some setbacks.
A big thank you to my team.
It’s never easy being thrown into a new group and having to gel with them in such a short period of time. In a matter of no time, you start to figure out personalities and working styles as well as proactively working to everyone’s strength. I can honestly say that I had a fantastic team for this project. Everyone was accountable, easy to work with, and very respectful of each other.