Drizly
Comparison
Feature
Roles:
User Research, Sketching, Wireframing, Prototyping
Time:
3 week sprint
Tools:
Sketch, Invision
Design and integrate a feature into Drizly's website for web and mobile platforms. Encouraging product discovery and providing user's a way to compare alcohol items by product details and make better informed decisions.
User Research
Conducted interviews with 17 people within the targeted demographic, which was people who drink alcohol, have used or haven't used the service before, and within the age range of 21-50. The key takeaways from the research were that most people shop for alcohol based on several criteria; price, reviews, manufacturers description, flavor profile, product packaging, and suggested products. We also reached out to 55 people using a quantitative survey and received similar trends which validated our research.
Design Process
After synthezing the research and gathering our insights. I worked with the team to start sketching out the design solution. Beginning with a mobile first approach and asking a few questions. Where does this feature live? What does it look like? How does it function? … and how do we integrate it seamlessly to encourage product discovery, and make it visible so users can easily discover and use this feature?
User Flow
After synthezing the research and gathering our insights. We began sketching out design solutions for a mobile first approach and asked a few questions. Where does this feature live? What does it look like? How does it function? Then how are we going to integrate it seamlessly to encourage product discovery while making it visible enough so users can easily discover and use this feature?
We created two use cases to access the compare feature. One case is where a user can manually select/deselect the items they want to compare. The second case, starts from the Product Description page, a user can select the "Quick Compare" button. This will auto-populate 3 related items to compare side-by-side based on the product they were looking at.
Design Decisions
To increase awareness and encourage product discovery, we decided that the comparison feature should exist on both the Product Description (PDP) and Category pages.
On PDP, we explored several iterations on the appearance of the Quick Compare function. The addition of iconography was introduced to help call attention to the feature and recognize the function throughout the site.
Adding a bottom sticky pop-up bar will provide users control of the items they are selecting. The bottom bar should have the ability to be minimized, creating the pop to be minimized and opened at the users will is important to not crowd the real estate on the screen.
On the Comparison Feature, we went through several iterations of how this should look. Initially we wanted to show as much information as possible and used two and a half products showing, but after reviewing we found it displayed better if only one in a half products were showing. We decided to keep the feature to four columns so it didn’t feel too busy
Usability Testing
After several rounds of usability testing with paper prototypes, we learned that the copy for the action buttons needed to be refined. We also revisited the buttons to match the Drizly style guide. The next iterations for the web mobile met the users’ expectations.
We received the following feedback:
When asked what the users expected from the action buttons, the outcome matched their expectations. The icon within the quick compare feature caused the user to associate this feature with a randomizer auto-populated by an algorithm that would cause product discovery.
The users appreciated having the ability to deselect a product, once on the comparison page; and be able to find other items to compare. They enjoyed the freedom to choose between selecting different items or entering the randomizer and learning about a new product.
Users expressed that on web mobile, comparing four items at a time is sufficient. More than that would be an overload of information.
Reflections
Within the time and scope of the project we were able to reach a succesful product that received positive reactions from user's. After presenting to Drizly, we learned that the placement of the Quick Compare button would need to drop lower into the Product Description page. We were not able to conduct usability testing to confirm location and appearance. Further iterations and tests would help discover how the user's would interact with this feature.
© 2022 / O'Reilly Pixel Parts