FOM UI/UX design case study
FOM case study

Engineering a dynamic mission profile and community platform connecting individual submissions with a curated digital Mars community.

The First on Mars required a custom digital experience that could collect detailed mission profiles from users, process and organise submitted information, and transform approved profiles into an engaging public community experience. We engineered a structured submission workflow integrated with Google Sheets, combined with an administrative approval process and a dynamic community display designed to support an evolving user base.

Industry:
  • Space Entertainment
  • Digital Community
Technologies:
  • WordPress
  • Custom Form Development
  • Google Sheets API
  • API Integration
Focus:
  • Custom Workflow Engineering
  • Data Integration
  • Community Platform
  • Dynamic Content

The First on Mars

Engineering a mission profile and community platform built around structured data, approval workflows and dynamic content.

The First on Mars is an immersive digital experience designed around the concept of building a community for a future Mars mission. As part of this experience, users can create their own Mission Profile by submitting personal and mission-related information through a custom-built form.

Rather than publishing submissions immediately, the platform introduces an administrative approval layer. Submitted information is stored through a Google Sheets-based data workflow, allowing administrators to review the entries before they become part of the public community.

Once approved, profiles are made available through the Community page, creating a continuously evolving collection of participants represented within the wider Mars experience.

FOM website design

Engineering
Snapshot

FOM website interface

Platform

Custom WordPress Web Application

Project Complexity

Medium / High

Complexity Factors

  • Custom multi-field mission profile workflow
  • Structured user data collection
  • External Google Sheets API integration
  • Data synchronisation between WordPress and Google Sheets
  • Administrative approval workflow
  • Controlled public profile publishing
  • Dynamic community content
  • Masonry/Braintree-style profile presentation
  • Scalable community architecture

Role

  • Custom WordPress Development
  • API Integration
  • Workflow Engineering
  • Front-End Development
  • Quality Assurance
FOM website design concept

Challenge

The First on Mars required more than a conventional contact or registration form.

The objective was to allow users to create their own Mission Profile while maintaining control over which profiles would ultimately appear within the public community.

The submission process needed to collect multiple pieces of structured information and transfer that information into an external data source. At the same time, administrators needed the ability to review submitted profiles before they were publicly displayed.

This created a workflow with several interconnected stages:

User Submission → Data Storage → Administrative Review → Approval → Community Display

The challenge was to connect these stages into a reliable experience while keeping the process simple for users and manageable for administrators.

The public Community page also needed to present approved profiles in an engaging visual format rather than as a conventional list of records.

FOM website UI design

Technical Understanding

Before development began, we analysed the complete Mission Profile journey, from the initial user submission through to the final public community display.

The workflow required clear separation between submitted data and approved public content. This ensured that information entered by a user would not automatically become visible on the website before it had been reviewed.

We structured the solution around three key areas:

  • Mission Profile Collection
  • Data Management & Approval
  • Dynamic Community Presentation

This approach provided a clear relationship between the form, the external data source and the public-facing Community page.

By understanding the complete data flow before implementation, we were able to create a workflow that could support the current community experience while remaining suitable for future expansion.

How We Executed It

FOM project research
FOM design strategy
FOM website concept
FOM UI design process
FOM website development process
FOM final website design

Building A Structured Mission Profile Workflow

FOM project research

The Mission Profile form was engineered as a dedicated user submission experience rather than a basic WordPress contact form.

Users are guided through the process of providing the information required to create their Mars identity. The form captures structured profile information such as the user's name, colony role, Earth location, social profile, professional sector, skills and charitable cause.

This creates a consistent data structure for every participant while allowing the information to be reused throughout the wider community experience.

The structured approach also makes the submitted information easier to process, review and display consistently.

Integrating Google Sheets as the Data Layer

FOM design strategy

To manage submitted Mission Profile information, the form was connected with Google Sheets through an API-based integration.

Instead of relying exclusively on the WordPress database, submitted information is transferred into a structured Google Sheets environment.

This provides administrators with a familiar interface for managing incoming submissions while keeping the information organised in a consistent tabular structure.

The integration creates a clear separation between the user-facing submission experience and the administrative data-management layer.

Engineering An Administrative Approval Workflow

FOM website concept

A key requirement of the platform was ensuring that submitted profiles would not automatically appear on the public Community page.

The workflow therefore introduces an administrative review stage.

Once a user submits their Mission Profile, the information can be reviewed by the administrator. Only after the submission has been approved does the profile become eligible for public presentation.

This provides greater control over the quality and accuracy of the community while preventing unreviewed submissions from being immediately published.

The approval workflow also establishes a foundation for managing a growing number of community submissions in a controlled manner.

Transforming Approved Data Into Community Profiles

FOM UI design process

Once a Mission Profile has been approved, the information moves from the submission workflow into the public community experience.

The Community page presents approved participants as individual profile elements, transforming structured form data into a more engaging visual representation.

Rather than exposing the underlying spreadsheet structure, users interact with a curated community interface where approved participants become part of the broader Mars experience.

This creates a complete journey between the original submission and its final public representation.

Creating A Dynamic Masonry-Style Community Experience

FOM website development process

With potentially multiple participants appearing on the Community page, the interface was designed around a masonry/Braintree-style visual layout.

This approach allows profiles to be presented as individual visual blocks while maintaining an organic community feel.

As additional profiles are approved, the community can continue to grow without requiring the underlying page structure to be manually redesigned for every new participant.

The visual presentation also helps transform what would otherwise be a database of user records into an engaging community destination.

Connecting Data, Workflow And Presentation

FOM final website design

The strength of the implementation comes from connecting the individual components into one continuous workflow.

The complete journey can be represented as:

Create Mission Profile

↓

Submit Information

↓

Store Data in Google Sheets

↓

Administrator Reviews Submission

↓

Profile Approved

↓

Approved Profile Displayed in Community

Each stage has a specific responsibility, reducing unnecessary coupling between the form, data management and public presentation layers.

This structure also provides a clearer foundation for future enhancements to the community experience.

Engineering For
Long-Term Community Growth

The platform was designed with the expectation that the number of Mission Profiles could continue to grow.

The workflow separates data collection, administrative review and public presentation, allowing the community experience to evolve without requiring fundamental changes to the original submission process.

As more users create Mission Profiles and more submissions are approved, the Community page can continue to function as a growing representation of the First on Mars community.

This provides a scalable foundation for future profile features, additional data fields and expanded community functionality.

FOM website experience

Outcome

The completed solution provides The First on Mars with a structured Mission Profile and Community platform that connects user participation with a controlled public publishing workflow.

By combining a custom WordPress form, Google Sheets API integration, administrative approval and dynamic community presentation, the platform transforms individual user submissions into an evolving digital community.

The solution provides a reliable foundation for managing Mission Profiles while maintaining administrative control over public content and delivering an engaging visual experience for community visitors.

The resulting workflow creates a clear path from user participation to community membership, supporting The First on Mars' wider vision of creating an interactive and continuously evolving Mars experience.

FOM responsive website design

Clarity Before Execution. Accountability Until Delivery

Great development is not only about writing quality code.

It is about understanding the logic behind what needs to be built, creating agreement before execution, maintaining visibility throughout development, and verifying quality before delivery.

Our process is designed to reduce uncertainty, improve execution reliability, and create predictable project outcomes.

    Case Studies Testimonials Enquiry