In loving memory of the Titan submersible crew — the true explorers who ventured into the depths with unwavering courage and indomitable spirit.

The Story

In 2018, OceanGate, a leading company in Seattle, WA, specializing in submersibles for commercial use, approached me with the task of upgrading their website.

With a focus on providing crewed submersibles for tourism, industry, research, and exploration, they sought a revamped online presence to convey their message more effectively. Below you can see what their page looked liked before.

Metrics and Goals

Challenges and Objectives
The initial assessment of the OceanGate website revealed critical challenges in user engagement and exploration experience. The existing design lacked inspiration, suffered from a complex navigation system, and proved cumbersome for users, particularly on mobile devices. The primary goal was to transform the website into a visually captivating and user-friendly platform, addressing these pain points.

KPIs:

User Engagement: Measure the increase in average time spent on the website, indicating improved user interest and exploration.
Bounce Rate Reduction: Aim to reduce bounce rates, particularly on mobile, showcasing enhanced user retention.
Mobile Responsiveness: Evaluate the responsiveness of the website on mobile devices, ensuring a seamless experience for users across various screen sizes.
Conversion Rates: Monitor conversion rates for specific call-to-action elements, indicating improved user interaction and interest conversio

Role & Responsibilities

I dove into the deep waters of OceanGate's website redesign initiative with the mission to elevate their online presence. As a product designer, my primary responsibility was to lead the transformation of their digital platform, ensuring a seamless and visually captivating experience for users. My journey began with a comprehensive analysis of the existing website, identifying pain points and opportunities through extensive research and competitive analysis. Embracing a user-centric approach, I spearheaded the creation of a concept design that not only addressed the challenges but also aimed to inspire a sense of wonder and exploration.

Discovery

User Research – Understanding Audience Needs

Conducted thorough user research to comprehend the diverse needs of OceanGate's audience, including tourists, researchers, and industry professionals. This involved:

Surveys and Interviews: Engaged with current and potential users to identify pain points and expectations.
Analytics Review: Analyzed existing website data to understand user behavior and popular content.

Competitive Analysis – Benchmarking Industry Standards

Carried out a comprehensive competitive analysis to benchmark against industry leaders and identify opportunities for differentiation:

Competitor Websites: Evaluated the websites of similar companies in the submersible industry to understand design trends and functionality.
User Reviews: Explored user reviews and feedback on competitors' platforms to identify strengths and weaknesses.

Product Strategy – Defining Goals and Objectives

Developed a product strategy aligned with OceanGate's mission to make the depths of the oceans accessible for commercial use:

Goal Setting: Defined clear goals, such as improving user engagement, increasing accessibility, and enhancing the overall user experience.
Target Audience Definition: Identified primary and secondary user personas to tailor the redesign to specific user needs.

Information Architecture – Structuring Content for Accessibility

Focused on optimizing information architecture to streamline user journeys and improve content discoverability:

Card Sorting: Engaged in card sorting exercises with users to understand their mental models and preferences for content organization.
Wireframing and Prototyping: Created wireframes and interactive prototypes to visualize the proposed information architecture and gather feedback.

Making Design Decisions using Diversified UX Strategies

Elevating Visual and Interaction Design

Developed a concept design for OceanGate's website, emphasizing modern aesthetics and intuitive navigation:

Visual Design: Adopted a clean and modern visual style to enhance the brand's image and appeal to a broader audience.
Interactive Elements: Introduced interactive features to engage users, including immersive visuals of submersibles and underwater experiences.

Aesthetic Usability Effect and UX Principles

Identifying Pain Points: Applying the Aesthetic Usability Effect, which suggests that users perceive aesthetically pleasing designs as more usable, highlighted the importance of aligning visual appeal with functional usability. The existing pain points, including uninspiring visuals, complex navigation, and mobile usability issues, became focal points for improvement.

Benchmarking
While the Aesthetic Usability Effect played a significant role in the redesign process, a holistic approach to user experience involved an array of strategies. Competitive analysis identified key areas where OceanGate's online presence could outshine industry counterparts. Through comprehensive user research, pain points beyond aesthetic concerns were identified. The focus shifted towards crafting an intuitive and efficient navigation system to cater to both novice and seasoned users. User personas were leveraged to ensure that the website not only looked appealing but also resonated with the target audience, offering a personalized and engaging journey.

Information Architecture Overhaul

To address the complex navigation, a revamped information architecture was implemented. Clear, intuitive pathways were designed, ensuring users could explore the website effortlessly. Emphasis was placed on creating a hierarchy that guided users seamlessly through various sections, reducing the time needed for exploration.

Business Visual Identity (BVI) Transformation: The redesign aimed not only at enhancing user experience but also at redefining the Business Visual Identity. The incorporation of a visually appealing and cohesive design language aligned with the company's mission, creating a brand identity that resonated with users and conveyed the accessibility of ocean exploration for commercial use.

By integrating these principles, the redesigned OceanGate website sought to bridge the gap between aesthetics and usability, offering an inspiring and seamless user experience.

Rapid Sketching & Ideation

In the early stages of the design process, I employed the power of rapid sketching to translate ideas from conceptualization to tangible representations. Beginning with traditional paper sketches allowed for a fluid exploration of concepts, facilitating a quick iteration of thoughts and ensuring the initial visualization of ideas. Following this, I transitioned to a digital space, leveraging Adobe Illustrator to refine and enhance the sketches. This digital platform provided the flexibility to make iterative changes, experiment with color schemes, and lay the foundation for more detailed representations. As the ideas took shape, I seamlessly integrated these designs into prototyping tools such as Sketch. This transition from analog to digital platforms not only streamlined the design process but also allowed for efficient collaboration and sharing of evolving concepts.

Arriving at the Solution

After the initial phase of sketching and mood-boarding, the design process transitioned seamlessly into the realm of higher fidelity. This marked the commencement of crafting comprehensive and polished designs that breathed life into the conceptual ideas. In the mood-boarding phase, platforms like Dribbble, Pinterest, and Behance became pivotal hubs for drawing inspiration from cutting-edge and trendy designs. These online resources provided a rich tapestry of visual ideas, fostering a dynamic exploration of contemporary design trends that could be seamlessly integrated into the envisioned user interface.

In the realm of user experience (UX), the user interface (UI) serves as the gateway to a seamless and engaging interaction between the user and the digital product. Human psychology plays a pivotal role in UI design, as visual elements, color schemes, and layouts influence user perception and behavior. Research consistently demonstrates that aesthetically pleasing and intuitive interfaces not only enhance user satisfaction but also contribute to increased usability and overall positive experiences. UI expertise is not just about creating visually appealing designs but also understanding the cognitive aspects that impact user decision-making. By integrating UI principles, such as clarity, consistency, and effective visual hierarchy, designers can guide users through a fluid and enjoyable journey, ultimately elevating the overall user experience.

Leveraging digital tools like Adobe Illustrator and Sketch, the hand-drawn sketches evolved into meticulously detailed high-fidelity mockups. These high-fidelity designs not only encapsulated the envisioned visual aesthetics but also delved into the intricacies of user interaction and functionality. As the pixels aligned and colors harmonized, a vivid representation of the revamped user interface began to emerge. These refined designs paved the way for the creation of interactive prototypes, allowing stakeholders to experience the proposed user journey in a dynamic and engaging manner. This crucial phase served as a bridge between concept and reality, offering a tangible preview of the user experience that would unfold with the implementation of the redesigned platform.

Establishing the Style Guide

In order to ensure a consistent and coherent visual identity, I crafted a comprehensive style guide for the OceanGate redesign project. This guide served as a blueprint for maintaining a unified and recognizable brand across all digital touchpoints. It outlined the usage of color palettes, typography, imagery styles, and interactive elements to create a cohesive user experience. By incorporating elements from the refined Business Visual Identity (BVI), including the updated logo, iconography, and brand messaging, the style guide played a pivotal role in harmonizing the aesthetics and reinforcing the brand's narrative. This strategic approach not only enhanced the overall visual appeal but also contributed to establishing a strong and memorable brand presence within the competitive landscape of underwater tourism and exploration.

My approach extended beyond crafting visually appealing interfaces. Leveraging my expertise in graphic design and a keen understanding of color theory, I ensured that the revamped OceanGate website not only looked aesthetically pleasing but also conveyed a sense of professionalism and trust. The creation of a cohesive Business Visual Identity (BVI) was a pivotal aspect, harmonizing color schemes, typography, and imagery to align with the company's brand persona. This endeavor required strategic thinking, incorporating elements that not only resonated with the brand but also adhered to contemporary design trends. Employing UI strategies, I aimed for an intuitive and seamless user experience, addressing pain points identified through meticulous research and user testing. By combining graphic design finesse with UX methodologies, the resulting website not only met the aesthetic goals but also enhanced usability, ensuring a delightful and engaging interaction for users across all devices.

The Outcome

Despite presenting a compelling redesign concept, OceanGate opted to maintain their existing style. However, the redesign concept evolved into a new venture named "OceanGrade," targeting companies involved in underwater tourism and exploration. This decision not only showcased the adaptability of the proposed design but also revealed the potential for the concept to serve a broader market. While OceanGate's choice to stick with their existing style was respected, the development of OceanGrade highlighted the transformative power of thoughtful UX and UI strategies, creating opportunities beyond the initial scope.

Key takeaways

User-Centric Approach: Throughout the design process, a user-centric approach was prioritized, incorporating extensive research and iterative design processes. This focus on meeting user needs and preferences ensures that the proposed designs were grounded in enhancing the overall user experience.

Competitive Advantage: Insights gathered from competitive analysis played a pivotal role in shaping a design that not only met user expectations but also stood out in the competitive industry landscape. This demonstrated the importance of understanding market trends and user expectations to maintain a competitive edge.

Flexible Solutions: The redesign concept, initially intended for OceanGate, showcased its adaptability by seamlessly transitioning into a new venture, OceanGrade. This flexibility emphasizes the value of design solutions that can be tailored to different contexts and markets. It reinforces the idea that a well-crafted design has the potential to transcend its original purpose, opening doors to unforeseen opportunities.

Learning and Growth: The experience of working on this project provided invaluable insights into the dynamic intersection of UX and UI design. It underscored the significance of a holistic approach, combining user-centered methodologies, competitive analysis, and the flexibility to adapt designs to evolving circumstances. The journey from conceptualizing a redesign for OceanGate to the creation of OceanGrade marked a transformative learning experience, reinforcing the idea that design solutions, when approached strategically, can catalyze unforeseen positive changes for businesses and industries alike.