Daily UX Writing Challenge
Role
UX writer and designer
Duration
1 week
October 2022
Tools
Adobe XD, Unsplash, Blush.Design, Canva, WebAim Contrast Checker
Deliverables
UX writing content, Mockups for mobile (and sometimes web), daily reflections/rationale
Overview:
To gain additional experience with UX writing (as well as design), I undertook a week-long UX writing challenge using daily prompts provided by dailyuxwriting.com. The prompts span a variety of purposes, from error messages and promotional screens, to in-app guidance and alerts/notifications. As I worked, I paid close attention to the details of the prompts themselves, the constraints regarding character count, and the provided information about the user. I also completed daily reflections for each challenge where I shared my rationale. Along the way, I tried my best to complete each challenge’s written content within the suggested 10 minute time-frame, and limited myself to 1 hour for accompanying designs/UI.
Day 1:
Canceled Flight Notification
Prompt
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
Button(s): 25 characters max
Rationale
I knew immediately that I wanted to model my mockup off of an existing airline app, American Airlines, so that it would look more realistic. I opened the app, determined the Hex code for the bottom menu, and began recreating the bones of the screen in Adobe XD.
Content-wise, I wanted the message to be simple and to-the-point, with little room for confusion. I included the user’s flight number and destinations, and indicated that the flight was canceled. To me, it did not seem necessary to include the reason for the cancelation, as that is not generally something that is communicated to travelers. For example, if the flight had been canceled due to mechanical issues with the plane itself, the user/customer would not be notified.
Knowing the user would likely be seated at their gate when they receive this message, I prompted the user to speak with an airlines representative, while also giving them agency to be their own problem-solver by including two user paths: one to explore alternative flights, the other to explore nearby hotels in the event that the next flight would be hours away.
I used a grid to ensure that all buttons are clickable, and all colors are WCAG compliant. Text descriptors on the bottom menu increase accessibility and reflect the existing nature of the American Airlines app. At the top of the alert, I included a small, simple image of a plane landing to further communicate the message to the user.
Day 2:
Promotional Screen for Sports App
Prompt
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(s): 25 characters max
Rationale
In order to get started with this prompt, I looked up some examples of promotional screens on Dribbble. This helped me gain a better sense of the assignment. I noticed common themes like: clear branding, large featured images, minimal text, and usually only 1 or 2 potential user paths.
For inspiration, I browsed Unsplash and was drawn to this photo of a baseball on the ground. Knowing that my user is a busy, working parent, I quickly began to picture a woman carrying around a day’s-worth of work – a computer, a briefcase, several hangers-worth of dry-cleaned items, a mop, keys, the trash, a stowaway stuffed animal, tennis shoes to wear on the train, and a baseball. In this scenario, it seemed likely that this user could quite literally, as well as figuratively, “drop the ball” on certain tasks, including checking in on her team’s stats. Of course, that phrase naturally calls back to a variety of sports ranging from tennis to football.
The title of the app didn’t take long to envision – GameStitch, like the stitches on a baseball or football, connects the user with pertinent information about their beloved teams. I used an eyedropper tool on the grass to grab the colors for the app icon, and browsed typefaces via the Adobe Fonts website. All text and colors are WCAG compliant. I kept the text clear and bullet-pointed so that the user’s primary focal points would be the baseball, the app icon, and the Sign Up call-to-action button on mobile.
Day 3:
Email Error Message
Prompt
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
Rationale
For this challenge, I decided to create an error message for an app I previously designed for a Case Study, “Sub In.” I looked at examples of similar error messages to have a better frame of reference, then tested various shades of red using the WebAim Contrast Checker tool.
Up until this challenge, I hadn’t had too much trouble with the character limit. I felt really confident that my first draft was direct, clear, and sympathetic to the user (“We don’t recognize this email. Please try again.”) but it was 8 characters over the limit. I had to rethink which words and punctuation marks carried the greatest value, and determined that I needed to remove “please,” and connect the two sentences with a semicolon.
Rather than crowd the page, I decided to reserve any “account reset” options for a separate user path. To access these options, the user would select “Forgot your password?” and be taken to a separate page within the app.
Day 4:
Grocery Delivery Promotional Screen
Prompt
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
Rationale
Thanks to the challenge’s description of the user and their stated purpose for opening the grocery app (“to see what’s on sale,”), I knew that the heading for this promo screen needed to specifically reference saving money. This would hook the user and prompt them to continue reading. I chose to clearly list out the benefits of the grocery delivery program, where I further emphasize finding coupons and accessing ongoing sales. I gave the user two paths: one path to learn more about the delivery program, and the other to directly sign up.
Day 5:
App Message After Phone Crash
Prompt
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
When I read that the user’s phone crashed while working on a design, I imagined the frustration they must be feeling. I knew that I could draw on my teaching experience to create great microcopy, and thought back to some of my often-used phrases in the education sphere that might help express empathy for the user.
Sometimes in the classroom, certain students would become upset when there were sudden changes, disagreements with peers, or upsets in their day, and they would need my guidance to help them process that frustration out loud. The phrase “unexpected” came to mind – for example, “wow, that was so unexpected! Do you want to talk about it with me?” I knew a similar approach would help the user in this scenario process their own frustration about the app closing suddenly.
Once I acknowledged the user’s experience, I wanted to comfort and assure them that their recent project had been auto-saved, while also adding in a user path in case they had any issue accessing their work. The graphic came from Blush.Design and determined the color palette, and I relied on WCAG standards to choose the most accessible color for the call-to-action button.
Rationale
Day 6:
Road Closure Phone Alert
Prompt
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
Rationale
When I saw the character limit for this prompt, I knew it would be a bit more of a challenge. I made a poor judgement call and jumped right into drafting various alert messages without deeply thinking through the user’s experience. In retrospect, this resulted in a first draft that was both too wordy, and not clear enough in terms of threat level:
Draft 1:
Road Closure Alert
Fire located nearby in Rogers Park. Expect delays and detours.
After a few iterations, I seemed to be stuck on communicating details rather than putting myself in the user’s shoes. At this point, I pivoted and spent more time thinking through the user’s experience.
When the user first enters their car, their main goal is to get to work on time, likely by taking their usual route. Upon plugging in their phone and beginning their trip, they are confronted with new information via a phone alert. Because the user is driving and their attention is divided, I knew that the heading needed to be short and sweet, as well as clear regarding the threat level. As the user continues reading, they learn that this fire is causing road closures and that their usual route to work may be impacted. I also provided a “Learn More” user path in the event that the driver decides to pull over and further assess the situation.
Ultimately, this was a great exercise regarding the importance of prioritizing information, writing concise microcopy with the user’s needs in mind, and adjusting quickly when change is needed.
Day 7:
Sports Update Notification
Prompt
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
Rationale
I am not personally a big sports fan, so to get started, I looked up some old baseball stats to see how they are typically worded and formatted. I ended up choosing a specific baseball game (Cubs v. Cincinnati Reds) from September 20, 2016 to model my text after. The character limit helped guide my work, allowing me to devote the headline to the game’s score, and utilize the body for more specific details about the players and actions involved. This ultimately benefits the user – the most important information (the score) comes first, followed by more specific details in the body. Because the user is busy at a wedding, the notification is designed to pop up on their phone, and I included a logo of their team as the main icon to grab the user’s attention.