Scope:
This project was part of a redesign for our e-commerce website. The main goal was to improve the user experience, optimize the path to purchase throughout the site, and approach a few design challenges (outlined below).
Contribution:
Collaborating with the marketing team and based on best practices for modern e-commerce design, our team reviewed some of the best use cases and reports from leading electronics e-commerce retailers. Based on these findings, I designed the wireframes, mockups, and prototypes, then collaborated with the development team to produce the final published pages.
Design rationale:
Looking at various successful user experience solutions from leading electronics e-commerce retailers, including some user-based reports on best practices for e-commerce,eam, key stakeholders, the marketing t 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. They consist of typography followed by UI elements such as the review star elements, various call-to-action buttons, and toggle switches for grid and list views. In addition, there are primary, secondary, and tertiary brand colors.
Version 1A and 1B - list and grid view Wireframes
One of the problems we wanted to solve was improving site speed while showing all of our offerings on one page. Based on some research, we determined that a dynamic load with a "load more" button at the bottom of the page would be an ideal solution.
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 on 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 the need for the SEO copy to be as compelling and helpful for the shopper as possible. This version features some SEO copy at the top as an "explainer," while the rest is below the page fold.
Version 2B - list and grid view
This was the final version approved for the next phase of design, which is to create high-fidelity mockups. This wireframe featured all of the necessary components desired by the key stakeholders. According to our research, SEO copy was featured at the top, which was the best solution for driving organic traffic to our site while giving the shopper meaningful information about the product line.
In addition, to drive 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 mockup
These are some of the first mockups 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 before going into development. It features all of the changes that were requested during the design phase, including an SEO paragraph at the top and an introductory video per the final wireframe. As a final result, this directory page was used as a template for the rest of the site's directory pages.
Following the launch of the directory page redesign, we diligently monitored user interactions using Google Analytics and HotJar. This user-centric approach led us to the discovery that most of our customers were not using the grid or list view features, nor were they filtering by the included facet filters. In response, we removed these features, ensuring that the primary design on the BrickHouse Security site remains user-friendly. You can view the live site 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 in which the menu is intended to animate and how fast the animation should happen.
Product Directory Page Prototype - Category Menu Animation
This user flow features 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's functionality.
Product Directory Page Prototype - Filter By Menu Animation
This is a user flow depicting the "Filter By" menu animation. This prototype was created to aid the feature's development by showing how the menu is supposed to animate.
To view the live site, please click here.