Creative writing tool

For my final year creative technology project I was able to incorporate my passion for storytelling, digital technologies and user centred design. I researched and developed a web application to help authors manage their creative writing projects.

I used a range of qualitative research methods including:

  • Design probes
  • Interviews and conversations
  • Auto-ethnographic case studies
  • Research through practice to better understand the creative writing processes

This ensured my final design was grounded in insights developed from considering the creative writing process for both myself and others.

Getting started

In order to start planning my creative technology project I decided to sit down and create a mind-map to solidify the ideas that would eventually inform the content of my proposal. 

I eventually settled on the idea of creating a something that would help users to manage their creative writing projects; incorporating various UX techniques to motivate the user to keep writing by making it easy to organise their:

  • Outlines
  • Plans
  • Scenes
  • Manuscripts
  • Character development
  • World building
  • Research
  • Images
  • Prompts and inspiration
  • As well as have them be able to note down information on the go

Research threads & questions

To narrow down my aims I decided to write down all of the research areas I initially felt would be important and categorise them.

  1. ​What current issues will my web application solve?
  2. How do people usually manage their own creative writing projects, and how will my web application enhance this process?
  3. What is the best suited technology to build my web application?
  4. How can I design my user interface to encourage people to keep using my web application?

Competitor research

I then researched different software / applications that aid organisation of writing and media.

Toyhouse has been designed with visual character development in mind and the user interface has been really well designed. It is very simple and easy to navigate which makes it quick to get started creating new characters and organising existing content. It gives users the option to create worlds and tags that they can save their characters under; making it very easy to find what you need and to start to create more developed story lines.

Toyhouse has provided customisation functionality by having a HTML editor (alongside a ‘what you see is what you get’ editor) so people can create profiles for their characters. Being able to showcase their work has led to the site having a great community vibe where people help and coach one another. Having a feature for users to help one another would really help with progression of skills (not unlike how real life face to face writing groups do).

As well as Toyhouse I looked at Scrivener which has been designed to help people manage creative writing projects. It has a lot of carefully considered functionality (like linking content, colour coding, cork board and search) however the user interface is tricky to use. A writer friend of mine said that they had really struggled to navigate the program which had resulted in her refusing to use it. When researching online I came across lots of long tutorials on how to use it which is something I want to avoid.

Proto-personas & scenarios

Insights

Grant needs:

  • Link items
  • Easy UI
  • Smart pen integration
  • Access anywhere

 

Rosie needs:

  • To store ideas
  • Organisation
  • Motivation
  • Tagging system

Ethnographic case study

To gather primary research I documented my attempt at starting a new short story by taking notes and photographs as I went.

 

Notes

I have not done as much work as I set out to as I spent a lot of time tracking down information. It would be better if it was all in one place to begin with as I have not really started writing or working on the main story.

I like being able to have a Tumblr and Pintrest etc. but I wish I could save stuff under the same umbrella somewhere, so when I want to work on it I can easily search and find relevant information instead of having to trawl around to find things. Having lots of documents, bookmarks and papers is messy, and stops me from focusing.

I write science fiction and fantasy where the setting is a big part of the story but in other forms of fiction this is not the case. People that write in other genres may have a different process to create their stories.

 

Next steps

To get well rounded research I will put together a kit and send to some other writers so they can follow this same process. This will give me insight into how my web application can help other people.

Current themes & conversations

One student I spoke to was in the middle of a complex academic project and said that they found noting down ideas ‘hard’ as ‘things end up in different documents – both paper and electronic’ which often ‘don’t follow the same structure’ causing them to ‘lose things’. 

They said that having a ‘template structure’ to follow for note taking would make it much easier to order their thoughts, and being able to group content to form links between ideas would be helpful. This was interesting to me as this meant that my web application could be used by people undertaking lots of different types of writing projects, not just creative writers.

 

Someone that writes creatively said that they had tried using digital writing organisational tools before (notably Scrivener) and said that they found them to be ‘dated’ and ‘difficult to use’ due to ‘confusing UI design’. They did say that they would be interested in using a program to organise their work in the future as long as it was ‘well designed’ and ‘suited their needs’.

 

Themes

  • Linking content

  • Grouping items

  • Easy user interface

  • Structuring content

These insights validated my previous research and gave me the direction to dig deeper with semi-structured interviews.

Case study 1

Process

I created a design probe to hand to two participants for them to document starting a new short story.

The first note card that I created asked my participant to take roughly 10 minutes and plan/write out a fictional short story.

It also asked that they document their process, being sure to focus on any issues they encounter, by taking notes and pictures.

 

Case study 1

Reading through the instruction card my participant seemed really nervous and hesitant to get started. Eventually they looked and me and asked ‘do a new story? I can’t think of anything…’

At this point I stepped in and said they could plan a story instead of trying to write one in the time frame. They agreed to this but swiftly looked as though they had regretted offering to help me.

I quickly decided that I was asking too much of my volunteer and put together an updated instructional card that would make it easier for them.

To give my participant something to focus on I included a writing prompt that asked them to re-write 'the Three Little Pigs from the wolfs perspective to show what really happened'. This helped a lot as they were able to get right to planning and writing without having to come up with story ideas on the spot.

 

Analysis & insights

I took the notes/photos and read through the material they had generated and found:

  • They had used pen and paper to work with when outlining their rough plans
  • They drew out plot points & motivation for characters
  • Created the sequence of events
  • Used a laptop to remind themselves of the original story

It was interesting that they liked to plan the story in advance as this was very different to my work processes.

Case study 2

Insights

Unlike my own process they spent a lot of time planning each aspect of the story before setting started. This brings me back to earlier research on discovery writers and outliners; discovery writers will invent characters and write freely to see where the story takes them, and outliners like to plan their work in advance to improve productivity.

Seeing these two methods in action gave me a good understanding of how to cater to both styles of writing.

Interviews

Interview #1 insights

  • Colour-coding
  • Multiple people work on a project – great for collaboration
  • Keep track of who has made what changes
  • Don’t want to waste time learning how to use the UI
  • Like to get everything written down as quickly as possible
  • Break down projects/stories into more manageable chunks
  • Allow people to add comments – people can leave quick feedback
  • Want different accounts to be integrated into whatever site they are using
  • Easy way to digitally store rough hand written notes

 

Interview #2 insights

  • Wants to write to relax more
  • Short on time – wont spent time on a complicated UI
  • Save different forms of media (photos/videos)
  • Save content in one place to help complete work

Requirements

Functional

Critical:

  • Log-in system
  • User profiles
  • Tagging system
  • Ability to store lots of different media
  • Responsive for mobile use
  • Corkboard/grid style image galleries
  • Search
  • Sort and organise content

Non-critical:

  • Forums
  • Private messaging
  • Customisation
  • Colour coding content
  • Smart pen integration
  • Social media integration and APIs
  • Offline use

 

Non-functional

Critical:

  • Simple and easy to navigate UI
  • Provide community feel
  • Pages to showcase work
  • Build in a modular way as to allow for growth
  • Aesthetically pleasing

Non-critical:

  • Templates for people to follow
  • Encouragement in the form of inspirational quotes and writing prompts

Wireframe testing

I sat with a group of students and asked them to test my rough wireframes by tapping on the designs to navigate through and complete tasks.

I made a mental note of any confusion and re-created the wireframes to be used for my initial prototype.

Initial prototype

Before going ahead and building my final prototype I decided to explore the technical aspects, and logic, of how each piece would fit together. A rough prototype would give me something to user test before investing a lot of time in my web application. This means that I will avoid having to make major structural changes (or scrapping pieces entirely) later on in my project depending on user feedback. In order to build a technical prototype I put together:

  • Important site content
  • Necessary site pages
  • Research findings
  • Rough wireframes

To guide me as I started to piece together the puzzle of how each element would fit together.

 

I used Visual Studio MVC and used a combination of HTML5, CSS3 and C# to build the site. I focused on creating a stripped down skeleton using Twitter Bootstrap to give a feel for how the site will eventually work and feel. This helped save time and allowed me to focus on pulling together the technical aspects that would serve as a foundation to my application.

User testing

I wanted to observe people using my initial web app prototype to make sure that it was easy to navigate and use. I gathered together five different people, a mix of writers and non-writers, and gave them four scenarios to work through.

I then sat and took notes of each time they got stuck or had any comments. This was incredibly helpful because I realised that there were quite a few usability issues that needed to be solved in the next iteration.

Insights

  • Make it more clear that the project hub is the project hub
  • Add back buttons and breadcrumbs to make it easier to go back
  • Add a navigation bar to the side panel so it’s less confusing to find information
  • Add folders to project draw as it looks cluttered
  • Separate account information and project information in navigation bar as it is too confusing
  • Recent updates needs to be stuff made public and not random stuff added
  • People keep clicking ‘add new project’ to get to the project draw – need to make clearer
  • Some people used the tags to find character information but were then confused as to how to get back
  • People were unsure how to start a new story – suggested adding a ‘start new story’ button to the navigation – then attribute it to a project

Final prototype development

To plan out the backend functionality of the web application I created an entity relationship model (ERM) to help me figure out exactly how the database would store user data.

Looking into the user interface design I came across the Material Design Lite framework which allows you to quickly implement responsive web elements, and does not rely on JavaScript frameworks. This was great as I wanted the interface to be simplistic and save me time in not having to include any other frameworks such jQuery libraries.