Website Redesign

This is some text inside of a div block.

Redesign the Rainbow Reef Dive Center website for better user experience access and business outreach.

Solo Project

Product Designer
Web Strategy, Web Design, and Visual Design
Figma, Adobe Illustrator, Adobe Photoshop

CHALLENGE

OUTCOME

Difficult navigation, lack of readability in capital texts, and cluttered design resulted in wasted time and limited ability to engage users in finding the information they need.

Clear design and intuitive navigation allow Rainbow Reef Dive Center to share its mission transparently and create an atmosphere of trust and engagement between divers, instructors, and the center itself.

OVERVIEW

Rainbow Reef Dive Center is a multiple award-winning PADI (Professional Association of Diving Instructors) Career Development Center. It offered plenty of training courses, including introductory course, open water certification, instructor training course and so on. By sharing the local context and its professional services, the center builds long-term connections between divers and instructors in building a safe and professional diving center that everyone wants to dive with.
‍
This mission of trust and engagement requires a robust web presence with clear navigation and enhanced readability. The current site was fun and colorful but not meeting these needs.

I occasionally found this website when deciding to travel and snorkel in Miami, but it ended up with I couldn't find the information I need and realized they don't have any snorkel tour after calling the customer service. Thus, I decided to reimagine their web presence and build a new site to better serve their community.

Overview The Problem UX Design Sitemap Prototyping Final Design

The Problem

Current website is visually fun and appealing but hard to navigate

The current laid out in a way to make people feel it is fun to dive with Rainbow Reef Dive Center and they provide a lot of dive and promotion information. However, the fruity information makes people need to spend a lot of time on viewing or finding information. It leads people to not recognize the difference between those dive tours and make a decision. My hypothesis is the website will cost customer support's time and efforts to fix everything.

To further assess the problem of current website, I looked back to the qualitative reviews about website that people commented on Google Maps, Yelp, and TripAdvisor. I concluded what people think and feel about the Rainbow Reef Dive Center website. Overall, people like how fun and friendly vibe the website provides and it includes all the information the divers want and need to know, such as schedules, diving locations, dive boats and etc.

The image for the original website reviews

I also did a quick interview with people who plan to dive in Key Largo, FL and I asked them to provide 5-8 words to describe the current Rainbow Reef Dive Center website to create a word cloud as below:

The word cloud of how people think about the current website

Define

Project Goals and Focus

Thus, I decided to keep the same website style guide and patterns to still gives users a sense of enjoyment. But I want to modify the information architecture to help users get the necessary information they need efficiently. To fit in the diving industry, I also did a competitive analysis on other PADI websites and dive centers around Key Largo, FL.

I found the main structures for the dive center are attractive cover with tagline, center info, diving options, other featured products, reviews, and PADI 5-star dive center (if it is).

The image for analyzing competitor websites

The goal for this redesign....

1. Optimize the content with the most efficiency and visual ease
2. Increase people's understanding of what services Rainbow Reef Dive Center website provides

UX Design

Sitemap

Before redesigning the website, I analyzed the website hierarchy and created the sitemap to organize and clarify the content that needs to be on the Rainbow Reef Dive Center site. One thing I found really nice for the current site is they direct users and keep every content on the main page; however, it also confuses people because there isn't any content hierarchy which can assist people get the most important information efficiently. Moreover, I also revised some of the titles to help better understand by users.

Wireframes

Based on the information architecture, I designed the lo-fi wireframes of home page in 5 versions and hi-fi wireframes to get the actual looks. Then, I conducted a testing with 4 participants who are interested in learning how to dive in Key Largo, FL.

During the testing, I found people like to get key diving information such as prices, schedules, and locations as soon as possible and they prefer to see visual and meaningful images to get a quick overview. The most important of all, they prefer to have 1 menu to help them navigate the information.

The variations of wireframe and initial prototype

Design Decision

The revised wireframe based on the user testing feedback

Thus, my final design will heavily rely on information visualization where displaying most content in a meaningful, visual way that users can interpret and easily comprehend. I minimize to one horizontal menu and design it to work with the playful sea creatures and relevant icons. Then, I make the tagline with the most important thing I want to let people know which is the location. This includes how Rainbow Reef Dive Center locate in the Key Largo and its surrounded reef and wreak diving spots. The image carousel quickly displays multiple attractive images and why we're unique to other dive center. And using an easy flow chart to help people understand how to dive with us with all the clickable links.

Delivery

Final Design

The diving options with prices and package, I decided to go for a table to help people clearly compare the prices to further decide which package or diving trips they want to book. To provide a seamless experience of reservation, they can also click the button to check Dive Gear.

The image for final design on diving options

I make the "Please Note" points into 2 blocks on the top to make sure they read the reminders firstly. Through providing the whole week of calendar schedules in vertical order, people can check which dive locations they reserve promptly and clearly see the whole trips that are provided on the same day/date. I also added the sea creatures to build playful vibes for users that Rainbow Reef Dive Center originally wants.

The image for final design on diving schedules

Reflection

🔥Feedback plays an important role in solo project

This is my first solo project and I often feel stuck with the process and the design. In my past experience, people like to discuss the scope, the process, and the design. I always get a new idea or inspiration through people's comments and discussion. But this time, I feel hesitant and keep thinking about am I doing the right thing? I ended up with searching information on the Internet to get the clues. And I found it isn't hard to clarify things but I need to write it down and plan the process. The way to all the chaos is too conducting interviews and user testings so that we can get direct feedback for project iteration.