An unsolicited redesign of a chess club website
Project Lead
UX Designer
UI Designer
Adobe XD
Procreate
Heroicons
Design Audit
Concept Ideation
Brand and Identity Design
Prototyping
User Interface Design
September 30, 2021 - October 15, 2021 (2 weeks)
High Fidelity Prototype for Desktop
Assess Existing Identity
Evaluate Website Design
Outline Proposed Changes
Create New Identity
Logos, Colors, Typography
Update Website Layout
High-Fidelity Prototyping
Micro-Interactions
The Challenge
In looking for real-world experience, I came across a post from Bay Area Chess Club on a volunteer finding website. They wanted help redesigning their website and updating their visual presence online. Even though I never heard back from them, the idea of rebranding a chess club was so exciting that I couldn't help but conduct an unsolicited redesign anyway.
Purpose
BayAreaChess is a chess club that was founded by Salman Azhar to give his son and his classmates a higher quality chess program, in place of the school's lesser program which was more expensive.
They gained nonprofit status in 2011 and have expanded to serve communities throughout the Bay Area in Southern California. Just in 2018, they were named the Chess Club of the Year by the US Chess Federation!
You can read more about BayAreaChess here.
Constraints
As this is an unsolicited redesign, I was unable to connect with users of the BayAreaChess website to determine what their pain points were with the website.
Result: This proposed redesign focuses on updating the website's interface to modern web design standards rather than aspects of the user experience.
Still, my proposed outline for improving the user experience can be found here.
As I would be working with an existing brand and website, I conducted a design audit to take account of what the club was working with in terms of their logos, typography, colors, and layouts.
Once I had an understanding of their existing identity, I was able to create an outline of the areas of improvement they needed the most. Which were as follows:
Brand
The club's branding is inconsistent and lacks originality. They had 3 different logos in different webpages, all of which lack scalability in small formats. A look at the HTML reveals the use of CSS default colors that lack complementarity and personality.
Result: Creation of a revamped brand identity and design system, complete with a redesign of their logo, creation of alternative logos, submarks, and a color and font system. Designing with this system will ensure consistency across pages and establish a fun personality for the club.
Layout
The layout of the club's website needs to be updated to follow established UI patterns, which will help it's usability and accessibility.
The styling of the website's HTML is minimal. Lack of whitespace results in large blocks of text, some of which are centered and difficult to read.
Result: The 3 homepage navigation bars are simplified into one to align with user expectations drawn from established patterns. Other elements like cards, tabs, and a carousel are implemented to break up walls of text. Whitespace is integrated to better delineate sections.
I wanted to stay true to BayAreaChess's original logo because I felt that the pawn in front of the queen reflects their motto of "Transforming Lives Through Chess!" as the pawn is the only piece that can transform into a different piece once it reaches the opponent's end of the chess board.
I like the idea that BayAreaChess helps their students transform themselves from pawns into queens, able to move in any direction on the chess board or in life, so I redrew their original logo to have more style and personality.
I chose bright shades of blue and green as the main colors as the original website uses dark blue and green. Green is representative of growth, and blue promotes confidence and peace, which is perfect for learning to play chess. I used Zilla Slab for the logo text and headers, and kept Open Sans for the body text.
Keeping in mind the insights I drew from the design audit, I began prototyping the redesigned club website. I enjoyed incorporating the blue and green colors in gradients throughout the design, and playing around with chess motifs.
Creating micro-interactions for the buttons and navigation was a fun challenge. Subtle accents add depth to the design that helps bolster BayAreaChess' image and contributes to the overall look and style of the website.
I really enjoyed conducting this unsolicited redesign for the BayAreaChess website. The most gratifying part of the process was seeing the potential for improvement and elevating the website's look to match the reputation of the club itself. I would love to do more redesign projects in the future, especially for other non-profit organizations or small businesses that are struggling to adequately convey their personality and mission through their design.
Want to give feedback on the design, or chat about redesigning your website or brand identity? Let's get in touch.
Appendix
If I had the opportunity to work with BayAreaChess directly and connect with their users, I would propose a website redesign that not only updates the site's visual appearance but the user experience as well.
I'd start by sending a survey about the current website to the users and use those responses to find users to interview and determine what their pain points are in using the website. I would also talk with the board of the club to determine what their goals are for the website and what the main user flows are. Working in conjunction with the board, we could determine the priority for the flows and pain points to address.
As the website is rather complex and has many pages to it, I would propose adjusting the information architecture to ensure ease of navigation and information finding. This task is further complicated by the website not having a CMS in place, as you would get with Webflow or WordPress, since the website is coded by hand.
With the information architecture cleaned up and the main flows defined, I would ideate and sketch potential solutions to the pain points mentioned by the users. Then I would wireframe and prototype the best of these ideas to present to the board, who would give me their feedback on the proposed redesigns until they were approved for development.