top of page

Roomvo Catalog

​​

Re-imagining of the product catalog for Roomvo's multiple offerings like the Augment Reality Room Visualizer, Roomvo Sites and Roomvo Assistant Widget. The redesign aimed to fix a lot of usability issues with the old design and update the visuals using the newly created design library

​


Time For A Refresh

​​

Following the redesign of Roomvo's Landing Page (check out the case study in my portfolio for more info!) the next Roomvo product to be updated was the Roomvo Catalog, which itself is part of multiple other Roomvo products. This project was also a push towards the AR room visualizer redesign as the catalog formed a significant portion of the visualizer UI. The project initially started as a way to address a lot of usability issues provided by users and customers to our dealer team (primary team behind the sales of catalog) and bring the design updates from the Roomvo Landing page to the catalog. However, the scope of the project was increased to add new features missing from the original catalog. Below are the changes to the catalog presented in a very old vs. new fashion.

 

Note: The data shown in the screenshots isn't final as the catalog is currently undergoing development and testing

​

Role

Design Co-Lead

​

Client

Leap Tools Inc.

Comparisons


Catalog Reborn

 

Some Context for The Catalog

​

The catalog displayed information about different wall, floor and countertop products. This included, brand name, product name, price, colors and sizes available. You could filter through, favorite and search products and in case of the standalone catalog, each product had a button that would take you to the visualizer where you could see that product applied in your room

​

Starting With Basics: Old Standalone Catalog

​

​

The biggest issues in the standalone catalog, as seen in the screenshots above, lied in the mobile version with

  • Tightly packed and busy looking information 

  • Small font sizes

  • Hard to tap size and color options

  • White space in scenarios where only few products have info like size and colors resulting in uneven spacing.

  • Filter categories named in an unconventional manner, resulting in users rarely using filters

​

Starting With Basics: New Standalone Catalog

​

​

The redesigned catalog enhanced the old version in almost every way with

  • Improved product cards on mobile that use a horizontal orientation to allow for larger fonts and a cleaner look

  • Flexible product cards on desktop that eliminate white space by resizing the cards on individual rows to accommodate information like size and colors

  • Better filters on desktop that show some options in categories to encourage usage and eliminate confusion when uncommon terms are used as filter categories by Roomvo customers

  • Surface switcher (walls, floors, etc.) to allow users to switch to a different surface and browse products

​

​

Another big change to the catalog was made with the addition of a new product view, called a simple view that prioritized the product images over information. This allowed users to better look at products like artwork, furniture, carpets and more without having to scroll a lot.

​

Jumping Into Augmented Reality: Old Visualizer Catalog

​

​

A lot of the issues that were present in the mobile standalone catalog also applied to the desktop visualizer catalog as they used the same format. Some of the old issues became worse when it came to product options and filters

  • Product options like size and colors were hard to access and understand as can be seen from the screen on the right where the colors are loaded in a dropdown without any labels

  • Filters button took users out of the visualization into a full screen catalog

  • Flooring patterns were detached from product cards and instead placed on top of the visualizer

​

Jumping Into Augmented Reality: New Visualizer Catalog

​

​

A lot of improvements from the standalone catalog were brought into the visualizer with a lot of consideration for user intention, like showing the right info at the right time. Some of the improvements include

  • Simple view is added from the standalone catalog allowing users to view products either with thumbnails being prioritized or in detailed cards

  • Product options are available only after a user selects a product, reducing on-screen clutter

  • Color options are now better represented in a modal and also include prices to allow customers to show price distinctions

  • Pattern selection which used to be detached from the products is now part of product options for easier access

  • The expanding nature of product cards/thumbnails reduces whitespace and allows the product list to scale up and down depending on the product options available

  • Filters now open in the section where the product list resides instead of opening in a full screen mode

Closing Remarks


Closing Remarks and Outcomes

​​

This new catalog has allowed Roomvo to set the stage for the AR visualizer redesign and new features like improved add to cart, tile grout selection and more for some of its biggest customers. The catalog is currently in development and is being tested by some of Roomvo's customers. Eventually, this update will be released to thousands of dealers/vendors who have partnered with Roomvo.

bottom of page