Subtlety and Popups - Case Study

In the world of User Interface Design, often times I follow the old saying of “less is more”. This is with good reason. We don’t want to distract our users with excessive or inconsequential information. This holds true on many (or possibly all) elements of an interface design.

One of those elements in which this statement speaks truth is the “marketing offer popup”. For marketers, something considered as a popup is typically a modal or an expandable tab-like element. Earlier this year, we designed an expandable popup with a value-offer for customers.

Discovery

Once the business identified the desire to focus in on creating a value-oriented popup, we asked the question of what we wanted to do with it. We wanted the popup to provide the user/customer some sort of usefulness, and so we nailed down on offering a percentage off on purchases. Along with offering value to the user, we wanted to offer the user a chance to sign-up for additional information and offers. With this information in mind, we were ready to establish our goals.

The Goals

In order to satisfy the needs of our users and the desires of the business, we identified our goals for the project:

  • Present a value-oriented offer (percentage off of purchase) for the user
  • Collect user information for additional marketing and promotions
  • Ensure a subtle, yet noticeable design element is created

With these goals in mind, we were ready to dig into wireframes and design.

Wireframes & Design

In the case of this project, due to the condensed timeline and the needs of the business, we moved straight into the design phase. Thankfully, the element we were designing could leverage many of the styles we had already established for the site as a whole. Also, the element would feature elements which we’d utilized in other areas of the site.

The challenge with this new element became “How do we emphasize this value proposition without detracting or distracting from other important elements on the site?” This challenge was one we were able to meet and overcome with the help of our trusty secondary call-to-action colors. The site has a whole has historically had a select few call-to-action colors. In particular, the site features a “primary” call-to-action color and a “secondary” call-to-action color. Primary call-to-action colors allow us to call greater attention to elements like Add-to-Cart buttons, or other primary actions. Secondary call-to-action colors, meanwhile, provide users with an indication that there is action to be taken like “learn more” or “ download”.

In the case of our email popup, the action being taken was not something of a primary nature. Ultimately, our goals centered on collecting user info, and providing an additional value proposition. These goals are secondary to the user’s primary actions of shopping for resources. Now that we had settled firmly on the action being secondary, we also decided that the users should not be inhibited from interacting with the site as they usually would. Essentially, we wanted to avoid full-page takeovers for the popup.

The Result

Click on the blue “Get 20% Off” popup in the lower right-hand corner below to interact with the prototype.

Ultimately, we landed on utilizing the secondary call-to-action color to call attention to our newly designed “Get 20% Off” element, which we placed in the lower right-hand corner of the screen. By placing the element in this lower area, we were able to keep the primary real-estate of the page clear of distraction, and allow the user to navigate and interact with the page as usual.

We successfully met our goals with the delivery of this project. The goal of providing value proposition to the user was met as users began to see and interact with the new element. Our goal of prompting users to sign-up for additional marketing was met as they not only interacted with the element, but also completed a sign-up form. And, last, but not least, our goal of keeping the design effective while remaining subtle was met through our strategic design decisions. It was a nice reminder that when we’re designing components or elements for an ecommerce site, often times less is so much more.