Daily UX Writing Challenge | Day 4

Writing a promotional pop-up modal or overlay

Mekeyah
2 min readOct 25, 2021

📝 Scenario

A user is in their favorite supermarket. They open the supermarket’s app on their phone to see what’s on sale and are greeted by a promotion.

💪🏽 Challenge

Write a promotional home screen for a subscription service that delivers groceries to the user once-a-month for a flat fee.

Headline: 45 characters max
Body: 175 characters max
Button(s): 25 characters max

💡 Solution

Headline: Next time, skip the checkout line.
Body: Get fresh ingredients delivered to your door for just $5/month. Sign up today for 20% off your in-store purchase.
Button(s): get started | no thanks

💭 Thought Process

Modal windows are a necessary evil in UX design if you want to engage a user’s full attention to complete a single task. However, users tend to dislike pop-up screens or ads, so we must make them meaningful and valuable.

Keeping in mind that the user is already in the grocery store and looking for an opportunity to save money, I used long checkout lines, a user pain point for many, to capture their attention. Additionally, I included a promotional deal they could utilize in-store to encourage click-through.

To help the user feel a greater sense of control and hopefully decrease their agitation, I provided two straightforward methods for them to get rid of the pop-up: click the “x” symbol or select “no thanks.”

(Left) UI for a grocery app | (Right) Promotional pop-up or modal for a grocery app

💻 Design

I had a blast creating this mockup of a grocery app in Figma. I used a rounded font, Nunito, and Open Sans for the accent fonts, so the design feels playful. Also, using green as an accent color is intentional to promote a sense of freshness and sustainability.

To add some depth to the design, I used the linear color feature for the “add to cart” buttons and a drop shadow to the search bar, checkout icon, grocery items, and text to indicate which filter the user selected.

Keeping the design simple and minimal is critical to providing a positive user experience, especially while grocery shopping. For example, there are two ways for individuals to filter their search: the filter icon or scrolling through the menu. Additionally, keeping the overlay centered and slightly smaller than the app window itself would allow the opportunity to design the option for a user to click outside the pop-up to close it.

Constructive feedback is encouraged.

--

--

Mekeyah

Senior Content Designer based in Los Angeles, CA — currently looking for my next role. Professional fangirl. Lover of spicy noods. 🍜