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 following best practices for modern e-commerce design, our team reviewed 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:
By looking at successful user experience solutions from leading electronics e-commerce retailers, including user-based reports on best practices for e-commerce, key stakeholders, and marketing, I was able to distill the right solution for this redesign.
Achievements:
Post-launch, we tested iteratively and achieved 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, including review star ratings, 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 variations in how the SEO text is handled), further optimizing the user experience by allowing the user to view the product layout in their preferred layout.
Version 2A - list and grid view
One obstacle we had to consider during the redesign was ensuring the SEO copy was as compelling and helpful to shoppers 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 included all the components desired by the key stakeholders. According to our research, SEO copy ranked at the top as the best solution for driving organic traffic to our site while providing shoppers with 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 should use a list view, as it allows more products to be displayed above the fold. Designing for mobile-first is essential, and these wireframes capture the various list view types we considered, based on how tight the spacing should be to allow 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, changing quickly and often as I was designing.
Final mockup
This was the final mockup before going into development. It features all requested changes from the design phase, including an SEO paragraph at the top and an introductory video per the final wireframe. As a result, this directory page served 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 discover that most of our customers were not using the grid or list view features, nor were they filtering using 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 the search Filter and Sort By menu animation. The prototype was created to depict the direction in which the menu is intended to animate and the speed at which the animation should occur.
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 user flow depicts 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.