Redesigned Station Profiles at Streema

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.

streemaradioprofile-old

 

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:

streemaradioprofile-new

 

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

Advertising & Streema

If you are a frequent user of Streema.com, you may have seen brands promoted on our website. Today we want to talk about that: Advertising.

Streema’s business model is based on advertising, that means we develop and maintain our application, content, infrastructure and support with the sponsorship of third-party products and services.

That might not surprise you, after all, most of the web works that way, a few good examples are: YouTube, Google, Facebook and most of the newspapers. And that makes sense, since the Internet is a communication medium, and media connects people with people, people with things (brands and services), or just things with things. 🙂

Now, Advertising, as with every business, may or may not be well executed, you might have come across many websites where ads are nonsense or simply annoying. In many cases, they even confuse the users, promoting useless products or announcing that the user has won some kind of prize – when we all know that wasn’t the case. As we’ve mentioned in previous blog posts, at Streema we want to assure the best listening/watching experience, and the ads on our site are part of that, so we have been working to block ads, advertisers and Ad Networks that do not enhance that value. If you ever run into those types of ads on our site, please let us know so that we can continue improving your experience.

We work with AdSense, one of the biggest Ad Networks in the world, which has a really strict policy with advertisers. AdSense has been very reliable for us and in addition it also let us understand, with the help of Google Analytics, the behaviour of our users. AdSense’s job consists mainly in targeting relevant ads to the user, which is mostly based on: the geographical location of the visit, the content of the page, or what have been searched or browsed before coming to Streema (for certain users).

One important thing to mention is that if you are an advertiser that wants to advertise on Streema.com, whether on our desktop or mobile websites, you should sign up with AdWords or with one of the AdSense Certified Ad Networks. To learn more about how these ads work and how to advertise on Streema, please go to: https://support.google.com/adsense/answer/152693 .

That’s all for now, we hope this has helped you to better understand how our application works as well as how we pay our bills. 🙂

If you’d like to share an idea with us about this or want to inform us about a confusing or misleading ad, please send us an email to info at streema dot com. Thanks!

Stay tuned!

The Streema Team