Namrata Kannan

User Experience & Design

Yarn: Unravel The Story

As part of the professional master’s in Human-Computer Interaction at Carnegie Mellon, we have to complete an eight month project with an industry client. Our client Wow Systems is a technology firm based in Funchal, Portugal. Their services range from installing interactive multimedia systems to software development and consulting.



Design Opportunity: An Innovative Writing Application

How can we design a innovative writing application? Our client came to us with the desire to envision, design and prototype a simple yet powerful writing tool.

Introducing Yarn

Yarn is a desktop application that provides both the structure and flexibility needed for writing. It supports the existing model that writers follow, where they begin with fragments of a story and later move them around. It allows for the ambiguity involved in the writing process while encouraging writers to plan their stories. It also provides writers the ability to create and save different possibilities of each part of their story. It has three main parts; the thread, alternates and text-editor.

Parts of Yarn
Yarn
Thread

The thread allows the writer to break the story in sections and hence work on a single piece at a time. Each dot on the thread represents a section.The dots can be moved along the line to re-arrange sections of writing.

Alternates

Users can create and view alternates to each section of writing. It helps them reflect on their writing and come up with multiple choices. The dots beside the thread provide a visual indicator of the versions created.

Text Editor

A minimal text editor is the central focus of the application. With only the essential formatting options, it allows the writer to concentrate on the writing. The thread and alternate panes can be collapsed and expanded as needed.

Yarn Web/Desktop Application
Minimal Text Editor

Design Process: The Making of Yarn

Understanding the Domain

We began by trying to understand the creative writing process using informal interviews and directed storytelling on aspiring and established writers/educators. We did a competitive analysis of existing writing tools and In our secondary research we read published papers, literary journals, articles and watched videos to help us analyze the practices of successful writers and what made them work. We decided to immerse ourselves in the creative process and attended a series of creative writing workshops. After 26 interviews and 55 hours of analysis we uncovered four top user needs. Writers:

Ideation and Synthesizing

Based on these insights, we generated four concepts and our client chose the concept Shuffle which allowed writers to easily shuffle their writing and encourage iteration. We explored what shuffling could encourage or look like. We visioned around 60+ ideas for our application, drawing on our research and chosen insight. We then narrowed the field down to eleven concepts, which we tested using speed dating and talking to professional writers. We also evaluated them against metrics such as feasibility, implementation time and resources. This iterative process of going wide and narrowing down, helped sift the promising ideas.

Speed Dating Session
Users at Speed Dating Session
Prototyping and Testing

We had a client workshop and we decided on the final three ideas to be explored for the final product: Lens Cap, Sliding Doors and Story Arc. We had five different rounds of prototyping and testing.We gradually increased the fidelity of each successive prototype and made changes elicited from user feedback. Beginning with two rounds of paper prototyping, we moved to a functional (but visually unstyled) web prototype, and finally a high fidelity web prototype. We conducted several rounds of usability testing to evaluate our prototypes. We tested with creative writers with varying level of experience from London, Amsterdam and Madeira.

Concepts Generated
Concepts Generated

Prototype 0 was used for concept testing. Each story's narrative follows an arc and this was provided to help writers guide their story. Writers found that their stories did not always follow a traditional arc and the shape was hence limiting. However they enjoyed using it to manage their writing by moving pieces around. We learnt that our tool had to merely facilitate writing rather than guide it. It had to disappear into the background, so that the ideas took forefront

Paper Prototyping
Prototype 0

In the second and third rounds. We discarded the arc for a linear timeline aka "the thread" which helped move sections of writing around. We also incorporated the idea of alternatives to each section of writing. The writers loved it.

Concept Testing
Concepts Testing With Paper Prototypes

We then moved on to usability testing of the design using a bare bones HTML5 prototype. We made interaction decisions such as how to interact with thread, text editor?, where should we place the controls?, how many alternates should each section allow? Interactions had to also follow the existing mental model of how users interacted with web and desktop applications.

Medium Fidelity Prototype
Prototype Used for Usability Tests
Design Evolution

We also worked on our design language and visual styling of the application. Our client had given us guidelines such as clean and zen. The design of the application went through several rounds of iterations.

Version 1
Version 2
Version 3

Yarn: Next Steps

We created a web prototype and you can play with it here. Our paper describing the design process for Yarn has been selected as an entry for Industry Experience at NordCHI '14.

EPIC team website

Design and Development Report

Research Report