An Essential but Troublesome Entry Point
The Roomvo landing page acted as a room selection and room upload zone for the Roomvo Augmented Reality Visualizer where users can see products like floors, tiles, paints, carpets and more in their space. While seemingly simple in function, this page had caused Roomvo a lot of trouble with its high drop-off rate where users would enter the landing page but would never go to the visualizer. Moreover, they would also not upload their rooms at the rate Roomvo wanted as that was the entire goal with the tagline, "See products in your room"
This was my first project at Roomvo and also the reason why I was hired as I had assumptions about why the page was causing these problems. As part of the redesign, I set out to research the causes and create a design that would address the user's pain-points and get the page to perform as Roomvo wanted which, spoiler alert, I managed to do!
Client
Leap Tools Inc.
Design Process
Research and Test
Version 1
Test 2
Design Update
Analyzing existing
landing page and
testing it with users
Creating a proof
of concept to address pain points
Iterative testing of the proof of concept to find further instights
Further updating the design using insights before dev and launch
Research
Finding the Cracks
In order to understand why users were dropping off from the landing page, I started analyzing the information provided on the page and understanding the context around why a user would enter into the visualizer from let's say a product page or a banner advertising the visualizer on a vendor's website. Expanding on the vendors, the visualizer is a white-label product that can be easily integrated on a vendor's website to display their products in a user's room.
The page provided info about the product the user had selected and asked them either to upload a room or pick a demo room from the list. While this may seem fairly simple, when taken into consideration how and why the user might enter the visualizer, I started spotting some issues:
-
The first issue I spotted wasn't actually a part of the page but rather how it was integrated on the vendor's site, through a CTA button that was hard to spot.
-
Second, as a user I had no idea what this visualizer looked like or did? Especially if the vendor has provided no prior info about it.
-
This lack of info about the visualizer's function combined with a concern for privacy could also deter users, causing them to not even try a demo room.
Once I had a sense of what might be going wrong, I wanted to verify if these were indeed the issues that users were facing and tested this landing page with some users. The aim was to take a look at the initial part of the journey towards the visualizer, starting with the product they might be interested in and ending at the landing page where users would have to answer questions around what their goal is on the landing page and what comes next?
I interviewed 5 users (a mix of older and young participants) in a structured test with some open-ended questions sprinkled throughout the process to gather additional insights about their experience and this is what I discovered
They were confused about how to enter the landing page, depending on where the vendor had placed the CTA
Majority had no idea what the visualizer looked like and their description on how it would operate varied wildly from one user to another
Almost 1/3 of the users had privacy concerns about uploading their rooms and said that if they still had to use the visualizer, they would use demo rooms
1/3 of the users misunderstood the demo rooms as room folders or categories and thought there were additional steps before they could get into the visualize
Patching the Cracks
Landing Page V1
Based on the issues discovered during the initial tests, I started sketching what the new landing page could be and adding contextual information for the users to get them excited for the visualizer and proceed further. I knew I couldn't influence the vendor's decision too much about advertising the visualizer or providing a clear CTA but I could help the users once they were inside the landing page.
Compared to the old page, this version has quite a few notable additions aimed to simplify the user's experience by:
-
Giving them goals with a start and an end
-
Keeping the minimalist look but providing better IA to allow users to take in information about the visualizer followed by the upload or demo room action
-
Giving them a glimpse of the visualizer using an instructional gif/video to get them excited for the next steps.
-
Clearly laid out sample rooms with folders to allow them to select a sample room if they didn't feel like uploading
-
Support for different image ratios using a masonry grid to better indicate portrait vs landscape room images
Keeping It White Label
While designing this version, I had to make sure that the visual customizations provided to Roomvo's customers (Vendors) from the old page made their way into this version. This involved a deep dive into all the options Roomvo provided and their popularity with customers using information from the Sales and Customer Success team.
With the info I gathered:
-
I made sure that options like primary accent colors, custom icons and fonts made their way to the new designs
-
Options that bloated the old page and weren't used a lot, like images as page backgrounds (affected accessibility) were stripped.
With these designs, I quickly turned them into a prototype to test with another batch of users to see if I was headed in the right direction
Are We There Yet?
Comparing the two
Using the same user journey as last time, I gathered 10 users (a mix of old and young participants) but this time to compare the old with the new. To reduce bias, half of the participants were shown the old version whereas the other half were shown the new version
5/5 Users who used the new version were able to identify the upload and demo rooms action and 3/5 users who used the old version were able to identify the upload and demo rooms action
5/5 Users who used the new version were able to accurately tell what they would do once they upload their room compared to none of the 5 users who used the old version
5/5 Users who used the new versions identified the demo rooms as being individual rooms with categories whereas 3/5 users who used the old version were still confusing demo rooms with folders
They were still confused about how to enter the landing page, depending on where the vendor had placed the CTA
The Finale!
While the landing page redesign was in-progress, we had started working on a new design library to transition away from Minimal UI framework that we were using. To start putting it into action, we started implementing these new design components in the landing page to give it a visual overhaul while working on making the desktop version's IA a bit better (based on the research results) and improve transitions from desktop to tablet to mobile.
Some of the notable updates included:
-
Updating the structure to show the instructional video as a more prominent element based on feedback
-
Instructional video was made to be more abstract so we could create different videos for different product combos
-
Updating QR to upload behavior to better allow users to scan the QR code in a modal
-
A more minimalist UI update using the new design library
Closing Remarks and Outcomes
Following a short beta launch of the new landing page with some of our customers, the page has now rolled out to all of the customers to a positive reception. We also managed to achieve our objectives of increasing upload rates and reducing user drop offs with a significant increase in those metrics for many of our high-volume customers.
Following the launch, I also worked on a new template of the landing page that prioritized room folders for our B2B customers who weren't interested in the upload function. But I can say for certain that the thorn that had been stuck at Roomvo's side for over a year has been removed and the new landing page has opened up the door for further updates to their product line, one of which also makes an appearance on this portfolio.