Homnox
Homnox is a B2B2C real estate company using generative AI to help users visualize a home— one they can 3D-print and purchase in real life. For this project, the Homnox team needed a redesign of their home/landing page.
Timeline ⏰
8 weeks
ROLE 👥
UX Designer | UI Designer | UX Researcher
UX Designer
UI Designer
UX Researcher
Tools 🧰
Figma | Slack | Google Meets
Figma
Slack
Google Meets
Problem
Homnox's current iteration wasn't catching stakeholder attention. Homnox needed to:
Present a proof of concept to stakeholders that created a sense of excitement
Solution
Give Homnox a facelift by:
Reimagining the Homnox brand to be more modern
Designing an AI image generator that users manipulate with a menu
Creating a style guide to help guide future pages
Designing a snapshot of what would be a Homnox community, with people showing off their designed homes in real life
Discovery 🔬
Discovery 🔬
Discovery 🔬
3D printing - the future of real estate?
My personal experience with 3D printed anything coming into this project was limited to little plastic rings— but I was armed with a strong background in conducting research and Asking A Million Questions.
I had a one-on-two call with the CEO and CoS of Homnox to get the rundown of what they wanted to achieve by the end of our time together. The lack of familiarity that many had with 3D printed homes could ber a deal-breaker to some users, so we needed to build their trust. The resulting page would then be a jumping-off point for the rest of the website.
Here are the key feature takeaways from their briefing:
Stylizing: We want Homnox to have a sleek and elegant design that draws users in
Gamification: We want to spice up how we present the 3D model— navigating it should be fun and engaging
AI Functionality: We want to create an AI that guides the user through the house design process
Below, you’ll find the images of the Homnox page as it used to be:
3D printing - the future of real estate?
My personal experience with 3D printed anything coming into this project was limited to little plastic rings— but I was armed with a strong background in conducting research and Asking A Million Questions.
I had a one-on-two call with the CEO and CoS of Homnox to get the rundown of what they wanted to achieve by the end of our time together. The lack of familiarity that many had with 3D printed homes could ber a deal-breaker to some users, so we needed to build their trust. The resulting page would then be a jumping-off point for the rest of the website.
Here are the key feature takeaways from their briefing:
Stylizing: We want Homnox to have a sleek and elegant design that draws users in
Gamification: We want to spice up how we present the 3D model— navigating it should be fun and engaging
AI Functionality: We want to create an AI that guides the user through the house design process
Below, you’ll find the images of the Homnox page as it used to be:
3D printing - the future of real estate?
My personal experience with 3D printed anything coming into this project was limited to little plastic rings— but I was armed with a strong background in conducting research and Asking A Million Questions.
I had a one-on-two call with the CEO and CoS of Homnox to get the rundown of what they wanted to achieve by the end of our time together. The lack of familiarity that many had with 3D printed homes could ber a deal-breaker to some users, so we needed to build their trust. The resulting page would then be a jumping-off point for the rest of the website.
Here are the key feature takeaways from their briefing:
Stylizing: We want Homnox to have a sleek and elegant design that draws users in
Gamification: We want to spice up how we present the 3D model— navigating it should be fun and engaging
AI Functionality: We want to create an AI that guides the user through the house design process
Below, you’ll find the images of the Homnox page as it used to be:
Ideation 💡
Ideation 💡
Ideation 💡
Let's take a look at what's working.
So how can we build trust with users looking for a place to call home? Our first step was looking at real estate websites, AI chat-centered sites, and even design games to help us bridge the gap between novel and a serious step to make in your life. You can find those below from our moodboard.
Here were our main takeaways:
UI for the 3D home builder needed to prioritize ease of navigating it: at the time, there was no intuitive indication for all its controls
AI chat clients needed to not be intrusive; something that was accessible when you needed it and out of the way when now
Let's take a look at what's working.
So how can we build trust with users looking for a place to call home? Our first step was looking at real estate websites, AI chat-centered sites, and even design games to help us bridge the gap between novel and a serious step to make in your life. You can find those below from our moodboard.
Here were our main takeaways:
UI for the 3D home builder needed to prioritize ease of navigating it: at the time, there was no intuitive indication for all its controls
AI chat clients needed to not be intrusive; something that was accessible when you needed it and out of the way when now
Let's take a look at what's working.
So how can we build trust with users looking for a place to call home? Our first step was looking at real estate websites, AI chat-centered sites, and even design games to help us bridge the gap between novel and a serious step to make in your life. You can find those below from our moodboard.
Here were our main takeaways:
UI for the 3D home builder needed to prioritize ease of navigating it: at the time, there was no intuitive indication for all its controls
AI chat clients needed to not be intrusive; something that was accessible when you needed it and out of the way when now
Exploring the intersection of real estate and AI.
I started sketches of plans for the landing page, paying special attention to the hero section as that would be where the the new Homnox would live.
At this time, Homnox was still planning to use a 3D model to show people their homes as they built them. We would eventually pivot away from this—More on that later—but these initial thoughts were integral to getting us from point A to point B. Below are my sketches, including some very quick low-fidelity screens:
Exploring the intersection of real estate and AI.
I started sketches of plans for the landing page, paying special attention to the hero section as that would be where the the new Homnox would live.
At this time, Homnox was still planning to use a 3D model to show people their homes as they built them. We would eventually pivot away from this—More on that later—but these initial thoughts were integral to getting us from point A to point B. Below are my sketches, including some very quick low-fidelity screens:
Exploring the intersection of real estate and AI.
I started sketches of plans for the landing page, paying special attention to the hero section as that would be where the the new Homnox would live.
At this time, Homnox was still planning to use a 3D model to show people their homes as they built them. We would eventually pivot away from this—More on that later—but these initial thoughts were integral to getting us from point A to point B. Below are my sketches, including some very quick low-fidelity screens:
What would a 3D House Builder on a homepage look like, anyway?
At this time, we were working towards solidifying the 3D model section. Between my co-designer and I, we each made three iterations then annotated our respective screens for the team. Homnox’s CEO had emphasized how he wanted to create an AI chat client and a Homnox community through a built in social media platform. We were tasked with creating a mock up of how these could be showcased on the landing page.
Image one the 3D model section the star of the site up in the hero section, while still leaving users an introductory paragraph to what Homnox was. The AI chat client was placed just below for users to ask questions.
Image two was more traditionally real estate-inspired, having an image of a home in the hero banner to establish Homnox's niche with a clear call to action and description. The community section for Homnox was placed above the 3D model section, so users could be inspired by homes built by others.
Iteration three reinstates the 3D model as the star and revamps the AI chat client to work similarly to LinkedIn’s AI question prompts under posts
The full iterations below:
What would a 3D House Builder on a homepage look like, anyway?
At this time, we were working towards solidifying the 3D model section. Between my co-designer and I, we each made three iterations then annotated our respective screens for the team. Homnox’s CEO had emphasized how he wanted to create an AI chat client and a Homnox community through a built in social media platform. We were tasked with creating a mock up of how these could be showcased on the landing page.
Image one the 3D model section the star of the site up in the hero section, while still leaving users an introductory paragraph to what Homnox was. The AI chat client was placed just below for users to ask questions.
Image two was more traditionally real estate-inspired, having an image of a home in the hero banner to establish Homnox's niche with a clear call to action and description. The community section for Homnox was placed above the 3D model section, so users could be inspired by homes built by others.
Iteration three reinstates the 3D model as the star and revamps the AI chat client to work similarly to LinkedIn’s AI question prompts under posts
The full iterations below:
What would a 3D House Builder on a homepage look like, anyway?
At this time, we were working towards solidifying the 3D model section. Between my co-designer and I, we each made three iterations then annotated our respective screens for the team. Homnox’s CEO had emphasized how he wanted to create an AI chat client and a Homnox community through a built in social media platform. We were tasked with creating a mock up of how these could be showcased on the landing page.
Image one the 3D model section the star of the site up in the hero section, while still leaving users an introductory paragraph to what Homnox was. The AI chat client was placed just below for users to ask questions.
Image two was more traditionally real estate-inspired, having an image of a home in the hero banner to establish Homnox's niche with a clear call to action and description. The community section for Homnox was placed above the 3D model section, so users could be inspired by homes built by others.
Iteration three reinstates the 3D model as the star and revamps the AI chat client to work similarly to LinkedIn’s AI question prompts under posts
The full iterations below:
Iteration Notes
Here are the notes I had written, allowing the development team to follow along with my thought process.
Iteration Notes
Here are the notes I had written, allowing the development team to follow along with my thought process.
Iteration Notes
Here are the notes I had written, allowing the development team to follow along with my thought process.
Design 💻
Design 💻
Design 💻
A hard pivot at the home stretch.
Deep in the home stretch, the COO posed a tough question to us: does the home design program NEED to be 3D?
An entire 3D model section could severely effect site speed, so we needed to look into 2D alternatives in order to optimize the user experience. Having grown up playing drag-and-drop flash games, I saw a viable design direction— people could create the main home with generative AI prompts, then drag and drop still images of furnishing into the area for more detailed furnishing and layouts.
The CEO decided to make the hard pivot into 2D— changing the trajectory of our timeline and designs.
With limited time in new territory, my co-designer and I decided to create separate menu systems for how our menus worked in the spirit of iteration. My teammate’s method was based on selecting a style of home from the menu, and generating a text prompt based on the tags users selected. My method generated images based on what was typed in the text box, with pre-made prompts to help get users started while dedicating the menu to being able to save your work, add still image furnishings, and other secondary actions.
A hard pivot at the home stretch.
Deep in the home stretch, the COO posed a tough question to us: does the home design program NEED to be 3D?
An entire 3D model section could severely effect site speed, so we needed to look into 2D alternatives in order to optimize the user experience. Having grown up playing drag-and-drop flash games, I saw a viable design direction— people could create the main home with generative AI prompts, then drag and drop still images of furnishing into the area for more detailed furnishing and layouts.
The CEO decided to make the hard pivot into 2D— changing the trajectory of our timeline and designs.
With limited time in new territory, my co-designer and I decided to create separate menu systems for how our menus worked in the spirit of iteration. My teammate’s method was based on selecting a style of home from the menu, and generating a text prompt based on the tags users selected. My method generated images based on what was typed in the text box, with pre-made prompts to help get users started while dedicating the menu to being able to save your work, add still image furnishings, and other secondary actions.
A hard pivot at the home stretch.
Deep in the home stretch, the COO posed a tough question to us: does the home design program NEED to be 3D?
An entire 3D model section could severely effect site speed, so we needed to look into 2D alternatives in order to optimize the user experience. Having grown up playing drag-and-drop flash games, I saw a viable design direction— people could create the main home with generative AI prompts, then drag and drop still images of furnishing into the area for more detailed furnishing and layouts.
The CEO decided to make the hard pivot into 2D— changing the trajectory of our timeline and designs.
With limited time in new territory, my co-designer and I decided to create separate menu systems for how our menus worked in the spirit of iteration. My teammate’s method was based on selecting a style of home from the menu, and generating a text prompt based on the tags users selected. My method generated images based on what was typed in the text box, with pre-made prompts to help get users started while dedicating the menu to being able to save your work, add still image furnishings, and other secondary actions.
“…[every time we update the 3D model], we're going to lose fidelity, we're going to lose some styling options or we're just going to have a massive 3D library of assets.” - Homnox COO
Pivot successful, but the dust hasn't quite settled yet...
Homnox compromised by combining elements of both our menus, incorporating my pre-made prompts, the progress bar, and the ability to hide the UI while utilizing my co-designer's menu navigation.
Below, I have some close-ups of the screen to give you a better idea of how it works.
Unfortunately, we had some challenges with finishing the menu design: my fellow designer had gotten sick and was offline for a several days. It happened suddenly— no warning, no updates, and no responses to my attempts to reach out. But I needed to keep going forward. The menu was an integral portion of the new Homnox, and while it was largely completed we still needed to organize our style guide so that the developers could work effectively.
Pivot successful, but the dust hasn't quite settled yet...
Homnox compromised by combining elements of both our menus, incorporating my pre-made prompts, the progress bar, and the ability to hide the UI while utilizing my co-designer's menu navigation.
Below, I have some close-ups of the screen to give you a better idea of how it works.
Unfortunately, we had some challenges with finishing the menu design: my fellow designer had gotten sick and was offline for a several days. It happened suddenly— no warning, no updates, and no responses to my attempts to reach out. But I needed to keep going forward. The menu was an integral portion of the new Homnox, and while it was largely completed we still needed to organize our style guide so that the developers could work effectively.
Pivot successful, but the dust hasn't quite settled yet...
Homnox compromised by combining elements of both our menus, incorporating my pre-made prompts, the progress bar, and the ability to hide the UI while utilizing my co-designer's menu navigation.
Below, I have some close-ups of the screen to give you a better idea of how it works.
Unfortunately, we had some challenges with finishing the menu design: my fellow designer had gotten sick and was offline for a several days. It happened suddenly— no warning, no updates, and no responses to my attempts to reach out. But I needed to keep going forward. The menu was an integral portion of the new Homnox, and while it was largely completed we still needed to organize our style guide so that the developers could work effectively.
Unfortunately, we had some challenges with finishing the menu design: my fellow designer had gotten sick and was offline for a several days. It happened suddenly— no warning, no updates, and no responses to my attempts to reach out. But I needed to keep going forward. The menu was an integral portion of the new Homnox, and while it was largely completed we still needed to organize our style guide so that the developers could work effectively.
Style Guide
I put together the remaining components and organized the rest of our project, ensuring it would be usable for the devs.
Style Guide
I put together the remaining components and organized the rest of our project, ensuring it would be usable for the devs.
Style Guide
I put together the remaining components and organized the rest of our project, ensuring it would be usable for the devs.
Reflection 🪞
Reflection 🪞
Reflection 🪞
In The Past
This project was a big challenge for me; not only because it would be my first time designing for AI, but also because working with a team in about 3 different timezones - including a 6 hour difference for the CEO and COS in Switzerland - made consistent communication of the utmost importance. My challenges during this project empowered me to speak up and ask questions to ensure I delivered a high-quality product. Ultimately, compared to the original website, Homnox has become more visually engaging, with an interactive generative AI element and a sleek new design.
In The Past
This project was a big challenge for me; not only because it would be my first time designing for AI, but also because working with a team in about 3 different timezones - including a 6 hour difference for the CEO and COS in Switzerland - made consistent communication of the utmost importance. My challenges during this project empowered me to speak up and ask questions to ensure I delivered a high-quality product. Ultimately, compared to the original website, Homnox has become more visually engaging, with an interactive generative AI element and a sleek new design.
In The Past
This project was a big challenge for me; not only because it would be my first time designing for AI, but also because working with a team in about 3 different timezones - including a 6 hour difference for the CEO and COS in Switzerland - made consistent communication of the utmost importance. My challenges during this project empowered me to speak up and ask questions to ensure I delivered a high-quality product. Ultimately, compared to the original website, Homnox has become more visually engaging, with an interactive generative AI element and a sleek new design.
In The Future
As Homnox tests this current iteration, I anticipate there will be a need to optimize the user experience further. While we looked into best practices for AI image generation UX and how that could relate to real estate, this was an incredibly quick and experimental project: you can’t get it all right on the first try. There could be a more real estate focus on the home collection section, opting to center on pricing for homes and locations for example. The menu itself could also be simplified, rather than being a learning curve for users. Any assumptions or hindsight I have now would be better placed in the next steps though— iterating based on user feedback.
In The Future
As Homnox tests this current iteration, I anticipate there will be a need to optimize the user experience further. While we looked into best practices for AI image generation UX and how that could relate to real estate, this was an incredibly quick and experimental project: you can’t get it all right on the first try. There could be a more real estate focus on the home collection section, opting to center on pricing for homes and locations for example. The menu itself could also be simplified, rather than being a learning curve for users. Any assumptions or hindsight I have now would be better placed in the next steps though— iterating based on user feedback.
In The Future
As Homnox tests this current iteration, I anticipate there will be a need to optimize the user experience further. While we looked into best practices for AI image generation UX and how that could relate to real estate, this was an incredibly quick and experimental project: you can’t get it all right on the first try. There could be a more real estate focus on the home collection section, opting to center on pricing for homes and locations for example. The menu itself could also be simplified, rather than being a learning curve for users. Any assumptions or hindsight I have now would be better placed in the next steps though— iterating based on user feedback.