The BONI app is evolving. From basic functionality towards user centered and experience focused. As the new (and only) UX designer on the team, I was asked to develop a new app experience that icluded BONI's product card.

By designing a new product card, BONI could improve their conversion rate, meet basic WCAG criteria AND become more user focused and goal oriented. It had to be done, and it was of high priority.

After the initial briefing, I got myself some time to research and investigate all the desicions a user have to make when curating a room through the app, in other words: shopping for products and arranging them in a virtual room. It became clear early on, that one of the most important views was in the mockup editor, with the product library open. In this view, users search for suitable products and make a selection based on price and other parameters. It is of high importance that products are portrayed in a desirable manner, with easy access to all neccesary information, suchs as measurement, available colors, pricing, which retailer has the item in stock etc. The conversion happens here, so it’s all about $$$. It is also in this view that interior designers create their special vision for their clients homes.

Not only is the library looking.. dated. It is also hard to interact with, as the main function of each card is to paste a product onto the drawing board. Klick it, and it appears in the mockup.In order to open the pop-up under ‘More info’, the user needs to klick exactly on the small text snippet. Which leans towards ambiguty without a bounding box or any indication that it is clickable (except for the blue color). The same goes for the tiny browsing arrows.Users often klicked un-interntionally on a product only to find themselves with a bunch of the same items added to the drawing board, behind the menu. More often than not, it was’nt apparent what they did wrong. This added to confusion amongst users that got thrown out of their workflow. Not to mention the fact that they had to manually delete all the extra items in their product list, once they closed the menu and realized what had happened. This needed to change.

Some of the early sketches built on the minimalist approach from the original card and while the contrast ratio conformed to accessible standards, it could definitely be improved more.

In order to help users interact with the card and understand functionality without having to second guess themselves, I turned to my old friends chunking and the law of proximity. I explored different options here, by arranging content into groups of importance. It was clear early on that price had to stand out on its own. So did the retailers logos, as Boni is dependent on their commercial agreement with retailers.

The card also had to convey all necessary information without feeling cluttered or cramped. In the old card, whitespace was given a lot of room, while the images felt small and unequal in size. By introducing a border and a defined image area, the card felt more defined in its form. Product images was then set to fill the whole area and utilize the given space fully, making the items appear equal in size.

The target area of interactive items could also benefit from growing bigger. So I added a hover effect on icons, which gave the users an easier time identifying and interacting with them. I managed to tweak the design towards accessibility without having conflicting hierarchy or compromizing imagery. The card with all its parts became easier for users to scan and use.

The product card does not stand alone. It is part of a bigger layout, and I needed to make sure that they had good readability while conveying the right information in a highly attention-demanding environment.

In the new version of the Mockup editor, the product library still covers the viewport, but by adding a confirming message, users understand what happens when they click on an item. The item is added both to the product list and to the viewport. There is no longer any confusion about the number of yellow curtains.

The updated version is OK. However, readability is not on point and the cards still feels cluttered. After this sketch I decided to improve the more info-button, and re-arrange some of the content.

The updated version is OK. However, readability is not on point and the cards still feels cluttered. After this sketch I decided to improve the more info-button, and re-arrange some of the content.

In the end, the team settled on this version. A Variant of the product card that lets users browse between different images, where versions are easiliy showcased and managed directly in the card, and the ‘More info’ button is more distinct. The ‘Item added’-message has also changed place, to interfere less with the product description.