My employer: www.hivewire.ca
Hivewire services: Crowdfunding Platform Development, Data analysis, Consulting
Duration: 3 weeks
Skills: Literature Review_ Competitive Analysis_ Wireframing;
For this project our client was the university of Toronto. They wanted to re-envision their current crowdfunding platform and make it vibrant and appealing to the students, the faculty, and the donors.
I was tasked to research and gather information on storytelling and how it can be adopted to enhance the performance of a crowdfunding platform.
I divided the process into three parts:
- Understanding the philosophy and importance of storytelling through a survey of the literature.
- Investigating the best practices for storytelling on the web.
- Creating tentative wireframes for the client, as suggestions on how the structure of their platform could eventually look like.
Process and analysis
1- Understanding storytelling and it’s value
As a first step, I needed to validate our hypothesis about storytelling and its effects on a website’s performance. I had to better understand storytelling myself, to communicate its value to the stakeholders. For me, this step involved a survey of multiple articles on storytelling strategies that are used by great authors and animation studios, as well as an investigation of articles related to storytelling on leading UX web magazines ( Smashing Magazine, UXmatters and UXbooth). I was also able to find several articles describing the benefits of effective storytelling for successful crowdfunding.
- Storytelling is an effective method of creating a memorable experience for the audience.
A crowdfunding platform that engages its audience succeeds in generating substantial funding and creating a lively community.
- A platform with a narrative communicates its message more like a human than like a machine.
With its narrative, a story engages the audience emotionally and keeps their attention. People listen to stories because stories trigger an emotional response. In her interview with the Smashingmagazine, Dorelle Rabinowitz notes:
2- Finding out Best Practices for Storytelling on the web
I analyzed several websites known for their compelling storytelling to find the commonalities between them. Below are a few samples:
Analysis of a few screenshots:
The following are a selection of my initial findings:
Makes grants on a global scale to foster change
- Images situate story in its different contexts.
- Clear navigation on the left allows visitors to find what is relevant to them easily.
A crowdfunding platform geared more toward art and technology.
- Full screen clean graphic is accompanied by a prominent message.
- clear path and call to action, as to what the visitor should do next: “Start”
- Creating delight by highlighting an unexpected detail.
- The copy complements what could not be understood from the images.An appealing story that flows
They use resources of people in midlife and beyond to transform communities.
- The first screenshot draws upon people’s common emotional experiences in interacting with kids to convey emotions.
- The visitor’s gaze is directed to the copy.
- The copy brings in a third person’s voice to tell the story of “encore.org” from her perspective.
- The copy strategically interacts with the picture to clarify who this gentleman is.
Websites emphasized the use of a combination of images, videos, and interactive elements to convey their story.
Below is a comparison chart I created showing the occurrence of different elements in these websites:
Based on the previous chart, I created the following graph:
In depth analysis of various elements
Images are the most effective way to create an emotional bond with the audience in less than two-tenths of a second, the time it takes for a user to have a first impression of the website.
Videos bring life to the narrative and can quickly communicate a lot of information. Effective videos complement the story, they do not replace it.
Subtle Interactive elements
Subtle Interactive elements add little surprises to the flow of the story, with the purpose of regaining the audience’s attention.
Other notes on the structure of the pages
Faces instantly tell stories. As Jeff Johnson notes in “Designing with the Mind in the Mind,” Large parts of our brain specialize in looking for faces and interpreting what emotions they express. Therefore, Images of faces help grab and direct people’s attention.
One clear demand per page reduces the amount of elements on the page competing for visitors’ attention, making it easier to stay focused on the story. It may translate into one highlighted button, or a text box to fill in.
The copy does not tell the story; it rather expands the story to provide detail or clarification.
- Number of characters is limited to no more than a few dozens to make the page easier to scan, given that scanning is the first mode of interaction for the users on the web.
- The font size is large and legible.
Timeline clarifies the flow of events temporally, making the story easier to grasp for the visitors.
Scannable pages allow visitors to get a first impression of the entire story by making it easy to quickly identify its different parts on the page.
Color contrasts clearly show distinctions between elements on the web page.
White space serves as an anchor for the gaze.
Clear navigation allows the visitors to quickly find their way to the sections that resonate with them, and enhances the flow of the story by showing visitors where they are.
My proposed layouts
The following wireframe was intended to highlight how some of the storytelling best practices could apply to the client’s webpage, and to give them an idea as to what it could look like.
A- Full size image or video gives an enticing picture of your platform.
B- The copy will clearly state the purpose of the website, and will additionally reveal enough information to captivate the audience’s interest.
C- Showcase of a collection of the most compelling crowdfunding campaigns. Introduces the various categories under which campaigns can be found.
Before I left HiveWire in August, the storytelling piece was included in the final PDF document that was presented to the customer.