Hi there! Not too long ago we redesigned our radio station profiles at Streema and we wanted to take a minute to share with you the reasons behind it.
At Streema we understand the user experience as a continuous improvement. We believe it’s the result of research that is constantly evolving and not the end of a path that is reached without looking backwards nor forwards. Earlier this year we analyzed the layout of our radio profiles and saw an opportunity to make it better. Among the aspects that we wanted to take to the next level was the interface; we felt it lacked the clarity and simplicity that a mass market site like Streema needs.
In case you don’t remember how the old interface looked, here is a screenshot of the station profile for CNN Radio we use to have at Streema:
It is good practice, when thinking about a new interface, that you have to consider three variables: the user, the “context of use”, and the task that is being performed. If any of these ingredients is missing when you design the layout, the result won’t be as useful.
Context – did we arrive to the right place?
Thanks to a combination of Google Analytics and user interviews that we conducted, we knew that a significant percentage of users land directly on radio profiles. For these users, this meant that the radio profile was the first contact with Streema. And as the saying goes: there’s only one chance to make a good first impression… without affecting the bounce rate. (Yes, we added the last part. 🙂 )
With this in mind, we thought: what is the first thing you want to know when you land on a site? The first need is to figure out whether you’re in the right place, if you think you can find the content you are looking for. So, our next question was the following: what is the unique identifier for the Streema user when trying to figure out if they have arrived to the desired content?
To identify the key indicators from the user’s point of view, we conducted what are called “Five Second Tests” with different layout proposals. A Five Second Test consists of showing a certain page to a user for about 5 seconds and then asking the user to remember specific details. In our case, before the users saw the page, we would give them a “task” and then ask them if they believed that they had arrived at the page they were looking for (according to the task) and how they knew they had done it correctly. The tool we used to conduct the Five Second Test was a service called UsabilityHub.
There is only one chance to make first impression
One of our initial working hypotheses was that the station logos, being visual markers, had a greater visual impact and better reading time. Therefore, we felt they should be clear indicators for the user. Boy, were we wrong!
Among the findings that caught our attention was the relationship between content and logo identification. We noticed in successive iterations that users not necessarily associated the logo as the main sign of having found the right radio. This fact isn’t a minor detail, because we are generally used to think that it’s always a best practice to use visual identifiers, since they are likely to get recognized faster. As we iterated through the design we realized that the name of the radio station was the piece of data that gave certainty. Due to this finding, the name of the station won more prominence in the layout and the logo gradually decreased in size, just enough not compete with the rest of the user interface.
Additionally, we learned that with the old interface users confused the opportunity to make comments with the ability to write reviews, they also had trouble finding the place where they could save their favorite radios and finally the ads had too much preponderance.
For those of you interested in the methodology around these tests, one thing to point out is that we prefer the view professed by usability expert Jared Spool regarding giving context to a user before they do a test. As users we all come to a site as a result of a reference or a search and this generates two equally important feelings: anxiety and expectation. When we click on a link we have the expectation of finding a certain type of content. And when we get to the site, we use those first few seconds to analyze a number of variables, for example: if the site is trustworthy, if we’ve arrived at the right place, and so on.
Task
Another equally important aspect of this research was to understand what users are looking for when they come to the site. Although we’ve had many conversations with users in the past, we thought it was a good time to add some more quantitative data to our analysis. In order to do this, we conducted several surveys using a service called Qualaroo. One big objective was to dispel any delay between intention and fulfillment, since the time mentally assigned to a task must be replicated on the site, or else using the site becomes frustrating and seconds later the user abandons the site.
After the research we confirmed that the need to listen to a radio program (dedicated to news or to discover new music) was immediate, so the tolerance to frustration was very low. Users interested in a particular content do not want to wait more than a few seconds. Because of this, we decided to make the play button more prominent in the interface layout.
In terms of how we used the surveys, we mainly leveraged them as a resource to give us context about the users. We iterated in surveys that went from open responses to more specific ones with options allowing us to learn more about the needs of our users. In case you’re interested, in a survey, open responses give you the unknown response, the one you will never expect; while surveys with options give you the quantitative view of the problem. Additionally, it was also very helpful to use a service like Intercom, that allowed us to contact users who were exposed to an AB Test on our site in order to ask them questions about what they saw and how their interaction went.
The types of users on our site
As we were moving forward with this work, we sought to explicitly define people who inhabit our site, so it could be like a magnetic compass to our design and functionality roadmap. We broadly outlined two kinds of people. The first were users who need to listen to a specific radio, without any offline replacement – for example, a case of this can be following your college basketball team that is only broadcasted by one station, where listening to other matches makes no sense. The second group of people were users that were exploring what was out there, wanting to find stations stations dedicated to a particular musical genre or stations from other parts of the world.
The challenge
Now that we had broadly defined these two groups of users, we continued with our work. The main issues from our old design that we picked up by learning from our users were the following three: the low ranking of the visual content, the saturation with text, and the inflexibility of the site structure to experience new ideas. So we sketched some high fidelity wireframes in order to try new ways of displaying content. As a first premise we wanted to maintain a structure of two thirds and one third. The first two-thirds would have the main content the user is expecting to find and the other third would have additional content that we judge as relevant to what the user is seeking.
We went through several iterations and testing until reaching the current profile:
Changes
So, what changed?
- Now the main actions are in the hotspot of the template, the most important being to listen to the station.
- The clearest indicator of the radio, the name, is the central element of the interface, to help the user to recognize if they are in the right place.
- The rest of the radio-related information, like bitrate, country, city, genre, description, etc., is no longer crammed along the page. Now it is sectioned into tabs to avoid visual pollution in the interface and to offer the user the possibility of accessing it only if they want to, as a progressive disclosure of the data.
- We made a better distinction between comments and reviews. We relied not only on iconography but we also used a text alternative that is a sure sign of functionality, thus meeting WCAG accessibility standards
Anyway, now a few months have passed since we deployed the redesigned radio profile and the user metrics indicate that we are on the right track.
However, the last word is always yours, so if you have any additional feedback, please feel free to get in touch. 🙂
Exciting times at Streema, stay tuned!
The Streema Team
