Error messages & alerts
Words to live by for any UX writer or designer: good UX happens when the user doesn't even realize it. I believe this to be especially true when dealing with error messages and alerts. If it's something minor, you can have some room to play. If the error is serious, the user doesn't normally care how clever you can be. They just want to know what happened and what they can do to fix it.
Signing up for a new service
Challenge
GuerillaBox is a fictional application that centralizes communication channels of businesses with their customers. SMS, emails, WhatsApp, Intercom on site messages, Facebook/Instagram, etc. all in one place. Each channel is referred to as a box.
The first challenge is to write error messages for the following five occurrences and explain what triggers each message with the rationale behind my design and copy choices.
Signup screen error messages:
- Invalid email
- Email already exists
- Invalid password (passwords must be at least 8 characters long and contain at least one number)
- Invalid username
- Username already exists
Approach
In order to deliver the requirements needed for signup while remaining true to the product's voice, I needed to create copy that was playful but direct.
Solution
The microcopy for the field suggestions is direct and helpful. The error messages continue that trend while presenting a playful and punny voice and cheeky tone with references to pop culture.
Alert to upgrade
Challenge
Once GuerillaBox users utilize three boxes (aka communication channels), they must upgrade to the premium plan to add any more. The challenge is to present the information in a pop-up that explains that this upgrade is required in order to add a fourth box.
Approach
We need to keep in mind that when a user goes to add a fourth box, it most likely means they are enjoying the service and will likely be disappointed when seeing the request to upgrade to the paid service. We want to present the information as a helpful reminder while not being too forceful.
Solution
The final copy puts emphasis on the H1, bold text to clearly tell the user what they need to do to achieve the desired results, and an Upgrade button that offers more information. It also delivers peace of mind in the free trial option while reassuring the user they don't need to submit their credit card information.
Designing this popup was heavily influenced by F-pattern theory which reminds us to guide the user's eye to pertinent information without being overly wordy.
