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's avatar
Raja Thejes
• 17h
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
stitchchallengeStitchUX DesignClaudeMobbin
Post image
Post image
Rishi's avatar
Rishi Shah
pro
• 13h
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.

Raja's avatar
Raja Thejes
• 17h
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

Back to feed
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