What is Archive of Our Own?
Projects Goals
🧑💻🔍 + 📑🔨
View Prototype
For easier reading, for now on Archive of Our Own will be shortened to "Archive".
Research was used to explore why users were experiencing problems on the current Archive site. When I first started my research, I surveyed the site structure and noticed how similar it was to most e-commerce websites in terms of functionality. This lead me to not only refer to its direct competitors but also websites such as Amazon or Ebay for guidance in my future competitive analysis.
To understand the problems users were facing, 6 people between the ages of
20-30 were asked to preform tasks and rate the website's most trafficked pages including the Home page, Work Search Result page, and Advanced Search page. This was done so I could identify existing pain points.
Homepage:
Search for a keyword and find content related to that keyword. For this research, users used the word "pokemon" to look for pokemon related stories.
Advanced Search (Filter):
Search for a character tag, exclude a character tag, and search for most popular. Archive uses a hashtag like Twitter, where its used to organize content into niche catagories.
Search Results Page
Find a "crossover story" (label that denotes a story has special features), exclude, and add a character through the site's hashtag system.
Other Findings
Search & Navigation had two ways to preform a keyword search. The search bar was rated to be the easiest way by users, however, 50% of the users tested used the Fandom Lists page, which also hosted quick links to each fandom's stories.
Exclusion Filters were only found by those who frequented the website and new or casual users experienced heavy frustration because they were hidden.
From my findings, I decided to put my data into an affinity map, to analyze common traits experienced by users. Once the organization was complete, I extracted the most common pain points to create personas that represented these issues as my main focus.
This map helped me categorize and extract information as follows:
Key Pain Points:
Visual issues: Of all users surveyed, 66% complained about either visual layout of the site or experienced reliability issues. Of all the completions the word “overwhelming” and “bland” kept popping up between different users.
Navigation issues: 50% of users had issues with site navigation where they were unable to perform searches correctly, or used the Fandom page which lead them to an overwhelming page of links. Additionally, 4 people failed to exclude a tag from the Advanced Search and gave up out of frustration.
The affinity map identified two types of users on this website. The "New User" and the "Frequent User", which both exhibited different behaviors. Two personas were created to emulate these traits to help define my user base.
I did a Competitive analysis and picked out multiple competitors such as other writing hosting websites but also e-commerce giants such as Amazon and Esty. As I was researching for this project, I noticed how similar Archive's structure was to these websites despite serving a different user base entirely. This includes their filters, to the why they display card or item information which was a big help in my design journey.
WattPad
RoyalRoad
Amazon
Etsy
Wattpad
Similar website dedicated posting written work that has clean and spacious UI, where the way they arrange tags, item cards, and filters in a very minimalistic style that creates a clean feeling website.
Royalroad
Has a detailed, more organized genre filtering system where there are concrete sections in between for different inquires. They are organized in either drop downs to decrease visual confusion, or hidden until clicked.
Amazon
Has a global search option and side panel advanced search filters that allows users to browse and filter at the same time.
Esty
They have popular hashtags in carousel that serve as suggestions for the
user to browse even more products.
Before I started sketching, I mapped out the site original Archive's site map and then simplified it with my own. Gathering information from my competitors, certain priority features were retained while others that could be merged or cause confusion were scaled down. For example, the About Page merged with the Donation Page because they both accomplish explaining the organization's goal.
Once the site map was created, I focused on the pages users would most likely use which included the following: Home, About, Work Search Results, Advanced search, and Fandoms page.
Using this I created user flows and task flows to see demonstrate how this new layout would work.
Archive's Main Painpoints
Low Fidelity Overall Concept
Low Fidelity: Removal of the Fandom Page
During the first round of interviews, there were two ways for users to search for content on Archive (Search Bar vs Fandom Page links). After sketching out the concepts for both, I decided to discard the page because almost all users preferred the search bar. It was a tough call, however by limiting search options, it will help reduce user confusion as less is more.
This data was supported as in my interviews, where users who chose to search for "Pokemon" using Fandom Page page often took longer and were more frustrated compared to the Search Bar.
Archive's Mid Fidelity
This iteration consists of three task flows, all starting from the Homepage.
How to Search and Read Fanfics:
New Bookmark and About Pages:
Two extra pages were added to add more content to the empty Homepage from the original Archive site. Now the new Homepage features a bookmarks section from users who said they liked browsing community recommendations and more explanation on the website's mission.
Mid Fidelity: Removal of Advanced Search Page
Unlike the complete removal of the Fandom Page, this one was merged with the Work Search Results. After studying Amazon's side panel filters in the competitive analysis which had similar filtering capabilities and referring to data of users being confused by the original Advanced Search page, I decided to merge it Work Search Results.
Mid Fidelity Testing Results & Analysis
High Fidelity
The first version of the high fidelity was built with the following fixes:
Addition of a new Homepage button on the header to help users more easy return to the Home Page.
The "Recent" series on the Homepage was renamed to "Recent Community", denoting they were not personal preferences.
A new extra "Crossover" checkbox was added for filters to align more with the original Archive of Our Own's way to searching which involved a similar task flow: (Checkbox, type keyword, Add)
After the high-resolution design was finalized, I conducted additional user trials to verify if the modifications had effectively mitigated their previous bottlenecks.
Changes to High Fidelity Based on Tests:
Bookmark Page
Users said they were not interested in viewing other's public bookmarks, and there was also the problem of mass bookmarking one story which could lead to a flood of the same content: Changes were to convert this page into a "ranking" page instead where users did request a "top" story page instead.
Fanfic Page
100% of users requested customization on the Fanfic Page, which hosts written content. The before and after here shows new options to edit the text size, dark mode, and other customizations in a drop down menu.
Homepage
During testing, 40% of users requested a drop down feature on the Homepage so they can view summaries in a condensed form, rather than clicking into the story right away.
Header
100% of users failed to use the "Browse" feature to help them access the "Recent" features away from the Homepage. The name was changed to "Community" to further help link the community updates on the Homepage to the header navigation.
Final Prototype
After the final round of revisions, here is the final prototype along with the before
and after pages from the original website vs the my own.
Next Steps & Reflection
Wrapping up the final rounds of testing, I was proud of the redesigns I made to Archive of our Own. When I first started out with the low fidelity, I had many questions on my mind such as which pages to keep or features to use. Thankfully, I had my user interviews to relay on and had to made some bold moves to take this design where it is now. Although this journey doesn't end here, this experience has taught me to discern the necessity of features and that sometimes less is more depending on your design.
For my next steps, I would defiantly do another round of testing and start to work out the text customization features, since this was a popular by users. Additionally, I will go further in-depth on the content filters (mature content, popularity, word count) this version of Archive of Our Own would because we only visited a few of them so far (add, exclude).