Picking apart the TechCrunch redesign with a user test
The recent redesign of TechCrunch caused a lot of noise among readers of the startup blog. Most of the critiques are similar to Youtube comments: almost all are unfounded, most contain a lot of grammatical errors; and some are blatant personal attacks. TechCrunch even provided a hatemail template to cater to users who seem to feel like “they’d woken up to discover that someone had crept in and rearranged the features of their wife’s face”.
A remote test asks people to give thought out feedback directly. This works better than listening to people shouting in an anonymous comment field. I get more control over the demographic make-up of the participants and in general come across less angry or, well, completely crazy people. You can also ask them specific questions, upping the quality of the feedback. I can also channel the feedback and quantify it, so I get a quick feel for how every design element is perceived. This way the nay-sayers won’t outscream the people who actually like some of the redesign. Onwards!
We made a test with a screenshot of the redesign, with three consecutive tasks attached:
- Click on the things that draw your attention the most.
- Click on the elements you like on this page.
- Mark the things that you think we should improve.
This way, we won’t only get the usual negative feedback, but also a feel for what grabs attention and is likeable about the design.
We asked our followers on Twitter to participate. Our followers are mostly clients, people that are interested in UX, designers and marketeers. Some of them are readers of TechCrunch, a lot of them are not. In total 137 people participated in the small test.
The heatmap of all three tasks combined showed that feedback was given on every element on the top of the site, while the lower regions got almost no attention.
I will review the feedback I got on the logo, the menu items, the advertisements, and the presentation of the articles.
The new logo got a lot of feedback. Pixelated and retro, it sure is an eye-catcher. Let’s have a look at the points people placed on the green monster for each task.
A whopping 56 percent of the participants clicked on the logo for the “attention” task. Of all participants, 50 percent says the logo needs to improve, while 19 percent likes it. They only two notes that are sticked to the logo state “it feels totally 80’s, but not really in a good way” and “#FAIL”, so we don’t have a lot in that department.
Points for improvement: A good logo is designed to fortify a brand, be memorable and original. That is not what this test is about. From a usability perspective however, it could be said the logo distracts the user from the surrounding navigation elements. To avoid this, the logo could be less prominent.
Unclear menu items
As you can see, TechCrunch opted for a main menu on top, and a second bar with ‘hot topics’ just beneath the logo. This distinction alone raised quite a bit confusion. Some notes from our participants relating to both menu’s:
- When I first saw these, I thought they were navigation rather than popular tags. The Hot Topics label isn’t different enough in color to register as a label.
- Second menu is unclear. Relation to top menu?
- Navigation a bit hard to notice.
- I have no idea what I’ll get from any of these menus. Why is ‘startups’ a menu item and not a ‘hot topic’?
- Make the navigation bar more apparent.
- The menu does not attract any attention.
The ad used in the test used the same colors and type as the top and bottom menu. Confusion ensued:
- Really thought this menu was part of the ad below. Took awhile to realize it wasn’t.
- This ad is confusing. Didn’t realize it was an ad at first.
- Looks like advertising (and maybe is). But if so, its too much connected to the menu.
- Completely missed this nav because it blends into the ad.
- Green gets lost with the big black banner.
The distribution of points further illustrate that something went wrong here: 2 percent of our participants found the bottom menu grabbed their attention and 33 percent of participants think it needs improvement. 7 percent of our participants placed a point on the top menu, with 39 percent of every participant thought it can do better.
The banner got totally butchered with a 54 percent attention and 45 percent dislike rate.
Points for improvement: The banner shown is probably one used in the old design, where the collision would not be as bad. TechCrunch needs to actively scan banners that will be placed in the menu area. Any excessive use of green and white text on a black background should be taboo. Furthermore, the ‘hot topics’ label can use more contrast, and the whole menubar can use more whitespace.
Below the menu area
Enough feedback to ponder about below the menu. The share button is up first: although it is liked by 21 percent and disliked by 27 percent, only 12 percent of our participants thought it demanded attention. One participant stated in a note that it “somehow feels disconnected from what I am sharing”.
The heading of the articles got the attention of half of our participants, and more of them like it than think it needs to be improved. We received a critical note though: “the longer titles [are] almost impossible to read. I just get tired before I get to the end”.
TechCrunch features a sidebar, with a tip button, advertisement, and a popular post list. The tip button and popular post heading look a lot alike, which led to remarks such as “Looks the same as the ‘popular post’ title”, and “I’m assuming this is a button, but it looks exactly like the headline below”.
Points for improvement: Because the share button does not follow a common design pattern, its succes rate needs to be tested over time to see if users will get the hang of it. The tip button is not recognizable as such, this can be resolved by making it look like the share button.
Redesigns of daily used sites follow a common pattern: a boatload of critique, followed by slow but steady adaptation. If you use something daily, a redesign feels like someone rearranged your desk—even if it is prettier or more efficient, it will feel uncomfortable sitting at it for a while. You can only really say it is overall successful after some time.
Some issues will be immediately apparent though, a faulty navigation being a big one of them. This test made clear the navigation is hard to understand and use. It also showed that a randomly picked banner can wreak havoc in the navigation of a site. I believe it is a bad location for a banner in general, but if TechCrunch really wants a banner there, it should scan them for too little contrast and test it with real users, like we did here.
The feedback we collected identified confusing elements. Some of the issues can be solved easily, like giving the ‘tip button’ a clear button design and reviewing the advertisements for contrast with the surrounding menu. I can also distill things to test later. The share button is a great example: will users be just as confused after the design is live for a few months? A test like this will give you the information needed to fix problems quickly and provide inspiration for tests in the (near) future.
Here comes the plug: please participate in this 5 minute test that we can use for our next case.