Passages- Case Study


The ever-increasingly reliability on technology and the digital world since the turn of the 21st has made our global society more connected than previously possible. However, while we are so focused on the connectedness of the Internet, digital sites and devices are replacing our once analogue archives, scattering our lives and mementos across non-interlocking compartments on the web.1 Preserving a historical record of life as is currently exists is vitally important for the future, and this project proposes to do that.

The concept behind Passages is twofold, bringing together high quality multimedia storytelling of everyday people and housing it in an archive that will chronicle the human experience in 2014.

Started as a project in conjunction with the Alexia Foundation, the Visual Communications department of the Journalism School at the University of North Carolina at Chapel Hill was asked to participate in a semester-long project to create an array of documentary photography and video stories around the theme of “family.” Seeing this as an opportunity to produce a high quality multimedia project that school is renown for, the Vis Comm department decided to expand on the Alexia Foundation’s project and create a multimedia project that chronicles life from birth to death through visual storytelling, titled Passages.

This website proposes to bring these stories together in a cohesive and interactive “timeline” that will showcase them while providing a chronicle of the human experience in 2014 from birth to death.

Audience and Purpose

This website will be targeted to those interested in high quality multimedia storytelling as well as those interested in viewing how life currently exists and witnessing how human life can unfold.
As the UNC Journalism School has an award-winning track record for producing large group multimedia projects, those interested in beautiful and well-crafted stories will be drawn to this site.

While there are projects that document daily lives through storytelling such as the New York Times’ 1 in 8 Million and photographer Brandon Stanton’s Humans of New York, they are both located specifically to New York City and neither has any organizational structure other than random moments or “snapshots” of life.

Passages will exist specifically to tell a beautiful and well-crafted story of a life so that viewers can literally watch life unfolding. While the stories deal with different people and different families, the site will allow viewers to select an age or time period and get a glimpse into what it means to be human at that age.

As most of the stories are situated in North Carolina, this project provides a unique glimpse for viewers into how everyday life is like from a North Carolinian perspective, and themes range from the joys of birth and celebration of a Quincenera to the hardships of growing up with Autism and the sorrows of losing a loved one to Alzheimer’s.

Since some of the material is sensitive in nature, the target audience is adults who either live in North Carolina and want to see how life is like for others in their surrounding community or those living in other states wanting to see how life is like in North Carolina. The website will be elegant but very user-friendly and simple to navigate, making it accessible to those with limited technological skills but also engaging for those who expect a more sophisticated experience.

Site Design

The Passages website will be a single page, non-scrolling site. This style was selected as it is clean and simple, allowing the focus to be on the stories rather than the website. It will utilize a “timeline” as the main navigation control, where users can scroll through the stories in a chronological order of life. The timeline structure was selected because it was a logical way to tell the narrative of a life, and a way to provide cohesion to the wide array of stories.

The “stages” of life are broken into eight categories as a way for users to quickly navigate to the stories dealing with a certain time in life.

The categories are:

birth | childhood | adolescence | youth | adulthood | middle age | aging | death

The site is interactive in the sense that users navigate through the timeline to find the content they need. The wireframe and panels shows this, but users roll over the featured images of the stories and a lightbox is used to display all of the content within that story.

Only two categories are shown at a time on the website, an intentional design element to keep the site from looking cluttered. By doing this, it also encourages users to scroll through the site more to see the rest of the content, thereby keeping them engaged and interested in the website longer.

The colors used are a pallet of earthy, gender neutral colors. As seen in the panels, the backgrounds are predominately white and the text is a combination of dark brown and deep purple, with accents of sea-foam green and mustard yellow throughout. An informal survey of 5 web-savvy people concluded that earth-tones would be successful for this project because it is simple and neutral but still contains some color. This pallet includes both warm and cool colors to represent the different aspects of life, from happy and warm to somber and cool. The mustard yellow was included to add a pop of color to the timeline, drawing the viewer immediately to the main navigational element of the site.

The Hex Colors are: #86a289 | #3f3832 | #c29927 | #565263 | #ffffff

Screen Shot 2016-01-31 at 7.42.07 PM
The fonts used are Futura, Sanchez and Avenir Next- simple fonts that are clean yet elegant. As the main focus of the site are the images and videos, the viewer should not be distracted by gaudy or elaborate fonts, and these font choices allow the viewer to easily read the text. The incorporation of both sans serif fonts and a light serif font allows the textual information to be varied while still complementary of one another. All three fonts are neutral and modern and do not evoke any emotion or target any pre-disposed ideas, necessary because the themes of the project range from lightheartedness to very difficult life challenges.

Sitemap and Wireframe
Screen Shot 2016-01-31 at 7.37.32 PM

Screen Shot 2016-01-31 at 7.38.15 PM