Scope:
This project was a part of a redesign for our e-commerce web site. The main goal was to improve the user experience and optimize the path to purchase throughout the site and approach a few design challenges (outlined below).
Contribution:
In collaboration with the marketing team, we conducted some research into best practices for modern e-commerce by searching through some best use cases from leading electronics e-commerce retailers. I was able to successfully design and present wireframes, mockups and prototypes to key stakeholders and developer.
Design rational:
Looking at various successful user experience solutions from leading electronics e-commerce retailers, including some user based reports on best practices for e-commerce, the marketing team, key stakeholders and I were able to distill the right solution for this redesign.
Achievements:
Post launch we tested iteratively using Google Analytics and saw an increase in conversion rate by 28%
Brand elements
These are the primary elements and library assets for the BrickHouse Security product directory page design. These consist of typography followed by UI elements such as, the review star elements, various call to action buttons and toggle switches for gird and list views. In addition, there are primary, secondary and tertiary brand colors.
Version 1A and 1B - list and grid view Wireframes
On of the problem we wanted to solve as a team was figure out how we can dynamically load products to improve site speed. Based on some research, we determined a dynamic load with a "load more" button at the bottom of the product grid, would be an ideal way to solve this.
Another issue we considered was how many products could fit above the fold. The example above features an option for a list or grid view (with some variations with how the SEO text is handled), further optimizing the user experience by allowing the user to see the product layout in their desired way.
Version 2A - list and grid view
One obstacle we had to consider as part of the redesign, was a need for the SEO copy to be as effective as possible. This version features some of the SEO copy at the top, while the rest is below the page fold.
Version 2B - list and grid view
This was the final version that was approved for the next phase of design, to create hi-fidelity mockups. This wireframe featured all of the necessary components desired by the key stakeholders. It featured SEO copy at the top, which according to our research was best solution for driving organic traffic to our site.
In addition, as part of driving further engagement, we featured a product summary video to help users identify their product needs.
Mobile version wireframes
During the redesign phase, we determined that the mobile experience needs to be in a list view, as it allows more products to be viewed above the fold. Designing for mobile-first is essential and these wireframes capture various types of list views we considered based on how tight the spacing should be to allow for more products to appear above.
Preliminary Mockups
These are some of the first mockups of I created using Adobe XD, and shared with the team for approval. These versions were iterative and changed quickly and often as I was designing.
Final Mockup
This was the final mockup, prior to going into development. It features all of the changes that were requested during the design phase. Featuring an SEO paragraph at the top along with an introductory video per the the final wireframe. As a final result this directory page was used as a template for the rest of the site's directory pages.
Post launch of the directory page redesign, we monitored these pages using Google Analytics and HotJar to determine what was being clicked on and how our users were experiencing the new design. WIth this research, we found out that most of our customers were not using the grid or list view features, nor were they filtering by the included facet filters. As a result, we removed those features. The primary design still exists on the BrickHouse Security site and it can be viewed with the link below.
To view the live site, please click here.
The Prototypes
Mobile View - Filter and Sort By Menu Animation
Mobile user flow of search Filter and Sort By menu animation. The prototype was created to depict the direction at which the menu is intended to animate and how fast should the animation happen.
Product Directory Page Prototype - Category Menu Animation
A user flow featuring category facet menu animation. This prototype was created to show the intended animation effect as a guideline for developers and stakeholders to see the site functionality.
Product Directory Page Prototype - Filter By Menu Animation
User flow depicting the Filter By menu animation. This prototype was created to aid development of the feature by showing how the menu was suppose to animate.
To view the live site, please click here.