🧩 Problem Statement

NORDAM, a leader in the global Aerospace market, sought to revamp its website for better accessibility, visual appeal, and user experience.

The existing site didn't meet accessibility standards or reflect NORDAM's brand and industry norms, making it hard for visitors to grasp the company's range of services.

🎯 Project Goals

These three key objectives collectively guided the design process:

Enhance Visual Presentation

Enhance information presentation with visuals and clear, concise content for optimal engagement and understanding.

Highlight Company Offerings

Effectively display NORDAM's services and expertise to attract employees, customers, suppliers, and investors.

Prioritize Accessibility

Ensure the website complies with section 508 accessibility standards for user-friendly navigation.

🧠 Design Process

Design Showcase

Discover

Client Onboarding
Problem Definition
Blueprinting

Design

Design Moodboards
Visual Design
Hi-Fi Prototypes

Iterate

Design Validation
Feedback

Refine

Design revisions
Accessibility updates
Final application

🚧 Constraints

NORDAM Web Design Case Study

1. Limited Deadline:

With a mere 16-week/4-month schedule, efficient time management and task prioritization were crucial.

2. Section 508 Standards:

The imperative to align the website with Section 508 accessibility standards emphasized the need for an inclusive design approach.

3. Brand Identity Alignment:

The requirement to align design choices with NORDAM's brand identity added complexity, demanding a thoughtful integration.

4. Cognitive Overload Mitigation:

Faced with the challenge of presenting extensive information, the necessity to prevent user cognitive overload led to the introduction of multiple design solutions to streamline content delivery effectively.

🏠 Home Page

Initial Homepage Design

To fulfill the client's preference for a clean aesthetic inspired by competitor websites, the initial design incorporated ample white space.

The use of spherical shapes and curved sections was intentional, aiming to evoke both openness and a dynamic feel.

The homepage video's starry sky was a pivotal design choice, influenced by my moodboard, "Building the Future," which signified aerospace innovation through carefully selected visuals.

Your Page Title

Challenge Faced:

The design, including curved elements intended for openness and dynamism, felt disconnected from the brand image.

This highlights the importance of ensuring design choices align closely with the brand identity for a more cohesive user experience.

Iterated Homepage Design

To align with NORDAM's brand identity, rounded sections were replaced by angled counterparts mirroring the "N" in the logo. This retained a clean, open design while enhancing brand resonance.

A font shift from "Poppins" to "Agency Bold" seamlessly reflected the refined design direction, with squared, narrow capitals.

Implementing NORDAM’s blue color in headers reinforces the brand and prioritizes accessibility with a high contrast ratio of 14.76 on a white background across all font sizes.

NORDAM's gold color was employed as a complementary header color, solidifying the brand's presence.

✈️ 3D Aircraft Module

I was tasked with presenting NORDAM's diverse engineering, manufacturing, maintenance, and repair prowess on their "What We Do" page.

Inspired by the challenge, the idea for an interactive 3D module emerged. This approach aimed to streamline information delivery, mitigating cognitive overload while retaining crucial details.

Through this dynamic solution, users can effortlessly explore the specific components that NORDAM specializes in for business jets, commercial aircraft, and military applications.

🔑 Key Features

Interactive 3D Model

• Visually captivating branded 3D aircraft.

• User-friendly manipulation and zooming.

Interactive Buttons

• Strategically placed for quick navigation.

• Swap between MRO and Manufacturing categories.

Dynamic Part Highlighting

• Clicking (+) reveals detailed parts list.

• Corresponding sections of the aircraft illuminate for clarity.

🚀 The Prototype

Note that this prototype is optimized for desktop viewing and may not be accessible on mobile devices.

🖥️ Desktop Implementation

Desktop Implementation

On desktop, the floating list expands right of the (x) button, offering a direct path to detailed information.

Strategically placed interactive elements enable seamless navigation between MRO and Manufacturing categories, marked by NORDAM's brand colors – blue and gold.

This layout ensures a user-friendly experience with a complete view of highlighted elements.

📱 Mobile Implementation

Mobile Implementation

For mobile optimization, I enlarged buttons for easy thumb navigation.

The floating list situates under the image, maintaining a smooth user experience and allowing space for highlighted elements.

Users can effortlessly switch between MRO and Manufacturing categories, labeled in NORDAM's brand colors, with larger text for the mobile interface.

This mobile-friendly approach ensures an intuitive and seamless experience, effectively using limited screen space.

🔍 Navigation

In crafting the initial navigation design, I prioritized brand resonance and visuals with Nordam Gold, white text, and icons.

Explore the initial prototype below to delve into the design journey and subsequent refinements.

For proof of concept, the hotspots are located in the following sequence: [Hamburger Icon] > Company > Who We Are > X. Please note that the below prototype is optimized for desktop presentation, and functionality on mobile devices may be limited.

Initial Navigation

Your Page Title

Challenge Faced:

Testing revealed that the color combination of the gold foreground with white text did not meet Section 508 standards, prompting the need for adjustments.

🛠️ Iterated Prototype

In addressing the accessibility issue, Nordam Gold in the foreground was replaced with a 10% swatch of Nordam Blue, featuring Nordam Blue for text with a contrast ratio of 11.35.

As a deliberate step to streamline the interface and enhance accessibility, icons were intentionally removed in this iteration.

For proof of concept, the hotspots are located in the following sequence: [Hamburger Icon] > Company > Who We Are > X. Please note that the below prototype is optimized for desktop presentation, and functionality on mobile devices may be limited.

🚀 Results

7.17%

monthly growth rate

748

average daily visitors

🎬 Conclusion

This project emphasized the crucial role of brand alignment and simplicity in interface design. Iterations were guided by the necessity to closely align with the brand identity and streamline the user experience.

Simplicity, coupled with the strategic use of brand colors and shapes, played a pivotal role in achieving a successful, accessible, and visually appealing web experience.

NORDAM WEB BUILD (2022)

🧩 Problem Statement

🎯 Project Goals

Enhance Visual Presentation

Highlight Company Offerings

Prioritize Accessibility

🧠 Design Process

Discover

Design

Iterate

Refine

🚧 Constraints

1. Limited Deadline:

2. Section 508 Standards:

3. Brand Identity Alignment:

4. Cognitive Overload Mitigation:

🏠 Home Page

Initial Homepage Design

Challenge Faced:

Iterated Homepage Design

✈️ 3D Aircraft Module

🔑 Key Features

Interactive 3D Model

Interactive Buttons

Dynamic Part Highlighting

🚀 The Prototype

🖥️ Desktop Implementation

Desktop Implementation

📱 Mobile Implementation

Mobile Implementation

🔍 Navigation

Challenge Faced:

🛠️ Iterated Prototype

🚀 Results

7.17%

748

🎬 Conclusion

Let's make something cool.

hi@kdeanne.com