MDR Web Direction
Brief v2 — for Breadcrumb
v1 captured the strategy, voice, and prototype direction agreed during the Osmos engagement. v2 is the scope document we're sharing with Breadcrumb to review, scope, and quote against: refine the existing Figma into a premium, production-ready design that a separate dev team will build and deploy by May 12. Engagement pending feasibility confirmation and quote.
v2 at a Glance
The 60-second version. Detailed research, framework, and direction are below as reference.
This brief is shared with Breadcrumb to review the scope, confirm feasibility against the May 12 deadline, and provide a quote. Engagement is not yet confirmed. The work itself: take the existing Mondo Visual Figma from the Osmos handoff and refine it into a premium production-ready design — refinement, not redesign. Figma: Mondo-Visual-RR-for-DEV ↗
Hard launch — May 12
5 days from kickoff. Dev team is already building in parallel — BC design refinements must flow to dev in chunks they can swap in, not wait for a single complete handoff.
Design refinement only
BC owns design uplift. Out of scope: dev (separate team), brand strategy/voice (locked), 3D production (LA vendor).
1x.tech / DJI / Apple level
Less is more. The site should feel like an experience: wow on first sight of the robot, then a curiosity gap that pulls visitors down the page. Restraint, full-bleed imagery, type doing real hierarchy work, motion that earns its presence.
All placeholder for now
Final assets aren't ready. Most placeholders are AI-generated — but generation capacity is limited (it's Ryo, not a team). Question for BC: do you have in-house capability to generate production-ready AI images? See section C for what MDR can supply as source material.
Brand strategy & voice · "We make technology that rides with you" · Curious Kind positioning · LZ as personal robot / sidekick (not "companion" or "home robot") · Color palette (final) · Wordmark (final) · Typography: Nunito Sans · Prototype direction blend (MUV adicolor + iMo animated hero + DUO feature showcase) · Osmos Figma as starting point.
The Osmos Figma's type hierarchy system isn't landing — we've been tweaking it directly in Figma, but it needs a proper rebuild. Same for the color system in the component library — tokens and usage rules need to be defined coherently against the locked palette. Updating the component library's hierarchy and color systems is the first priority for BC. Everything else (page polish, motion, etc.) compounds off that foundation.
Expect a lot of copy revisions through and after launch. Build components so copy can be swapped quickly and easily — no text baked into images, flexible layouts that handle short and long strings, headline blocks that don't break when a line breaks differently. Treat copy as content that flows in, not as a fixed visual asset.
Three concurrent shoots overlap on most assets — the design team can pick and choose as deliveries arrive: (1) China web-clip video shoot · (2) LA 3D vendor — rolling stills · (3) Bin photography in China (shooting alongside the web-clip team). Use AI-generated placeholders to keep moving until real assets land.
Customer reviews, designed ambassador / KOL profiles, and community / UGC modules are not in v1. They move to v2. Design empty CMS-managed containers in the layout where they will eventually live, but do not spend cycles refining those modules for May 12.
Team & Contacts
Primary point of contact. Direction, sign-offs, asset spec coordination.
Owns the front-end build. Talk to Irvin about handoff format, component swap-in, and dev-side timing.
Available for review and escalation. Keep on thread for major decisions.
How We Work Together
Working Model
Three teams operating in parallel:
Design refinement
Refine existing Figma → premium production design. Page-by-page or component-by-component handoff. Source of truth = Figma.
Front-end build (separate team)
Already building from the Osmos handoff. Will swap in BC's refinements as they ship. Needs design in dev-ready chunks, not one big drop.
Direction, brand, content
Sets direction, signs off, supplies copy and asset placeholders. Brokers between BC and dev where needed.
Delivery Model — Stream, Don't Batch
Because dev is already building, BC's value is speed of usable handoff, not polish on any single section. Prioritize like this: (1) hero / above-the-fold first — it's what visitors see and what ad traffic lands on; (2) feature showcase + 360° model placeholder; (3) social proof / ambassador module; (4) philosophy & secondary pages. Ship each one to dev as it's locked.
What BC Does Not Need to Solve
The strategy, voice, copy framework, references, and prototype direction below are locked inputs, not decisions to revisit. If something feels wrong, flag it — but the default is execute against the existing direction.
What "Premium" Means Here
Concrete principles drawn from the brands the team aligned on. Use these as a checklist when refining the Figma.
The website is not a brochure — it's an experience. The first time a visitor sees the robot on the page, they should feel something: a small wow, then a curiosity gap that pulls them down the page. The "Curious Kind" is our brand DNA, but it's also the literal UX goal: provoke curiosity, then reward it. Each scroll should answer a small question and open a slightly larger one.
Less is more · Restraint
Less on the page. One idea per section. White space is content. If an element doesn't earn its presence, cut it. Confidence is what's not there.
Wow on first sight
The hero must hit emotionally before it explains anything. Cinematic scale, single subject, no clutter. Don't lead with the headline — lead with the robot.
Curiosity gap pulls scroll
Every section opens a question and partially answers it — leaving just enough unanswered to make the next scroll feel earned. Reveal, don't dump. Tease, don't withhold.
Full-bleed imagery
Hero and feature shots run edge-to-edge. Macro detail. No floating boxes around imagery. Let the product breathe.
Generous whitespace
Negative space is a design element. Sections breathe. Don't fill space because it's there.
Type as design
Strong type hierarchy doing real work. Display sizes earn their scale. Body type is calm and readable.
Motion with purpose
Animation reveals or reinforces, never decorates. Pin-and-reveal and scroll-tied parallax used sparingly to build the curiosity gap, not to show off.
Specs + visuals
Every number paired with imagery that makes it feel inevitable, not clinical.
Reference these often
1x.tech / NEO — full-bleed warmth, restraint, the wow-then-question rhythm. DJI / Osmo Pocket 3 — specs that feel cinematic. Apple / iPhone 17 Pro — single hero idea, instant clarity. Full reference set with takeaways below in section 07.
Working With Placeholder Assets
Nothing is final. Real footage and 3D stills are still being produced. We are using AI-generated images as placeholders to refine the vision and unblock design. Real assets will replace placeholders progressively — design must be resilient to imagery swaps.
What's In Production — Three Concurrent Workstreams
All three workstreams overlap on most assets, so the design team can pick and choose as deliveries arrive. We do not need to use everything captured — curate the strongest pieces.
Web-clip shoot
Live-action video clips for hero motion, feature B-roll, and lifestyle moments. A few well-placed clips will do the job once they arrive.
3D vendor — rolling stills
Primary product visual. Hero and feature stills will likely lean on these. Delivery is rolling, not a single drop.
Bin — stills photography
Stills photography shooting alongside the web-clip team. Same subjects, same set, complementary still coverage.
What MDR Can Supply (source material)
Previous rendered assets
Earlier-round renders that are good enough to use as direction or base layer — most need refinement. Useful as starting points for placeholders or as references for shot composition.
Source 3D renders
The clean 3D base renders Ryo has been using to combobulate the AI placeholders currently in the design. These are the highest-fidelity raw inputs available right now.
Question for BC — AI Image Generation Capability
Realistically, Ryo is the one generating placeholder imagery, and capacity is finite. Ryo's approach: high-quality results come from variations on real source images (not pure text-to-image), which is more accurate but slower and tied to source availability.
Does Breadcrumb have in-house capability to generate production-ready AI images? If yes — what's your pipeline (tools, source-image vs prompt-only, retouch workflow)? If we can split the load — BC generating per-design needs, MDR supplying source 3D renders and direction — design can move much faster than if it routes through Ryo for every placeholder.
CMS-Managed Containers
UGC and ambassador modules are v2 scope (see Read First). For v1, design empty CMS-managed containers where they will eventually live, but don't refine those modules. The CMS-flexible approach also applies more broadly: build for fast asset swap-in — real footage and stills will be replacing AI placeholders progressively as the China and LA workstreams deliver.
Everything below is the locked direction inherited from v1: research, framework, brand, prototype review, and decisions. Skim it once for context, then refer back as needed. None of it should be relitigated — it's the input BC is designing against.
Internal Survey Findings
Consolidated team feedback from the internal product survey (n = 16 respondents, Jan 27 – Feb 1, 2026)
Warmth vs Clarity: The Verdict
"MDR must have both emotional qualities AND clear use cases, or it won't work"
"If LZ is clearly useful and solves pain points, emotion and loyalty will follow"
"If MDR and LZ feels emotionally right, people will forgive ambiguity"
The website must lead with BOTH — clear functionality AND emotional connection. Neither alone is enough.
Hero Section: First Impression
"What should be the first thought when opening the website?"
"LZ is a cool looking robot that can finally be useful and help me with activities"
"LZ is a presence/friend/character I can bond with"
"LZ is an incredible tool I can use for content creation or surveillance"
The team is evenly split between "useful companion" and "emotional character." The hero should convey BOTH — a visually striking robot that is clearly useful for daily life.
What Should Users Remember?
"If there is one thing you would like the user to remember about the MDR website..."
Clarity of LZ's functionality
I trust that MDR is legitimate and LZ is a real robot I can buy today
Emotion & Personality
LZ's technology is innovative and groundbreaking
The website must clearly communicate what LZ does (functionality) while building trust that it's a real, purchasable product. Innovation and personality are supporting themes.
Trust Signals & Brand Perception
"What would make you believe LZ is worth paying for?" (pick 2)
Real world footage of the camera
KOL/creator usage and testimonials
Design philosophy, material, and construction of LZ
Ecosystem, support, privacy, and future vision
Brand closest to MDR: 50% — Something else (unique identity) | 18.75% Rivian | 12.5% Apple | 12.5% Bambu Lab | 6.25% DJI
The website needs real camera footage and creator testimonials front and center. MDR is seen as a unique brand — lean into that rather than copying existing brands.
Priority Ratings (1–5 scale)
Rated "Clear understanding of LZ's use" as 5★ — HIGHEST score
Rated "Trust of MDR as a brand" as 5★, 37.5% rated 4★
Rated "Emotional connection to LZ" as 4★, 31.25% rated 5★
Rated "Technical sophistication" as 3★ — LOWEST, area of concern
Users understand what LZ does and trust MDR, but perceive the robot as mid-range technically. The website must bridge the gap between emotional appeal and technical credibility.
Survey-Backed Recommendations
Based on 16 team responses, the website should:
Lead with BOTH
Warmth and clarity (69% consensus) — don't sacrifice one for the other
Hero = Utility + Personality
Show LZ in a real environment doing something useful, with personality visible
Real Footage First
Prioritize real-world footage (36%) and KOL/creator testimonials (30%) as primary trust signals
Bridge the Tech Gap
Team rates tech sophistication lowest (3/5 avg) — the site needs stronger technical proof points
Own the Unique Identity
50% said MDR is "something else," not Apple/DJI/Rivian. Lean into this differentiation.
5 Principles from 20+ Brand Studies
From studying Apple, Rivian, DJI, GoPro, Bambu Lab, 1x.tech, Whisker, and others, we identified 5 principles the best product websites follow:
Open with Emotion
Lead with lifestyle, identity, and presence. Let people imagine living with LZ. Emotion earns attention — but alone is not sufficient for commitment.
Structure & Clarity
Once emotion is established, transition quickly into content sections, clear hierarchies, easy navigation. Users need to understand what and why without prolonged exploration.
Trust Signals
Real use cases, demonstrations, support info, warranty details build trust. Trust is a primary UX function — not hidden in footer details.
Balanced UX
Great UX has balance in all directions. Avoid extremes: too much emotion without clarity, too much info without warmth, too much atmosphere without guidance.
Conversion from Confidence
The strongest brands don't feel aggressive or sales-driven. They are calm. CTAs are repeated but natural. People commit when they feel comfortable, informed, and aligned.
What to Avoid
not enough clarity
not enough warmth
not enough guidance
Who We Are
We make technology that rides with you.
Mondo Robots builds personal robots — technology that moves with you, sees with you, and makes your world wider. Not a replacement. A sidekick.
We believe curiosity leads to exploration, and exploration leads to connection. That's the arc that drives everything we make.
The robotics industry is building machines that replace people. We're building the one that rides with you. Not the only camera — the other angle. Not the hero product — your sidekick.
Stay Curious.
Voice: Calm. Confident. Undeniably Cool.
How MDR Sounds
Sound like a group chat, not a press release. Lead with feeling, back up with specs. Show the work — geek out about the details. Celebrate the imperfect — LZ falling and getting back up is a feature. Write copy specific to real moments, real people. Talk about what we don't know yet.
What to Avoid in Copy
Sound corporate, translated, or committee-approved. Use "companion," "innovation," or "amplify." Lead with AI — it's under the hood, not on the billboard. Do "excited to announce" or "proud to share." Overpromise — if we can't demo it, we don't claim it. Sound dystopian, even ironically.
✓ "Folds to backpack size. Yes, we checked."
✗ "Compact dimensions of 280x180x150mm."
✓ "19 mph. Faster than your morning jog. Sorry."
✗ "Dynamic outdoor performance at speeds up to 19 mph."
✓ "We made a robot that jumps. Your dog is going to have feelings about this."
✗ "Watch LZ demonstrate its advanced jump capability."
✓ "V1 is a prototype. It's rough around the edges. That's the point."
✗ "Our initial release represents the first phase of our product roadmap."
The Long Lost Friend You Just Met.
LZ is a personal robot. Your first sidekick. It moves with you at 19 mph, captures stabilized 4K video, folds to backpack size, and runs on an open AI platform you can customize.
It's not replacing your phone. It's the other angle — the low tracking shot, the follow from behind, the perspective you couldn't get without a sidekick riding beside you.
The feeling when you pick it up isn't "wow, new technology." It's "where have you been?" Like the RC car in the driveway, the drone at the beach — something you've always known, reborn.
The Sidekick Code
How LZ Behaves
The user is always the hero. LZ is never the star. We keep up — literally and figuratively. We fall down. We get back up. That's personality, not failure. A robot doesn't judge you. The real you shows up. That's the footage worth keeping. Not everything is content. The default is "keep," not "share." Two modes: Piloted (you drive) and Autonomous (it rides along). One sidekick.
How We're Different
The Industry
Build the hero product. Sell the future. Lead with specs. The only camera. Demo in controlled environments. Show renders. Sound like press releases. "Smart home companion." Target "early adopters." Price for exclusivity. Replace you.
Mondo / LZ
Build the sidekick. Build for right now. Lead with what it does for YOU. The other angle. Demo on Venice Beach sidewalks. Show prototypes (warts and all). Sound like group chats. "Your sidekick." Target the curious. Price for accessibility ($600). Ride with you.
The Curious Kind
Mondo's cultural identity. It starts inside the company and radiates outward through everything we make, say, and share.
It feels like a skate brand discovered robotics. Like the cool kids are also the smart kids. Like belonging to something that hasn't been fully defined yet — and that's part of the appeal. Not counterculture. Curious culture.
The tinkerers, the creatives, the early adopters who care more about what something feels like than what it costs. Every LZ owner is a member — not of a loyalty program, but of a tribe. They create content, share builds, customize AI agents, and show each other what they're discovering.
It feels like crew. The people you'd road-trip with. The ones who stop when something catches their eye and nobody has to explain why. The ones who explore first and ask questions later — and then won't stop asking questions. Curiosity is contagious. Explorers find each other.
Palette, Wordmark, Typography
Color palette and wordmark are final. Typography is Nunito Sans. The hierarchy system that came over from Osmos isn't right — it's being tweaked in Figma and needs to be rebuilt properly as part of the v2 component library work.
Color Scale
Primary pairing: #C53523 (brand red) on #F5F3F2 (cream), or inverted. Note: in Figma the red is slightly tuned from the spec — it reflects the color picker reading off the final logo render, which matches the physical product. Use Figma as source of truth for the actual hex value; the codes below are the spec scale.
#FDEDEC
#FBD5D4
#F8B0AC
#F78B85
#F56358
#E7402B
#C53523
brand
#A22A1B
#731B10
#420B05
#280402
#F5F3F2
Wordmark
Final wordmark in light- and dark-backdrop variants. Source SVGs in /assets/.
Typography
Nunito Sans is the locked typeface. The hierarchy system is the open question — Osmos' system felt too flat and didn't create enough rhythm between display, headline, body, and microcopy. Rebuild the type ramp as part of the component library refresh. Reference the way 1x.tech, DJI, and Apple use type to do real hierarchy work — display sizes earn their scale, body type is calm and readable, microcopy supports without competing.
What to Learn From
What to Avoid
The Website Experience Flow
Based on survey data and research, the team aligned on this experience flow:
Emotion First
Hero section: LZ in a real home environment, doing something useful, personality visible. One shot that tells the whole story. Cinematic but grounded.
Structure & Clarity
Immediately follow with clear sections: what LZ does, how it works, key capabilities. Clean hierarchy, easy to scan. Specs paired with visuals.
Trust Signals
Real-world footage, press coverage, testimonials, warranty/support info. Trust is earned, not declared. Show, don't tell.
Confident Conversion
Calm, well-placed CTAs. No aggressive sales. People commit when they feel comfortable, informed, and emotionally connected.
LZ's website should feel like: opening the door to your home and seeing a trusted companion waiting for you — warm, capable, and real. Not a tech demo. Not a mood film. A product you want to live with, presented with the confidence of a brand that knows exactly what it is.
Design Directions Tested
The team reviewed multiple prototype directions, each inspired by a different brand approach:
Direction A — Apple-inspired
Clean, minimal, product-centered. Strong visual hierarchy. Risk: may feel too cold for a home robot.
Direction B — Rivian-inspired
Lifestyle-first, cinematic. Adventure and identity. Risk: may lack product clarity.
Direction C — DJI-inspired
Technical mastery meets emotion. Specs prominent but aspirational. Risk: may feel too technical.
Direction D — Bambu Lab-inspired
Utility and competence forward. Community-driven. Risk: may lack emotional warmth.
Direction E — GoPro-inspired
Content-first, user-generated feel. Product proven by output. Risk: LZ's footage capabilities still early.
Direction F — 1x.tech-inspired
Premium warmth, full-bleed macro photography, generous whitespace. Risk: may feel too abstract without trust layer.
Direction G — Whisker-inspired
Pain-point-first messaging, lifestyle photography, trust signals layered throughout. Risk: aggressive CTAs can undercut premium feel.
What the Team Liked (and Didn't)
After reviewing all prototypes, the team identified which elements to cherry-pick, reference, or table. Here's the verdict:
What We're Building
Consolidated decisions from the prototype review sessions:
Landing Page / Hero
Real robot footage — with a creative challenge
Earlier direction was a 3D model animation (per the iMo prototype review below). The team has since shifted: we want to show the real robot, not an animation. It feels more honest and grounded.
The creative challenge: LZ's body has a white matte finish — and in the real footage and stills coming back, it reads almost like AI / CG. The real robot ironically looks rendered. The hero treatment needs to make the real robot feel real: human interaction, environmental anchors, contact with surfaces, motion blur, hands in frame, weather, dirt, light direction — anything that physically grounds it. This is a brief BC needs to solve for, not a fixed comp.
Scroll-stopper direction we like: close-up compositions that show texture detail (sells "real" — the matte surface, the fine grain, the camera module up close), paired with a personality prop (e.g. a leather cowboy hat resting on the head). Tight crops outperform full-product machine shots. The texture closes the CG-perception gap; the prop adds a beat of personality that makes a visitor stop scrolling. We've tested this style internally and it lands — worth treating it as a working direction, not a one-off.
For v2, the hero becomes a full product introduction video once production fully wraps.
MUV adicolor visual treatment
The color-saturated, editorial vibe sets the right tone. Combine this aesthetic with the robot animation.
Tone & Language
"Moments" as a core concept
"Moments" feels warm. Weave throughout site copy — not as a tagline, but as a recurring motif.
iMo/1x warm language baseline
Warm, human, emotionally present. Not overly technical, not overly poetic. Avoid sterility — copy must maintain warmth even in technical sections.
Social Proof & Ambassador Profiles
Customer reviews confirmed
Must be presented elegantly, not cheaply. No YouTube embeds — all video must be native or custom-hosted.
Designed ambassador profiles
Each KOL/influencer needs a studio-quality visual profile. Reference: DJI and Hasselblad ambassador pages. Editorial, cinematic, premium.
Feature Showcase & 360° Model
Interaction → Mobility → Camera
Lead with interactive elements first, then mobility, then camera. Interaction is the hook. Present by subtraction — show product in scenarios, not specs.
360° interactive robot view
Full 360° rotatable 3D model. Clickable hotspots on replaceable wheels, sensor array, camera module, eye lights. Each opens a demo video overlay.
Page-by-Page Direction
Which prototype elements map to each page of the final site:
MUV visual + iMo video
Animated robot hero, adicolor color treatment, curiosity-driven headline
iMo/1x + MUV
Warm language, "moments" motif, discovery/curiosity positioning
DUO/DJI + New (360°)
Feature grid with demo videos, 360° interactive model, clickable hotspots
flo + New (Ambassadors)
Customer reviews, designed KOL profiles, no YouTube embeds
MUV + iMo
Warm narrative, lifestyle focus, community angle
Standardize
Clean layout, mission-driven copy, warm but professional. Clear product presentation.
Specific Don'ts from Review
All video native or custom-hosted.
emotional warmth. Clean ≠ cold.
(BOLT, SKUT). Doesn't align.
influencer content. Must be studio-shot.
with robot trim. Use warm tones.
Present through scenarios.
No single prototype is the answer alone. The final site combines MUV's adicolor visual energy + iMo's animated robot hero, with iMo/1x warm language and the "moments" concept from flo, grounded by DUO/DJI's feature showcase with demo videos and a 360° interactive model, and flo's customer reviews with designed ambassador profiles.
Product Positioning Reminder
LZ is not a "home robot" or "companion robot" for the "home robotics market." LZ is a personal robot / sidekick that rides alongside you outdoors at 19 mph, captures stabilized 4K video, and folds to backpack size. The word "companion" is explicitly on the do-not-use list. All copy, captions, alt text, and microcopy should reflect this positioning.