2nd Challenge: Wireframing Radio France App at Ironhack
Radio France is a french public service radio broadcaster, offering seven national radio for France Inter, France Info, France Culture, France Musique, France Bleu, FIP and Mouv’. Since 2012, Radio France produced their emission by digital broadcasting system which allowed to listen by streaming or by podcast. The lightning rise of their podcast listenings on laptop drove Radio France to create an application with a wide range of podcast. And this podcast application will be our study case for the second challenge pre-work.
The Radio france app’s aim (reasons) :
This is an application that I often use, to listening podcasts to get informed, to be entertained. This application delivers a high-quality radio show and an abundant content, what requires to categorise each contents to optimise the user flow without be lost in the application.
My Userflow
When we’re studying they are in an active research, or when we get bored, we can be carried by flood of suggestion’s lists, or by browsing different topics. This time I decide to focus on the browsing feature. Where I go from the app opening ? How I choose my content ?
To understand with wireframes
Mimicking the part of the application is a good way to figure the userflow out and increase my work method as future UX/UI designer.
Navigating
By scrolling down, it’s possible to discover different topics suggested (e.g Covid–19 subject, Juliette Gréco subject, kids subject). Then, slide to the left or right to choose your program according the different sur radio.
Using the horizontal slide the application delivers a new dimension to browse programs, indeed, with left right sliding action reduce the pages amount and increase the efficience of the user experience
Navbar and player bar (at the bottom) are two elements improving the navigation, they keep you aware of what you listening, and where are you in application.
About UI elements
The application use black as colour for background, white and grey colours for text according the degree of importance (more it’s important, more it’s
contrasted) which makes the app coherent. To get some rhythm in the reading, the app uses different sizes for the same typeface. Images are the key to distinguish each show from each other.
Input Controls
• As track bar are use to control the time, arrows to rewind, to advance in
the podcast play and pause button.
• To enjoy podcast every time, online or offline, it’s possible to download
the podcast by clicking on the icon.
• By clicking on sharing button from apple TV
it’s possible to enhance the listening
• Put your favorite podcast by clicking the heart icon
•A search bar for each section to specify what you looking for
Navigational Components
• A head part, giving the name of the sub-radio
• There is a card to get an information preview by a slide up action of the thumb.
Prototyping the feature
For this project I worked with Sketch for wireframes and prototyping.
Here’s the link to discover my first prototype !
My thought before the next step
Hand-sketching helps me lot to get a better approach and dismantle in my first urban go challenge . Now, while I was peeling and copying the whole five screenshots, I realised the similarity of UI elements, how it keeps the coherence, giving a safe and trusted feeling for the user. by the way , It’s better to already have the good dimensions of the art boards.
About the content, the browsing feature is an invitation, a way to get along with people, Previewing is the best way to respond at this aim, it allows glancing and curiosity.
The strength of this application is the minimalism aspect despite the opulence of the content. The ability to reduce a lot of page improves the usability of the application.
