Case Study · DecoraSync
Try the sofa before it exists in your room.
DecoraSync is an AI + AR interior design MVP: upload a photo of your room, see AI-generated
design suggestions with real IKEA products, place them in AR, and walk through a simulated purchase.
As the UX/UI designer, I designed the end-to-end flow and every screen — working daily with a Unity
engineer and an AI engineer to shape what we could actually build, then testing it with real users.
The brief
Buying furniture online has a visualization problem: people can't tell whether a piece will fit their space — or their taste — until it arrives. Returns are expensive; hesitation kills the purchase.
DecoraSync's answer combines two technologies: an AI service that generates styled room renders from the user's own photo, and AR placement that lets them stand the actual product in their actual room. The flow runs from a style quiz, through photo upload and AI suggestions, to AR preview and a simulated cart.
This was a proof-of-concept for closed testing — not a polished launch. The goal was to validate three things: could users trust SKU-specific AI renders, judge scale and fit in AR, and see enough value to imagine buying this way?
How might we help people confidently judge whether furniture belongs in their home — before they buy it?
Who it's for
The primary user is a 25–40 urban condo owner — someone who wants a stylish, personal home but has limited space, limited time, and no design training. Everything in the flow was designed against her pain points.
Motivations
- A personalized, stylish home — without hiring a designer
- Confidence that furniture will fit before buying
- Modern, space-saving pieces for a small condo
Pain Points
- Overwhelmed by endless design choices
- Can't visualize how furniture will look in her space
- No time or design expertise to plan it herself
User Needs
- See furniture in her own room before purchasing
- Options matched to her style, in stock
- One continuous path from idea to checkout
Mapping the user flow
Before designing any screens, I worked from the user flow provided by the Lead Designer, ensuring each screen addressed every decision point, failure state, and edge case—from denied camera permissions and invalid photos to failed AI generation and users abandoning login.
The complete flow — login branches, permission gates, error and retry paths, and the AI → AR → cart spine.
Two structural decisions shaped it. First, a guest mode: browsing and wishlisting work without an account, but AI design, AR, and checkout require login — the gate sits exactly where the value begins, not at the front door. Second, every failure has a path back: denied permission routes home with an explanation, a failed generation offers retry, an invalid photo loops to re-upload. Nobody hits a dead end.
Design principle
The happy path is easy to draw. The design work is in the branches — what happens when permission is denied, the photo fails, or the AI produces something wrong.
From wireframes to UI
I started with low-fidelity wireframes to lock down layout and flow logic before investing in visuals. At this stage the questions were structural: where does the quiz sit relative to upload? How many taps from AI render to AR? What does the user see while generation loads?
Low-fidelity wireframes — flow logic and layout decisions before any visual design.
Once the flow was validated with the team, I moved into high-fidelity UI in Figma — applying the visual language, refining spacing and type hierarchy, and building component states (loading, error, empty) that the Unity engineer could reference directly.
High-fidelity screens — the visual system handed off to the Unity engineer.
Designing for Unity
The entire app — UI, AR, analytics — runs in Unity, not a web stack. That meant my Figma designs weren't handed to a front-end developer with a component library; they went to a Unity engineer rebuilding them inside a game engine. Every design choice had to survive that translation.
I learned early what mattered: flat, component-based layouts that mapped cleanly to Unity's UI toolkit, no complex blend modes or CSS-style effects that would cost extra rendering time, and clear asset exports at exact dimensions since there's no responsive reflow. Pixel-perfect gradients, layered shadows, animated micro-interactions — all things I'd reach for in a web project — were either expensive or impossible in Unity's mobile renderer.
This constraint actually sharpened the UI. With fewer decorative tools available, every element had to earn its place through clarity, not polish. The designs got simpler, more legible, and faster to implement — which was exactly what a PoC needed.
Implementation notes handed off to the Unity engineer — spacing, icons, interaction specs, and exported assets.
Screen walkthrough
A closer look at the key moments in the flow — what each screen does, and the design decisions behind it.
Home
The home screen reads like a real furniture shopping app — categories, popular items, search — even though the PoC only supports one product path. The "Design with AI" banner is the primary entry point, placed high but not blocking browsing so the experience doesn't feel like a single-purpose tool. The bottom navigation centers the AI design action as the hero tab, signaling the app's core value without forcing users into it.
Style quiz
Five quick steps — room type, size, style, mood, budget — narrow the design space before the user uploads a single photo. Each question uses visual options (image cards, icon grids, chips) over text lists so the selections feel like browsing, not filling out a form. For the PoC, every path funneled to Scandinavian — but the quiz framed that single outcome as a personal choice.
Upload & AI render
The user uploads a room photo and waits while the AI generates a styled interior. Three progressive status toasts keep the process transparent — no silent loading spinners. Once ready, the result screen pairs the AI render with tappable product hotspots and Like / Dislike / Regenerate controls, giving users both context and agency over what the AI produced.
AR placement
The AR screen is where confidence is built — or lost. After seeing the product in an AI render, users now stand it in their actual room and judge scale, color, and fit in real space. Two states — exploration and editing — keep the default view immersive while putting detailed controls one tap away.
Users rotate their phone to explore the design in their real environment. The view stays clean — controls at the edges, the room as the focus.
Reposition the sofa by dragging. Separating move from edit prevents accidental resizing while finding the right spot.
Tapping a product opens color and size options. Users try variants in context without leaving AR — the decision happens in the room, not on a product page.
Move, edit, bookmark, delete, confirm — surfaced only after selecting a product. Progressive disclosure keeps exploration mode minimal.
Product detail & checkout
The product page pairs the AI-rendered room image with standard e-commerce details — price, color variants, ratings, description — plus a direct "AR View" shortcut to place the item in real space. The cart shows a clear price breakdown with tax and total. The entire flow is simulated with static data, but designed to feel complete enough that testers could evaluate whether they'd actually buy this way.
Usability testing
We ran moderated remote sessions with four participants — a deliberate mix from first-timers to heavy AI/AR tool users — each on their own iPhone via TestFlight, in their own home, with their own room photos. Think-aloud protocol, scripted tasks, 30–45 minutes: from install through quiz, upload, AI render, AR placement, cart, and checkout.
All four participants completed the full flow — quiz through checkout — with zero facilitator intervention.
Every participant understood the AI renders showed purchasable IKEA products — not generic mock-ups.
All participants placed and adjusted AR items unaided, but clarity ratings clustered at 3/5 — functional, not confident.
These metrics confirmed the flow worked mechanically. The deeper question — whether users trusted what they saw — is where the findings got interesting.
What held, what broke
What held. The entry, quiz, and overall journey were immediately understood. The core concept — see it in your room before buying — resonated with every participant. The AR surface-scanning feedback I'd pushed for did its job.
What broke. The critical finding was about trust, not usability: the AI-generated room often didn't look like the user's room. The moment the render showed a different-looking space, confidence in the whole experience dropped — the exact value proposition undermined by the technology behind it. Alongside it: unstable AR placement (objects floated or sank), no visual feedback on photo selection, silent add-to-cart that caused accidental duplicates, and a price mismatch at checkout.
I translated the findings into a prioritized fix list. Must-fix before any external demo: make clear when a render is a fallback versus the user's real room, stabilize AR floor-snapping with lightweight gesture hints, add selection and cart feedback, and show a price breakdown. Next iteration: before/after comparison, and a "design on top of my room" mode versus full redesign.
The finding that mattered most
Users didn't need the AI to be perfect. They needed to know when it wasn't — the trust broke not at the flaw, but at the silence around it.
What I learned
Design the failure states first. The flow map's branches — permissions, retries, invalid photos — took more thought than the happy path, and they're what made testing run without a single dead end.
Know what your platform can carry. Designing for Unity taught me to ask "can the engine render this?" before polishing it. The constraint stripped away decoration and left clarity — which was better for a PoC anyway.
Emerging tech shifts the designer's job. With AI in the loop, the interface isn't just screens — it's expectation management. The biggest fix on my list wasn't a layout change; it was telling users honestly what the AI did and didn't do.
What's next. The roadmap prioritizes room-preserving generation, richer product metadata, Android support, and a second round of testing to re-measure the same metrics after the must-fix list lands.