Project Duration: 2 sprint cycles (1 week each)
Team Role: UX Designer in partnership with product management, analytics, and development
Project Brief: our team's back-end developers found user errors in email domain entry e.g. gnail.com instead of gmail.com in databases for the Wayfair Gateway page. This page is dedicated solely to email capture and can be accessed by clicking a Wayfair ad on social media. The original Gateway page showed 3 popular domains in a dropdown once the user tapped the email entry field (gmail.com, yahoo.com and hotmail.com). We were looking for areas of improvement, particularly for mobile devices where user entry is more tedious and error prone. As we designed our solution, one consideration we kept in mind was not to interfere with the existing browser autosuggestions that allow users to autofill their full email address.
Research & Deliverables: competitive analysis, high-fidelity mocks, InVision prototype, Framer.js prototype
Project Summary: based on competitive analysis of existing email suggestions and in collaboration with front-end development, we came up with the solution of having the email suggestions in the dropdown update dynamically as the user enters in their email domain. Through preliminary research, we also saw there were available open source lists of popular email domains that the developers could pull from. In the A/B test, our mobile web variation won against control with a lift in email deliverability rate, resulting in a 1% lift in new email submission. It is now being tested on tablet and desktop.
Framer.js Prototype: I created a prototype in Framer.js to show how the email domain suggestions in the Wayfair dropdown would interact with the web browser email suggestions and how the dropdown suggestions should dynamically update as the user types in their email domain.
To use this prototype, tap on the email input field and then wait as the prototype will simulate typing for you. You can then select one of the domain suggestions in the dropdown. Take a look at the prototype here.
Live Design: this design is currently live on the Wayfair site for mobile web. Take a look on a mobile device or using Inspect tools here.