bigPic_21

Website Redesign, Visual Design

EDHREC

EDHREC is a robust deckbuilding resource for commander players. As a side project, I decided to redesign the visuals and interface of the website.

Background & Overview

This project was an excuse for me to start learning Figma, prior to this project I mainly used Adobe XD and Adobe Photoshop for design. The main things I decided to focus on were visual identity, usability, and readability.

cover_2

Breakdown

Role

Duration

Team

Tools

UX/UI Designer

4 Weeks

UX/UI Designer

Figma, Adobe Photoshop

Problem &
Tasks

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: 

mood2-1

Moodboard

research

I looked to modern website design and wanted to push the current design towards using more gradients, colors, and bolder text.

mood1-1

Homepage

When I redesigned the homepage the three elements I redesigned and changed the most were the:

EDHRECast Carousel

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.

Commander of the Day Sidebar

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.

Article Views

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.

Homepage-1
4My3NM1LQY

Articles

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.

Articles
Specific-Article
v829s6GC7k

Community Content

In the current iteration of the website, when you move over to the community content tab, it displays them with text and using images.

Displaying Previews

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.

Tags and Filters

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.

Community-Content
dsk7oT0O89

Dropdown Menus

In my redesign of the dropdown menus, there wasn't that much I changed in terms of layout. Most of the changes here are purely visual with colors and animation.

By-Color-Opened-White
Commander-Dropdown
zU07P5IFJJ

Top Commanders

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.

Hover Info
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.

Commander-Page-Year-Variant
Commander-Page-Week-Variant-Hover-1
Commander-Page-Dropdown
zU07P5IFJJ

Commander Page

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.

Commander-Page-White
God-Eternal-Oketra_new
God-Eternal-Oketra-Average-Deck
w8QyswfAd3

Visual Design

social
websitePics
1

In terms of visuals, I decided to use more modern colors and gradients to bring some vibrancy into the website. 

  • Type: Squada One for Logo, Lato for Website
  • Logo: Cleaned it up a bit so it reads well as small icons.
  • Colors: Dark blues, greys, and yellow as an accent.
  • Shapes: Organic waves match the visuals of statistics.
visual_Design
cover
About-Us-2

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:

Mobile
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. 

Contact 

Currently
Freelancing and actively looking for full-time, part-time, or freelance opportunities in UX, UI, or visual design.

Email
dangddanny@gmail.com

Elsewhere
LinkedIn
Instagram
Twitter

Resume
Download

Back to top Arrow