I spearheaded all aspects of this project, from initial research and conceptualization to design implementation and final development. The primary objective was to establish an engaging online platform that offers visitors an immersive experience, seamlessly facilitating reservation bookings and souvenir purchases. Serving as a virtual portal to the Ocean Aquarium, the website empowers users to meticulously plan their visits while delving deeper into the captivating world of marine life.

The technology I used: Figma, Adobe Photoshop, Adobe Illustrator, HTML, CSS, Javascript
Role: UI/UX Designer and Coder

Problem Statement & Goal

In today's digital landscape, engaging audiences and raising awareness about marine conservation pose significant challenges. This project seeks to address these challenges by offering a multifaceted online experience. Through a blend of captivating visuals, interactive activities, and informative content, aims to:

Educate and Inspire: Provide users with a comprehensive understanding of marine life and the importance of environmental protection, drawing inspiration from the impactful themes of the "Oceans" documentary.

Promote Engagement: Create an engaging platform where users can explore the ocean's wonders, interact with virtual exhibits, and participate in educational activities.

Facilitate Visitor Interaction: Streamline the booking process to encourage more people to visit the aquarium, thus fostering a deeper connection with marine conservation efforts.

The website endeavors to bridge the gap between entertainment and education, fostering a sense of wonder and responsibility towards marine life.

Target users

This website will provide a special experience for all ocean enthusiasts. My website's primary audience consists of young people and children with their parents.

Discovery

To ensure a comprehensive understanding of our target audience, I conducted interviews with individuals who share a passion for ocean exploration. Through these interactions, I gained valuable insights into the preferences, interests, and aspirations of our primary users. Based on this research, I crafted two personas that represent key segments of our audience. These personas serve as guiding archetypes, helping to inform the design and content decisions of the website to create a tailored and engaging experience for all users.

User Persona

Define

The Site Map

Develop

To craft a digital interface that caters to users' needs and ensures a smooth experience, I implemented a structured three-step development approach. This method encompassed the creation of sketches, wireframes, and high-fidelity prototypes.

Sketches

❮ ❯

Wireframe

Here are the low-fidelity prototypes for each page based on the site map structure

1. Home Page: Features mainly visual content in the form of pictures to appeal to teenagers. The short accompanying text is placed next to the images for easy understanding.

2. Experience Page: Displays habitats and diets of marine life using pictures with accompanying text, aims at educating users about marine life in an engaging manner.

3. Souvenirs Page: Displays images of marine animals' products available in the aquarium's souvenir shop. Intended to entice visitors to purchase souvenirs and remember their experience.

4. About Us Page: Provides essential information such as contact details and location.

5. Booking Page: Users can initiate the booking process by clicking on a booking button. A form appears where users input relevant information for making a reservation.

High-fidelity Prototype

❮ ❯

Design decisions based on Nielsen's usability heuristic

01. Visibility of system status

The design of the home page always follows this heuristic. When the mouse is clicked on the navigation bar, a yellow horizontal line appears below the tab heading, informing the user concisely and precisely where they are on the page and what page they are going to. At the same time, the down arrow at the bottom of the page is useful for guiding users down to quickly browse the page's content.

02. Visibility of system status Match between the system and the real world

The About Us page applies this heuristic. The overall page uses a language that users are familiar with, allowing for quick access to information. Simultaneously, the text is visualised, and icons are designed to match the meaning of the text, allowing users to intuitively understand the content of the information without reading the text and improving user efficiency.

03. User control and freedom

The whole website follows this heuristic. To facilitate users to quickly return to the top of the current page, the up arrow icon in the lower right corner is designed on the web page. Also, clicking the logo in the navigation bar allows users to quickly return to the home page, improving user efficiency. Furthermore, the “BOOKING” in the navigation bar allows users to access the reservation interface quickly.

04. Flexibility and efficiency of use

This heuristic is followed by the booking page, the key information is presented on this page, so the user does not need to remember too much information when clicking on the booking page. Just need to simply click the blue button to efficiently access the appointment.

05. Help and Documentation

To help users register and store information, an appointment form filling page has been added to the BOOKING page. A question section has also been added to the About Us page for users to fill out and send relevant questions.

Design Style Guidelines

What I've learned and Future work

Overall, I am satisfied that I utilized the skills I learned during my term to succeed in this project. As expected, the site was responsive, interactive, and usable, with a design tailored to appeal to the target audience. Evaluating the website's usability in conjunction with Nielsen's 10 Usability Heuristics proved invaluable, guiding the project from inception to completion. This blend of theory and practice greatly improved usability, ensured reasonable interactivity, and contributed to the success of the project. However, due to the time constraints, some shortcomings remain. In my future work, I intend to prioritize optimizing the responsiveness of web pages on various types of devices to ensure a consistent display. Additionally, I intend to expand my knowledge of JavaScript to create more meaningful interactions in future web designs. Reflecting on this project, I recognize the importance of continuing to learn and improve to provide a more seamless and user-centric digital experience in the future.