Overview
Overview
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.
Problem
Homnox's current iteration wasn't catching stakeholder attention.
Homnox wanted to present their business model to stakeholders, and had an initial proof on concept. But this initial version was lacking something: a sense of excitement that would make Homnox more than just a strange new tool to fiddle with.
Solution
Give Homnox a face lift— by implementing its home design interface.
Reimagine the Homnox brand more modernly
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
⏰
Timeline: 8 weeks
👥
Role: UX/UI Designer, UX Researcher
🧰
Tools: Figma, Slack, Google Meets
1 - Discovery 🔬
1 - Discovery 🔬
3D printing - the future of real estate
When most people think of 3D-printed anything, they may conjure up a little plastic ring, or that 3D printing pen that lets you draw anywhere or something. That profile fit my own scope of 3D printing, coming into the project. But I was armed with a strong background in conducting research and Asking 18 Million Questions, so I learned quick. 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 people had with 3D printed homes would make it difficult to build user trust, so they needed a landing page that was engaging, functional, and easy to use. It could 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
When most people think of 3D-printed anything, they may conjure up a little plastic ring, or that 3D printing pen that lets you draw anywhere or something. That profile fit my own scope of 3D printing, coming into the project. But I was armed with a strong background in conducting research and Asking 18 Million Questions, so I learned quick. 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 people had with 3D printed homes would make it difficult to build user trust, so they needed a landing page that was engaging, functional, and easy to use. It could 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:
2 - Ideation 💡
2 - Ideation
2 - Ideation
Let's take a look at what's working.
Homnox wants to be a hero for the everyday person; someone looking to settle down and feel secure in their home with their family. But if many people’s conception of 3D printing is little plastic models, how can we build that trust? We drew inspiration from 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.
Here were our main takeaways:
UI for the 3D model section needed to prioritize ease of moving around, as the Sim’s UI had three different button options for navigating while the current Homnox page had one - simply dragging around with your mouse. There was no direction on the page for how
AI chat clients were prominent but not intrusive, being something easy to scroll away from or minimize without following you
A big header with a relevant image is common for a hero brands
Let's take a look at what's working.
Homnox wants to be a hero for the everyday person; someone looking to settle down and feel secure in their home with their family. But if many people’s conception of 3D printing is little plastic models, how can we build that trust? We drew inspiration from 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.
Here were our main takeaways:
UI for the 3D model section needed to prioritize ease of moving around, as the Sim’s UI had three different button options for navigating while the current Homnox page had one - simply dragging around with your mouse. There was no direction on the page for how
AI chat clients were prominent but not intrusive, being something easy to scroll away from or minimize without following you
A big header with a relevant image is common for a hero brands
Exploring the intersection of real estate and AI.
While this project was done over about 2 months, the turnaround for deliverables was quick, sometimes a few days at a time. I started sketches of plans for the landing page, paying special attention to the top section as that would be where the meat and potatoes of 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, as what would be easier to ultimately develop came into question among the team. 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.
While this project was done over about 2 months, the turnaround for deliverables was quick, sometimes a few days at a time. I started sketches of plans for the landing page, paying special attention to the top section as that would be where the meat and potatoes of 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, as what would be easier to ultimately develop came into question among the team. 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:
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
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 partner designer and I, we each made three iterations then annotated our respective screens for the team. Homnox’s CEO had emphasized how he also wanted to create a Homnox community through a built in social media, to get people excited and familiar with 3D-printed homes. We wouldn't be designing the community page itself, but we were tasked with showing how it could be showcased on the landing page.
Iteration one made the 3D model section the star of the show up top, while users would still get an introductory paragraph to what Homnox was in a minimal banner. The AI chat client was expanded and a little further out of the way, for users to refer to if confused.
Iteration two was more traditionally real estate-inspired, having an image of a home in the header banner to establish what Homnox is along, with the CTA and paragraph. The community section for Homnox was placed right above the 3D model section, so users could see the sorts of homes they could build before diving in
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
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 partner designer and I, we each made three iterations then annotated our respective screens for the team. Homnox’s CEO had emphasized how he also wanted to create a Homnox community through a built in social media, to get people excited and familiar with 3D-printed homes. We wouldn't be designing the community page itself, but we were tasked with showing how it could be showcased on the landing page.
Iteration one made the 3D model section the star of the show up top, while users would still get an introductory paragraph to what Homnox was in a minimal banner. The AI chat client was expanded and a little further out of the way, for users to refer to if confused.
Iteration two was more traditionally real estate-inspired, having an image of a home in the header banner to establish what Homnox is along, with the CTA and paragraph. The community section for Homnox was placed right above the 3D model section, so users could see the sorts of homes they could build before diving in
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
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:
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 be complicated for the landing page and 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. Plus, the cardinal sin of a laggy website would be abysmal for user retention, which we 100% needed for an early stage startup.
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 itself, 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 be complicated for the landing page and 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. Plus, the cardinal sin of a laggy website would be abysmal for user retention, which we 100% needed for an early stage startup.
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 itself, 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.
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
3 - Design 💻
3 - Design
Pivot successful, but the dust hasn't quite settled yet…
Homnox ultimately went with the other designer’s menu structure for designing the home, while incorporating elements from mine such as the pre-made prompts, the progress bar, and hiding the UI as necessary.
We wanted to account for how a sudden UI like this would be confusing for first-time users, so we also created a default landing page and created the framework for a menu walkthrough.
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; the other designer had gotten sick and was unable to get online for a while. It happened suddenly, so no one knew for a few days— but we needed to keep going forward. While I understood the overall idea of her menu, the complex structure required her to provide some code for how it worked and a selection of notes that only she could really expand on.
This was an integral portion of the new Homnox though, so I went through her work and put together everything that seemed relevant for our style guide, so that the developers would be able to work off what she had until I could get in touch again.
Pivot successful, but the dust hasn't quite settled yet…
Homnox ultimately went with the other designer’s menu structure for designing the home, while incorporating elements from mine such as the pre-made prompts, the progress bar, and hiding the UI as necessary.
We wanted to account for how a sudden UI like this would be confusing for first-time users, so we also created a default landing page and created the framework for a menu walkthrough.
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; the other designer had gotten sick and was unable to get online for a while. It happened suddenly, so no one knew for a few days— but we needed to keep going forward. While I understood the overall idea of her menu, the complex structure required her to provide some code for how it worked and a selection of notes that only she could really expand on.
This was an integral portion of the new Homnox though, so I went through her work and put together everything that seemed relevant for our style guide, so that the developers would be able to work off what she had until I could get in touch again.
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
“…[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
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.
Style Guide
Below you can see our style guide:
Style Guide
Below you can see our style guide:
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: the other designer had gotten sick and was offline for a while. It happened suddenly, and there was no warning or updates for a few days— 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
Below you can see our style guide:
4 - Reflection 🪞
4 - Reflection
In The Future
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
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.
Lizzy Olubisi Olu-Talabi
Lizzy Olubisi Olu-Talabi