GuerillaBox

Error Messages

Project overview

GuerillaBox was presented as a new service that centralizes a person’s or business’s communication channels with their customers. This includes SMS, emails, WhatsApp messages, Intercom on site messages, Facebook/Instagram messenger, and more, all in one place. Each channel is referred to as a box; hence, GuerillaBox.

Context

This was an exercise I did for UX Writing Hub.

Goals

  • Design error messages for the signup form
  • Design an error message for when a user takes an action that requires a higher tier plan

What I did

  • Wireframe screens
  • Copy
  • Rough visual design concept

We were given the following brand voice guidelines and scenarios to work with.

Brand voice guidelines

GuerillaBox’s voice is that of an experienced and compassionate business partner. We use a conversational voice and play with language to bring joy to the workplace. We are plainspoken, genuine, and a bit quirky. We prefer subtle, dry humor.

Given the name of the company is "GuerillaBox," I decided to utilize some slightly ‘military’ terminology to push the identity a bit further. Regarding tone, we're talking about error messages, so primarily I wanted language to be informative. However, I thought it didn't hurt to have a little subtle, quirkiness without overdoing it.

Scenario 1

"GuerillaBox needs five error messages for their signup screen. The error messages should be no more than 100 characters."

  • Invalid email
  • Email already exists
  • Invalid password (passwords must be a least eight characters long and contain at least one number)
  • Invalid username. (usernames can only contain letters and numbers)
  • Username already exists
Form design

A rudimentary wireframe was provided. I took note of it and designed a new screen that was more up-to-date with best practices around forms.

Provided wireframe
  • Suggested title— "Meet GuerillaBox".
  • Suggested description— "Seamlessly integrate your customer communication channels: Facebook, Instagram, WhatsApp and more -- all in one place."
  • Suggested CTA text— "Sign up"
Updated wireframe
  • New title— "Join GuerillaBox!".
    Conveying excitement. You're part of a movement here.
  • New description— "Your new communication command center is waiting for you. Manage your favorite channels from a single hub."
    Incorporating some slightly ‘military’ terminology to go with the ‘Guerilla’ theme. but keeping it plainspoken and genuine
  • New CTA text— "Let's go!"
    Staying consistent with the theme. Enthusiasm!
  • To keep in line with best practices, I went without placeholder text within the form field in favor of hint text under the label to assist with error prevention.
  • I also added a sign in link for those with an account, and a terms and conditions link at the bottom as it's very common to see.
The logo

It wasn't required, but I thought it would be helpful to add some brand personality. With the help of Midjourney, I whipped up something suitable as a concept.

What Midjourney did
/image: prompt
  • a logo for a tech company featuring a gorilla and a box. The gorilla has friendly eyes, a big smile and slightly resembles donkey kong. There is a simple logo on the front of the box incorporating the letters g and b. Show just the gorilla's head.
Error state 1— Invalid email
Rationale
  • Slightly quirky, dry humor. Somewhat military theme. I considered “That email seems to have gone rogue”, but that seemed less clear about what caused the issue.
Error state 2— Email already exists
Rationale
  • Staying with the theme. You are joining the ranks. Considered “That email's already in the field," or "That email's already done a tour." I thought those might be too much.
  • Also giving clear direction on what to do. Providing a link to sign in right in the message as well as under the CTA.
Alternative
Dialog
  • Instead of the error message, another idea could be to automatically open a dialog to sign in with the email filled in.
Sign in screen
  • The sign in page is pretty standard. There is sometimes a debate between using "sign in" vs. "log in". My opinion is that "sign in" works better if doesn't sit alongside "sign up". Not an issue here.
Error state 3— Invalid password
Rationale
  • Staying with the slightly ‘military’ theme.
  • Clearly stating what's needed to "join the ranks."
Alternative
Rationale
  • Another idea might be to list the requirements and validate them either after the CTA is clicked or even as the user types. Real-time feedback could prevent the errors in the first place if they skimmed over the helper text.
Error state 4— Invalid username
Rationale
  • Informative with the right amount of quirky. "No offense to those special characters."
Error state 5— Username already exists
Rationale
  • Keeping it on theme, using consistent language. Repeating the pattern from the when the email already exists. The same dialog alternative would be viable here.

Scenario 2

"GuerillaBox gives users up to three boxes on the free plan. (Remember, communication channels are called ‘boxes’ at GuerillaBox.) When a user on the free plan has three boxes in use and tries to add a fourth, they get a pop-up/error message explaining that they’ve used all of their boxes on the free plan."
Points to consider
  • Paying users can have unlimited boxes
  • Premium accounts start at only $10 a month and GuerillaBox offers a 14-day free trial of its premium account
The solution
Rationale
  • I chose to put a text label on the close action in the dialog for accessibility.
  • Using the headline in question form. I tried "Looks like you're ready for the next level" which seemed too wordy and "You're ready for the next level" which seemed too presumptuous. I like the question form, empowering the user.  "Next level" sounds complementary. It means you’ve mastered this.
  • The paragraph copy states the scenario. You’re at your limit with the current plan. Slightly military language with "Get mobilized..."
  • A separate line gives important details, sure to be on the user's mind. How much is it after the trial? When can I cancel?
  • I used a side-by-side comparison to show a clear value prop for the premium plan with a list of benefits.
  • The "current" chip is there to ground the user on what they have now and what the limitations are.
  • A line under the plan names helps give context for comparison.
  • Including a link out to more information if desired. Standard "Learn more."
  • Button text clearly states options.

← Back to projects

Let's work together! Say hello.

© 2023 Justin Billmeier
LinkedInEmailResume