Overview

The Strategic Stealth Machines website was designed to showcase the company’s advanced AI-driven solutions in manufacturing and business optimization. The site targets organizations seeking innovative AI solutions to enhance reliability, efficiency, and process optimization. The website aligns with the client’s vision to present their AI capabilities for real-time maintenance, predictive maintenance, quality inspection, and operator safety, among other areas.

Project Type: Website Design and Development

Project Duration: June 2024 - Aug 2024

Role: UX Researcher, Designer and Developer

Responsibilities

Conducted user research to understand client needs and crafted wireframes and prototypes, refining UI/UX design for clarity, responsiveness, and accessibility. Developed and implemented the front-end using HTML, CSS, and JavaScript, ensuring a seamless user experience across devices. Conducted usability testing and iterated based on feedback to meet client standards and optimize user engagement.

The Challenge

Strategic Stealth Machines needed to communicate the value of its complex AI-driven solutions in a way that businesses could easily understand and see the relevance to their unique needs. Key challenges included simplifying navigation, clearly categorizing offerings, and providing engaging, interactive content to help users visualize real-world applications. This project required a clear, well-structured platform to drive client understanding and adoption of AI solutions.

User Pain Points

Understanding the user

User Research: Interviews

To understand client needs for AI solutions, I conducted empathy mapping and four interviews with manufacturing managers and tech decision-makers.

Findings:

• Relevance: Clients struggled to see how AI fit their industry challenges, causing hesitation.

• Navigation Issues: Users found it hard to locate relevant solutions due to complex navigation.

• Lack of Examples: Without case studies, users couldn’t visualize AI’s ROI and impact.

Competitive Analysis: Summary

Analyze competitors in the AI solutions space, identifying gaps to differentiate strategic stealth machines.

Findings:

• Overly Technical: Competitors lacked clear industry-specific applications, confusing users.

• Cluttered Navigation: Many sites were difficult to navigate, especially for AI newcomers.

• Low Engagement: Few used case studies or success stories, reducing client connection.

• Minimal Accessibility: Limited responsiveness and accessibility created user barriers.

User Persona: Kishore Kumaran

User Journey Map

Created a user journey map of Kishore Kumaran to experience using the site to help identify possible pain points and improvement opportunities.

Storyboarding: Overview

To gain deeper insights, I developed user personas and then illustrated storyboards for one of them to visualize and anticipate how the user would interact with the Strategic Stealth Machines website.

Design Process

User Flow

Paper Wireframe

To address user pain points, the parts that made it to the digital wireframe were sorted and refined through several iterations on paper. It was made sure that the components that made it to digital wireframes would be appropriate for addressing user pain points by taking the time to create iterations of each app screen on paper. For the home screen, I prioritized a quick and easy buy process to help users save time.

Digital Wireframe

In the next phase, I transitioned the initial paper wireframes into digital formats, carefully integrating user research insights to guide the design process.

Lo-Fidelity Prototype

To facilitate usability testing, I developed a low-fidelity prototype for the Strategic Stealth Machines project. This prototype mapped out the primary user flow, allowing users to navigate through exploring solutions, comparing products, and requesting a demo. The goal was to ensure a seamless experience that reflected the findings from our user research.

Affinity Mapping for Strategic Stealth Machines

To identify recurring patterns and common themes, I conducted three rounds of usability testing and collected client feedback. This feedback was organized into an affinity map to guide design improvements.

Round 1: Usability Testing Initial Insights

Category: Information Clarity and Engagement

Replaced static content display with interactive pop-ups that provide deeper insights when clicked, making the content more digestible and engaging.

Round 2 Usability Testing: Follow-Up Insights

Category: Layout and Visual Structure

Redesigned the homepage layout by changing the product section from horizontal to vertical card placement, creating a more visually appealing and easy-to-scan design.

Round 3 Usability Testing: Final Adjustments

Category: Visual Engagement and User Retention

Integrated dynamic image transitions in the hero sections of the “Solutions” and “Products” pages to enhance visual engagement and better capture user attention.

Affinity Mapping Overview

High-Fidelity UI Design

After conducting usability research and implementing design changes to better align with user needs, I began working on the visual elements of the wireframes to create high-fidelity designs. These designs incorporated both exploration and growth elements for an immersive user experience.

Color Palette

The Strategic Stealth Machines website features a professional, sleek color scheme that aligns with its advanced technology themes. The colors are chosen to convey trust, innovation, and clarity, supporting users in easily navigating complex AI information.

Typography

The type scale of Strategic Stealth Machines ensures clear, readable content through the use of the familiar Arial typeface and other sans-serif fonts, with weights like Regular, Medium, and Bold for a defined visual hierarchy. This professional and modern combination enhances clarity, accessibility, and consistency, making complex AI solutions more approachable and easy to navigate. The structured typography reinforces credibility and guides users smoothly through the website.

These high-fidelity visual elements were carefully crafted to ensure an engaging user experience that reflects the sophisticated nature of Strategic Stealth Machines' AI-driven solutions.

High Fidelity Mockups

Primary User Flow

Accessibility Features

• The chosen color scheme for text and background elements across the design ensures a strong contrast ratio, meeting WCAG 2.1 Level AA standards. This includes careful selection of text color against its background and image overlays, enhancing readability for users with visual impairments, and maintaining accessibility throughout the platform.

• The pop-up feature with a darkened background ensures compliance with WCAG 2.1 by enhancing contrast and visual focus, meeting criteria for distinguishable content and user attention. It also aligns with Section 508 by improving content clarity and reducing distractions for users with cognitive impairments. This approach supports an accessible, user-friendly experience for all.

Development Implementation

To complement the comprehensive design work, I transitioned into the development phase, using HTML, CSS, and JavaScript to bring the Strategic Stealth Machines website to life. I chose React for its component-based architecture, which allowed me to create reusable UI components, ensuring consistency and efficient updates across the site. My development process focused on maintaining responsiveness and optimizing performance to cater to users on various devices.

Responsive Optimization

Using Tailwind CSS, I ensured the Strategic Stealth Machines website was fully responsive, adapting effortlessly to various screen sizes. Tailwinds' utility-first approach streamlined creating adaptive layouts and components, making responsiveness simple and efficient. Combined with Next.js for server-side rendering, this setup enhanced performance and load times, ensuring a fast, mobile-friendly, and consistent user experience across all platforms.

<section className="container mx-auto h-96 flex flex-row items-center justify-center py-10 md:my-20">
  {/* Text Section */}
  <div className="relative flex flex-col text-white lg:w-2/3 p-5 text-center leading-loose text-balance">
    <h1 className="md:text-5xl text-4xl leading-normal text-blue-500">
      Strategic Stealth Machines
    </h1>
    <p className="md:text-2xl text-lg mt-2 text-center leading-loose">
      Accelerating Evolution of AI innovation
    </p>
  </div>
</section>

{/* Solutions Grid with Responsive Layout */}
<section id="solutions" className="container mx-auto flex flex-col space-y-5 my-5 md:my-16 py-10">
  <div className="md:px-10 text-white grid lg:grid-cols-7 gap-20">
    {/* Map through solutions dynamically */}
    <div className="lg:col-span-7 flex flex-wrap justify-center items-center h-full gap-20 p-10">
      {solutions.map((solution) => (
        <SolutionsCard
          key={solution.imageURL}
          imageURL={solution.imageURL}
          alt={solution.alt}
          href={solution.href}
          title={solution.title}
        />
      ))}
    </div>
  </div>
</section>

• Responsive Container Classes: container mx-auto and flex flex-col space-y-5 ensure a centered, adaptable layout.

• Typography Adjustments: Different text sizes, like md:text-5xl text-4xl and md:text-2xl text-lg adapt to screen sizes.

• Grid Layout: The use of grid lg:grid-cols-7 dynamically adjusts columns for larger screens while flex wraps adapt for smaller screens.

Performance Optimization

Optimized page load performance by reducing block time from 1,480ms to 130ms and Speed Index from 1.3s to 0.5s through efficient code structuring and pre-rendering techniques in Next.js

Efficient Component-Based Architecture

• The use of modular components like BubbleText, FooterCard, ProductCard, SlideTabsExample, SolutionsCard, and WaterDropGrid ensures that each part of the page is independently rendered. This improves performance by avoiding redundant re-renders and optimizing the use of resources.

import BubbleText from "@/components/BubbleText";
import FooterCard from "@/components/FooterCard";

Dynamic Mapping of Solutions

• The solutions.map() logic dynamically renders multiple solution cards without hard-coding each card. This ensures efficient rendering only when data is available.

{solutions.map((solution) => {
  return (
    <SolutionsCard
      key={solution.imageURL}
      imageURL={solution.imageURL}
      alt={solution.alt}
      href={solution.href}
      title={solution.title}
    />
  );
})}

Moving Forward

Impact

Designing and developing the Strategic Stealth Machines website streamlined complex AI solution navigation, enhancing user engagement and understanding.

What I Learned

Handling both design and front-end development taught me how design choices significantly impact the development phase. I learned that well-structured, user-centered designs simplify and accelerate development, reducing the need for extensive revisions and facilitating smoother collaboration between design and development.