TL;DR
NTR-AR started as a 36-hour hackathon build, and despite a very clunky and barebones UI, the idea and implementation was able to win the MLH Prize for Best Use of Terraform at VandyHacks 2024. This case study is the redesign I did afterwards. This was rebuilding the experience from a camera-only tool into a more fleshed out home-centred product, Mostly to practice using Figma.
Moved the core interaction within the app from open camera to visualise your home and then act
Original Idea and actual iOS app won an award at VandyHacks 2024.
Self-directed redesign not yet tested with users.
During college, my friends and I were moving at least once a year. There was always the same difficulty of knowing what would fit where across vastly different spaces. Sometimes we had the furniture but the layout didn't work. Other times we had the space but nothing to fill it with. The hard time bridging these two different mental states would often result in us caring little about our spaces.
1
Restrictive Existing Solutions
Most AR furniture apps exist only to sell you new things. They'll preview their catalogue in your home, but this is of no help if you're working with what you already own.
2
Lack of Guidance
When faced with an empty room, most people feel overwhelmed and are unsure of where to start.
Images from the classic "we'll figure it out when we get there" approach to moving. Spoiler: rarely did we ever figure it out.
Redesigning NTR-AR meant moving away from its very utilitarian tool-first interface where you open up to a camera first interface where you can place objects, to a UI with a home screen and completely new information architecture. The new setup centres on a digital replica of the uSer's hme, with discovery and item management a swipe away.
The Starting Point (Hackathon MVP)
Purely functional, nothing burger UI
Opening the original app would immediately greet you with a live camera feed and a floating reticle, courtesy of ARKit.
A Digital replica of your Home
Grounded before any changes
The app now opens to an isometric model of the user's actual home. Tapping the model surfaces room stats, tapping the room shows you what's in it.
Inventory, Not Guesswork
The app notices what you don't
Every item is tracked and searchable by room. The app proactively suggests what's missing, for example: "your living room could use more seating", instead of leaving the user to notice the gap themselves. A direct answer to the Lack of Guidance pain point above.
Where Do I Start?
Answering the blank Canvas question
The Explore tab does three things: it includes an AI-powered Intelligent Space Planning tool that generates optimal room layouts by analysing natural lighting, Feng Shui principles, foot traffic flow, and other design factors. Below that, a Quick Start grid of four entry points for users who don't know which direction to approach their space from. Finally at the bottom is the "Recent Finds" section containing items that users have found and scanned with the app while out and about, ready now to be visualised in the user's space.
Capture Tools
One button, three ways in
The Floating action button is the gateway to the camera and AR features(AR view, scan item, and scan room). This feature is what stops the camera view from being thrust onto the user immediately. The idea behind the scan item button here is that the app would use a combination of a device's LIDAR scanner and photogrammetry to generate 3D models of real furniture and items that could then be placed into spaces by the user with the place item feature.
Given the time crunch we were operating under for the original MVP, there was little time to put towards the visual language of the app and we relied on standard IOS components. For the redesign, departing from this was a priority.
Inspired by Vacation®
I discovered the brand Vacation Inc around the time I started working on this redesign, and I immediately fell in love with their branding and visual identity. I thought it could be a good idea to try to incorporate some of their colouring into my redesign.
Typography and LOgo
Primary Text: Surreal Winner
A custom app icon and wordmark. Both using same brand palette as the rest of the product
THE ORIGINAL MVP
Won MLH Prize at VandyHacks
The initial app was very basic, but the underlying idea and the working AR prototype behind it were strong enough to place amongst other entries. Feedback from the judges and peers validated that the problem was real.
THIS REDESIGN
Hasn't shipped or been tested
Built afterward, on my own time, to improve my product thinking and Figma beyond what a working hackathon prototype taught me. However this new version has been built for fun and so hasn't been tested.
What I'd do next time
The feature ideas in this redesign, the Quick Start grid, Intelligent Space Planning, and the home-first UI, came largely from conversations with judges and attendees during the hackathon demo, not any sort of formal research. Whether these features actually solve the problems is something I would like to test.
For me, this was primarily a learning exercise in Figma. Some decisions were shaped by what I'd learned to do in the tool rather than what was best for the product. I think if I were to try this again, I would like to have a better grasp of the tools so that it would limit me less.
The Explore tab features are still surface-level concepts; they show what the features look like instead of how they actually work. A potential next step would be designing the actual flows inside each Quick Start card.
A lot of this app uses assets sourced from the internet or were AI-generated. Learning a tool like Blender properly would give me much more flexibility/give me the ability to create a more uniform look.
The AR screens are the weakest part of the presentation in my opinion. The screens, being static photos behind a UI overlay, don't really capture what AR feels like. This might be a limitation of the tools, but I think ideally, I would like to do more research into how I could better represent what AR tools would look like.
