Case Study Final Project: Hackshow / France Inter new feature — UI part 2

Find the first part: ➡️ UX here ⬅️

Style guide

In our style guide you can find the different colors, typography, iconography, and components we used to create our final prototype.

Atomic Design

As we designed for iOS we created an atomic design that is used on the broadcast page.
It is organized in atome (icones, colors), molécules (for tap bar, buttons…), organisms which gather the previous elements together to create a template of the page.

Now it’s time for the big reveal : the hi-fi prototype!

We’ve tested it many times, and iterate a lot to come to this proposal!
Description below will help you to understand what you can see on this video.

• Home page
  On the home page, you have Grand Bien vous fasse broadcasted in live, you can listen, react or watch the show. If you want to know more about today’s program, you must click on “programs” in the tap bar.

➡️ Changes from mid-fi: we finally detached the “notification” picto at the top right of the screen and came back to the initial tap bar of the current app, removing our “my alerts” picto which was not clear for the user.

• Program page
  It shows you the entire program during the day. You can listen, react and if you want to know more about the live show, you can click on the program to go directly to the broadcast page.
• Broadcast page:
  You can find all the infos about the program (an article, an explanation of the new feature on the bottom...). Discover more details on your favorite show by clicking on the top central card, but more importantly, you can react to this program!

➡️ Changes from mid-fi: we redesigned the top central card to make it look more like a button, so the user can understand it’s clickable.

• Overlay reaction:
  You can respond vocally, in writing or in social network. We add a “new” label under the new feature: “leave a voice note”. You can click on it to share your opinion.
• VoXM page:
  To do so, you must enter your information (name and city), you can remember them and start recording.
  Once done, you can click on stop: you have the possibility to listen to your record, or restart if you’re not convinced. Once you’re ready, you can send it and receive a personal thanks for your participation.

➡️ Changes from mid-fi: we add a stop recording button during the voice note process to make it less confused.

• Home page again:
  Back on the home page, you see a new notification (FIY: this is a new page that doesn’t exist yet in the app). You can click on it.
• Overlay notif:
  You can see a recap of your activities categorized by days : today with the little red dot, and the previous ones in grey (4 days ago & last week).

➡️ Changes from mid-fi: it was our biggest challenge because this page was confusing for our users during our test! We tried multiples solutions, so instead of adding a new page into the app, we decided to create a simple overlay to focus on your activities within the app: we categorized them by days and insisted on different pictos for each action you did (play, podcast, share).

• Home page:
  After that, you can close the overlay window and see that the notification’s dot disappeared.

Next steps

We did extra work by redesigning the favorites page, because we thought it was possible to improve it regarding the feedback gathered from our ITW and tests.

• We added a new feature at the top to provide visibility on the starting time of your favorite programs.
• Then we added to the last episodes’ feature a filter system to sort them, to make it more convenient.
• And finally we added a “you may also like” slider at the bottom, to allow users to discover new programs

CONCLUSION

This projet was really interesting and challenging, because the Radio France team gave us a lot of freedom during these 15 days.

I also learned a lot from their feedback. This work immersion was a good opportunity to improve my skills, thoughts and thought patterns.

I have to admit that I love doing user interface and here it was not the main point, but it was very interesting and essential to be a real problem solver.
There is no Ui without UX!
Thanks a lot for my amazing partner Julie Drouillard! It was funny and instructive to work together!
We are very proud of the work we did: finding a solution to a problem through iteration (even though, I’m not going to lie, it was mentally difficult at times!).
But we accomplished our mission! 🎉🎉🎉 YEAY! 🎉🎉🎉

Hackshow

Thank you so much to the France Inter team, Ironhack and our amazing teacher ( Snezeana D.) and last but not least to my amazing classmates with whom I had many unforgettable moments ( ✨Astro team: Alexandre Ruban, Elsa Veyret, Julie Drouillard, Sombath Her, Alice Paul, Amalia Vulala, Mylene Simoes, GENTIL-KOENIG Joelline)❤️