Rocket Engine Catalog

Visual DevelopmentInteraction Design

This project focuses on designing a user-friendly interface for a rocket engine database, making complex technical information engaging and digestible for the general public. The interface features a clear visual style and intuitive flow, inviting users to play, explore, and discover different engine types, specifications, and components.

Rocket Engine Catalog

Visual DevelopmentInteraction Design

Try it for yourself - Figma Prototype

Design & Prototype

Engine Factory
Fabrication Shop
Hanger Bay
Future Plans
Mobile Gallery

Research

ENGINE FACTORY

Home Page

PAGE HIERARCHY

Home Page

Engine Factory

Landing Page

Fabrication Shop

Details Page

Hanger Bay

(For training, refer to future plans)

Home page is the central hub that leads to other levels

FABRICATION SHOP

Landing Page

This is the start of where users can "build their own engine", and then select existing engines based on their decisions.

Part 1 - Building the engine

Users can start from either one of the three main options that makes up a rocket engine.

The interface will then guide the user to complete all three before continuing to further customizations.

After all three has been selected, the user will be shown a summary of all their selections and further configure their engine.

After they are happy with their build, they can proceed to the selection area.

Part 2 - Selecting your engine

Based on the user's selected configuration, the system will display a list of existing engines that match their requirements.

Once the user has identified an engine they are interested in, they can proceed to the Hangar Bay (Details Page) to view more information about that specific engine.

HANGER BAY

Details Page

Selections the user have made that lead to this result

More detailed information about the engine, as well as the rocket it serves

Upcoming launches of this engine

Featured engines that leads you to other parts of the Hanger Bay.

FUTURE PLANS

Hanger Bay

In my plan, Hanger Bay is like a library, but for rocket engines. That is why all the details of any engine leads you to this page.

But it does not have to be just a boring library. It could include -

Engine I built
Featured engines
Community
And more!

Training

Training is an area on the map that provides users with additional information on more complicated concepts when they become interested in these topics after using the site.

Progression system that incentivize users to do these trainings and be more educated on rocket engines and how they work

MOBILE GALLERY

Special considerations for mobile -

Horizontal ---> Vertical
Hamburger for basic navigation
Swipe support for switching between parts of the build
And more!

Home

Landing

Configuring your engine --->

Summary

Selecting your engine

Details

Research & Design Process

THE DATABASE

Merlin 1-D

SpaceX

Falcon 9 / Heavy
Active
Gas-generator

Raptor Vacuum

SpaceX

Starship
In-development
Full-flow staged combustion

Rutherford

Rocket Lab

Electron
Active
Electric-pump-fed

...

and much more

USER ARCHETYPES

Students

For educational purposes
ie. school, museums

Simple at-a-glance information for low cognitive load
Simple navigation and consistent layouts
Playful elements and engaging graphics

Enthusiasts

People already interested in this topic who wants to learn more

Explanation of more advanced concepts
Links that leads to other sites like official websites - the learning continues
Progression system to keep them engaged

Casual Visitors

They likely does not know a lot about rockets and rocket engines

Ease to understand (similar to children), but also have access to more detailed information
Intriguing home/landing to raise interest

VISUAL LANGUAGE

General Inspiration

Keywords

Precision
Diagram
Blueprint
Sihouette

Early Experiments

The Map

The map design underwent a lot of experimentations, and eventually I landed on the concept of a rocket engine factory as intricate mechanical parts inside the body of a rocket.