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.
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.
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.
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.
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.
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.
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:
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.
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.
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
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.
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.
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.
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.