KeepDiving Website Design

UI Design
August 31, 2019


KeepDiving is a freelance client. Jason, the founder who is a diving coach and an underwater photographer. He loves to travel around the world for diving opportunities. Whenever he and his friend visit a new place, They need to look for a diving center in the local area and see what service they have to offer. The problem is that it's not an easy task even with the help of Google and the internet. Many of the centers are small scale and don't have much exposure on the web. Which makes finding a center very difficult. Often they will need to find a local person to guide them. Jason what to change that. He visions that every individual should able to find the right diving center at their destination themselves, and be able to contact them directly without hassle.

So he would like to have a website that could serve a couple of functions for passionate divers. First would be a search engine. Being able to filter centers according to location, service categories, diving associations are essentials for any serious diver to narrow down their interest. Second would be Information about the destination. It would mean the city and country page that acts as a guide. A blog for enlightenment and inspiration. And most importantly, a center page that contains all the information like ways of contact, location, services, gallery, reviews, and more.

My role and responsibility:

Since the client approaches me with a pretty structural plan on what he would want to archive. I would be responsible for the UI design. Focusing mainly on the usability, effectiveness and visual style expect. Then I would export the screens in HTML/CSS format for backend developer.

Website flowchart


We started off by referencing various travel sites. And explore what are the common ways diver enthuses would like to interact with the product. We gather the list of functions that he wants and I layer the page structure to explain the system flow. 

Since Jason took a lot of pictures around the world himself. He would love to feature his work on the website. Therefore I design with a lot of areas to show off his talents.

Font and Color

Desktop screens

Things I've learn / Verdict:

To be honest the final product doesn't turn out to be as good as I'm hoping for. We develop its base of a template, and we have trouble modifying everything exactly the way we wanted. As a result, we need to make compromises in some areas that require sticky to the original structure. Which impacted quite some degree of usability and user enjoyment. Situations like this feel frustrating and definitely put doubt into my work. But only time like this we could learn to carefully made our decision next time, a more thoughtful decision.

Mobile screens