Design Challenge

Our client, Wow!Systems, approached us with an opportunity, designing a cross platform innovative interface which supports the process of creative writing.

My Role

For the MHCI Capstone as Project Lead and Design Lead, I planned and managed the budget, coordinated team meetings, maintain close liaison with the client, created the visual design, logo and branding, and collectively worked on the UX research and interaction design with my team.

 
TEAM EPIC (Susan Buenafe, Luis GUZMAN, Namrata kannan, and kristine mendoza)

TEAM EPIC (Susan Buenafe, Luis GUZMAN, Namrata kannan, and kristine mendoza)

 

UX Research

With an undefined scope and to understand the creative writing process we used a combination of user research methods on aspiring and established writers and educators.

We performed a competitive analysis and secondary research to gain an awareness about what tools and applications already existed and what techniques worked for writers.

 

A few of us from the team attended a series of creative writing workshops to immerse ourselves in the writing process.

Informal interviews and directed storytelling were conducted with poets, novelists, editors, bloggers, screenwriters, teachers, songwriters and cartoonists.

contextual inquiry and interviewing writers

contextual inquiry and interviewing writers

attending creative writing workshops

attending creative writing workshops

 

Key Insights

After each interview, the team would meet up to interpret our findings from each of the interviews. We then used affinity diagramming to synthesize our data and come up with insights.The information that we gathered allowed us to hone into the following 4 key insights: community & inspiration, revision & frequency, reflection & play, and the writing sweet spot.

Research hours

Research hours

Affinity diagramming

Affinity diagramming

developing team branding

developing team branding

 

Design Process

Working with our client, we decided to focus on trying to find a solution to enable amateur writers to examine their work, explore different possibilities or ideas, and have the ability to be flexible and make major and minor changes. We would like to create a desktop application for amateur writers which will aim to shuffle pieces of text and writings to help support the creative writing process.

With the chosen concept, we generated 60+ design ideas and narrowed down to 12 visions. Which we sketched out storyboards and used the method of 'speed dating', to allowed our peers and professors to quickly vet our ideas.

IDEATION oF big ideas

IDEATION oF big ideas

big ideas for the vision of the app

big ideas for the vision of the app

 

Prototyping

lo-fi sketches and paper prototyping

lo-fi sketches and paper prototyping

Mi-Fi prototyping

Mi-Fi prototyping

 

Storyboarding Scenario #1

sketch1.png

Christopher has always found it cumbersome to organize his pieces writing and struggles when it comes to putting it all together. Christopher opens up the app and is quickly able to organize his writing and see an overview of how his story is progressing.

 

Storyboarding Scenario #2

sketch2.png

April has been writing since she was 11. She understands the hard work that comes with writing, and produces various iterations on most parts of her story. She is meticulous; every detail is scrutinized. Asking herself, would this character say this or that? Should I use this tone to describe the scene? What if my character decided to do this instead? With the app open, April is able to quickly write her story and evaluate alternatives.

 

Evolution of Yarn

evolution of yarn's UI

evolution of yarn's UI

 
yarn_workflow.png

For a larger version, here is a PDF of Yarn App Workflows

 

Features of Yarn

hifi_dualscreen_features.png
 

FEATURE #1: THE THREAD

Each dot on the thread denotes a section in the writing and displays the title and subtitle of the section.

FEATURE #2: TEXT EDITOR

We found that a minimal text editor with just the essential formatting options was the focus of our application and ideal for concentrating on writing.

FEATURE #3: ALTERNATES

We have provided two "Alternates" which can be found to the on the left of the thread. By clicking on them, it slides over the text editor, opening up the alternates pane. They can be swapped horizontally to switch the writing displayed in the text editor.

 
Hi-Fi Prototype Mockup: New Project

Hi-Fi Prototype Mockup: New Project

Hi-Fi Prototype Mockup: Text Editor View

Hi-Fi Prototype Mockup: Text Editor View

Hi-Fi Prototype Mockup: Notes Panel View

Hi-Fi Prototype Mockup: Notes Panel View