In 2008 Stylight started as an online fashion aggregator, a portal to buy clothing and accessories from other online retailers. Since then, Stylight has become the fastest growing digital lifestyle magazine in Germany and Europe’s leading fashion aggregator. In 2015 our logo and corporate identity felt outdated and no longer reflected who we were. We wanted something more mature, something that says “fashion”, and so we worked together with the London office of Code & Theory on a company-wide rebranding process to introduce a new logo and corporate identity.
In order to keep the design consistent throughout the whole website, we needed to update the corporate identity (CI) on the shopping pages as well.
We changed the font and the colours according to the new CI; we introduced rounded edges for buttons and sale labels, and also light shadows around each product box. We removed the vertical line between the product display area and the content on the right column, and also removed the social media sharing buttons. All in all, the page looks cleaner. For the joy of use we even added a mini animation: on rolling over a picture of a product, it now appears slightly bigger.
Stylight.de shopping page: BEFORE
Stylight.de shopping page: AFTER
As you can see in the screenshots, the changes were subtle and as a result there were only very small differences here and there. It was not something you would notice right away and make you go “wow”. So it should be safe to just implement it and roll it out, right?
Wrong.
Yes, the changes were subtle. Yes, one might argue that it is just a matter of taste, whether users would like the new CI or not, and therefore it is more or less irrelevant. But even subtle changes could affect the whole experience of your website – in a good or a bad way. Changing the font in particular might affect the readability and thus cause usability issues.
Sanity Check
So, to be on the safe side, we did a quick sanity check. A sanity check is usually done in software development, to see whether a product is going in the complete wrong direction. The point of a sanity check is to rule out any obviously false results (“nobody understands the purpose of this product and they think it’s meaningless”), not to catch every possible error.
The sanity check was done within a regular user test with five participants, where we also checked other features of our website. That way we did not waste any time and resources for an extra sanity check.
The participants were shown the website with the old and the new CI (each person in a different order). Then they were asked which one was visually more appealing and made them want to explore the website further. We also observed whether there were any issues that made the website less usable with the new CI compared to the old CI.
Illustration: userbrain.net
The results looked very promising; the new CI was perceived as much more appealing by all participants. There were also no usability issues detected. So surely now we can implement and roll it out, right?
A/B Test
There is a saying in German, “Vertrauen ist gut, Kontrolle ist besser!” (trust is a good thing, but control is a better one)–it’s better to be safe than sorry. Though we had very good responses, the sanity check was based on only five test participants. While this is enough for catching most of usability issues on a website, when it comes to the users’ opinion, it cannot replace a quantitative test.
Before rolling the new CI out, we needed to make sure that it would not have negative impact on our conversion rate. So, just like other updates on the website, we conducted an A/B test to check the new CI.
The result was unexpectedly puzzling, since there was a difference between our organic and paid traffic. We had a think about what could cause the difference, and decided to remove the mini hover animation, which might annoy users who just want to browse our shopping page very quickly. During the process, we found out that though we were already displaying the new font, the old font was still loaded in the background. So we removed this, too, and thus made the page load faster. After these changes we did another A/B test and this time the result was fine.
Our User Test’s Learning
Being a customer-oriented company, Stylight is used to conducting user tests within the product development process. So it was only natural that we also did it for other projects, such as rebranding our website. As you can see, no matter how subtle the change is, or how small the feature is, there might still be something that could annoy the users. Also, there might be something that you overlooked, and you might have never realised if you didn’t do any user testing.
That is why it never hurts to double check any updates of your website with the users, qualitatively and quantitatively. And if you decide to integrate user testing into your company’s DNA, it’s no extra effort, so give it a go!
|By Alexandra Trisnayuda – UX Researcher|
Home page picture source: http://blog.testbirds.com/
