AI Native Workflow: Investor-Focused Web Design
Fortune Kid is an early stage indie game studio. I redesigned and launched its website using an AI native design and development workflow, adapting the process to each page’s complexity.
Overview
Challenge
The studio’s direction was evolving, but its existing website did not clearly communicate its current focus to investors.
Goal
Create a website that supports investor evaluation and outreach while keeping essential game and player information accessible as the studio evolves.
Outcome
A live website that brings the studio’s direction, products, and progress into one place, with game pages and required player information.
Understand
Stakeholder Priorities and Requirements
An initial stakeholder alignment meeting clarified the website’s audiences, scope, and constraints. This established investors as the primary audience while preserving essential information for players.
Starting Point
The existing website described the studio’s registered business activities.
Main Gap
It did not clearly explain what the studio was currently building or communicate its brand.
Stakeholder Requirements
Support Investor Evaluation
Help potential investors understand and contact the studio.
Meet Publishing Requirements
Provide the website support needed for games distributed through app stores.
Constraints That Shaped the Approach
Evolving direction
Support product and messaging changes without rebuilding the site.
Limited budget
Deliver design and frontend development within limited resources.
Unreleased work
Highlight UNI, the studio’s primary project, while keeping its public scope flexible.
Research
Building Context Before Defining the Website
Before defining the website structure, I researched industry patterns and App Store requirements to understand the landscape, identify knowledge gaps, and establish a foundation for design decisions.
Methods Used
Investor Interviews
With the studio owner’s support, we gathered input from investors and venture capital professionals to understand their evaluation needs.
Competitive Analysis
I conducted a competitive analysis of game studio websites of different sizes to identify useful content and navigation patterns. Studio names are withheld due to restrictions.
Research Insights
Investor Information Priorities
Product direction | Delivery capability
Current progress
Essential Player Information
Clear access to game information, store links, and required privacy policies.
How Might We
How might we clearly communicate what Fortune Kid is building and demonstrate its ability to deliver?
Define
Turning Insights into Website Strategy
With the context established, I defined the website’s purpose, content priorities, and structure to create a clear foundation for design and development.
Information Architecture
Note: Items marked with a + tag were added to the original site structure.
Strategic Structure Decisions
Investor-Focused Landing Page
With investors as a primary audience, key studio information was placed on the landing page for review in one place.
Flexible Product Focus
UNI, the studio’s primary project, was given a flexible page structure that could evolve as more content became public.
Accessible Player Information
Required privacy policies were added to the footer and linked from App Store listings for direct player access.
Adaptable Site Structure
The modular structure lets the studio update the game list and landing-page sections without rebuilding the site.
Design
AI-Native Workflow
I used an AI native workflow to move quickly from ideas to functional prototypes, selecting from three workflows based on page complexity while designing in a live, functional context.
01. Generating Standard Pages
Situation
Standard pages, such as privacy policies, did not require precise visual styling.
Workflow
What I Achieved
Reduced design effort on standard pages, keeping time focused on higher priority product experiences.
02. Building Custom Layouts
Situation
The product details page needed a specific layout to bring together descriptions and supporting media.
Workflow
What I Achieved
Reduced design time by moving from low-fidelity wireframes directly into working pages while maintaining control over layout and visual direction.
03. Exploring Visual Directions
Situation
The landing hero needed visual exploration while the creative direction was still evolving.
Workflow
What I Achieved
Turned visual directions into functional prototypes, helping the stakeholder compare working solutions and align on a direction.
Iterate
Refining the Experience Before Launch
Team and tester feedback helped reveal gaps between design intent and real use, guiding improvements before the website launched.
Creative Direction
User feel
The initial website did not convey the passion and creativity the studio wanted to express.
Action
Redesigned the landing hero to better express the studio’s creativity and passion.
Game Information
User feel
Players had to scroll before understanding the game, risking early drop off.
Action
Condensed the layout to bring key game information into the initial viewport.
FINAL DESIGN
Experience Walkthrough
Showcase the studio landing page, games overview, and game details for investors and players.
UNI, the studio’s primary project, currently has a placeholder page and is excluded here while the team defines its public content strategy.
01 Landing Page
The landing page introduces what Fortune Kid is building and who is behind the work. Investors can explore products through “What We Build” tiles, with team and contact information on the same page.
02 Our Games
Visitors can browse released and announced games, then select a title for more information.
03 Game Details
Each game page brings together videos, images, a description, and an App Store link. The revised layout brings key game information higher on the page.
Launch
Impact
Ready for Investor Outreach
Created a website that brings the studio’s direction, products, and progress into one place, giving investors the key information needed for evaluation.
From Incomplete Site to Launch
Transformed an outdated, largely nonfunctional website into a complete experience through AI native design and development, iteration, and launch.
What I’d learned from this project
Match the Workflow to the Problem
Matching the AI workflow to each problem helped balance speed with the right level of design control.
Prototype to Make Decisions
Working prototypes made ideas and constraints tangible, helping the team evaluate options and align earlier.
