UX Case Study — 360 HUM
Creating at HUM’s 360° image viewer
At HUM is a proptech startup, helping residential developers and property managers improve their sales process by bringing personalized remote and on-site experiences, adapted to each prospect needs and wants. Learn more at athum.com
About 360 HUM
360 HUM is a web-app viewer for 360° images with personalization features for potential homebuyers. The purpose of this redesign is to improve ease of use in touch devices, small breakpoints, and iframes. And also, to come up with a flexible design for gradually adding new features.
As the lead UX/UI Designer for at HUM team, my role for this project included: defining features along with the founders based on user needs, wireframing and iterating proposals for feedback and decision making, and testing the platform with users.
In the context of use, we defined two main User Personas:
- Esperanza, a Real Estate agent: She is going to use the platform in showrooms and share it with potential clients. Her goal is to help clients visualize themselves living in the spaces and show in detail the property to be able to close sales easier.
- Lisa, a potential homebuyer: She is ready to purchase her first property and looking for different pre-sale options. Her goal is to find a perfect property for her family but has a hard time visualizing the spaces and making a decision, especially in early-stages of the construction.
The design process started by defining and prioritizing features along with the stakeholders according to client feedback and our innovation intentions. Having these features defined, I started ideation and presented different concepts of feature grouping and wireframes to decide on the best options and receive feedback.
First, we defined the bigger breakpoint sizes and then worked on different possibilities for mobile.
Some of the decisions we took for this redesign were the following:
- Reducing the space for the 360 ID: the layout name and decoration style were taking up too much valuable space and were too prominent with the white background. For the redesign we mixed light and dark UI, using the dark background for secondary interactions, and light for the main menu.
- We decided to go for a more minimal approach and move the minimap inside the menu. In the first design, this was a complementary way to navigate, but it was taking too much space, and depending on the scale of the property it could become incomprehensible.
- We moved the main menu to the right side of the screen to make it more accessible for tablets.
- For mobile, we went for a floating button that opens the menu with the same structure as the desktop version.
- We made all the features have a similar interaction inside the lateral panel, and as a result, we have a more consistent experience and a cleaner interface.
Learnings
There’s never a final version of a product that is continuously evolving and adapting. As a startup, we are always open to client feedback and market fit, and that means that there will be iterations and new user needs to be discovered. Even when we can plan for flexibility, there’s a possibility that we have to rearrange features in the platform once we discover something new.
Redesigning a platform after launching it is a very valuable practice as a designer. Some of the usability problems and the overall adoption of the platform are impossible to discover in a prototype test. It’s having a product out there that’s going to give us designers valuable insights and learnings to reflect on. While at the time this redesign covered our main goals and expectations, is not going to be long till we have to adjust it for new improvements. Interfaces live and evolve along with users’ needs and innovation, and that’s something amazing to be a part of.
