Grêmio Rádio
How I designed a web and mobile page to host a soccer team’s online radio.
UI DESIGN
Overview
One of the main challenges was always been the availability of the base platform since it is built and managed by a partner company. Because of that, some bugs and product updates were out of our team’s reach, and one of the biggest issues we had was when our online radio feature was unavailable in the platform’s internal system.
The unavailability of this feature would affect our biggest client, a soccer team and their platform Grêmio Play, where we hosted the team’s oficial radio so fans could keep up with the news, podcast episodes about the team, and, of course, listen to music.
Result
As a backup solution, we had to build a web page outside of our platform to host the online radio system, in which our users could listen to the radio schedule and access the team’s podcasts more easily
Team
My role
UI Designer
Team
Product Manager, Full stack developer
Skills & activities
Design evaluation, product flow, usability testing, user interview, metrics definition, design system management, high fidelity prototyping
The problem
The news about the unavailability of our radio feature came unexpectedly and we needed to find a quick solution so our regular users wouldn’t be affected by it.
At the time, we had some options for a quick win:
- Do not update our platform system until the radio feature is available again;
- Allocate a developer to try to fix the feature only in the Grêmio platform;
- Redirect our users to the page where it was hosted before they had a streaming platform
- Host the online radio on some reliable platform, like Youtube
Our partner company wasn’t able to predict when this feature would be fixed, as it wasn’t in their prioritization roadmap, so not updating our system was quite risky because we wouldn’t be able to fix other bugs if they appear.
Allocating a developer to fix it could be a waste of resources once our team didn’t have access to the whole product back-end. Hosting on Youtube or any similar would involve less effort for our team, but we would lose the radio as an exclusive feature and content of our streaming platform, which was not ideal for our business.
Hosting on the page where it was previously ended up being impossible due to technical issues, but… we could host the radio on any page and make it available only to our subscribers, and that would maintain the radio as an exclusive feature of our platform.
Problem statement
So how do we provide a good experience for our users while they have to leave the platform to listen the radio?
Gathering data
Using some tracking tools like Hotja, it was noticed that around 72% of the users who accessed the radio via platform where using mobile devices, in addition to the fact that the largest number of listeners performed during the times of the radio’s original podcasts and content (which were released in a weekly schedule and rerun during the week’s schedule), although the rerun hours did not have as much traffic.
That made us decide for a Mobile First approach, so we could focus in the main audience from the beginning.
MVP
Hands on, it was time to map all of the requirements to have a 100% functioning radio as soon as possible. In the brainstoming process it was possible to filter the absolute-necessary to run a MVP and some other good ideas that could be added in a second release.
Development
Essencially, the MVP needed to be a player screen with basic buttons to operate media. We also took in consideration the functionalities available in the core platform player for the radio and also for videos.
First version
After testing some wireframes to validate the basic structure of the page, I was able to design a refined version to be developed as an MVP.
As this was an emergencial first release, we didn’t put much effort into a responsive web version, so we kept the same interface as mobile.
Final version
Mobile screens
In a second delivery I refined mobile screens to have more functions and feel like a mobile app as an extension to the core platform.
Podcasts
As we realized the live podcasts were a very important part of the radio feature, I decided to add them in a menu so users could listen not only live, but any time of the day as long as it was already a released episode, in an attempt of getting more users throughout the day.
web version
Including in the iteration delivery, we also included an responsive version for web devices, instead of just replicating the mobile version.
Even tho is was an backup project, it became part of the experience for the client Grêmio Play. For other clients, the radio feature is back available and it was not necessary to develop this alternative experience.
Learnings
Design something using principles of Mobile First was a different experience and it took me some time to actually deal with the size differences.
A project like that also made me study patterns and components from the base platform to replicate an environment already known by the audience, so they could have a better acceptance of this feature. It definitely made me improve my design evaluation and UI skills.