amfAR:
3 Paths to a Cure
Interactive infographic
for fundraising campaign
Responsive Web Application / Microsite
Client:
amfAR
Sanky Communications
Industry:
Non-profit
Healthcare
Duration:
3 months
Team:
Design: Jen Sepso
Art Director: Regina Weick
Tech Lead: Matt Ryan
Responsibilities:
Branding
UX Design
UI Design
Visual Design
Brief
This project was commissioned by American Foundation for AIDS Research (amfAR), a not-for-profit dedicated to ending the global AIDS epidemic. The client required an interactive infographic that would showcase three major events in the medical world, demonstrating huge advancements in curing AIDS for good.
The necessity in vocalizing these findings widely inspired the ”3 Roads Off the Beaten Path” campaign to promote awareness and emphasize the need for further research. In addition to fundraising, the online campaign would also continue to build on the organization's donor audience.
The campaign would be launched as a microsite since this type of platform had proven to be quite effective for amfAR in the past. Microsites tend to be the soapbox of choice for non-profits insofar that they can be created and deployed quickly, without impeding on the organization's main homepages and ongoing, longterm campaigns.
“I want you to blow my hair back.”
This was what the client said at the commencement of the project. No pressure, right?
I began this project with research. I studied past amfAR campaigns and other non-profits who favored microsites as their preferred form of fundraising. Although many past projects had been launched with fundraising as the main objective, there were a few key differences with the scope of ”3 Paths.” Considering the type of content we were communicating, it was universally decided that an infographic would be the best means of visual interpretation. The microsite would also be developed responsively, insofar that it would be easily accessible on mobile and tablet, in order to increase viewership and consequentially, donations.
Infographics, when successful, are a visual representation of information, data and knowledge, intended to present complex information clearly and concisely. They have been proven to increase cognition through graphics to enhance the human visual ability to recognize patterns and trends, thereby providing the most accurate and up-to-date information on which to make the best decisions, to obtain the most successful results in any given venture. The most complex message converts in interesting and attractive diagrams, or illustrated schemes of easy and fast comprehension for everyone.
They are used for many reasons: They’re entertaining, eye-catching, concise, and all the information they contain is easily digested by the reader so they’re useful, too.
Our content for the campaign, as provided by the client, was rich in information but confusing to anyone who was not familiar with scientific and medical vernacular. Thus, the first challenge that emerged early on was the task of making these scientific findings accessible to everyone.
This was the very beginning of when Infographics Were Big and the best ones were created by the New York Times. The Times had a particular knack for distilling confusing or dense information into visually digestible chunks— a methodology I hoped to adopt as well. I spent a lot of time looking at the NYT website for past infographics relating to healthcare.
In the meantime, the client expressed a desire for a ”fresh, new design,” something that did not resemble any prior amfAR branding. I came up with three unique concepts of possible aesthetic directions via moodboards. The moodboards were aimed at nailing down the look and feel of the campaign identity and design direction.
MOODBOARDS
When the client is right
Admittedly, this happens once every so often (kidding!). In this case, the client did not choose the moodboard that I had hoped he would, which would have been much more photography and imagery heavy. Instead, the client clearly wanting more of a graphical approach and chose option #1.
In retrospect, the client’s decision actually helped along the overall messaging and branding of the campaign. The usage of iconography easily communicated the medical/scientific nature of the content. This made the overall approach more more informational and less emotional, with a cleaner, minimal aesthetic, which is often how healthcare related material is formatted.
Choose your own adventure.
A successful infographic doesn't just impress data upon its viewer; it also conveys a story.
We are wired for stories; we like the excitement; we trust an interesting narrative more than simple messaging. Effective storytelling helps you cut through the clutter. With so much information out there, the biggest challenge for marketers is to stand out among all that noise. Storytelling enables you to be heard. We like stories. We were raised on them and expect nothing less than the imaginative flow of a narrative to transport us somewhere extraordinary.
Once the final copy was approved, I began to sketch out wireframes. I soon realized that my low fidelity sketches resembled storyboards more than traditional wireframes for digital interfaces. This was because the content felt more like narratives to me-- specifically three narrative case studies from three very different parts of the world. These strangers, linked by disease and scientific advancements, all had their own individual experiences to share. However, a traditional chronology of one case following the other would not suffice. Each story needed to be illustrated on its own, and yet must still remain anchored to the overall messaging of the campaign-- a call to action to fund AIDS research.
These three studies needed to be linked to each other but not in a set chronology. Each path needed to have the flexibly such that the viewer could move between narratives fluidly, like a simulated journey from one destination to the next. This autonomy that I wanted the viewer to possess made me think of the “Choose Your Own Adventure” books that were popular with kids in the 1980s. In these books, the reader follows the protagonist’s story but at pivotal moments, has the ability to choose what he wants to do next. Instead of just being a passive reader, the books encouraged full engagement and interactivity. I believed that integrating this idea into the structure of the project would facilitate more organic, fluid user flows.
This map below reveals the hidden plot structure of Tattoo of Death, Choose Your Own Adventure #22. Did the nerds over at this site realize they were drawing up user flows?! But really, where were they when I was reading these in the 80s? A map would have been nice. My characters tended to die. A lot.
Tattoo of Death, Choose Your Own Adventure #22 ALL MAPS COURTESY OF CHOOSECO
I also took inspiration from children’s materials (board games, storybooks) wherein interactivity is a key part of engagement and must retain a child’s interest, presenting a new and different result per their choosing. Combining this with the visual map of snakes and ladders, I storyboarded three individual narratives, then sketching out the wireframe of the overall microsite as the skin within each would live. Breaking down the content in this fashion allowed for medical concepts to be visually explained in layman’s terms. The goal was to create content as informative as a medical research paper, while visually appealing to a broad a broad audience of multiple ages, across the social spectrum. Ideally, the viewer could walk away from the infographic with an accurate understanding of the concepts expressed and the ability to discuss them on their own.
A minimal interface was necessary in the design so as to not detract from the content. But a flexible navigation needed in order to offer a variety of different directions “paths” a user could venture off into. I integrated three options in navigating the site— one to move between each screen like sign posts), a secondary nav within each feature story at the top to indicate location and city, and a navigational feature to move within story, which was set to repeat on loop. Top and bottom buttons would be greyed out and inaccessible except at first and last slides, indicating ability to move upward to beginning or downward, to its conclusion.
All UX was determined with low fidelity sketches using pencil and paper. The sketches provided flexibility in determining functionality and opened up discussions with my art director and developer to keep things loose and malleable.
I finally began illustrations for each narrative, from Berlin through to the French case studies. I consulted with art director and copywriter to ensure that copy provided was adaptable— some vernacular changed along the way to accommodate the graphics and vice versa. The last screen was the only visual departure from the rest of the designs. This highly contrasting design served to highlight the call to action function.
TO BE CONTINUED...
Overall the project was a success insofar that the client was happy with the end result (yes, his hair was blown back). Formal and informal feedback from all our test users was positive— they found it easy to navigate, visually pleasing and slick, also informative and clear. But unfortunately due to a discrepancy in one of the scientific claims as depicted in the content, the project was ultimately shelved.
However, more recent advances have been made in the field of AIDS research. Perhaps in the near future, this infographic will be revisited and revised to display a different journey altogether.
