Hertz Freediving

Customized your freediving courses.

RWD, Information design, Launched

Responsibilities

Branding, Information architecture, Interactive design, UIUX Design

Tools

Sketch, Adobe XD, MAMP Pro, draw.io, Telegram, Zeplin

Organization

Hertz Freediving

Problem

Background

Hertz Diving is an association in Taiwan that gathers local diving instructors. It was built in 2019, The group's name "Hertz" was inspired by the story of the 52-hertz whale. The story described an individual whale that called at a characteristic frequency of 52 Hz, a much higher frequency than most whales. It's been nicknamed "the loneliest whale in the world". Similar to the divers, it was not until you dived in a deep-sea you can feel severe aloneness and see a silent world.

According to nowadays trends, not only they had advertised on social media but need a complete identity website to increase their intention and enthusiasm. As a web designer, I was tasked with creating overall visual of the website for Hertz FreeDiving: A static webpage with extra upload function and edit a small part of the content through the administrator system.

Objective

This exclusive customization webpage serves as a visual representation of the intended design and functionalities of main features, giving the growing freediving field a breakthrough goal. Most of the dive coaches regarded social media platforms as their propaganda. The identity webpage can stand out from other entrepreneurs.

Process

This project was split into 5 main steps:

Discuss demand with the client and clarify what kind of function they need.
Make a sitemap and calculate how many pages in this project.
Initial wireframes (included mobile version) and assist front-end engineers to develop.
Show high-fidelity mockups for the client.
Conducting testing and revising.

Mood board

Sitemap

Initial Wireframes

HOME PAGE

I want to make an Immersive visual that shows wide ocean when users get to the home page. So I set a full-screen background.

HOME PAGE

(Navigation Satus)

When you hover on the navigation bar, the option will appear instantly in your front with an exaggerated style, almost as large as your screen. Also, I add some micro-interactive in this progress. Not like traditional navigation, its brief information incorporates into clearly forceful visuals.

COURSE LIST

All courses are split into 4 categories. Every course has its own relative image and simple information. Users can understand which is meet the requirement in one sight.

COURSE CONTENT

Each course has their own requirement, people can examine detail information on the course content page. If you find the course belong you, easily sign up on the current page.

PHOTO GALLERY

Watching photos was the best way to comprehend the reality. This page collects numbers of diving photos. In order to look more flexible, I use a random layout without any description. Focusing on the scenery.

ADMINISTRATOR

Administrator can log in to the backend stage to revise some display on the front page. The range contains creating new class, edit or delete class, upload photos as well as edit or delete photos.

MOBILE DEVICES

Participatory Design

After completing the wireframes, I made a high-fidelity mockup for my client. I walked the client through the use process while explaining key features and design choices on each screen. This method let us receive feedback and also allowed to freely give comments and ask questions for any features he was confused by.

Having a participatory design session partway through the design process (rather than waiting until the end) was particularly important because it lets us see whether what we had in the mockups so far were in line with what the client had in mind. Since he had several suggestions for improvement, we were able to take note for changes to make to the next mockup iteration.

If we had waited until the end to have this review session instead of having it in the middle of the process, we would have had much less time to make these changes. Making the changes themselves also would've taken more effort since the original designs would have been farther along in the process before being reviewed by the client.

Final Design

Overall specification consistency: Strengthen the attractive pattern.
Administrator Service: Allowing clients to edit courses and Uploading photos instantly.
Responsive website devices design: adapting to a different platform to resize the layout.
Interactive Design: Animating effect on the landing page. Attaching micro-animation to navigation's hover status.
Full-screen background: Users can experience the board sea world as they saw the full screen picture.
Font Style: Serif style font showed more formal in this brief and clean background.