The Brief
The objective was to choose an app or website, unbundle one of its features, and design an app centered around it. I chose a subreddit on Reddit.com called /r/WritingPrompts, which is a community message board where people can share their writing and provide feedback for each other.

The Challenges
Since this subreddit gives writing prompts for its users to follow, they are able to dive directly into writing a story. However, there are a few issues with it to note:

• Format is very open-ended, which can be intimidating to beginner writers

• Relies too heavily on user-generated feedback for writers to grow

• No way to save drafts or track multiple stories on site

• Medium is a blank text box, which doesn't offer helpful ways to organize and structure story

Gaining Perspective 
To get a sense of what features I could capitalize on in my app, I took a look at some popular writing tools such as Medium and Scrivener. 
Affinity Diagram
I conducted interviews with writers to find out what their writing process was like, roadblocks they'd encounter, and techniques they use. I compiled my findings into an affinity diagram to identify recurring themes and generate ideas on where to take the direction of my app.
Main Findings
• Having role models/mentors encourages people to keep writing

• Positive affirmation and getting eyes on a story provides inspiration 

• Many writers struggle with motivation and dealing with outside distractions

• Keeping language of a story natural and remembering where details fit is challenging

• People will put a story away for a while and come back with a fresh perspective

• Character boards, outlines, and taking notes helps with organization
First User Flow
I made a rough draft of what the user flow of my app might look like. However, I wasn't focused enough on how Write Haven would help users become better writers. I needed to do more research on story writing methods.
Story Circles
I found a method of story writing used by one of my favorite writers, Dan Harmon. He calls the method "Story Circles," which is the idea that every story follows this format: 
Updated User Flow
With more direction on how I would help my users become better writers, I made a new user flow that incorporated Story Circles.
First Wireframes
Now that I had my process down, I used Axure to create some rough wireframes and get a sense of how my app would look and feel.
Initial Feedback
I asked my colleagues to give me critique on ways I could improve my first round of wireframes. Here is what I found:

• The app was too text-heavy; needed visuals to break up the text on screen

• Prompting users to choose how long their story would be limited creativity and wasn't helpful

• Adding a level-up system would be a fun and natural way to track progression

• It would be beneficial to allow users to submit a draft of their story earlier on, so others can comment on direction and give feedback
User Testing Insights
After incorporating the initial feedback into my new round of wireframes, I used Axure to make an interactive prototype and tested with users to gain further insight.
Updated User Flows
By creating a prototype, I was able to better communicate my vision for Write Haven and delve deeper into the minutia of the interactions. My user testing insights resulted in the following user flows:
Onboarding
I broke the writing prompts into tiles to make it more apparent to my users what they were selecting. I also brought more attention to the outline step, but still offered users the ability to dive directly into writing.
Writing & Paragraph Breaks
Double spacing in a story creates paragraph break buttons. However, I later realized this would clutter my screen even further. 
Outline & Character Boards
Visual Design/Commenting Flow
I thought teal and orange were nice colors that compliment each other. Orange is also a good call-to-action color since the eye is drawn to it, and would clue people in on interacting with buttons of that shade. Eventually, I introduced a third color to the palette.
Minimum Viable Product
In order to confirm that Write Haven has the necessary tools to help people become better writers, the next logical step is to create an MVP and get it in the hands of users.

Write Haven has a lot of complex features. Thus, it was necessary to design a more streamlined version to reduce scope. This gave me the chance to simplify interactions even further. I also made mockups of all the screens so the developer could recreate them identically in the app.

Onboarding
By taking a more realistic approach, I realized some of my interactions were needlessly complex. Such as how I handled Paragraph Breaks (now called Section Breaks). I also replaced the Fantasy genre with Romance, as it seemed to me a trope-driven genre and too similar to Horror and Sci-Fi.
Writing & Section Breaks
By looking at the iOS Developer Guidelines, I learned I could customize the keyboard and streamline the development process by utilizing built-in interactions, such as the pickers.
Character Boards
Giving users the ability to navigate seamlessly between the different writing features in a toolbar made much more sense rather than hiding those interactions behind a menu.
Prototype
Even though I outlined the user flows, I made a prototype to show my developer exactly how the app will work to leave no room for miscommunication.  
I made sure American Typewriter was a compatible font with iOS devices. I also wanted the buttons and text fields to be consistent throughout the app, so the developer wouldn't have to continuously remake assets and for a better UX.
What's Next?
Now that I have designed the final user flows, made a style guide, and created specifications for the mockups; I've handed everything off to my developer who is in the process of building out the UI. We are coding the app natively on iOS with React, so that it can be ported to Android in the future.

Check this space for more updates as the process moves further along. 
Write Haven
1
135
0
Published:

Write Haven

1
135
0
Published: