Archive of Our Own
Archive of Our Own
I Created An Alternate In-Site Search Engine And New UI
A reimagining of the site Archive of Our Own, with a revised search engine that better aligns with user exceptions and redesigned UI for better accessibility.
A reimagining of the site Archive of Our Own, with a revised search engine that better aligns with user exceptions and redesigned UI for better accessibility.
My Role
My Role
UX/UI Designer, UX Researcher
UX/UI Designer, UX Researcher
Date
Date
December 2024
December 2024
Category
Category
Web Redesign
Web Redesign
What is Archive of Our Own?
Archive of Our Own is run by the Organization for Transformative Works and hosts stories called fan fiction, where fans gather to share their creative stories of a beloved series.
However over the years, there has been plenty of user frustration over its confusing navigation and busy UI. In this project, I will asses the quality of Archive's current site and redesign its UI and in-site search engine based on user feedback:
"I don’t like the tags being thrown together, feels kind of chaotic."
"I don’t like how its so open ended? It’s overwhelming."
What Will I Do With The Feeback?
UI redesign + optimize in-search engine
UI redesign + optimize in-search engine
🧑💻🔍 + 📑🔨
This project will focus on the desktop and main guest experince of the website.
This project will focus on the desktop and main guest experince of the website.
The 3 Most Popular Pages Of Archive Were Tested With 6 Users For Functionality
Homepage: Search For a Keyword & Related Content
Archive Original Homepage
Archive Original Homepage
Advanced Search Page: Look For A Character Tag, Exclude A Character Tag, And Search For The Most Popular:
Original Advanced Search Page Describing Javascript Commands for Filtering
Original Advanced Search Page Describing Javascript Commands for Filtering
Search Results Page: Find A Crossover Story, Exclude, And Add A Character Tag
Original Archive Search Results Page
Original Archive Search Results Page
66% expressed:
Cluttered UI & Readability
Users were overwhelmed by the amount of visual information.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
33% expressed:
Overwhelming Tags
Users complained the unlimited hashtag system hindered keyword searches.
33% expressed:
Overwhelming Tags
Users complained the unlimited hashtag system hindered keyword searches.
50% expressed:
Poor Search & Navigation
Users struggled because there were two ways of searching and got overwhelmed.
50% expressed:
Poor Search & Navigation
Users struggled because there were two ways of searching and got overwhelmed.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
There Were Two Ways To Search & Navigate:
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.
Original Fandom Links Page Filled with Thousands of Links
Original Fandom Links Page Filled with Thousands of Links
Exclusion Filters Were Only Found By Those Who Frequented The Website
New or casual users experienced heavy frustration because they were hidden.
Visual Issues:
Of all users surveyed, 66% complained about either visual layout of the site or experienced reliability issues.
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.
Persona 1
Persona 1
The Freuqent Reader
Persona 2
Persona 2
E-Commerce And Other Literature Hosting Websites Were Considered For Their Filter Or UI Styles
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.
Main Pain Points of Archive Exposed
Declutter and Redesign the Messy UI
During interviews on the original Archive of Our Own site, users said they were
overwhelmed by the confusing UI.
Improve In-Site Search & Navigation
Evidence has shown users experienced poor search and navigation that hinders
them in finding the stories they want or excluding content they do not want to see.
Declutter and Redesign the Messy UI
During interviews on the original Archive of Our Own site, users said they were
overwhelmed by the confusing UI.
Improve In-Site Search & Navigation
Evidence has shown users experienced poor search and navigation that hinders
them in finding the stories they want or excluding content they do not want to see.
Redoing Archive's Site Map Where I Merge Priority Features & Trim The Fat
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 Demonstrate How This New Layout Would Work
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.
Fandom Page Concept Showing a Filter System But was Scraped Due to Complexity
Fandom Page Concept Showing a Filter System But was Scraped Due to Complexity
Original Fandom Links Page Filled with Thousands of Links
Original Fandom Links Page Filled with Thousands of Links
Archive's Mid Fidelity: This Iteration Consists of 3 Task Flows, All Starting From The Homepage
How to Search and Read Fanfics:
Homepage, Work Search Results, and Fanfic Page
Homepage, Work Search Results, and Fanfic Page
New Bookmark and About Pages Were Added To The Homepage To Build On Archive's Identity As A Non-Profit Run Site Filled With Active Users.
Users who said they liked browsing community recommendations and would like more explanation on the website's mission were addressed here.
Homepage leading to either the About or Bookmarks Page
Homepage leading to either the About or Bookmarks Page
Mid Fidelity: Removal of Advanced Search Page
In Favor Of A Side Panel Filter
Unlike the complete removal of the Fandom Page, this one was merged with the Work Search Results. After studying Amazon's side panel filters 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.
Original Advanced Search Page Describing Javascript Commands for Filtering
Original Advanced Search Page Describing Javascript Commands for Filtering
New Side Panel Advanced Search Filters on Search Results Page
New Side Panel Advanced Search Filters on Search Results Page
Mid Fidelity Testing Results & Analysis
40% couldn't access:
Recent Bookmarks
Users said they couldn't access "Recent Bookmarks" from other pages, other than
the HomePage.
40% couldn't access:
Recent Bookmarks
Users said they couldn't access "Recent Bookmarks" from other pages, other than
the HomePage.
40% had trouble:
Searching for Crossovers
User's mental models form the original site carried over, resulting in confusion over the new search filters for crossovers.
40% had trouble:
Searching for Crossovers
User's mental models form the original site carried over, resulting in confusion over the new search filters for crossovers.
60% had trouble:
Navigating Home
Users had no idea how to back out of a page and used Figma's inbuilt button instead.
60% had trouble:
Navigating Home
Users had no idea how to back out of a page and used Figma's inbuilt button instead.
100% mistook:
They were logged in
Users mistook the Homepage as their own Dashboard because they thought "recent" meant their own search histories.
100% mistook:
They were logged in
Users mistook the Homepage as their own Dashboard because they thought "recent" meant their own search histories.
First Version Of High Fidelity 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.
High Fidelity Home Page and Search Results Page
High Fidelity Home Page and Search Results Page
80% did not want:
To View Public Bookmarks
Users had low interest in viewing public Bookmarks on the Homepage.
80% did not want:
To View Public Bookmarks
Users had low interest in viewing public Bookmarks on the Homepage.
100% Requested:
Fanfic Page Customization
Users requested the ability to customize text and background when reading stories.
100% Requested:
Fanfic Page Customization
Users requested the ability to customize text and background when reading stories.
100% failed to notice:
The Browse Feature
Users failed to use the browse because they did not know what it did.
100% failed to notice:
The Browse Feature
Users failed to use the browse because they did not know what it did.
40% Requested:
Homepage Drop-Downs
Users wanted to view story summaries on the Homepage from the story cards.
40% Requested:
Homepage Drop-Downs
Users wanted to view story summaries on the Homepage from the story cards.
Changes to High Fidelity Based on Tests:
Bookmark Page: Users Were Not Interested In Individual Public Bookmarks, But Wanted TopStory Rankings Instead
Bookmark Page Before
Bookmark Page Before
Bookmark Page After
Bookmark Page After
Fanfic Page: Users Requested Reader Customization, To Edit & Adjust Their Reading Environment
Fanfic Page before with no customization for reading
Fanfic Page before with no customization for reading
Fanfic page after, with ability to adjust text size and other customizations
Fanfic page after, with ability to adjust text size and other customizations
Homepage: A Drop Down Was Added On The Story Cards So Users Won't Have To Leave The Page
Homepage before
Homepage before
Homepage After
Homepage After
Header: "Browse" Was Changed To "Community" Because It was More Specific To Where Users Would See Community Updates
Header Before
Header Before
Header After
Header After
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).
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
© 2025 Wei Yan
Email Contact
Yw.rworks@gmail.com
Socials
Archive of our Own
I Created An Alternate In-Site Search Engine And New UI
A reimagining of the site Archive of Our Own, with a revised search engine that better aligns with user exceptions and redesigned UI for better accessibility.
My Role
UX/UI Designer, UX Researcher
Catagory
Web Redesign
Date
December 2024
What is Archive of Our Own?
Archive of Our Own is run by the Organization for Transformative Works and hosts stories called fan fiction, where fans gather to share their creative stories of a beloved series.
However over the years, there has been plenty of user frustration over its confusing navigation and busy UI. In this project, I will asses the quality of Archive's current site and redesign its UI and in-site search engine based on user feedback:
"I don’t like the tags being thrown together, feels kind of chaotic."
"I don’t like how its so open ended? It’s overwhelming."
What Will I Do With The Feeback?
UI redesign + optimize in-search engine
🧑💻🔍 + 📑🔨
This project will focus on the desktop and main guest experince of the website.
The 3 Most Popular Pages Of Archive Were Tested With 6 Users For Functionality
Homepage: Search For a Keyword & Related Content
Archive Original Homepage
Archive Original Homepage
Advanced Search Page: Look For A Character Tag, Exclude A
Character Tag, And Search For The Most Popular:
Original Advanced Search Page Describing Javascript Commands for Filtering
Original Advanced Search Page Describing Javascript Commands for Filtering
Search Results Page: Find A Crossover Story, Exclude, And Add A Character Tag
Original Archive Search Results Page
Original Archive Search Results Page
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
33% expressed:
Overwhelming Tags
Users complained the unlimited hashtag system hindered keyword searches.
33% expressed:
Overwhelming Tags
Users complained the unlimited hashtag system hindered keyword searches.
50% expressed:
Poor Search & Navigation
Users struggled because there were two ways of searching and got overwhelmed.
50% expressed:
Poor Search & Navigation
Users struggled because there were two ways of searching and got overwhelmed.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
66% expressed:
Unusable filters
Users who didn't frequent the site often, or were new, gave up in frustration.
There Were Two Ways To Search & Navigate:
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.
Original Fandom Links Page Filled with Thousands of Links
Original Fandom Links Page Filled with Thousands of Links
Exclusion Filters Were Only Found By Those Who Frequented The Website
New or casual users experienced heavy frustration because they were hidden.
Visual Issues:
Of all users surveyed, 66% complained about either visual layout of the site or experienced reliability issues.
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.
E-Commerce And Other Literature Hosting Websites Were Considered For Their Filter Or UI Styles
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.
Main Pain Points of Archive Exposed
Declutter and Redesign the Messy UI
During interviews on the original Archive of Our Own site, users said they were
overwhelmed by the confusing UI.
Improve In-Site Search & Navigation
Evidence has shown users experienced poor search and navigation that hinders
them in finding the stories they want or excluding content they do not want to see.
Declutter and Redesign the Messy UI
During interviews on the original Archive of Our Own site, users said they were
overwhelmed by the confusing UI.
Improve In-Site Search & Navigation
Evidence has shown users experienced poor search and navigation that hinders
them in finding the stories they want or excluding content they do not want to see.
Redoing Archive's Site Map Where I Merge Priority Features & Trim The Fat
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 Demonstrate How This New Layout Would Work
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.
Fandom Page Concept Showing a Filter System But was Scraped Due to Complexity
Fandom Page Concept Showing a Filter System But was Scraped Due to Complexity
Original Fandom Links Page Filled with Thousands of Links
Original Fandom Links Page Filled with Thousands of Links
Archive's Mid Fidelity: This Iteration Consists of 3 Task Flows, All Starting From The Homepage
How to Search and Read Fanfics:
Homepage, Work Search Results, and Fanfic Page
Homepage, Work Search Results, and Fanfic Page
New Bookmark and About Pages Were Added To The Homepage To Build On Archive's Identity As A Non-Profit Run Site Filled With Active Users.
Users who said they liked browsing community recommendations and would like more explanation on the website's mission were addressed here.
Homepage leading to either the About or Bookmarks Page
Homepage leading to either the About or Bookmarks Page
Mid Fidelity: Removal of Advanced Search Page
In Favor Of A Side Panel Filter
Unlike the complete removal of the Fandom Page, this one was merged with the Work Search Results. After studying Amazon's side panel filters 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.
Original Advanced Search Page Describing Javascript Commands for Filtering
Original Advanced Search Page Describing Javascript Commands for Filtering
New Side Panel Advanced Search Filters on Search Results Page
New Side Panel Advanced Search Filters on Search Results Page
Mid Fidelity Testing Results & Analysis
40% couldn't access:
Recent Bookmarks
Users said they couldn't access "Recent Bookmarks" from other pages, other than
the HomePage.
40% couldn't access:
Recent Bookmarks
Users said they couldn't access "Recent Bookmarks" from other pages, other than
the HomePage.
40% had trouble:
Searching for Crossovers
User's mental models form the original site carried over, resulting in confusion over the new search filters for crossovers.
40% had trouble:
Searching for Crossovers
User's mental models form the original site carried over, resulting in confusion over the new search filters for crossovers.
60% had trouble:
Navigating Home
Users had no idea how to back out of a page and used Figma's inbuilt button instead.
60% had trouble:
Navigating Home
Users had no idea how to back out of a page and used Figma's inbuilt button instead.
100% mistook:
They were logged in
Users mistook the Homepage as their own Dashboard because they thought "recent" meant their own search histories.
100% mistook:
They were logged in
Users mistook the Homepage as their own Dashboard because they thought "recent" meant their own search histories.
First Version Of High Fidelity 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.
High Fidelity Home Page and Search Results Page
High Fidelity Home Page and Search Results Page
Bookmark Page: Users Were Not Interested In Individual Public Bookmarks, But Wanted TopStory Rankings Instead
Bookmark Page Before
Bookmark Page Before
Bookmark Page After
Bookmark Page After
Fanfic Page: Users Requested Reader Customization, To Edit & Adjust Their Reading Environment
Fanfic Page before with no customization for reading
Fanfic Page before with no customization for reading
Fanfic page after, with ability to adjust text size and other customizations
Fanfic page after, with ability to adjust text size and other customizations
Homepage: A Drop Down Was Added On The Story Cards So Users Won't Have To Leave The Page
Homepage before
Homepage before
Homepage After
Homepage After
Header: "Browse" Was Changed To "Community" Because It was More Specific To Where Users Would See Community Updates
Header Before
Header Before
Header After
Header After
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).