Figma, Adobe Photoshop
Redesign menus and navigation
Refresh visual identity and user interactions
Research & Planning
Before starting to work on the redesign I looked to similar popular websites in the same space. After comparing and contrasting their differences, I started working on features that I think needed the most tuning. The websites in the same space that I looked to the most for inspiration include:
I looked to modern website design and wanted to push the current design towards using more gradients, colors, and bolder text.
When I redesigned the homepage the three elements I redesigned and changed the most were the:
Instead of displaying only one EDHRECast video on the homepage, I rearranged elements so that users can scroll through a couple of the latest videos.
All the information in this sidebar remain, but my proposed design makes the sidebar sticky, so you can always see it no matter how far you scroll.
The article views break up the image and headlines so that it is more naturally read (left to right) and provides more horizontal spacing for particularly long headlines or subtitles.
I use the same article view as what was previously shown on the homepage. In addition, this page features the latest article with a large cover image and larger text.
Filters and Search
To quickly find articles fitting your topic, you can search for tags or just use the popular tags listed below.
Reading an Article
Once you are in the article, the only major feature I added was a floating sidebar that lets a user jump to relevant sections of the article for easier navigation.
In the current iteration of the website, when you move over to the community content tab, it displays them with text and using images.
I redesigned this section to show the full preview thumbnail, similar to how Youtube is set up. I think it's more visually informative and makes more sense to showcase videos.
This feature is similar to how it was implemented on the Articles page. I would love to be able to filter out a specific keyword and have EDHREC only display related videos.
This page was redesigned with exploration and discovery in mind. I wanted the user to be able to peruse and browse through more information without having to commit to navigating to that commander's page.
Right now EDHREC only uses hover to display an "Add to Clipboard" button. I wanted to extend this feature out depending on where a user was on the site. For example, when looking at commanders, they would be able to hover to see popular themes that the commander builds around.
Find a Commander
To encourage looking at more commanders I'm bringing in a second menu where users can easily see all color options and be able to filter from here with ease.
Once you choose a filter, in this example I used Mono-White, you can click into that specific commander's page.
View as Commander
This page is formatted similarly to the existing website, with just a few visual updates to match the rest of my design.
View Average Deck
From this page, a user can view the average deck for that commander. Currently, EDHREC displays a text-only decklist. I would update it to show a visual decklist, where users can hover over card names to get previews.
In terms of visuals, I decided to use more modern colors and gradients to bring some vibrancy into the website.
Next Steps and Takeaways
Redesigning an entire website was a fun but daunting task. I kept most of the menus and hierarchies the same focusing on bringing the visuals into more modern aesthetics. I loved adding in little tweaks and features to imagine how I would use it. In the future, I would also explore:
Currently, my design only focuses on the web. I would love to redesign it for mobile and see what challenges and roadblocks that would present.
Challenge The Stats
On EDHRECast, they frequently do a segment called "Challenge the Stats". I look forward to that segment every episode and would love to find a way to implement a home for that feature on the website.