Daily UX Challenges
In an effort to continue my user experience education and push myself to grow as a designer, I am participating in the Daily UX Writing Challenge by DailyUXWriting.com
Tools: Procreate, Figma
Duration: 1 a day for 14 days
Day 1
Scenario: A traveler is in an airport waiting for the last leg of a flight home when their flight gets abruptly canceled due to bad weather.
Challenge: Write a message from the airline app notifying them of the cancellation and what they need to do next.
Headline: 45 characters
Body: 175 characters max
.png)
Notification Text:
Hi Mary, unfortunately, your flight DL9043 has been canceled. We hope to help make this change as hassle-free as possible. Here are some options to help adjust your plans:
Goals:
Provide necessary information first.
Offer possible solutions apologetically to soften the bad news. Encourage users to open the full email along with the notification.
Imagining The Full
Email Design
Although it was not required, I took this prompt as an opportunity to research the formatting of common emails containing multiple links.
Here is how I imagined the full notification would look like for Mary after clicking on the pop-up message.
Expanding on the earlier goals, the important information was given first--the flight has been cancelled. In a perfect world, the airline would automatically reschedule Mary's flight, but it is much more likely that Mary will need to do it herself. I like to imagine that the airline offers perks to soften the bad news.
.png)
Day 2
Scenario: A user is a working parent, and a big sports fan, in the midst of their favorite sports season who can no longer attend games.
Challenge: Write a promotional screen for an app that lets a user choose teams, sends game reminders, real-time score updates and highlight videos.
Headline: 40 characters max
Body: 175 characters max
Button: 25 characters max
Notification Text:
Headline: Don't miss out on the game
Body: Get live score updates, highlight videos, and gameday reminders for your favorite teams.
Button: Join the Team
Goals:
The initial call to action is to aims to show empathy for a user that feels too busy to attend live sporting events like they used to. The body contains the app's key features, and the button appeals to the social feeling of being part of a team when attending games.
Imagining The Full Promotional Design
I envisioned this prompt to appear in a social media ad, and kept the imagery and text short, simple, and direct.
I chose to center a kid sports fan to hopefully convey that the app is family friendly and helpful for busy parents that need a tool to catch their favorite games when busy.
Day 3
Scenario: The user entered the wrong email address to sign in to their account.
Challenge: Tell the user to enter the right email.
40 characters max
Error Text:
That email didn't work. Recover email?
Goals:
Short and sweet! A good "incorrect email" message should feel non-confrontational because errors are associated with negative feelings for users. It is also important to provide users with a possible solution--the pathway to recover their correct email if they have forgotten it.
Iterating on the Login Error Screen Design
.png)
Day 4
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
Pop-Up Text:
Headline: We Deliver!
Body: Quick, convenient, quality groceries ordered from the comfort of your couch. Subscribe and save time.
Button: Get Grocery Delivery / Back
Goals:
Since the user is already opening up the app with the goal of looking up coupons, the goal of this pop-up is to add value in the user's eyes. The headline should just state the service, the body should tell the user WHY they should use that service, and the buttons should impart a feeling of loss when dismissing.
Imagining the Pop-Up Design
.png)
Day 5
Scenario: The user works in graphic design. While critiquing a design in a mobile app, their phone abruptly turns off. When they restart the phone, they reopen the app.
Challenge: Write a message that the user will read immediately upon opening the app. What do they need to know? What steps (if any) do they need to take to recover their content? What if they can't recover the content?
Headline: 40 characters max
Body: 140 characters max
Button(s): 20 characters max
Crash Text:
Headline: N/A
Body: Unfortunately, your session closed unexpectedly. Fortunately, your content was saved under “drafts.”
Button: Submit Error Report
Goals:
A crashed app is terrible for the user, no matter what. It's a wonder they have the patience to open the app up again after crashing! The best crash text should reassure the user that their work was not lost (let's hope the backend developers are amazing), and reporting it will stop the crashing from happening again.
Imagining the Pop-Up Design
.png)
.png)
Day 6
Scenario: It’s Monday. A user has just gotten into their car to drive to work. They plug their phone into the car and start driving.
Challenge: How would you let the user know there’s a fire happening in a nearby town that is causing road closures? The effect on their commute is unknown, but there is a definite danger if the fire gets closer. How do you communicate this to them? When? Write it.
Headline: 30 characters max
Body: 45 characters max
.png)
Emergency Alert Text:
Headline: Use Extreme Caution!
Body: Fire reported nearby.
Click here for details.
Button: N/A
Goals:
This general alert really doesn't give that much information because it's hard for automatic systems to know the exact nature of a fire emergency. This mobile alert should impart some fear to those who read it, because it is imperative that users check the local news or fire department sources for their safety.
Imagining the Alert Design
.png)
Day 7
Scenario: A sports fan is at a wedding while their favorite team is playing against their arch-rivals. Their team scores.
Challenge: How would you, quickly, let the sports fan know about the latest play, the current score, and the key players? Write it.
Headline: 30 characters max
Body: 45 characters max
Questions
I do not follow sports, so I need to go into this challenge with more research on the basics.
How do sports websites and apps...
-
Refer to their players (By their last names? First names? Numbers? Positions?)
-
Show the score (Dashes? Names? Slashes?)
-
Convey place in game (Which quarter? Time elapsed? Time left in quarter?)
Score Push Notification Text:
Headline: Diggs scores a touchdown!
Body: Bills ahead 10-3.
9 minutes left in quarter.
Button: N/A
Goals:
Imagining the Push Notification Design
I like to imagine that my user is glancing at his phone WHILE the bride is walking down the aisle.
Day 8
Scenario: The user is a casual music fan and (on occasion) goes to live concerts. They have a music player app on their phone.
Challenge: Tell the user that one of their favorite bands is playing live in their town. How would you compel them to want to go?
Headline: 30 characters max
Body: 45 characters max
Button: 25 characters
.jpg)
Upcoming Concert Notification Text:
Headline: See [band] in concert
Body: [Band] scheduled a show in [city] on [date].
Button: Get Tickets / Set Reminder
Goals:
I found the character maximums to be extremely limiting for this challenge. After experimenting with different phrasing, I found there was little room for anything other than the necessary basics: the name of the band, the city, and the date. I wanted a larger secondary button to add the event to a calendar, but alas, it was too many characters.
Imagining the Concert Notification Design
.png)
In my first iteration of this notification, I forgot to include an "X" to allow users to close the pop-up. Oops!
.png)
Day 9
Scenario: The user is trying to rent a car using an application but the credit card on file has expired.
Challenge: Write them an error message so that they can correct the problem.
Headline: 30 characters
Body: 45 characters
Error Message
Text:
Headline: Oops! The card on file expired
Body: Please update your billing info below.
Button: N/A
Goals:
First, I looked at examples of other expired credit card messaging found on ecommerce sites. Most messages were passive and minimized negativity by putting the focus on updating. My biggest goal was to help the user move past the error fast and update the information immediately.
Imagining the Rent-A-Car Credit Card Page Design
.png)
.png)
I had some fun playing with gradients, shadows, and figma properties for this one.
Day 10
Scenario: The user is trying to view a website to help them buy a car. But, the content can’t load without the user’s location. They need to enter their ZIP code and first name.
Challenge: Ask them where they live and who they are without sounding like you're unnecessarily mining their data.
Headline: 25 characters
Body: 45 characters
Button: 15 characters
Data Request
Heading
Headline: Unlock Regional Savings
Body: Your ZIP may get local
rebates & incentives
Button: See Local Deals
Goals:
Before I even began brainstorming language, I needed to understand the reason behind collecting the data in the first place. It is a personal pet peeve when a system requires seemingly unnecessary information from users, but in this case, I learned a little bit more about how the car retail industry works!
Imagining the Input Form Page Design
After deciding on the best text, I play around a bit with rectangles to block off the best way to display my message.
Day 11
Scenario: An elderly user is doing a Google search to find an easy way to buy contact lenses online.
Challenge: Write a title and meta description for a website that sells subscription contact lenses delivered to a user every 30 days—convince them to try it.
Title: 60 characters max
Meta Description: 160 characters max
.png)
Title and
Meta Description
Title: 15% off Popular Brands, Contact Lens Delivery | Eye Experts
Meta Description: Buy your favorite brand of contacts and get them delivered to your door every 30 days. Subscribe now and get 15% off your first month's box of contact lenses.
Goals:
A big part of this challenge was incentivizing a prospective customer to begin using the subscription service. To meet this goal, I included a discount deal. In addition, I used keywords such as "subscription, brand," and the (fake) company name. It was also important to phrase "contact lenses" many different ways.
.png)
Day 12
Scenario: A user is creating an account. When they come to the step where they are asked to enter their name, they get an error message. A fraud detection software thinks their name is fake—but it’s wrong 5% of the time.
Challenge: Write an error message that prompts them to fix the error without shaming them for having a fake-sounding name.
Character Limit: 45 characters max
.png)
Error Message Text
Unable to recognize name entered. Contact Us
Goals:
What I want to say: "Sorry, our fraud detection service flagged the name entered. Please check that it was entered correctly. If this was done in error, contact us." However, I needed to say all that in much fewer words. Oh character limits, why must you make me compromise...
Imagining how the Error Message would Appear
.png)
Day 13
Scenario: A short-haul truck driver has a phone app that monitors his route, schedule, fuel & deliveries.
He has 6 more deliveries before stopping for fuel and lunch. Due to unexpected traffic, he’s behind schedule.
He can choose to stay on his planned route for a few more stops, but risk running low on fuel and missing lunch, or he can get fuel and lunch now and finish the deliveries later.
Challenge: Write a push notification alerting him of this dilemma and options.
Headline: 30 characters max
Body: 45 characters max
Button(s): 25 characters max
Interestingly enough, based on my research, many mapping and delivery apps do not provide the reason for rerouting, and just do it automatically. This makes sense, as most drivers can't click and read on the road.
Push Notification Text
Headline: Behind Schedule due to Traffic
Body: Take new route to refuel and eat lunch now.
Button(s): Stay on Route / ReRoute
Goals:
I have to hope that this push notification is getting read aloud to the driver! I know that since the pandemic began, there has been a gigantic BOON to all sorts of delivery industries. I would hope that a notification like this would push the driver to take the safer option, but still know that the old route is there. I also included a timer bar that will automatically re-route and save the driver taps/make it safer to use.
Imagining how the Push Notification would Appear
.png)
.png)
Day 14
Scenario: a user is shopping using a price comparison app that boasts “real-time” pricing on items. As they are checking the price of an item, something goes wrong. The problem is unknown.
Challenge: write a message that informs the user that they cannot access the app right now. You cannot specify "why" the app doesn't work, you also want them to continue using the app.
Headline: 30 characters max
Body: 120 characters max
Button(s): 15 characters max
Error Text
Headline: Cleanup on Aisle 404
Body: This page is currently unavailable. We're working to fix the issue. You can refresh the page or check back later.
Button(s): Refresh
Goals:
It's worth noting that with the plethora of "Oopsie!" pages out there, the vast majority of them were pastel, cute, and encouraged users to refresh. I'm sure this is because presenting users with a soft illustration helps soften the blow of an unknown error. For my own practice, I decided to illustrate the error page, and tried to keep the illustration neutral yet playful.
Imagining the Error Screen
.png)
While most 404 screens I found were cute and simple, it would be important to make sure that the illustration matches the overall tone of the application. This wouldn't work for a price comparison app that appeals to serious or older users, but rather is more playful and casual.
