Challenge Statement: Create a website that is interactive, informative and encourages tourists to book surf lessons.
Tools Used: Figma, Canva, Wix, Mouseflow
Pain Points:
-
No website where company information was all in one place
-
Lack of brand credibility without a website
-
Limited company growth without a website
-
Only one method for potential customers to get in contact with the business
-
All surf lesson information sharing was reliant on one person via WhatsApp
Solves for Pain Points:
-
Interactive website created for Mahalo Surf Club (desktop & mobile versions)
-
Seamless integration with team's WhatsApp and email for reliable and functional client communications with the Mahalo team
-
In-site chat feature for clients to clear up any booking questions
-
Easy to find information about surf lessons on the company page
-
Webpage designed to build and foster long-term company growth
WEBSITE ITERATIONS
There are several iterations of the Mahalo Surf Club home page. I designed the website while keeping in mind the founder's specific creative vision and input. Many of the fonts and final logo were the owner's request so the iterations often will vary around those elements.
Iterations were based around readability, design, and functionality. Using heatmap tracking and user testing, the home page was adjusted to better optimize the page.
*There are other pages, only the home page drafts are featured in this portfolio
Iterations
From left to right, the iterations are in chronological order.
added menu bar
changed logo and font
added to the page
changed the layout of menu & logo
added founder's bio
added main beach info
added heading
changed title
changed text
changed font
changed bio to about section
changed background photo
edited menu bar
changed font
changed font & format
added review
FINAL DESKTOP WEBSITE
This is the current Mahalo Surf Club website, or the Mahalo website 2.0. Interactive elements, such as the chat feature were kept as well as the main content. However, in the latest version you can see there are major design and flow changes based on testing feedback.
On the services page, each lesson option displays details, when the viewer hovers or clicks on the image/box.
Lastly, the blog is the newest addition, with only one published so far, and many more posts to come!
Click each image to view the live page on the website.
Final Desktop Website
what each lesson description looks like
FINAL MOBILE WEBSITE
Each version of the Mahalo Surf Club website has a mobile version, however this is the latest which is why this is the only one displayed. Each page is designed to fit both mobile and desktop versions so the user has a seamless experience, regardless of their device.
Final Mobile Website
