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.
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:
Moodboard
I looked to modern website design and wanted to push the current design towards using more gradients, colors, and bolder text.
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.
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.
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.
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.
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
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.
Visual Design
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.
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
