Lisa Nian Liu
thumbnail.png

AO3 Redesign

In 2004, fanfiction lived on badly-formatted Geocities sites, so reading it in present day on Archive of Our Own (AO3) is a huge step forward. Unfortunately, when I take my super-user goggles off I realize AO3 still has a long way to go.

Fanfiction culture is an explosion of bold, colorful creativity, but from the outside it just looks like a boring, complicated system of tags and text. How can I refresh this site to reflect how fun and colorful and accessible the content really is?

Original Site | Mobile Prototype | Desktop Homepage

workflow.png
sketches mockup.png
I redesigned the site mobile-first, starting with the logo.

I redesigned the site mobile-first, starting with the logo.

Why mobile?

Why mobile?

This is biased, but I (as a user) primarily read fanfiction on my phone.

Also, redesigning a text-heavy interface for mobile seemed a unique challenge. It’s easy to fit a lot of tiny tags and big text fields into a desktop website, but it’s not as easy in mobile.

I cut a lot of unnecessary content out from the Homepage.

I cut a lot of unnecessary content out from the Homepage.

I grouped the content on the page into 4 buckets - Fandoms, About/FAQ, Start Now, and News Updates/Tweets.

There was a lot of content surfaced on the homepage about AO3, but it was disorganized and de-centralized. I decided to simplify this content into 1 simple about statement with stats and a FAQ link.

old new mockup.png
Searching is one way to start browsing.

Searching is one way to start browsing.

I estimate that most users don’t know how to use the search effectively. See here and here for detailed guides (located elsewhere in the site) to searching on the current site.

A good suggestion is to attach the help guide directly to the search box so that when the users are struggling with the search, help is right there.

Users spend a lot of time browsing works to decide what to read next.

Users spend a lot of time browsing works to decide what to read next.

There is a lot of information surfaced on each summary that includes but is not limited to rating, relationships, characters, general tags, and story stats.

While browsing, the user may want to guarantee the best appreciated or most popular works show up first by sorting by kudos or hits. This is the most common filter element utilized.

They may also filter by tags such as ratings (ex. exclude explicit material), warnings (ex. exclude major character death) or any number of other tags. Users do this by using the filter aside OR by clicking directly on the tag to search by that tag. AO3 has the capability for unlimited tags, so I chose to hide the non-major ones under a ‘More’ button for ease of scanning.

Within the filter aside, the search box is particularly powerful — once the user starts typing, it autofills with suggested results from any tag existing in the system. In the current system it is hidden under the tag categories, so I decided to group the categories under an accordion and put the search box above them. A tag bank is another useful addition that shows the user what has been selected.

At the individual work level, a user's primary action is to read.

At the individual work level, a user's primary action is to read.

We have 2 types of users: first time readers who start on chapter 1 and faithfully progress by hitting ‘Next’, and repeat readers who know which chapter (usually the latest one) they need to get to and use the dropdown to get there.

read mockup.png