EDHREC Website Redesign

EDHREC assists Magic: the Gathering players with deck-building ideas. Employing user research and UX heuristics I remedied consistent user confusion on the site.

Role: Product Designer

Company: EDHREC

Industry: Gaming

Explore the prototype
PROBLEM

Many EDHREC users find the sites interface confusing.  The pages, microcopy, button and form design all could be made more intuitive.

How might we: Redesign the EDHREC website to allow both new and returning users access all of EDHREC’s features with the least confusion and friction while staying within a limited developer budget?

DEFINE

After interviewing 6 people, both EDHREC users and those that had never seen the site, user frustrations and processes became clear.

Interviewee Frustrations

  • No synergy section for combos
  • Unintuitive connection between deck building and searching cards out on the site
  • Articles page does not provide useful navigation - backward temporal is not very useful
  • Unintuitive advanced filter interaction
  • Recommendations page does not reflect the ability to search by a specific commanders and get an average deck
  • Need to use multiple tabs to use the site, no way to save cards
  • Difficult to overlap cards to see a venn diagram of themes or decks
  • No synergy section for combos

Interviewee Deck-building Process

How might we: Redesign the EDHREC website to allow both new and returning users access all of EDHREC’s features with the least confusion and friction while staying within a limited developer budget?

SITE AUDIT

I audited the site. I found opaque copy, unclear features, unattractive statistical displays, and obtrusive ads throughout the site.

Homepage

  • Important links are hidden by ads, new users could not find wiki link on homepage.
  • Dark/light theme cog button unclear. No need to prioritize keeping two themes in redesign, as no users noted that as a valued feature.
  • Large ads push users from homepage and confuse them as to the purpose of the site. Rather than read the site, they are attempting to find a way off this page. If revenue is the problem, a patreon button would be preferable to unappealing ads.
  • Search bar helpful for quick navigation, should keep easy access.
  • “Commander of the day” limited use to all users studied. An “at-a-glance” trends section would provide card stats centrally, provding easy access to filters that could assist with deeper searches from the homepage.
  • Most users don’t use article section, can be less emphasized.  Article boxes too large. Hashtags unecessary. Cards are oversized for their importance to most users and tend to overwhlem users rather than invite them to read the articles.
  • Random commander button unclear, icon look like shuffle.
  • No synergy section for combos

Navigation Menu

Navigation bar acts as the primary site navigation. Most users will interact more with the navigation bar than any other part of the site. Currently, the Navbar provides no information about the game of EDH or the use of the site. Using the bar to train users in the site architecture and the game of MTG is an obvious choice for the redesign.

Card Page

  • Pie charts are mostly avoided as they can be difficult for the eye to compare section sizes with accuracy.
  • “Navigation” menu actually acts more like a filter. Additionally, the links below confuse the purpose of this section.
  • The spacing of the HUD makes it challenging to focus on any specific elements. It needs more space and attention to heirarchy of information on the page.
  • Tabs at top control everything below them on the page, but are often missed by users. This is a major feature that is missing use.
  • Community content & card information are mixed together, resulting in a HUD with conflicting purpose.
  • The advanced filters were unused by most users, including experienced ones. Multiple users bailed from the filter after being asked to try it.
SECONDARY RESEARCH

I compared EDHREC to fintech, insurance, and other MTG sites. Fintech & insurance were important sources of inspiration for statistical and navigation displays. Other MTG sites helped to clarify design systems that would be recognizable to MTG players.

USER PERSONA

EDHREC users map onto Magic: the gathering user demogrpahics very closely, as EDHREC is a tool for Magic: The Gathering. Using this information along with that gained via User interviews, I created a user persona to direct the rest of the project.

IDEATE

Users interviewed had no complaints about the actual layout of the website, only with its execution. The sitemap, user flow, and redesign helped reformat the site, rather than rethink the overall layout.

Deck-building is the primary use of the EDHREC website, so below I’ve detailed how a user moves through that process to clarify user friction & process.

Initial Sketches: With a focus on visuals and part based diagnosis, an image based UI made the most sense. From there, users can then tap on labeled images to get to a step by step repair guide.

Pages

Navigation Menus

PROTOTYPE & TEST

The menu and page design supports new user onboarding and put the most desired features front and center on the site. Website elements are smaller and more legible. Notes are taken from usability test responses.

Pages

  • Too many card titles in “top in” section

  • Commander of the day not revelant feature for those interviewed

  • Videos should be moved up above articles, as they were relevant to more users

  • No user overwhelm on entering homepage

  • Endless scroll on card pages adds to user confusion about their location in the site, should find another way to display synergistic cards

  • Users understood the features accessible to them and correctly guessed how those features (ex. add a filter) would work

  • Returning users thought new features has been added, but where surprised to learn they had always been there

Navigation Menus

  • New Navigation labels were intuitive for users

  • Menu titles with explanatory subtitles were useful for both returning and new users.

FINAL FRAMES

Incorporating usability study data, I designed the final layouts for handoff to the EDHREC team.

Homepage

Card Page

Navigation

explore the prototype
WHAT I LEARNED

Features must be integrated with proper signifiers to support both new and returning users.

  • Features focused on new users can assist experienced users navigate the site better. The navigation menus and reformatting of card page filters were pointed at increasing understanding for new users, but ended up giving greater feature access for returning users.

  • Vertical Hierarchy is critical when implementing filters. Filter options existed below the information they were filtering on the original site, leading to disuse and user confusion.

  • When working with a limited developer budget, focusing on points of key user friction is key. The EDHREC site had many points of friction, when I emailed with their team, I made sure to create an order of suggested edits.

Thank you for the view! Another?

explore Patreon case study

© 2024 Jacob Molloy. Made with Joy & Love.