Built Atlas, an End-to-End Travel App Prototype. Atlas is an end-to-end travel planning prototype...

Built Atlas, an End-to-End Travel App Prototype. Atlas is an end-to-end travel planning prototype...Built Atlas, an End-to-End Travel App Prototype. Atlas is an end-to-end travel planning prototype...

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Raja Thejes

• Jun 4

Built Atlas, an End-to-End Travel App Prototype. Atlas is an end-to-end travel planning prototype covering the full user journey from destination discovery through visa application, flight booking and activity planning. It was designed and prototyped using Claude as the design system engine and Google Stitch as the generation tool, with UI references curated from Pinterest and Mobbin.

The central design decision: all destination imagery is rendered in Studio Ghibli painterly illustration style. No photography. Every country card, every hero screen, every activity scene is hand-painted cartoon art — warm brushstrokes, layered skies, thick vegetation, glowing light.

The Design Thinking

Touring pages and booking flows are serious product surfaces. They handle real decisions — money, travel documents, visa deadlines. I approached them the way a business landing page designer would: earn trust first, create desire second, remove friction at every step.

The Ghibli illustration style was a deliberate answer to a real problem. Photography in travel apps always belongs to someone else's trip. An illustration belongs to the user's imagination. It represents possibility rather than memory. That psychological shift — from "look where someone else went" to "imagine where you could go" — changes how the user emotionally engages with the product.

The background across the entire app is a warm parchment cream, not white and not black. This decision came from studying a lockscreen design featuring the Great Wall of China rendered in illustrated style. The cream background reduced visual intensity, made the illustrations breathe and gave the app warmth that pure white UIs cannot achieve.

The Cloth-Grab Interaction

One signature interaction was adapted from a food app UI reference: a linen cloth illustration at the top of the Offers section, with a cartoon hand gripping it. When the user swipes upward, the cloth peels back to reveal new destinations and offers beneath — like pulling a tablecloth to reveal what's underneath. This interaction is used in exactly one place, which gives it meaning and surprise value rather than becoming a repetitive pattern.

Animation Philosophy

Every animation in Atlas is triggered only by user interaction. Nothing loops. Nothing auto-plays. Nothing rotates or moves without the user initiating it. Buttons press down on tap and spring back. Cards lift slightly before navigating. Page transitions slide in from the right, back from the left. The cloth peels only when swiped. This restraint makes each interaction feel intentional and physical rather than performative.

Process

I collected UI references from Pinterest and Mobbin — spanning food delivery apps, fintech wallet designs, sports match apps, shopping flows and travel concepts. I identified patterns I wanted to carry into Atlas: the warm non-white backgrounds, the illustrated card tiles, the cloth-grab, the wax-seal status badges, the floating label inputs.

I fed these references and my design direction into Claude, which generated a comprehensive design system markdown file — color tokens, typography scale, component specifications, animation behavior rules, illustration briefs for every screen and detailed screen-by-screen prompts written in precise language.

That structured markdown was then fed into Google Stitch, which used the prompts to generate the visual prototype screens. Stitch handled the translation from written specification to visual output.

Tools

Claude — design system documentation, component specifications, screen prompts Google Stitch — prototype generation from prompts Pinterest and Mobbin — UI reference collection Studio Ghibli illustration style — visual language for all destination and scene art

Completed work

stitchchallenge Stitch UX Design Claude Mobbin

Raja Thejes

• Jun 4

Linkedin: https://www.linkedin.com/posts/rajathejes_productdesign-uxdesign-googlestitch-ugcPost-7468193466053799936-rJpi/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACGrLbcBUZX_-R6MEKSziPHHwQ3dEMtCWIc Checkout the Stitch flow: https://stitch.withgoogle.com/projects/18296571685699905435

linkedin.com

#productdesign #uxdesign #googlestitch #travelapp #designchallenge… | Raja Thejes

This time I built Atlas, an end-to-end travel planning app prototype. And I made one deliberate, slightly unusual call early on: No photography. Every destination is illustrated in Studio Ghibli art style. Here’s my reasoning. Tourism and trip screens does not require to look like a serious landing page. The stack and process: I started by collecting reference UI from Pinterest and Mobbin — food apps, fintech cards, travel concepts, lockscreen designs. I was particularly drawn to two things: the warm parchment cream backgrounds (not white, never pure white — like the Great Wall lockscreen), and a cloth-grab interaction from a food app where a hand peels back a linen cloth to reveal content beneath. I fed all of this into Claude — not to generate the UI, but to generate the design system. A detailed markdown specification covering color tokens, typography scale, component behavior, animation rules (interactions only — nothing auto-spins, nothing loops without user touch), illustration briefs for every screen, and a screen-by-screen prompt structure. That markdown went into Google Stitch, which translated the spec into a working visual prototype. What Atlas covers: → Destination discovery with season alerts and hidden gem tagging → Visa flow — on-arrival countries flagged immediately, embassy visa countries get a full 5-step progress tracker with interview scheduling → Passport upload with document vault → End-to-end flight booking with airline cards, route visualization, and alternative transport (rail passes, buses) → 110+ Dubai and Abu Dhabi attractions, each with Ghibli-illustrated cards → Activity detail screens with pricing, booking, and illustrated getting-there maps → My Trips dashboard with visual itinerary timeline The touring pages feel like a business landing page should feel — trustworthy, structured, purposeful. The Ghibli art is not decoration. It’s the reason you stop scrolling. Tools used: Claude (design system + prompt engineering) · Google Stitch (prototype generation) · Pinterest + Mobbin (UI reference) This was built for the Google Stitch design challenge. Would love to hear what you think — especially from designers who’ve wrestled with the tension between making something beautiful and making something that actually converts. #ProductDesign #UXDesign #GoogleStitch #TravelApp #DesignChallenge #Prototyping #Claude #AIDesign #StudioGhibli #AppDesign

Rishi Shah

pro

• Jun 4

This is a beautiful example of using illustration as a product decision, not just a visual style. The idea that illustrations represent possibility rather than someone else's memories is such a strong insight.

View my entry for this challenge: https://on.contra.com/pnfJBQ

Would love to hear your thoughts!

on.contra.com

Introducing Voya: Revolutionize Your Travel Planning Experience

Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.

Miguel Queirós

max

• Oct 24

The pen tool details close up

Love this job

Motion Design Brand Design Claude

Boluwatife Delight

• Oct 25

Upgoating this.....This is such impressive work!

Miguel Queirós

max

• Oct 24

Logo motion design explorations for oldhand AI

Motion Design Claude Brand Design 2D Animation Figma

Paramjeet Singh

• Oct 24

BMW M4 Competition App Design | UI/UX Case Study

I designed a premium automotive app experience inspired by the BMW M4 Competition, combining a bold visual identity with a sleek, modern interface. The design features cinematic car visuals, dynamic speed animations, performance specifications, and an immersive dark theme with electric-blue accents.

The interface highlights key performance details, including acceleration, horsepower, torque, and top speed, creating a high-end digital experience for automotive enthusiasts. Every screen is designed to communicate power, precision, and innovation through clean typography, striking visuals, and smooth transitions.

Key Features:

Premium automotive UI/UX design

Interactive speedometer and motion animations

Performance statistics and technical specifications

Dark-themed interface with electric-blue highlights

Cinematic visuals and engaging transitions

Modern layout with a performance-focused user experience

My Role: UI/UX Designer & Visual Designer Project Type: Automotive App Concept Focus: User Interface, Visual Design, Motion Design & Interactive Experience

Design Philosophy: Engineered beyond limits — transforming automotive performance into an immersive digital experience.

base44challenge Base44

Sagar Nawaz

• Oct 24

Clean work Paramjeet! BMW M4 Competition is a beast to design for - love that you matched the bold visual identity with sleek UI. Those cinematic visuals + dynamic speed animations must make the performance stats pop. M power done right!