It’s somewhere half October, after having been through our (weekly) design meeting about some kind of new software package that would let us make awesome mockups, Johan drops the question of the year.
“How are the menus doing by the way?”.
This question was kind of inspired by Magnus Engström’s new invention.
Magnus is the data-whizz-guy in our office. He and I had done a series of scroll tests earlier were we checked the position of specific elements in the screen instead of how far people scrolled. He had taken this a level further and created a technique where we could see what people were clicking on to get to other pages in the site and embedded that invention in our current GO based analytics system. (We do not link actual user names and details with their clicks or metrics in general by the way)
Long story short, we had new fireworks and Johan found the sweet spot to test it.
The red route in a user journey
But what was the idea and target for this whole thing apart from that new fancy firework? Well to answer that we have to dive into “Red Routing” for a second.
Some years ago cars weren’t a thing yet. A lot of cities were built for horse carts and yeah, people with legs obviously. With the invention of cars all of that changed. But how do you get people to not jam up without blasting the city to the ground? strict traffic! London came up with the idea to invent red routes. The routes were built to get people from obvious position number one to obvious position number two. Everything between these two locations would have to be clean. No parking on the road, no traffic going against them on smaller roads, etc.
So you have the current position of say a user and the place that user wants to go.
Say a father with his kids drive from their home to the shopping mall to do some grocery shopping. On the way to the mall you got obvious signs pointing out where the mall is. While dad drives the kids look out of the window and see billboards. That new ice cream thing must be really good and there seems to be a store for it right in the middle of the mall. The family arrives in the mall after an easy drive over predefined paths. Dad goes shopping and since he can’t really walk past the ice place anymore they go for an ice cream.
So what do we see here? An easy route from A to B and a nice bonus in the end (for a small fee).
Can this be reflected on the site? Sure!
A sport user would like to know the sport scores of last evening while he’s doing his breakfast, a local politician is looking for some inspiration in the morning and goes hunting for some opinion news. Or that one user is looking for some nice weather updates to have a nice thing to say during his first Swedish fika (to my Swedish friends: fikas are awesome).
But what about those ice creams along the road? Well maybe our target for a user is to not only view news, but also advertise our premium plan that allows reading extra stories and so much more (I have to advertise here of course).
Back to the research here. One of our user’s defined targets is to read topics of his or her interest.
So what did our menu look like? Well, we had this small bar on top of the page that had a fancy hamburger on the side that said menu and two other buttons leading to other drop-downs.
But what did that research say about the usage of this menu?
oh boy there we go…
Let’s take OP.se in this example. In our testing period the site was visited by 227.846 unique users, generating about 90.236 page views. Of this amount a total of 19.158 unique users together clicked the menu 90.236 times. Sure that’s a lot of clicks. But not that many unique users.
Further research revealed that most of these users were either going to the “All news” or “Sport” section. Things you would specifically look for. Other items on the menu were decaying away and doing that hard.
Meanwhile the user menu was more or less ready for a holiday with only 7.079 unique visitors clicking 20.111 times. This menu is super important as it contains the login buttons and our way to offer premium content.
At one point Anders Trapp walked into our conversations about the menu, he provided some details that showed that since MittMedia had started implementing its own design for the site, use of subsections had stagnated horribly as we crunched the numbers. The old menu so the one before the hamburger thing was a horizontal one… but keep that in mind for later.
Send in stuff
Let’s get sidetracked again for a second. Because that header section contains more than just menu items to sections. There is also a “Tipsa oss” button. In one of the other research projects that we ran it became apparent that a lot of people who wanted to send in their opinion based articles had a hard time finding links to send in those articles. “Tipsa oss” didn’t really make the cut for that. Main question we got during the interviews was “Why can’t I just send in something when I read news or visit your homepage?”. Well good point! Why not?
The rest of the world
We’re not the only branch of newspapers on the planet and I in no way say that we are the best (yet!) (though we come close). Let’s take a short look in the fields of news.
Göteborgs-Posten seems to have a nice horizontal menu, it has the main and most important sections visible without having to click them open.
Okay, next one. SVT Nyheter, the country wide (tv) news network. Nice horizontal bar there, clear indications of drop-downs, and yet again the most important stuff direct on tab.
Aftonbladet perhaps? Nope yet again most important topics in horizontal list, handy a to Ö list to, nice job!
Perhaps an international newspaper. BBC news, they sure have more $ for creativity. Well, never mind, horizontal menu with most important topics. Wait even 2 to keep stuff divided the right way.
So are these newspapers all wrong, and we better? Or is putting important content to sub-sections in hidden menus just a bad idea?
First on the list of to-do items was hard-skilled UX. What menu items were being used, what was unclear, what could go away and how could we make the site awesome again? So in terms of red routing. How could we make sure people would visit sections to their favorite topics again and have them view more content? clean the path and put obvious roads and signs to those targets.
What was the structure of the pages? For some newspapers it was the preference of an editor, in some other newspapers the order or the menu items was the index to the paper newspaper, etc. We started measuring usage of menu items and got the stakeholders around the table to discuss one ordered list of items based on popularity and local usability between connecting cities and places. A visitors to ST.nu (Sundsvall tidning) living between Sundsvall and Gävle should not be confused when seeing GD.se (Gefle Dagblad). We needed to clean that up.
Header positioning and design
Soon after the first meetings and in the middle of the process of all the stakeholders meeting together to decide how to put things in order (with the help of Stefan who did a great deal of work there), Mats and Josef started rocking designs for the new menu. Johan, Michael and I found some time to see how different drop-downs would work, so we set out to the city to talk to people and have them use the current app (which has drop-down menus).
We soon discovered that having multiple drop-downs with only icons was a no-go. multiple menus that you needed to open before you could see them had some troubles to. There was a big list of feedback on the app as well, but I trust one of the app guys is going to post something awesome about that sometime soon.
The first results when we met back with Josef and Mats where amazing! The guys had made an almost perfect sorting of items in a very neat and clear interface. Mats in his normal way of making things look cool had also gone out of himself with Josef to create some stunning UI and a small handbook on how we wanted to look stuff in general.
Getting everyone on board
So we as a team had worked hard and stakeholders and people all over the company had made their input to it. Time to advertise and get everyone on board. Journalists, writers, photographers and everyone else who would need to live with this new thing. They are the professionals when it comes to news. We build a presentation and got the ball rolling. There was a lot of feedback and a lot of cool things that we build into our designs post that point.
Just before Christmas, the tasks started filling the code and programming Jira boards. It was time for development and talking about tweaks while eating a nice slice of pizza, Swedish Christmas foods and drinking coffee loads of coffee (and chai lattes). Gustaf, Stefan, Karro, Andreas (Färnstrand) and I put some nice hours in getting the new menu to fit nicely in the site. We learned new techniques on the go, worked with loads of colors for the different sites and swung through some merge fails on the way.
So where did all of this development work lead to? News websites that are just a nudge better than they were on their way to being the best news sites ever.
Metrics? well to be honest, I have been getting some complaints from Anders Trapp. Apparently some of the section pages that were hidden before are becoming more popular than the news articles themselves (which messed up the journalist dashboards for popular content on the site for a moment before we kind of fixed their board to show only articles again). Good results indeed and more people flooding into section pages which was the target all along.
Here some graphs with what happened before and after our release on February the fifth
Before I forget the people sending in opinion articles:
A whole new better menu that allows them to do just that.
Check all of our sites here right now: