Tofino Surf School
Redesigning a website to convey the true Tofino Surf School experience.
Role
Product Designer
Duration
February '22 - June '22
This work is NDA-Protected. Please contact me if you'd like to learn more.
Tofino is a cold-water surfing paradise with a laid-back atmosphere perfect for learning to surf. Tofino Surf School, one of the most established surf schools on Vancouver Island, offers small group and private lessons for once-in-a-lifetime experiences.
Their old website, however, did not reflect the magic of these offerings. In addition to numerous UX issues such as content overload and inconsistent spacing, the website made overuse of the brand’s vibrant yellow and provided distraction rather than coherency.
In our redesign, we aimed to structure site information logically while conveying the full experience of what it means to surf with the school.
Refining business requirements
It took us a few meetings with key stakeholders to understand brand vision, overall goals and challenges. We gathered their perspective on both internal and external requirements which included:
- Understanding business needs and goals
- Collecting information on key competitors and industry best practices
Site and Content Audit
Anticipating user needs is critical to providing relevant site content. Different user types and journeys informed our site structure, allowing us to simplify user flows by removing unnecessary navigation items and merging existing content. From here, we were able to build out a sitemap.
Information Architecture
Once we had a solid understanding of both user and business needs, we were able to develop the website’s information architecture. We wanted to ensure users could be directed appropriately from above the fold, and that CTAs were both clear and ubiquitous in order to encourage conversions.
.png)
Wireframes
Before getting hands-on with the design, we started with main page wireframes in order to determine optimal content structure.
Each page needed to convey a business goal and address common user questions and concerns. We wanted important information available to the user immediately and additional content to flow logically.
View the low-fidelity wireframes and the hi-fidelity wireframes.
Design system
Utilizing components from the previous website to remain congruous with Tofino Surf School branding, we brought in new colours and, above all, consistency to generate a novel design system for the website.
The goal of this system was to remain recognizable to existing users while addressing the UX concerns of the old site.
View the design system here.
Design system
Utilizing components from the previous website to remain congruous with Tofino Surf School branding, we brought in new colours and, above all, consistency to generate a novel design system for the website.
The goal of this system was to remain recognizable to existing users while addressing the UX concerns of the old site.
View the design system here.
Takeaways🏄🏻♀️
This project highlighted how client goals and user experience can work together beautifully. Design is so much more than building pretty screens - with some creative thinking, we were able to solve real user problems while encouraging conversions at various points in the sitemap. Often times, I have found that client objectives directly compete against user experience. Working on the Tofino Surf School website helped illustrate how the two can be harmonious with the right design.
