Tamám ShudCase Study / Emily Wanner

BRIEF

This project was to bring a short story to life, while considering the flow of content, visual design, expressive web typography, animated and interactive enhancements, and overall responsive nature. De-sign and develop a more experiential single-page website of around 1,000-1,500 words. It is critical to experiment with the format to create a unique viewing experience, while still considering the flow of infor-mation and usability.

STORY

The story I chose to tell is my favorite unsolved mystery, a body found in Australia with no identity. The seemingly small and interconnect-ed details, coupled with a rare book of poetry and a code that hasn’t been cracked in over 70 years makes for a captivating narrative that has inspired several different theories about what really happened on Somerton Beach November 30th, 1948.

SOLUTION

My goals for this project were to inform users about the case while leaving it open for interpretation. I didn’t set out to solve the case or bring new evidence to light, but to display the story of the Somerton Man in a unique way.

I wanted the visual design to reflect the way I felt when I first read about the case—a little uneasy, a little confused, but a lot interested. I thought about how the design needed to represent the time period but not lend itself to any particular interpretation of the story.

Process

RESEARCH

I began this project by looking for an article about the case that I wanted to use. The Wikipedia page was too long, but other articles I found didn't in-clude details I consider necessary to the mystery. Eventually I decided to write my own summary of the case. In my version I tried to find the right bal-ance of images to text, and to show images of the evidence I thought most necessary for the article itself and for the look of my site. In writing the copy, I also separated the content into five chunks which I thought best summarized the case.

TARGET AUDIENCE

Since I love reading about this case so much, I believe anyone could be interested in the topic. But to get specific, people most likely to visit the site are true crime enthusiasts or already reading about similar unsolved mysteries.

BRAINSTORMING

My brainstorming methods included writing a breakdown of the content, doing a free write, and creating a wordlist/mindmap. These helped me pinpoint the specific details I wanted to emphasize in my rendition of the case, in addition to identifying a potential audience and competitors.

Process

VISUAL DESIGN

Moodboards and wireframe sketches helped refine where I wanted to take the site.

Process

VISUAL DESIGN

Three Sketch wireframes helped me get feedback from peers on which direction to move towards. Ul-timately, I decided to combine several aspects from all of the iterations into my final design.

Process

VISUAL DESIGN

Process

VISUAL DESIGN

My final Sketch iteration included lots of overlapping text and images, a fixed nav, and lines connecting different parts of the page like in a mystery movie. In implementing my vision into code, it was difficult for me to implement the overlapping content and conneting lines to work while still making the site responsive. However, I would like to work on figuring out those problems if I had more time on this project.

CONTENT STRUCTURE

I split the content into five distinct parts based on the narrative of the story:

1. Finding the body

2. Finding the suitcase

3. The Rubaiyat & "Tamam Shud"

4. Jessica Thomson

5. Final thoughts

USABILITY TESTING

Testers liked the website but made comments about the image hover and a more interesting con-tent breakdown. I decided to rework the images on hover and push the interaction further.

Testers didn't seem to have a preferance between using the fixed nav or scrolling. I decided to keep both of them on the site for ease of navigation for instances like moving up several sections to reread.

Outcome

FINAL DESIGN

Outcome

CHALLENGES

There were some technical barriers I ran into while coding the site. Namely, the functionality of multiple overlapping elements within Skeleton column lay-out and the responsiveness of having a threadlike elements spanning multiple sections.

I also had difficulty implementing multiple jQuery features such as fullPage.js and tilt.js. Getting them to work together for my site was sometimes confus-ing and difficult to find resources for.

If I had more time to dedicate to this project, I would want to do more searching into overlapping ele-ments and large connecting elements, in addition to perfecting the snap-scroll and interactivity.

REFLECTION

Because I love the story I chose so much, I feel like I stayed in my coding comfort zone in this project. Looking at the websites of others who had just started coding this quarter, I think I let the technical aspects of the story (such as writing the copy and keeping track of the most important details) take the stage and designed the website based on what I already knew I could code easily. Hopefully in the future I can start pushing my coding boundaries on similar creative projects.