The previous version of the Bronson Vitamins site was released almost 4 years ago, so it’s fairly easy to imagine how much has changed in terms of the trends web design over that time.
The web development process
We started implementing the new e-commerce platform with a thorough analysis of the current site that included tracking the typical behavior of the returning vs. new customers, checking the popular sales funnels and identifying the biggest pain points impeding users finding the desired product and placing an order. Most of this research was conducted on the basis of the data, user sessions and heat maps recorded with Hotjar.
The results of the analysis were surprising as it turned out that the items that initially had been constantly emphasized as one of the most important (such as banners, static block and category links on the homepage), appeared to be the least popular among the real users. Instead, we learned that the majority of users start interacting with this site by a search bar. The substantial part of Bronson site users are returning customers - people who know their product well and therefore they know why they visit this site right from the beginning.
What’s more, we found out that the site navigation was a way too complex - having too many options to choose from, users tended to get a little lost, wandering around the site and couldn’t find what they were looking for. The homepage was full of banners of various sizes and rather unusual category navigation, which was making a bit difficult to find the desired section of the site. Our research also proved that the product page had to be redone and rebuild. Thanks to the recorded visitor session sessions we noticed the product page overloaded with various irrelevant information, while the most important elements - such as add to cart buttons or product images were not easily accessible. Our study also showed that some of the site items that used to be very popular among returning customers back four years ago (such order with SKU form), nowadays were used barely by anyone.
Benefits of running UX research
Thanks to all our UX research, we chose search bar as one of the most prominent elements in the new site - we decided to make it wide, prominent and easily accessible across various devices. Additionally, we decided to simplify the navigation and emphasize the most important elements of the site, placing them easily accessible right on the homepage. We also unified the texts and messages shown to users and highlighted access to the most important sections to customers - such as the shipping costs table or support page. Whereas when it comes to the product page we simplified it too, by dividing it to the two, clearly separated sections. The top one - appearing above the fold and containing the basic information of the product (name, basic attributes, images) along with the add to cart button and the bottom one with the extended product description or nutritional information.
Furthermore, we also enhanced the catalog page navigation, so that the user has no longer doubts on which category level they currently are. After completing the general interface structure presented in the wireframes, we started designing the user interface. The main design assumption was to simplify the user experience removing unnecessary items that distract users from the main site content and conversion We decided to apply bright, clear layout and the base grid that always adjusts to the 100 percent of the screen width.
What are we going to do next?
Almost every good digital needs to be constantly improved in response to the varying needs of the market. Despite the core development and design works on the Bronson Vitamins site are over it doesn’t mean we’re done yet. Right after the release of the new Magento 2 based site, we will be supporting our client providing various UX services such as A/B tests and further optimizations aiming to increase the conversion rate of the end-users.