Fitness Charity Website Redesign

A modern responsive website to reflect the fundraising success of Knights In White Lycra, a Tokyo-based fitness charity.
Role

Design, Project Management, Implementation

client

Knights In White Lycra on behalf of Tacchi Studios

Platform

Responsive Web

timeline

Nov 2020 - Aug 2021

Knights In White Lycra website redesign mockup

Knights In White Lycra is a fitness charity based in Tokyo that raises money to help disadvantaged children by partnering with local nonprofits. Their flagship event is an annual four-day 500km (310mi) bicycle ride across Japan. Through such events, they have raised over JPY¥82,000,000 (USD$781,000) since their founding in 2012.

When Knights In White Lycra approached Tacchi Studios, they were in need of a modern responsive website that reflected their fundraising success and excited prospective participants and sponsors. Ultimately, we listened to their concerns and designed a site that fulfilled their needs.

Testimonial

"I wanted to say what a pleasure it has been working with Anne who has done such an amazing job on design. You are very lucky to have such a talented designer on your team who has so much patience with techno-dinosaurs!!!"

Robert Williams, Knights In White Lycra Chair & Co-Founder

Design

Knights In White Lycra wanted something that captivated, not only potential participants, but sponsors as well. They wanted a site that reflected their achievements and showcased their legitimacy as an impactful fundraising organization.

Content and Structure

With a limited design and tech background, Knights In White Lycra settled for a templated website before approaching Tacchi.

Our first task was to reorganize the information architecture by creating a hierarchy for the many pages. Instead of a flat structure where each page is linked through the main navigation, we grouped similar pages and decreased the number of main navigation items to five categories.

Knights In White Lycra wanted the homepage to appeal to both participants and sponsors. We concluded that participants would be most interested in event information while sponsors would be looking for evidence of legitimacy and impact. As a result, we added several new sections with sponsors in mind: a sponsor logos bar beneath the hero video, a facts overview of the organization, sponsor testimonials, and participant testimonials.

For participants, we wanted the event information to be easily digestible on the homepage. The solution we arrived at was a horizontal scroll bar with a card for each event. Each card contained metadata such as a one-line description and the date of the event. Participants could click on the cards to see more detailed information.

Modern Aesthetics

After settling on the content and structure, the next biggest change from the old site was the visual design. Although Knights In White Lycra had a logo, it did not have a visual identity. While this meant we had considerable freedom, it also required us to solidify a unified look.

In the hopes of attracting more female participants to future events, Knights In White Lycra did not want a site that looked “too masculine.” We eventually settled on a neutral font as well as a neutral color palette that matched the existing logo.

To create excitement and add movement to the page, we included a hero video of participants at various events. We made photos front and center of the event cards on the homepage to add more visual appeal.

Implementation

From the outset, one of Knights In White Lycra’s concerns was the ability to update the page on their own. It was agreed early on that templated site builders would be too limiting for the design we wanted to create. We decided on the website building platform Webflow as something that is both easy to manage on the client side and quick to implement on our side.

The website redesign was a success; Knights In White Lycra was extremely happy with the look, feel, and functionality of the new site.