overview
VistaPrint empowers anyone to create their own die cut stickers from any image.
Die cut stickers create a custom cut around an image to give a unique, eye-catching outline.
The sticker editor gives users options to change size and cut line.
But not every cut line works for every image.
If the editor detects a cut line will remove part of the image, it automatically chooses a rectangular cut line and alerts the user.
Die cut sticker flow
A user uploads their image to begin designing their die cut sticker
Next, the user selects and uploads their image
Not all stickers When the editor changes the cutline, the user is presented with a bright red error message. And a lot of text.
A user uploads their image to begin designing their die cut sticker
Challenge
What's the best way to deliver this message?
Often a user can still get a custom cut-line. They just have to make one or two adjustments.
How can we alert the user without introducing more alarm than necessary?
It's not a big deal. And it shouldn't derail the user's progress.
What info does the user need to know?
Don't forget to transform technical/behind the scenes activities into simple, actionable language.
A screenshot of Shuli's annotations describing the error, questions and best practices for alerts.
Process
A short process for a small request
Step 1: Evaluate the current messaging
-
Document the user flow
-
Learn which inputs trigger the error
-
Identify the customer's next step
Step 2: Competitive Audit
-
Learn how the competition handles it
-
Document their flow
Step 3: Design and write
-
Identify the appropriate alert container
- Create a simple and clear message in 70 characters.
solution
put it all together
Custom cut-line will default to a rectangle, when the AI detects that a cut-line will omit part of the image.
I recommended a toast instead of the red error, describe your reasons
There are, in fact, two options our users have when they face this! two ways they can still get a die-cut sticker. we can encourage them to click.
Choose a medium or loose cut-line
Choose a smaller sticker size
Annotations
Notes on decisions
Paragraph!
results
subheading
Paragraph
in retrospect
subheading
Paragraph
