Website Redesign

Competitive chess has been a hobby of mine since middle school, and the USCF is the national organization for chess tournaments. I saw that their site had recently been remade but still had several issues, so I thought it would be interesting to try and redesign their website in a better way.

The website I chose to do was uschess.org.

Objective

Redesign the USCF website to make it better in terms of accessibility and visual design.

Identifying Issues

I identified a few major issues with the website below:

  • Small text
  • Small images
  • Disorganized banner and logos
  • Poor use of space
  • Cluttered navigation links
  • Inconsistencies in links

More problems with accessibility were found with the help of WebAIM WAVE, a tool to assess the accessibility of websites. The blue text has a low contrast with the background and could be detrimental to people with visual impairments. Several of the images do not have alternative text. All the links on the page do not contain text. There are also redundant links on the stories featured on the page. For the most part, I don’t think the links not containing text are a problem, since they work and look fine. I agree that the low contrast text could be fixed.

Lo-fi Prototyping

Visual Design Guide

I kept many of the same colors on the website while redesigning the article look with two different kinds of cards. The dropdown, search, and buttons now follow unified designs.

Hi-fi Prototyping

Below are Figma prototypes of the website in three different device formats.

Desktop View

Tablet View

Mobile View

Responsive Redesign

Using the hi-fi prototype as reference, I recreated the new design using HTML and CSS to the best of my ability. The new version is easier to read and makes the most out of the given space. It is responsive when viewing the page from different devices so that no weird formatting issues arise on smaller screens.

Check out the website here!

Takeaways

  • • Lo-fi and hi-fi prototyping are useful tools to test out designs before coding them.
  • • Redesigning a whole website is a lot of work!
  • • It's better to create stylized components and add them to the prototype or webpage prior to actually beginning to put everything together.