Redesign Overview
Role
UI/UX Designer​​​​​​​
What is Fandom?
Fandom is the largest wiki-based entertainment hub for fans of pop culture. Fandom currently houses 385,000+ communities. 
Reasons for redesign:
1. Fandom's Wiki homepage interface is extremely limited and outdated. Users aren't able to thoroughly explore the categories and are forced to know what they're looking for. 
2. Since Bob's Burgers is my favorite show, I decided to redesign its wiki homepage as well. The original homepage lacks strong navigation features, has misplaced content and outdated resources. 
Redesign goals:
1. Provide users more navigation options to avoid feeling trapped and/or limited to only certain information.
2. Design up to date interfaces using current UI trends.​​​​​​​
Process
original design testing:​​​​​​​
I chose 3 participants to spend time navigating through both the Fandom and Bob's Burgers Wiki pages. 
Takeaways from testing
Fandom's Wiki homepage*
Participant 1: Felt trapped on the homepage, became agitated when thinking of what to search for, doesn't know if they'd use the website again.
Participant 2: Felt confused and limited on the homepage, wanted a way to browse through the categories, would use the website if updated.
Participant 3: Felt limited using the homepage, wanted a way to quickly browse through categories, would use the website if updated.

Bob's Burgers Wiki homepage*
Participant 1: Thought the homepage is limited without the toolbar, wanted clickable subheadings, questioned the dead link.
Participant 2: Thought the homepage layout works, but needed to be updated, wanted larger/bolder text, said the background takes away from the text.
Participant 3: Thought the homepage needed to be visually updated, wanted larger text, questioned the dead link.
Wireframes​​​​​​​
I then wireframed my ideas based on what participants said during the testing phase. In the redesign phase, I stayed semi-close to the wireframes and made changes where I saw fit. 
Redesign
Fandom Wiki homepage  Link
Original
Redesign
What I did: 
1. The first thing I did was create a carousel with three current/popular titles in common categories. The goal is to grab the user's attention by using popular titles they've heard of, regardless of if they've seen, read, listened, or played them before.
2. I added carousel indicators for quick navigation. I also added a 3 second slide timer to keep the wikis flowing and provide users enough time to soak in the information.
Original
Redesign
What I did: 
1. The original homepage takes the "what you see is what you get" approach. If you don't see what you're looking for, you HAVE to search for it. In my redesign, I provide users the option to use the arrow button over the thumbnails to carousel through and potentially find what they're looking for. I also put navigation arrows next to the category subheaders for users to fully browse.​​​​​​​
2. I put a call to action button directly under the photo carousel to encourage users to create a wiki in case they have an idea or can't find what they are looking for. The original call to action button has to be searched for. I'll show you what I mean in the next comparison.
Original
Redesign
Original
Redesign
What i did: 
1. The layout of the About Fandom section flows easily, but the colors of the icons needed improvement. Psychology says that orange enhances creativity/activity. Yellow is said to increase happiness and optimism. Green is said to depict trust and growth. I changed the blueish gray background to dark gray to allow the colors to become more vibrant. I also changed the icons in the circles to better connect with the words.
2. As I mentioned before, the original homepage forces users to find the call to action button. To avoid that, I put one at the top of the page and one at the bottom. No more searching!
Bob's burgers wiki Link
Original
Redesign
What i did:
1. I changed the Bob's Burgers logo to show more personality in the title. I also changed the vibrant yellow to a certified Bob's Burgers yellow. I liked the layout of the toolbar, but the placement of the "Add New Page" button and numbers interrupts the natural flow of the eye.
2. I decided that the drop down arrow beside the edit button could be used to provide features like: Share, Login, Sign Up, etc.
Original
Original
Original
redesign
Redesign
What i did:
1. I changed the polling system to the Burger of the Day chalkboard. I shifted the text to the left so when someone votes, the polling results appear to the right.
2. I changed the character section into profile circles to create space and provide users the quick information they need to know about the show. I also put a clickable arrow beside the character category so users don't have to scroll up to the character tab on the toolbar to explore.
3. I removed the Live News section because it's prone to crash. I also removed the Affiliate Shows section on the home screen because it's not essential and can be found in the miscellaneous part of the wiki.
Links:    Fandom wiki  bob's burgers wiki  |  prototype
Thanks for viewing!

You may also like

Back to Top