Challenge

How can a web app streamline the creative writing process and improve story structure?

Solution

Allow writers to visually map out the emotional arc of the story, while tracking data about the content within.

My Role

UX/UI Designer (sketching, wireframing, UI)


 

Personal Takeaways

This project was a great exercise in iterative design and foregoing perfectionism. Although the first release of the app included a lot of functionality, everything non-essential had to be eliminated.

 

Process

Discovery + User Research

My client approached me with an idea for writing software that had been percolating in his head for a number of years—essentially, his ideal writer's assistant. He had already conducted preliminary user research interviews with Hollywood screenwriters, which helped us clarify the goal the application: to give writers more insight into their content.

 

Personas

We considered a few different types of writers:

  1. solo spec screenwriter
  2. member of a small writing team
  3. showrunner (lead writer/producer) in a writers' room
  4. graphic novelist

For our MVP, we focused on solo screenwriters. Future versions of the app will include solutions aimed at other writers' needs.

 
 
 
 

User Journey

Because the writing process is unique to each individual, the user journey is non-linear and can be considered a journey between different mental spaces. For that, we needed to design an app that could shift gears at a moment's notice and allow a writer to begin from any point in their process.

 

Site Map + IA

To support the different stages of the screenwriting process, we designed the app with two different content-creation views, with additional areas for managing diegetic (story-related) and non-diegetic details. These four views are global navigation elements so that users can quickly switch between them.

 
 
 
 

Sketches

My client was very involved in suggesting initial functionality and concepts for Yoric, which I then modified or developed further. Throughout the project, I used sketches as way to quickly iterate through different solutions and make sure our team was aligned in how we would tackle each problem.

 

Wireframes

After producing a number of sketches for each area of the app, I translated the best designs to wireframes. I'm relatively tool-agnostic, and will use whichever works the best for the task at hand. Keynote is fast for visualizing each stage of a workflow, whereas Sketch and OmniGraffle helped me dig into the UI across the different areas of the app.

 
 
 
 

Prototype + Testing

Development occurred concurrently with design, so I was rewarded with a functional prototype (with backend!) shortly after my design engagement wrapped. We enlisted beta testers as soon as was feasible, and they have provided valuable feedback in how we develop the app further.

 

Communicating Design + Stakeholder Approval

This project was undertaken remotely, with myself and the two co-creators (one of whom was also a developer). I found that showing designs frequently, even when half-baked, provided valuable feedback and raised pertinent questions in a way I had not yet experienced. This was a great project to practice "failing fast" and getting past that moment of failure toward a good solution.

 

Refinement

I continue to design new features for the app during my breaks from graduate studies. I'm excited each time I revisit a previously-designed section of the app and find areas to improve. We continue to add new functionality to the app and to refine existing areas of the system.

 
 
 

Details

URL: www.yoric.co
Date: June 2015 – Present
Role: UX/UI Designer (Remote)
Tools: Sketch, OmniGraffle, Keynote
Client: Modest Conspiracy LLC
Dev Team: Logical Reality Design