Ever since I was a child I was an avid reader and I would read anywhere from two to three books a week. I fell in love with science fiction, horror, and fantasy, and I’d eat up my school library's collection of Oz, Goosebumps, Narnia, Harry Potter, Ender's Game—and whatever else I could get my hands on.
However, as I grew older and my interests broadened in things like comics, television shows and movies, I discovered fan fiction, which married the best of both worlds; reading and epic fandom!
(Quick context for those unfamiliar- fan fiction is stories created by fans and written within a fandom, like Star Trek or Harry Potter)
Ever since then I've been an avid reader, and even published my own short novel-length stories.
Growing tired of difficult-to-use sites like http://FanFiction.net I discovered Archive of Our Own during my early college years. It was a huge relief to find a cleanly designed site which was much easier to parse through to find my favorite fandoms and read stories.
However, Archive of Our Own wasn’t without it’s own navigational flaws; it was difficult to find specific fandoms/character stories that I wanted to read, and when I did find them, it took too long to find quality writers and stories in that fandom that were worth reading.
Trying to improve my experience I logged onto the App Store, downloaded a couple of reader apps and tried them out. Consensus? They were not great; most of them were buggy and had terrible search and save capabilities, more so than Archive of Our Own itself.
Having been navigating fan fiction sites for more than a decade I observed the pain points readers and writers would frequent and what would harbor a better experience.
So, I designed one myself.
I used a design thinking approach for all these steps.
My principle is “Start design with Why” to clearly understand why users need this app. I should know what the users’ goals are like and how they achieve them. The wrong way is to ask them directly what they need, the right way is to observe and ask what goals they are trying to achieve and how they are going to do this.
So I set up my interviews’ objectives, target audience, and questions before starting the interviews.
I decided to interview different types of users—both male and female with ages ranging from 18-40, and with different levels of engagement with the site. I tried to pick people who were casual readers as well as avid readers, so I could observe both groups and understand how people generally access and use the Archive of our Own site. I also looked at app reviews for a variety of fan fiction app readers such an Fanfic.net and Wattpad to get a better gauge of users' common pain points and wish lists.
I analyzed the research results and noticed users similar behavior and pain points.
I concentrated on one type of target user— people who are in high school and/or college who read fic in their limited amount of time while commuting to school. This app will not be helpful for users who want to write their fics on mobile because for now I just want to optimize the reading experience. Based on my research, I created an imaginary 20 year old college student to be a primary persona to define who may be my target user.
Now that I’ve defined the main users’ needs, I can create my app flow map.
The common and fastest way to start reading fan fiction is to sign up, search for your favorite fandom, and love your favorite stories in order to get the best recommendations for similar, high-rated stories that they might want to read next. My idea was to have the user fill out their profile with three of their top fandoms (optional), and then get related stories (scored by most kudos/hits) fan fiction in their feed.
Based on my observations and insights, I created a list of features that can help users in their needs:
The way how the content is organized is as important as the content itself. In my case user’s success with finding an interesting story depends on a fast and convenient search.
The basic user flow is very simple — after signing up and completing your profile, you start with searching for stories using a key search term (i.e. "Harry Potter") and then you get a list of stories ranked by hits & kudos where you can select the one you're most interested in reading by adding "loved" stories to your library or start reading and have those stories saved under the "recently read" screen.
Before putting pen to paper, I decided to look at some of my favorite eReader apps and observe what they were doing well, what I liked about them, and how they made my life easier by using them. To do this, I looked at two different apps: Wattpad (a competing fan fiction site to AO3) and Blinkist (an app which thrives on making informative reading fast and convenient for people with little time by summing up books into 15-minute chunks that can be either read or listened to).
I chose to focus on Blinkist because it really excels at making reading fast for me, which as a busy person I really appreciate. Also, taking into consideration that according to statistics, readers on mobile only spend an average of 18 minutes of Archive of our Own, easy, fast reading would be a huge priority for my app redesign. They also have a very unique dashboard that lists books on a horizontal scroll, which I love because it saves space and also allows my dashboard to be dynamic with recently read, curated lists, my library, etc. all on one screen.
Secondly, I chose Wattpad because it's one of the largest competitors to Archive of our Own, and is a wonderful hybrid of a traditional eReader app (think: Kindle) and a fan fiction app. My favorite feature is that they allow writers to upload a cover for their story, just as you would a real book. They also allow non-fan fiction authors to publish on their site independently which I think is a really cool feature.
Now that I know what features/screens need to be created, and I have looked at some of my favorite eReader apps for inspiration, I move onto sketching out my ideas on paper which allows me to my layout ideas quickly and see them in the larger whole.
With my sketches in hand, I now have a basis for creating my lo-fidelity wireframes and eventually my high-fidelity screens in Sketch which I've shown below. I've combined some of the best aspects I found during my app design inspiration research, including the cover images from Wattpad, and the stories sidescroll feature from Blinkist which allows me to include a lot of information on the homepage like such as recommendations, recently read, recently updated, and a preview of the user's library (first 3 or 4 books).
Now that I have a prototype, I can begin to test my app on my target audience of users and get their feedback. Since this is the first round of ideation, I will be going through a few more cycles of testing, then ideation, then testing again until I get to a point where I am sure I am hitting my main goal which was to optimize the mobile experience by creating the following features and testing them to see if the experience is effective:
A lot of things have come up during my process of designing that I know need to be addressed in some way, such as: