Modal Redesign
Zulily - Shopping Experience
The Task
- Redesign Zulily's sign in/sign up modal, which is the first impression to all visitors of the site.
The Goal
- Encourage a higher signup rate from visitors.
The Challenge
- Working with so many cross-functional teams.
- Juggling the legal needs of both the US and EU specific modals.
Who is Zulily?
Zulily is an online E-commerce deals site catered toward Moms of every life stage. Whether they're early stage moms preparing to have their first child or seasoned grandmothers, Zulily has something new to offer them every day. Zulily's daily deals span numerous categories including clothing for each member of the family, toys, home goods, personalized gifts, beauty, and more.
Project summary
Zulily employs the use of a gatekeeping modal that blocks access to the site until the user signs up.
Although that doesn't make for the best user experience, archaic technical and marketing overhead made removing it a significant long-term challenge. In the meantime, we chose to make the best of our situation by redesigning our modal to be more modern and inviting to our shopping moms.
This project was highly important because it would be Mom's very first impression of the Zulily website upon entering. Every Zulily prospective shopper would see it.
Starting point
The following images show the then-current state of the modal. You can see that there's nothing fancy about it, it's very dated, and the experiences were different for all of our platforms.
Android
iOS
Mobile Web
Competitive Analysis
I found that other sites used a variety of ways to present their modals. Most leveraged some combination of using enticing imagery with text that described their value to the customer.
Proposed concepts
Concept 1
Simple bottom sheet refresh
Concept 2
Darkened background image
Concept 3
Scrolling creative assets
*Assets in the prototype may take a bit to load
Concept 4
Creative assets that fade in/out
See Figma prototype of animation*Assets in the prototype may take a bit to load
User research study
I presented the above prototypes of each concept to our user researcher to conduct a study.
We took a set of 10 moms fitting our target demographic criterion for early stage moms:
- Between 25-44 years old
- Have at least one child under 12 years old
- Have never signed up as a Zulily customer
We gathered both qualitative and quantitative feedback by asking them to review and describe their reactions, as well as provide ratings for each.
Based on overall preferred design and how likely they would be to complete the sign up process for each design, the rankings came in as follows:
- Fade in/out - 6/10 preferred
- Carousel - 2/10 preferred
- Bottom sheet - 2/10 preferred
- Blurred background - 0/10 preferred
Our moms were very drawn to the designs that had clear previews of what kinds of products Zulily had to offer, which is my hypothesis for why the bottom sheet and blurred background designs performed poorly.
With a clear preference for the fade in/out design, we were ready to move forward.
Moving towards the finish line
Before we could get the final sign-off on marking the modal dev ready, we had to run the designs past several other relevant teams including:
- Legal: For the fine print agreements at the bottom and a special state for EU residents
- Creative: To replace placeholder assets with final images
- Developers: To make sure we weren't missing any unusual error states or existing features
- Marketing and Growth: For feedback on messaging opportunities
- InfoSec: For error state language that could make us vulnerable to data scrapers
Revisions and final design
During final reviews, our Marketing team wanted to include different imagery that would appeal to Mom on an emotional level. So instead of showing individual products in a sterile environment, I worked together with the Creative team to find more true-to-life shots.
You'll also notice more vertical space being used for SSO login methods.
See final Figma prototypes here:
Conclusion
The images and prototypes shown here aren't comprehensive of all the extra nuances that went into the final designs.
In addition to accounting for error states for invalid email and/or password input, separate screens for the sign up experience's forgotten password view, we also had the difficult task of adapting the design to fit EU specific requirements (which require you to be much more explicit about what users are agreeing to).
Overall, this is one of the most complex and widely spanning project I've ever worked on, and I'm very proud of the way it turned out.