May 20, 2014

From the Drawing Board to the Cloud: Creating Compelling Stories in Design

Consumer software products have started getting into the art of storytelling. When you use AirBnB, you’re not just booking a place to stay; you’re booking a personal experience. When you use Lyft, you’re not just hailing a ride; you’re getting a ride with a friend. Both products are focused on their community of users and on weaving their story into the very core of their products. The cloud provides the opportunity to hone a design’s story with core stakeholders with ease and grace.

As an enterprise product designer, I weave the art of story telling into the design process. Design decisions are often made so that the product or feature being designed can tell its own story.

Storytelling weaves functionality and design of a product with an emotional connection to the user. Nonprofit organizations aren’t any different from consumer or enterprise software products. Good design (being defined as having both functionality and form) is no longer enough to build trust with people on the internet. People want to be told a story. With nonprofits specifically, it’s perhaps even more important that a story is at the core of the digital experience. A deep emotional connection to a story creates a stronger connection to the organization and a higher chance at being interested in an organization’s activities, which results in a desire to contribute.

Every user interaction should be thought out with the story in mind, and designs should constantly be shared for feedback to ensure good design as well as a good incorporation of the story into the site or product. Once the overarching message that a nonprofit wants to convey to donors is figured out, the spirit of that message should be experienced throughout the site. Every screen and interaction of a site should be mocked up in low fidelity – including where users will click. At this stage, designs should not be pixel perfect. Pictures of screens drawn on whiteboard, or even paper sketches, are perfectly acceptable. To send lo-fi wireframes, I’ll often draw on whiteboard or sketch on paper, take a picture of it with my phone, text it to myself, then email it to other team members or share it on Dropbox or other cloud-based sharing solution for feedback. Both Dropbox and Box are fantastic solutions for saving and sharing designs, since everything is hosted in the cloud, and shared folders automatically sync when anything gets saved in them. For those that are fond of digital low fidelity wireframes, Balsamiq Mockups is one of the simplest tools to use. Their drag-and-dropping of assets to communicate concepts doesn’t require a designer’s aptitude, and for nonprofits, Balsamiq offers a significant discount.

Sharing an interactive prototype with either remote team members or users for feedback can be done by saving it into a Dropbox folder, then sharing the link. When users or team members are giving feedback, test to see if the story is both compelling and evident throughout each screen and interaction. For mobile products, sketches of screens can be used, then pieced together using POP: Prototyping on Paper to test out the interactions directly on a mobile phone.

After a site or product has launched, tracking metrics behind its success will also give you a good bar for how successful the storytelling is. For a simple site, Google Analytics will suffice. For sites with increased complexity, and especially for products, Mixpanel is invaluable in tracking behavior and doing cohort analysis. To track high-level snapshots of where users are clicking for quick iterations or A/B testing of screens, CrazyEgg does a phenomenal job at providing a heat map of user behavior.

Good design isn’t just about visuals or pixels; it’s about functionality and emotionally connecting with your audience or users. The stronger the emotional connection, the stronger the story.

Samihah Azim