detailed case study

The Recollect
A Case Study
Visit therecollect.com ->
#karamakesathesis
Thesis Process
The Recollect was my thesis project at the Pacific
Northwest College of Art. The thesis experience at
PNCA is a rigorous process, requiring two semesters
of research and development under the guidance of a
mentor (mine was the wonderful Kristin Rogers Brown,
of Bitch Media) concluding with a formal thesis defense
with a panel of PNCA faculty.
First semester I proposed to create an interactive digital
publication utilizing two concepts — visual writing and
nonlinear storytelling. In addition to those concepts, I
had three goals for the content: intimacy, experience,
and shareability. By intimate, I meant imagery, writing,
and experience design that is both thought-provoking
and rich in the human touch. By experiential, I meant
interactive design that is both enveloping and immersive.
And by shareable, I meant content and a delivery
system that are easy to experience, and then share with
others on social media.
The Idea
So first let’s talk about digital publication. Most digital
publications mimic the structure of traditional print
publications: blocks of static text, clunky slideshows,
expected grid and typography solutions. There is little
relationship between the design, art, and writing. This
formula isn’t necessarily conducive to the way we
interact with digital publications — on screens. And most
of the time, it’s just boring.
I wanted to figure out how to do this better. As I worked
through the process of creation, I realized these key ideas
for how I wanted it to function:
•
Create a publication that was completely
interactive, not a traditional publication with
random, one-off interactive pieces.
•
Build the website responsively, rather than a
native app. Prioritize social sharing.
•
Develop a framework for interactive publication,
rather than create a fully functioning publication.
•
Collaborate with only woman writers.
•
Explore nonlinearity and what it means in how
we tell stories with interactive design.
•
Maintain that quality writing is the foundation for
effective communication design.
Personal Process + Timeline
September
The Recollect was the first
interactive project I had
ever created and it was an
illuminating and exciting
process to participate in.
I played every role for this
project — visual designer,
interactive designer,
developer, editor, managing
editor, art director, and
even writer.
I worked in many different
ways in tandem before
arriving at The Recollect’s
final form. From messy
wireframes on tracing
paper to journal entries to
formal academic writing
to UX testing on my
classmates to 3x4 foot
mind maps to coding in
browser — I was able to
build something in the
short time frame I was
working in (less than two
months, really) and for all
the roles I needed to fulfill.
Tools I used:
Evernote
Gmail
Google Drive
Instagram
Wordpress
Uilang
Font Deck
Illustrator
Decided on
general direction
Defined goals
Prepared for
thesis proposal
December
Presented thesis
proposal
Turned in written
thesis proposal
January
Winter Break!
Took a wintercession course on
Chris Ware’s Building Stories
Began
researching
February
Semester begins
Synthesized
research and
re-established
initial goals
Began contacting
writers + developing
content strategy
Created a
feature library
and aesthetic
moodboards
Created wireframes
with practice stories
March
Began coding
Midterm Reviews
Realized concept of
recollection. Decided on
name “The Recollect.”
Began working
on branding
Finished first story
April
Further
conceptualized
UX design and
story structures
Coded, coded, coded
Further
developed
stories 2–5
Wrote defense
speech
Finished coding!
May
Defended
thesis
Wrote thesis
paper
Some Thoughts On Nonlinearity
Below is a short excerpt from my defense speech that
I think best explains what I realized about the form of
nonlinearity, and how to better tell stories.
To move and to think
about the moving.
“I took a wintersession course here at
PNCA during break this year on Chris
Ware’s Building Stories. Building Stories
is an incredible book, it’s a collection of 16
loose leaf comic books, varying in length
from one page to 80. The story revolves
around the residents of an apartment
building in a Chicago neighborhood, and
centers mostly on one character’s life. The
story is chronological, but all the pieces are
scrambled. Reading it requires pickingup
and reading the books at random
and piecing together an out-of-order
linear story.
As I read it, I ended up thinking how this
mimicks how we interact with the world.
You piece together a story and you’re
required to readjust your perception of
these characters as you learn more. We’ve
all had that experience of thinking we
know someone or understand something,
and then randomly they retell a fact or
a story or an experience and it radically
recontextualizes how you understand
them. I think this is a compelling way to tell
stories, a way to show how we recollect,
and a way to create a really incredible
feeling — discovery.
I realized something that I didn’t expect
with nonlinear storytelling and it’s that I
think most of our stories, our narratives,
are nonlinear anyway. What I mean is
that we usually read linear, chronological
nonfiction stories and we assume those
stories are told that way because they
are that way, but in reality the writer
made a series of choices in how they
told the story — they omitted facts, they
exaggerated, they downplayed details
— and they did a really beautiful and
wonderful thing: they added themselves to
the story. Nonlinearity acknowledges this
head on, because the form appears to be
jumbled. But what it does more apparently
is add another person — the reader, to
make choices in how the story moves, to
participate. It’s experiential.
When it came to applying these ideas of
nonlinearity to The Recollect, I first took
the concept literally. I thought I needed to
make a truly random nonlinear experience
to make a “pure” piece of nonlinear work.
What I just showed you though does
follow a system, but it also breaks another
one. It requires the user, the reader, to
navigate. To move and to think about the
moving.
Writing this way and making work this
way frees us from the expectation of what
we owe to the illusion of linearity and
reality, I think it’s also linked to how we
understand, remember, and recollect our
experiences. The theme of all these stories,
rather accidentally, came to be about
remembering and recollecting. Recollection
isn’t clean or linear — it’s layers, shuffling
vignettes, linked and unlinked, relevant and
irrelevant, woven and unwoven moments.
How they link and connect, or maybe don’t.
I think it’s also really intimate, to be shown
this. To see the building of a story and all
the links and connections.
I had never designed anything digitally
interactive before this project and I was
surprised to realize how much it’s tied to
film and animation. Interactive design in
time based. Designer and writer Frank
Chimero defines this, and responsive
web design itself, as “flux,” which he
describes as the capacity for change.
There is a beat and a pace to stories,
and telling stories with flux can be so
beautiful. Another thing that surprised
me about designing interactively, was that
I was more conscious than ever before
of how I wanted my audience to feel. I
had forgotten how design could facilitate
poetry, and how the beat and the pacing
and the language and the color and the
typography and the system of it all, could
facilitate language and emotion.”
Story Development
Before I had writing to work with, I spent some time
experimenting with other content. Below, an essay by
Durga Chew Bose, called Some Things I Cannot Unhear.
I was trying to find different ways to present sectioned
writing — “listicles” — visually and interactively.
Example Story Explorations
Feature Library
I made a few feature libraries for
inspiration for different design devices, so
that I could have something to reference
when I felt stumped building stories.
Q+A Interview: Friendships
Visit this story ->
An article type I wanted to rethink was the
Question + Answer interview. I interviewed
five women, a mix of writers, educators,
and artists about friendship. My goal
with the Q&A was to find a way to make
navigating these questions and answers
more interesting.
Q&A interviews are linear, and if not paced
out correctly can be boring and disjointed.
Since these interviews were done via
email, losing the sense of a conversation’s
pace wasn’t something I was concerned
about, but I didn’t want it to feel without
pace or without flavor. I wanted to give the
user a choice in how they navigated the
content.
For the desktop and tablet experiences, I
wanted to lay out the content so the user
could also feel like they had a holistic view
of the piece. I wanted the user to feel in
control of how they experienced what they
were reading.
In Your Defense
Visit this story ->
In Your Defense is a nonlinear narrative
listicle written by Jenna Fletcher. In this
piece, the story sections shuffle on each
page refresh, meaning the order of the
pieces is a unique to each visit and visitor.
I laid out the imagery subtly behind the
text, and when the sections were unfolded
the imagery would move along with it. I
wanted the imagery to be present from the
beginning, but not completely understood
until after reading. I use color and imagery
throughout The Recollect, thinking a lot
about Gestalt — connecting smaller details
to create an overall experience.
Advice For My Teenage Self
Visit this story ->
Advice For My Teenage Self is a linear
listicle written by Kristin Rogers Brown.
One of the goals for this piece was that I
wanted the navigation design to feel like
a part of the writing, I wanted it to be an
equal participant. I wanted to remind the
user the design of this is just as important
as the writing.
I was surprised to see how far just color
and typography could carry the feelings
I wanted the user to experience. I chose
the colors to go along with the tone of
each piece of advice and had the colors
change and transition depending on each
list item. At first my instinct was to make
this experience purely nonlinear, but
the momentum of Kristin’s writing truly
benefited from the numbered progression.
I chose the typeface, Didoni, for the
numbers because I wanted the numbers
to feel precious, enticing, and enjoyable to
click on and move through.
Ox-Bow
Visit this story ->
I wanted to rethink the form of the
traditional essay by having two writers
tell the same story, but from their own
perspectives.
Clare Vernon and Jessika Stocker met at
an art camp and retreat a few years ago
and this piece is a collection of certain
scenes and details they each remember,
but in different ways. I designed the
writing so I could give the user the option
to choose which perspective to read first
as they progressed through the story, and
through each section.
This piece ended up being much more
linear than I had originally envisioned. But
I realized I wanted this story to feel like
it was being woven. I wanted the reader
to feel like they were sitting with Clare
and Jessika, recounting this experience,
as each person added and supplemented
their own anecdotes to the story. I
used handwritten elements, color, and
typography to distinguish each voice. I
wanted this piece to feel like a recollection,
a story being built out of individual
moments and a vignettes of experience.
Building and building to an end.
Prayers For Kara
Visit this story ->
And the last piece is one I wrote called
Prayers For Kara. This was the last story I
made and, how it often is (annoyingly) with
creation, it’s the place where it all started
to click. I took diary entries I had written as
a teenager and supplemented them with
reflection from now. I wrote it, strangely,
as I was designing and coding it. Visually,
I used layering as a device to reference
recollection and retelling. And this is where
I think the ethos of nonlinearity can shine. I
wanted it to feel like these memories were
coming back, appearing and disappearing,
seeming less important and more
important as the writing is introduced. It
grows, it builds, and it changes.
Home Page
Developing the home page was one of
my favorite aspects of this project —
balancing the user experience, responsive
design, and integreity of the content
was an interesting challenge. I knew I
wanted to explore different channels of
delivery, rather than a traditional feed of
headlines. I utilized imagery, quote, and list
organization to display the content.
Initial home page explorations
Home Page
Visit home page ->
For the final home page I settled on
displaying the content through a grid and a
list. The visually appealing grid is the first
land, but allows the reader to navigate via
list if they’d prefer.
“Animated Cover”
I wanted the introduction on the left to
function kind of like a print publication
cover does — in that I wanted it to be
intriguing and interactive. I wanted
someone to feel that push, to pick it up
and touch it. I think this idea has potential,
particularly if The Recollect were set up by
issues, and using different language and
devices to introduce specific stories, or
themes.
Branding Moodboards
“Friendly Modern Grotesque”
“Monotone Blackletter”
“Subversive Zine”
“Bold Modern Minimalism”
Branding Exploration
After creating the branding moodboards, I decided to go
in the direction of blackletter, as a nod to the history of
publication and a bold way to convey the brand.
Some logo explorations
Final Branding
I went through many different colors, experimented
with a lot of web fonts and finally decided on this bright,
uncomfortable green and the Gabriel Sans Family.
I chose the green because I wanted it to feel unique and
native to a screen and Gabriel Sans because I wanted
a typeface that was both distinctive and friendly. I
supplemented the green with shades of gray for balance.
Logo
Typography
Gabriel Sans Black Italic
Gabriel Sans Bold
Gabriel Sans Medium
Gabriel Sans Normal
Gabriel Sans Light Italic
Gabriel Sans Thin
Gabriel Sans Thin Italic
Color
What’s Next
I knew from the beginning this project
would most likely not turn into a fulIfledged publication post-thesis, but I do
want to take these ideas and expand upon
them in Babe Vibes, or other publications,
in the future. I’m not done, for sure! Below
are some ideas I’m still toying with.
Have a suggestion? Idea? Question?
Something I oughtta read? Email me at
hello@karahaupt.com.
Concepts I’m still thinking about:
Contextual links, what does it look like when external
links occupy the same space as the linking content?
Gestalt, “parallax” visual elements occuping
the space before, after, and during reading the
referenced content.
Is there a digital equivalent of the presence of wear
and tear, or perhaps, just “presence” of people
reading, interacting, and particpating in interactive
publication?
How can we mimic the feeling of the cadence of
conversation with interactive design and threaded
interviews?
How does native advertising effect the integrity of
interactive publication?
How we make marginalia work as commenting, or
commenting work as marginalia?
How will we move publication away from screens
and into our environements?
Does successful interactive design move people
away from their devices?
How do we make lasting and enriching interactive
publication while resisting clickbait?
Bibliography + Resources
Nonlinearity:
Building Stories by Chris Ware
What Screens Want by Frank Chimero
Visual Editions
On Publication:
64 Ways To Think About a News Homepage by Melody Kramer
Fully Booked — Ink on Paper by Andrew Losowsky
Post-Artifact: Books & Publishing by Craig Mod
Post Digital Print by Allesandro Ludovico
The Social Life of Marginalia by Liz Danzico
What Books Will Become by Kevin Kelly
Publications:
Adult Mag
An Another
Hazlitt
The New York Times
Technical:
Responsive Web Design by Ethan Marcotte
Uilang
Visual Inspiration:
Fraktur Mon Amour by Judith Schalansky
Women Writers:
Interview with Vivian Gornick by Believer
The Laugh of Medusa by Hélène Cixous
The VIDA Count
Thank you to contributors:
Chelsea G. Summers, Clare Vernon, Intisar Abioto Jazmine Hughes, Jenna Fletcher,
Jessika Stocker, Kristin Rogers Brown, Lauren Zuniga, and Sarah Sentilles.
Special thanks to:
Carrine Urrutia, Daniyel Hicks, Joel Marchand, Katie Beasley, Kristin Rogers Brown,
Martha Lewis, Martin French, Mei Ratz, Skylar Jessen, Steph Luke, Stephanie
McCullough, and my parents for all their support and love.