Accessories Modal Research & Design

Overview

Problem

When purchasing at BuildDirect.com, we've identified that we are failing to show users relevant accessories information in their purchasing journey. Because of this, customers find themselves missing critical accessories once they receive their product.

Solution

Accessories modal is a prompt that improves awareness of accessories to the customer. It serves to solve three major issues:

To provide awareness that certain accessories are required for an installation project,

To recommend the correct accessories for the purchased product

To prompt users that we currently carry such accessories.

As a UX designer, I analyzed the competition was doing to solve this problem, come up with a solution and test it before final prototypes.

Competitive Research

I began by researching similar solutions created by our competitors. I broke down each feature and assessed its potential value in our situation.

Feature Sorting (Hiearchy and User Flow)

With the knowledge from our competitors, I mapped solutions for BDPros in user flows. These solutions included features gathered from our competitors. As a team we worked closely with engineers to ensure the changes in user flow were viable to development.

Sketches

Starting the design phase, I began to draw solutions that support the accessories process. At this point, it was important to remind myself to align business goals with user needs during ideation.

Wireframes

With my best ideas in hand, I then created some wireframes corresponding to our user flow. I used sketch to create wireframes and Invision to represent them into a prototype. Both mobile and desktop wireframes needed to be made to create a seamless experience in the future. Concerns for already functional features and widgets were essential when creating mobile wireframes.

Prototyping for User Testing

After gathering feedback from internal testing a high-fidelity prototype what created. I continued to use Sketch to prototype and Invision to assemble a working, testable prototype.

User Research

With the assistance of our wonderful UX researcher, the team set allocated time for user testing. I gathered videos and notes from user testing. The feedback we accumulated directed our focus away from low prices and more towards convenience.

Users were more willing to purchase bundles at a slightly higher price if it meant they didn’t need to shop at more than one place. As suspected, the majority of our users also did not understand the necessity of accessories and were delighted with the prompts that provided such insight.

Summarizing feedback

After summarizing feedback, some changes needed to be done to the prototype. I decided to push more visuals and create more obvious prompts to assist the education of the user after adding to cart. We also reduced the prominence of reminding users to buy accessories during checkout. We then continued with another smaller round of qualitative testing to confirm our findings.

Accessories modal was then ready for development. Deliverables needed to be created in iterations, starting with mvp. Scalable designs were implemented and broken down into user stories for development.