How can a web app streamline the creative writing process and improve story structure?
Allow writers to visually map out the emotional arc of the story, while tracking data about the content within.
UX/UI Designer (sketching, wireframing, UI)
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.
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.
We considered a few different types of writers:
- solo spec screenwriter
- member of a small writing team
- showrunner (lead writer/producer) in a writers' room
- graphic novelist
For our MVP, we focused on solo screenwriters. Future versions of the app will include solutions aimed at other writers' needs.
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.
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.
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.
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.