Columbia Athletic Clubs Tennis Page Redesign Columbia Athletic Clubs are a group of fitness and tennis clubs in the greater Seattle area. As a member of the Silver Lake Club, I frequent the company's website, and more specifically, the club's tennis page. And although I feel that the overall site flow and page navigation is pretty effective, I've always felt that the page's visuals needed to be redesigned. Therefore, I decided to undertake a redesign project with the goal of improving the tennis pages visual aesthetic. I began by making a list of all of the page content and then began sketching out where the elements were currently located, and where they might be placed for a better visual experience. I then added a few new pieces that I knew tennis members would find useful. These two new elements were; a link to the United States Tennis Association membership sign up page, and links to useful tennis tips pages also located on the USTA's site. I then created an Axure wireframe utilizing a twelve column, 10 pixel desktop grid. This is the final tennis page wireframe that I created. I gave the page-specific categories and focus window plenty of space so that it would be easier to read and more intuitive to navigate. I grouped the USTA links below with plenty of white space to frame the elements, and separated the newsletter sign up and gave it its own significance. I also duplicated all of the top bar navigation links into the footer for ease of navigation and placed the social links into that same area. I believe that the result is a cleaner page layout where the content is easier to locate and read.
Final Tennis Page High Fidelity Mockup Here is my final mockup. I kept their original logo, but updated the font to give it a more contemporary feel. The original red, white and blue color scheme always felt a little garish to me, so I toned down the blue to give it a more "neutral" feel and added a little bit of gray to the composition. I used red as the current page bar signifier, the sign up button and as an accent to break up the text sub headers.