Core Function

After researching the website, I broke down Subcreation into its two core elements: tier lists and specialization builds. Then, I visualized a flow that would make sense for the user. This helped simplify the user flow and create a solid reference point to be able to refer back to while designing. This then lead into organizing the website into a site map so I could understand how a user would be able to navigate to the different pages and what interactions were needed on each page.

‍

Research

User research were short responses of people’s experience with the website, aimed at competitive World of Warcraft gamers who PvE. Assumptions from the team before research were that people would want a general catch-all page that described each spec and tier lists. After research, it seems that the emphasis of the website should be focused on player builds.

‍

Pain Points

1. Hard to navigate
   Getting to the information that users want felt confusing and a little long-winded. Some navigation lead users to a dead end and not to the data that they were trying to find. This helps guide the designs to be more streamlined and find solutions that require less clicks to get to each type of data.
   ‍
2. Inclusion of tier lists
   Top-end gamers disagree with the inclusion of tier lists and feel that it shows a misleading narrative without proper context. Others like seeing tier lists for what they are. Designs should include the tier lists but also take the focus away from tier lists and put emphasis on the builds.

Establishing Identity

‍The team wanted to create a more defined identity for the website. Pulling inspiration from World of Warcraft, I used the gear rarity system colors to create a palette.

Grid

For the final layout, I used a 12-column grid to organize ground the website design. I found that this was the best way to lay out the immense amount of data on the website.

Initial Explorations

Initially, I explored how the website would look like with the original content just with a different look. I explored a side bar navigation and new layouts. However, I decided to reimagine the homepage in a way that was still familiar to the original version with a top navigation and a more direct path for the user to get to the data they would be looking for.

Final Designs & Prototype

In the final layouts, I create a design system that puts information hierarchy first. Using differing gray values to make an easier viewing experience helped establish the tables. I designed multiple button types and tabs for the different ways to navigate the build page.

One thing that Subcreation does is having the ability to link out to Wowhead's talent calculator where users can then copy a talent loadout on that website but it was a little clunky in how to do it so I proposed that the talent string can be copied on the website itself to reduce opening multiple pages while still allowing users to link out if they would like to.

I included an animated prototype using After Effects so that the developers can get a better sense of what I was imagining for the interactions on the homepage.