June Homes want to give total flexibility to our members.
Create a new customisable way of renting for the US market. Introduce an option two to change your furniture styles and add a rented TV with PS5 to your recently rented room in a few clicks.
Millions of young professionals are moving between major US cities these days. We can see their struggle with all the aspects of traditional rent: limited rent duration, uncertainty about new roommates, and the problem with furniture at the top.
June already effectively solve the first two significant problems within 30 days minimal stay + month-to-month payments for the rent and smart background checks for all your potential new roommates. But what about furniture? It is much more complicated.
So it took us 3-4 months of the market research, user interviews, and prototyping to get to a point where we can offer complete customization freedom for our lovely members:
The animation explainer of how flexible we want to be. 👆
Before I tell you how we did it, let me first explain the scale of the challenge. We have started our pilot with NYC at first, so let's start with numbers from there:
As of 2019, New York City had 3,469,240 total housing units. Of these units, 1,038,200 are owner-occupied and 2,183,064 are renter-occupied.
Over half of all renters in New York City spend 30% or more of their income on rent, and one-third of renters spend 50%.
And you can guess that to add furniture pack for the apartment with avg. IKEA cost, will be more than 50% left money from their income. It's a broken system.
So the renting market in NYS is crazy; we all knew this, no surprise. But let's dive a bit deeper into furnishing:
The market is tricky, and people who already have furniture can't rent a furnished apartment — at the same time, people with no furniture struggle to buy it.
And don't forget that with traditionally fully furnished apartment rentals, your deposit will be higher. To protect the landlord from covering the cost of replacing or repairing damaged furniture.
Let's try to simplify it.
As usual in a startup, if the initiative is your own, you would be the one and only driver for it. So all that happened with this initiative outside of the develepment. My work —research, сoncept, design, analytics, etc.
One of the main things here was to add all the UX and product analysis. It was entirely on my shoulders because, at that moment, we had no UX designers in the team.
How do we ensure that our theory is legit?
SMS and email surveys for the current members. Ask them about potential furnishing options. 82% of existing members will prefer the furnishing flexibility:
Introducing a potential furnishing option as a step in the lead funnel tool, "Journey". We asked our new members during their move-in procees about interest in furnishing.
90% of our potential clients want the flexibility of furniture choice. So the base proof for our concept is legit. Let's start the design process.
Figma for UI, Prototypes and the design system.
Miro for product work flows, user flows, user stories, etc.
Cinema 4D with Octane render the 3D Illustrations.
Adobe After Effects to animate prototypes.
Hotjar & Google Analytics to collect the data for future analytics.
Here are some pieces of user interviews from our existing members:
It's been a nightmare to get rid of all my existing furniture during the move-in in June. In the end, we just rented a self-storage and left all our stuff there.
Alex | 22 y.o | NYC
We love how June made all the designs and furniture, but we were in search of a minimal available price for a room in Chelsea. If the unfurnished option had been on the website at that moment, we'd defiantly go for it.
Liliana | 28 y.o | San Francisco
I'm moving between major US cities once in 4-5 months; the option to prepare an apartment with all needed items - it's fantastic.
Max | 25 y.o | NYC
There are two major blocks to be added. First is the furniture style selection and adding additional items for rent. Both should be clean and easy to understand for a new user who has never seen anything like this for rent.
So we already had a room page layout for room that performed well in the past years. We needed uplift with an option for customizing the section. We didn't know the exact number of items or item type initially. Even the furniture sets were a mystery to us.
Based on this, we seek flexible and scalable UI solutions for the v items.
One of the biggest inspiration for rent customization were apple.com's options for adding or removing different features for your future mac:
It's easy to understand why other big retailers adopt the same logic. After all, it's pretty straightforward:
But you can apply absolutely the same logic to the rent customization. All options are similar for the end-user with the apple 500GB or 1000GB storage options. Our main UI goal was to explain it quick enough.
The tricky part, though, was a state management connection for the room state at the current moment, and the user wished to customize it otherwise. Let's look at the mind map and how the UX flow looks in this case:
We have a bunch of logic cases here for different situations. Let's drop a mind map for better understanding:
As you can see, we need to add a room status to explain the price difference when the user wants a currently furnished room unfurnished or vice versa. It can be more tricky than you think because the prise engine calculates the final price for monthly rent based on these pvarameters; this is why we needed this dynamic loader for price.
One more tricky point for me was a business limitation. One of the major here is that the user needs a minimum three months of rent if they want to add furniture and rent items. My solution was not to overcomplicate the UI of the renting things; instead, show this tiny hint at the calendar. In addition, block dates in the calendar for move-out that gives less than three-month stay.
We have started with a limited room amount to understand all aspects of adoption. I can't rely on the business availability to produce photos with different furnishing styles from the first few apartments I had released. It's too expensive in NYC to make such an amount of photoshoots, and the logistics of moving furniture are a nightmare. I bring a crazy solution to the table for this; let's check it in the section 3D furniture automation.
We find a few small UX mistakes outside of this headache with photos after the first run. We get inside the elements that take more attention and clicks from users and find details that get no reactions. But one thing was undeniable - customers are keen to play with room constructors and explore different options. Here are a few numbers that blow our minds:
92% of all users visited room pages with customization options and clicked on the different furnishing options and rent items.
Avg. Session duration increased from 1m 26s to 3m 12s, almost 3x increase.
The conversion rate for all rooms from the test was 43% higher than an avg. Conversion for the same room types in the same NYC areas.
The numbers are more than impressive. Totally a green light to start a full-scaled implementation.
At the final stage of the user's room construction, I added a tiny 5-star rating window to get immediate feedback.
Final average rate, one more proof to invest time in survey feature.
After all, we've started an email survey to get reviews about rented items from our members,
Here is what we get at the final stages of the UI changes and
There weren't a lot of opportunities to add a motion layer for this UI, but I managed to cover a minimal amount:
As you can see, one of the significant elements for the animation is "+" for adding an element for your rent pack. It was important to simplify it and make it 100% obvious.
We use React with NextJS as a front stack. It was a piece of cake to add components set of the new furniture cards to our storybook.
As I've mentioned earlier, it's hard to produce high-quality photos for all the furniture sets. The crazy decision was to add all the furniture sets into 3D visualizations. I am a big fan of 3D art.
So I knew today's ability of 3D CUDA based renders like octane and redshift combined with Cinema4D. I got a floorplan from the Matterport (It's a 360° apartment tours tool) and built an introductory scene for one of our apartments.
Don't get me wrong, it wasn't easy to set up all the lights, replicate textures and render all properly at first. But after several attempts and tests from me and my 3D guru friend @Nikita. We develop scalable, reusable solutions to build a 3D space for the apartments.
The next step was to build furniture for rendered flats. We took on board our interior designer lead. She prepared for us sets of furniture and elements for the apartments. All these were modelled, textured and ready to align in different rooms.
That's it, all that we needed for the first apartments were rendered, and we uploaded it to the website.
It's 10x cheaper and 10x faster than one photoshoot in NYC; meantime, we had to provide not one but three different styles.
And finally, what we get from 3D visualization is emptying the room of furniture. Having the Matterport tour + Photos with furniture from a current member, we can create a 3D visualization of an empty unfurnished room.
It takes around 1-2h; you can imagine how much time and effort takes to empty the room and put it back just for a photoshoot.
We created an automated notion table to control all the progress of 3D visualization for more than 400 rooms:
It's not about the UI and UX but about problem-solving. The design is done when the problem goes away.
I have built a custom SQL quarries in redash connected to HotJar and Google Analytics. So the system worked pretty well; core structure:
Redash helps you make sense of your data. Connect and query your data sources, build dashboards to visualize data and share them to monitor your UX goals.
So the dashboard shows us real-time data from our database about furnishing performance, and what's most important, it offers a funnel. Funnel from the first user clicks on the room page to the final payment for your future rent. I can't reveal the redash screenshots because it's internal company information, but here is what the base funnel there looks like:
Based on the first months, the feature performed well. We see an apparent increase in numbers on the room pages. Our warehouses were running out of furniture because of the high demand for customization.
And we saw a strong trend of increased conversion rate with customizable rooms.
I constantly accurately monitor the click and scroll maps on the realized products, especially concepts. Here you can find a click map for the customization page:
We can see those all-important areas are well received. The user understands all the aspects of the new UI.
Unfortunately, I can't reveal the video recording of users from our website. But I can tell you the process of what we were looking for in them. We use Hotjar to record user sessions. First of all, we needed proof that there was no confusion and blocker for the existing lead conversion flow. We checked all the sessions that had a high bounce rate and didn't end up with a booked room.
Most of them looked all right, like people didn't make their decision, but the video shows us that it is not connected with the new UI. Secondly, we found the most active sessions, with click rages, scroll misbehaviour, etc.; thanks to Hotjar, it's easy to find.
So these sessions gave us slight hints how to optimize the room page UI, And maybe one of the most significant insides of these sessions was to add a full-screen photo gallery to the room page. We've seen many problematic sessions with users trying to zoom a photo with different browser tools. This native zoom gives him a broken DOM and a useless page to continue. Before furnishing, we didn't know about this problem at all.
Finally, we've collected more than 400 video sessions of the successful room booking with the customizations inside. It's better than your favourite Netflix TV show to watch how your recently added feature performs with real-world users.
So we create a revolutionary tool for renting. But as you can see, it's tough to explain what it is and how it works. I've created this showcase with Cinema4D and After Effects:
It just shows you the whole process in an effortless way. We needed to showcase it to our investors and press.
And I'm present to know that this showcase inspires hundreds of designers on dribble:
Never rely on and be over-optimistic about the content that is hard to produce. Always think of a worst-case scenarios with bad photos, videos, or ever without needed content. It's essential to have a good set of empty states, placeholders and demo content at all design stages.
Never rely on and be over-optimistic about the content that is hard to produce. Always think of a worst-case scenarios with bad photos, videos, or ever without needed content. It's essential to have a good set of empty states, placeholders and demo content at all design stages.
All the calculations of the prices should be hidden at the sales stage. There is no sense in giving users a math quiz on your lead generating page. Service should be fair and transparent about the final price, but the price breakdown should be at the later stages.
