Welcome to the first episode of Userbrain’s UX Teardowns!
In this show we will be deconstructing user experiences of websites and web apps, through the power of user testing (also called usability testing).
Although not a new concept, user experience has seen a major rise in popularity these years.
But even with this rise, the field of UX is still lagging waaaay behind with adapting tools like user testing to validate assumptions and improve designs.
USER TESTING ECOMMERCE SITES: Find out why people abandon their carts or leave without converting by using this tasks. Learn more
The goal of user testing is to determine if the design you created will enable a user to complete tasks quickly, efficiently, and without errors. Or simply put, it shows you if the user experience you designed is intuitive.
The benefit of being exposed to user behavior, on any site or app, is that you learn about human psychology, human behavior patterns, and Why people do what they do.
Although simple in its nature, user testing is always useful and insightful, but can provide different quality of feedback depending on what you decide to test, the tasks and scenarios you write and how you formulate them. And it doesn’t stop there, because watching users feedback also requires you to be an avid observer and notice the small details and nuances of user behavior.
That’s why we created the UX Teardowns.
The goal of the show, besides showing you how funny test videos can be, is:
- to show you how to get quality feedback by writing good tasks and scenarios,
- to show you how to analyze the feedback you get and what to pay attention to,
- to show you how subtle clues help you understand user behavior,
- and how to decide on the steps to take for improvement.
Well, now it’s time to dive right into it …
1. What are we testing?
To show that user testing always works, even if you’re testing with someone who is not in your target audience, we decided to test brayola.com.
Brayola is the first & only marketplace for women’s intimate apparel, partnering with top brands & indie designers, using technology, data & community to provide a personalized way to shop for lingerie online for each and every woman.
— Angel List
Just to state the obvious, it’s a website for buying bras 🙂
And we decided to test it with a male user to show you that user targeting is not really important most of the time.
“The best-kept secret of usability testing is the extent to which it doesn’t much matter who you test. For most sites, all you really need are people who have used the Web enough to know the basics.”
— Steve Krug, Usability guru and author of Don’t Make Me Think
If you want, you can read the comments on Designer News to better understand what we mean by that.
2. Come up with tasks
Our first step is to decide what to test and to come up with a set of tasks.
And since brayola.com is an e-commerce site, the tasks are pretty obvious:
- Find a product
- Buy this product
I know, it’s almost embarrassing, but that’s actually how easy it is to come up with tasks for user testing.
But the real magic happens in the next step when you turn the tasks into a scenario!
3. Turn tasks into a scenario
We can’t just give our tasks to someone and expect valuable insights from testing.
We have to provide some real motivation and a clear goal for our users to accomplish.
Since we already decided to test this site with a male tester, the first thing is to set the context so it’s a realistic scenario for someone who never thought of purchasing a bra before (but notice that the scenario would still work for women being familiar with buying bras):
Imagine you're looking for a birthday present for a friend. She's a runner and since she said that she's still looking for a sports bra, you figured that this might be a nice present for her.
After having set the context for the test, it’s time to include all the necessary information to complete the task.
In our case, a favorite brand, the size, and a maximum price for the bra:
You found out she wears a size M, and her favorite brand is Women's Secret. With this information go ahead and try to find a bra you think your friend would like for less than $60.
Once we’re done with the basic scenario, we include some additional information for unmoderated remote usability testing (moderated is when you observe the test while the user is doing it), like telling testers how far to go and what kind of information to use:
If you find one you can continue on with your purchase. You can use fake data and stop before entering any credit card information.
And once that’s done, we just copy the scenario, paste it into Userbrain‘s Dashboard, and wait for our video to be delivered.
4. Analyzing the test
Let’s begin with our user’s first impression and see what he gets from looking at the site:
His first impression that the design looks good and modern is great to hear.
If you watch many of these videos, you’ll know that this is not always the case, and that’s why I’m pointing it out as a positive finding.
Notice how he uses the mouse cursor to aid his reading, people do that all the time. Mouse movements are often directly related to what people are looking at on the screen.
Mouse tracking analytics follows the mouse movements of an internet user to simulate eye movement on a webpage. Over the last few years, mouse tracking has greatly matured, developing features and achieving accuracy that make it a credible alternative to eye tracking. – Clicktale
After the first impression you can notice his slight confusion about the menu item “FIT OR NOT”. He doesn’t care too much about it, but if it is an important feature, I suggest including it in the scenario and making sure users go and explore it in upcoming tests.
He seems to like the way everything is laid out and gets what the site is all about without even going below the fold.
He even hovers over the “See how Brayola works!” button but feels no need to click it.
After about a minute of exploring the homepage, our user starts looking for a sports bra:
It’s obvious that he had expected some way of filtering the bras, or at least some categories to find the ones he’s looking for. If you follow his mouse movements, you can see where he expects to find the filters.
If many testers go to the same place to look for something, that’s usually a good place to put it because you see people intuitively going there. A user experience should always be intuitive. That’s good usability.
At this point his experience starts suffering a bit from the lack of possibilities to narrow down the products.
It’s not a big problem, but if your goal is to create intuitive and delightful user experiences, these are exactly the points where your improvements can have a huge impact on how people feel.
However, our user can’t find any filtering options and decides to click on “Bras” in the sub menu:
He’s still looking for some filtering options or categories and hopes there will be different styles underneath the headline “Shop Our Best Selling Bra Styles”.
You can hear his disappointment when he realizes the page is still loading.
You’ll also notice that he’s very forgiving about this issue and just continues on to see the sports bras.
But don’t forget, our users are paid to use the site, and your customers are usually on your site because they want to be there. And ideally they will make a purchase. In this case their tolerance for this slow page load might be lower.
That’s why we suggest to have a look at your page loading times and optimize them. This is also important for SEO reasons as much as it is for the user experience.
Anyway, let’s move on to sports bras now:
Again, the first thing he wanted were filters. But since the site doesn’t provide him with a way to filter the bras, he opens the sorting option.
Notice that he hovers over the “Price Low to High” but he doesn’t click it. You hear him click away on a blank part of the page.
While in theory the sorting option is a good thing (you’ll find it on almost every e-commerce site), it’s not necessarily the right tool to get the job done.
If your goal is to find a specific kind of product, within a certain price range, or better said—you have two parameters you want to filter by, sorting will not suffice. And as you can see from his behavior, web users expect these filtering options.
The interesting thing about the missing filters is this:
When I pilot-tested the website, I clicked on the “Get started now” call-to-action on the homepage.
First I had to provide some information about the bra I’m usually wearing (don’t worry, I had female assistance with this 😉 ) and then I signed up on the fly. After I was registered, the site did actually provide me with filtering options:
I have to say that we don’t know the folks at Brayola, and I’m sure they have a reason why they provide their filters only for users who sign up.
The current page layout, with both the call-to-action “Get started now” and the images below, might result, like in this case, in first time users not clicking the CTA and just going straight into exploring the product images.
Note that the reason for our tester not clicking the CTA could also be in the button copy. This is something that you could also test, with an A/B test.
So, one option for improvement could be to leave only the CTA on the page and guide people to click it by not giving them any other choice.
Or maybe to show the filters even to first time visitors so they can use them as well.
This all depends on your strategy.
Let’s move on with the next clip:
As you’ve already noticed in the previous clip, he is a bit confused about the varying prices. But before we dive into this, did you notice the pop up?
People usually don’t like pop ups (and having watched hundreds of these videos, I can confirm this statement).
This user doesn’t seem to care about the pop up, he just closes it as soon as possible. He didn’t wait for it to load.
And now I’m wondering if he would have closed it if he saw the actual content of the pop up, which offers a pretty neat deal—5% off if you sign up to the newsletter.
The pop up appeared on the product page, which seems to be legit place for such an offer.
Again, I suggest looking at how to optimize the page loading time to make sure the user is not only flashed by a huge circle, but by a huge offer.
Now back to the varying prices and choosing sizes …
It’s funny to hear him sigh loudly while struggling to get a grip on bra sizes 😀
And also listen to his reaction when he realizes the price depends on the size of the bra.
Even though it’s funny, it seems that the varying prices are a bit unjustified to him when he considers the costs of the bra. While this small detail might not turn off a potential customer, it could leave the wrong impression.
But let’s move on with our test:
He’s having a hard time finding a bra in size M.
He finds the size chart and hopes it helps him, but discards it as unhelpful after a couple of seconds.
We didn’t intend to give our user troubles finding a bra, but when I pilot-tested the website and signed up to it, I chose M as a size option from this dropdown list:
And since I have no idea about bras (just like our tester), I thought searching for a size M would make things easier. It’s now obvious that I was wrong about that.
In the spirit of Bob Ross, let’s just call it a happy accident. Happy because we discovered an issue that you wouldn’t usually find.
To be honest, I don’t really know how to improve the size chart, since it seems that every brand provided their own.
If you have any ideas for improvement, do share in the comments, because as I’ve said, I have no idea about bras 🙂
Now on to the checkout process:
He likes the checkout process. This part usually causes some use frustration if the process isn’t designed correctly.
Spending some time fine tuning your checkout process and it’s user experience will reward you with happier customers and more sales, so it’s more than worth your time!
And now our tester was kind enough to give us a recap of his experience so let’s hear him out:
As you can see, our tester had an overall good experience!
This one test is not necessarily a measure for a typical user’s experience; a woman testing the site will probably not have any problems with the sizes.
But then again, the missing filters will be a big letdown for every visitor.
All in all brayola.com is a great website and they are doing many things right.
But even if the site is really good, it wouldn’t be a real UX teardown if we didn’t have some suggestions for improvement 🙂
5. Suggestions for improvement
Provide filter options to all users. Maybe this is an intentional decision. But I’m curious about why people who sign up don’t get any filters to narrow down their search, and I think you could increase the number of signups and purchases if you include this option for everyone.
Optimize your page loading speed. The user experience suffered at least two times from the slow page loading speed. First, when the bra styles did not appear and second, when the content of the pop up didn’t load.
Make the size chart as useful as possible. Most women will know their waist and cup size and have no need for the size chart. But men buying a bra as a present, and maybe even younger women buying their first bra, would benefit from a well designed size chart. Maybe it could one day be good enough for me to be able to buy a bra for my girlfriend without having to dig in her drawer first.
Anyways, that’s it!
This was our first UX Teardown. We hope you enjoyed it 🙂
BTW: If you want to test your own website, and learn how to come up with tasks, how to write scenarios, and how to analyze your data, you should really use the form below and sign up to get our upcoming UX Teardowns by email.
You will also receive our interactive and goodie packed email course called The Journey to Automated User Testing. It’s a different kind of email course, based on the Hero’s Journey, and we had a lot of fun creating it. So join the adventure!
