I redesigned the site mobile-first, starting with the logo.
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 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.
Searching is one way to start browsing.
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.
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.
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.