Home renovations can be a huge stress that includes choosing the designs, having a vision, contacting contractors, getting quotes, and communicating your vision. To make this process easier, the team at Focus21 and I developed RoomRender AI in collaboration with Triforce Construction. This mobile app facilitates the initial stages of interior design by providing quick visualizations based on user preferences and currently holds a 5-star rating on the App Store.
Please note that I have omitted and obfuscated any confidential information in this case study due to an NDA. The information in this case study is my own and does not necessarily reflect the views of Focus21 or the client.
UI/UX Designer
Triforce Team
1 Designer
1 Mobile Developer
1 AI Developer
1 PM
September 2020 - May 2021
01 - Prototype highlight
Meet Lindsay, a 29-year-old woman, is expecting her first child and feels anxious about preparing her home. She and her husband want to convert their old office into a nursery but struggle to visualize their ideas. With a tight budget and a perfectionist mindset, Lindsay needs a way to confidently make design decisions for the nursery.
02 - Context
When we started working with Triforce Construction, they had big plans for the product, including lots of cool features for future versions. Our job at Focus21 was to come up with a plan to build and MVP, then implement Version 1 (V1) with monetization.
03 - Empathize
In order to identify valuable features for users, we wrote stories that describe the common thoughts and goals people have when they're looking for ideas to renovate their homes using the MVP product.
As a user, I want the app to allow me to input my design preferences easily, so I can customize the inspiration according to my tastes and preferences.
As a user, I want the app to generate rendered images based on my inputs, so I can visualize how different design elements would look in my home.
As a user, I want the app to provide the option to save the rendered images, allowing me to revisit and compare different design ideas at my convenience.
As a user, I want the app to enable easy sharing of the rendered images to social media platforms, so I can gather feedback from friends and family or simply share my design inspiration with others.
As a user, I want the app to have a scalable backend and frontend architecture, ensuring smooth performance and usability as the user base and features of the app grow over time.
As a user, I want the app to be available on both iOS and Android platforms so that I can access it regardless of my device preference.
04 - FEature definition
Following discussions with stakeholders, we used the Kano Model Theory to define the features that make up the MVP.
05 - Ideate
After defining the features within the app, we created user flows to organize tasks per feature. To quickly summarize the flows:
Questionnaire: When the user wants to generate a new idea, the complete a questionnaire that was provided by the client that helps gather information for ChatGPT. The information is then inputted into DreamStudio to generate the image.
Post-Image Generation: The user can either regenerate images (must watch an ad), download the image to their device, save the image to their in-app gallery, or share to social media.
Onboarding: The user must accept Terms & Conditions before continuing into the app.
Share to social media: When viewing the image, the user can select the share icon and select where they would like to share it to.
Save to gallery: After generating a new image they can save it to their gallery either in an existing folder or a new folder.
Regenerate: If the user does not like any of the rendered images, they can select regenerate to get four new renders.
Generate Remastered Ideas: The user likes an image and wants to generate similar ones, so they select the render and select reimagine to generate three renders similar to the original.
06 - Wireframes
Wireframes were built to complement the user flows, helping us to iron out any potential issues in the user experience, ensure proper connections between screens, and validate our information architecture.
The wireframes do not represent the actual wireframes used during this project.
07 - Design
Designing a design system ensured consistency and accessibility throughout the app, facilitated scalability for future features, and simplified the implementation of brand and design adjustments. I gathered branding information from the client and collaborated closely with the developers to ensure the feasibility and scalability of UI components, and also worked with the client to ensure the style aligned with their satisfaction.
The design system encompassed the fundamental elements necessary for creating the MVP:
Colours
Typography
UI Components (fields, buttons, navigation, dropdown fields, and specialized components)
Icons
The design system above does not represent the actual design system used during this project.
08 - TEST
Due to the timeline and budget of the project, I had to be efficient with my time. I simulated the user flows with my "user eye" and "designer eye" to identify dead ends, areas of frustration, or confusion. Below is an example of an improvement:
.webp)
Galery V1 to V2:
- It was easier to develop V2 and not overlay the image placeholders on one another
- The number of renders in each folder was added to provide more useful information at the high-level screen
09 - MVP Mockups
For the official handoff to developers, I produced Figma documentation that consists of all of the possible user flows, the specs (if necessary), and the different states of the components involved in the respective flow. An example is shown below:
Putting it all together, we were able to create an awesome MVP! Check out some mockups below:
.webp)
10 - V1 Monetization
After the MVP was built, a monetization strategy was developed to help cover the overhead of the renderings. After researching different options, the following payment model was selected:
Free Version: The default version when the user opens the app.
Limited render results (only displays 1 of 4)
Must watch ad before image is rendered
Cannot upscale to high-quality renders
Basic Version (in-app pay): Users can upgrade through an in-app purchase.
40 render credits which count towards render cycles and upscaling
Once render credits are up, the user gets downgraded to the free version
Can render 4 images at a time
11 - Implementing monetization
Obviously, advertisements and paywalls significantly impact the user experience, so I made sure I followed the tips below:
Seamless Integration: Ensure ads blend smoothly into the design without disrupting user tasks.
Relevance and Targeting: Place ads based on user preferences and behaviour for better engagement.
Transparency and Privacy: Clearly indicate ads, offer user control, and respect privacy regulations.
In collaboration with the stakeholders, I made user flows of all the interactions with the opportunities to upgrade.
12 - Latest Update
Ultimately, the feedback from users has been overwhelmingly positive. RoomRender AI currently holds a 5-star rating based on 14 total ratings. Moving forward, new versions of RoomRender AI are in development, and it continues to evolve into a highly impactful application within the home renovation industry.
total ratings
ratings
"I am blown away! It's almost like magic. It's so easy to just answer the questions and have your ideas come to life. I'm addicted. This saved me a tone of times trying to explain my ideas to a designer now I can just give them renders I created and they can literally see what I wanted."
“We were unsure whether our project was feasible and the fact that Focus21 could pull it off was exceptional. What an impressive team!”
.webp)
Get in touch for opportunities or just to say hi!
