Welcome to the UX Rundown. In this series, we share quick, actionable UX breakdowns of real apps and websites – spot what works, what doesn’t, and learn how to apply it to your own designs.
Discover how small UX design changes can have massive impact on customer satisfaction. This UX case study breaks down a real usability issue with Zazzle's T-shirt design tool, and shows you how to identify and fix critical user experience problems using lightweight research methods.
What you'll learn in this UX tutorial:
How to identify hidden UX problems that lead to customer disappointment.
Simple usability testing methods that take under an hour to complete.
How to design effective error messages that prevent user mistakes.
The essential elements of good error communication: visibility, clarity, and actionable solutions.
Why small design details can make or break the customer experience.
We'll examine how users miss critical design errors, analyze why Zazzle's current interface fails to prevent costly mistakes, and demonstrate step-by-step how quick usability testing revealed the problem and validated an improved solution. Perfect for UX designers, product managers, and anyone looking to prevent user frustration through better design.
Chapters:
0:00 - Introduction: Why error prevention matters in UX design
0:57 - The problem: Text getting cut off outside printable areas
2:25 - Testing the current design: do users notice the error?
3:27 - Designing an improved error message
4:17 - Testing the solution: 90% improvement in error detection
5:16 - Key principles for effective error messages and lightweight UX research
Transcript
I'm Joe Formica and this is the UX Rundown. In each episode, we're taking a look at real apps, websites, and features to see what's working and what's not. I'll highlight examples of great user experiences and for the frustrating, confusing, not so great ones. I'll show you how I'd improve them. Either way, you'll get some clear actionable takeaways that you can use to do better research, design better products, and create a smoother experience for your users.
Today we're diving into one of the most popular online platforms or custom printed gear. You can use it to create everything from mugs to mouse pads, and in today's example, T-shirts. We're gonna zoom in on one specific part of the T-shirt design process and take a closer look at a seemingly small design detail that I think could have a big impact on user experience, and more importantly, how happy they are with the T-shirts that arrive at their doorstep.
Let's start by talking about errors in general. As product designers, our ability to help quickly resolve things that go wrong and also steer users away from mistakes is one of the most important ingredients to a great user experience. It could be as simple as helping the user avoid or fix something that they didn't mean to do, like deleting a file they wanted to keep.
So let's get back to the T-shirts. I was designing this beautiful t-shirt and since I loved the graphics so much, I wanted to scale it up, make it nice and big and bold across the front of the T-shirt. Ironically, what I didn't realize was that a little bit of the text was being cut off outside of the printable area.
Now, I didn't notice this right away, and it definitely didn't impact my experience in the design tool. I was actually having a lot of fun with it. But imagine that I placed an order to get these T-shirts for everyone on my design team, and then finally when they arrived, opened them up to see that some of the letters were cut off.
Probably pretty disappointing and definitely not the best look for the world's best designer. Quick editor's note after recording this video, I was playing around on the site and I saw that on a few of the products, namely embroidered hats, there actually was some sort of error message or warning. I'm not sure if there's a reason why they include this on some products and not others, but it was good to see that it was something that they had considered and was at least present in other parts of the experience.
So let's get into how I would improve it. First thing that I wanted to see was if I was the only one who missed this. I set up a ten second test on Lyssna showing a screenshot of the T-shirt design and the text being stretched outside of the printable area. Participants would see this screen for 10 seconds and then be asked to recall what, if anything, looked off about the design.
I kept this study really simple. I didn't use a huge sample size. There are definitely other ways that you could test this out, but I thought it was a good way to quickly evaluate the essential aspects of a good error message. Do people notice the issue? Do they understand it, and do they know what to do next to fix it?
I launched the test in Lyssna, and when the results came back in, I saw that only two people caught the error. Even with a small sample size, it was enough to tell me that one, the error and the text getting cut off was not obvious enough. Two that I probably was not the first person to make this mistake.
Next, I wanted to move on to designing and testing an updated and hopefully improved version of the screen. So I did a mockup with a simple design that incorporated best practices for an error message. First, I wanted to make it noticeable that the design was out of the print area, so I made the bounding box red and also used red for the little notification.
Second, I wanted the message to be clear, easy to understand, and straightforward. No technical jargon or confusing language. I kept it super simple. Your text is outside of the print area and may it cut off. Finally, I wanted to add some clear options or actions for the user to take. I added a button to resize the design and also a button to ignore in case the user was aware of it and just wanted to roam around and keep designing freely.
I ran the exact same study on Lyssna, this time with the updated screen. The results were a huge improvement. 90% of participants caught the issue and were able to describe it just from seeing that screen for a quick ten second window. This whole process of testing, redesigning, and retesting took under an hour.
And while it might seem like a small, maybe insignificant design tweak, I think what we did here could have a huge impact. Not just on the process of designing or customizing something, but more importantly with customers satisfaction and how happy they are with that end product. To be clear, the solution that I created is not a perfect one.
I'm sure there are other things to consider and definitely other things we could test and [00:05:00] improve to make it work. But I do think it's a good example of one, how some of these small design changes can have a bigger impact than you would expect. Two, how a little research can help you identify and fix some of those areas that might be leading to a negative experience.
Research often gets characterized as time consuming, expensive, vague, and something that may or may not lead to real product improvements. But I hope through this example, that some lightweight, simple testing can actually go a really long way and have a huge impact on your product. Thanks for watching this breakdown, and I hope you enjoyed it.
If you've got examples of great or not so great apps, websites, or features that you want me to check out, break down, and hopefully improve, drop them in the comments. See you next time.
