Interaction Design Project 3.

Jaesin Yu
6 min readJan 22, 2021


UX/UI redesign case study — RTE Player

Design development — Idea to digital prototype

Full wireframe on Figma

User journey and task-flow defined based on key findings from our research for idea sketches to final digital interactive prototypes. We explored improving the experience of watching and browsing, then transferring it into the RTE Player.

Design concept

Visual & Tone of Voice
Researched well-known Irish brands and International brands for Tone of voice — all speak clear and friendly voice to their users. We took the advice from research, Irish humour brought into the interface where we have a space to speak — sign-in page, genres, even in icon design. We aimed our visual design to come across — friendlier, more rounded and simpler. Google Material source used for wireframe, it has a wide range of design — easily adaptable. We adapted some design patterns from social media and competitors for our new features — show story pages, rating, review and live chat.

Design research board by Michaela
Tone of Voice used in wireframe by Áine

Appendix. Tone of voice research / Design system guideline


Our main challenge is end-users get the better onboarding experience, personalisation and socialising in our continuous customer journey flow. We wanted to tackle in many ways to improve RTE Players problem areas. To achieve that we had to test our target users’ watching and socialising behaviour — it could validate our hypothesis. The five specific tasks flow created for design development include new features for the testing later.

New features listed below -

  • Smart pick VS Pick by mood
  • Rating and review
  • Live chat
  • Share

A new navigation structure

New navigation structure by Micheal
New menu bar from a new navigation structure

Simplified new navigation structure created to encourage browsing with its structural hierarchy. It also established a foundation for Information Architecture which made it easier to add visual UI. Initial idea sketches gathered for evaluation — build a new interface and navigation system. We selected design parts that represent the idea better.

Landing screen design concepts evaluation from all team members

Appendix. Full Idea sketch board / To-Be task flow & Task Analysis / Contents Analysis / To-be Navigation structure / Specific task flow for design development

Looking for a solution



We studied Netflix — how they make tailored recommendations with fresh contents for each user. The case study unveiled, 80% watching comes from personalised recommendation — profile and rating systems are the two main key elements.

Rating system generates the data-driven algorithm alongside users watching history. Questioning how much personal data we have to collect or use it for personalisation under the GDPR protection.

Rating and Review

Rating and review iteration and design pattern by Author

We adapted the IMDb star rating system as it is simple and easy to use. Intentionally, star rating stays on the ending credit; Modal window used to get attention from users to trigger their action — rating — but no obligation that ‘X’ button gives them a choice. This small action — trying to minimise their effort — contributes to improving users’ own watching experience in the end.


Profile prototype and design pattern by Author

New profile pages contain all information that can monitor their activity in one place — continue watching lists, saved shows, rating and review for tailored recommendations. To do so, users must create the profile — which we want to convince and achieve from the testing.

Passive watching experience

Home screen and design pattern — Continues scrolling:It means we surface the most relevant data in that space and leave our users the choice to scroll further by Tom

‘Smart pick’ and ‘Pick by Mood’ are the two main ‘lazy’ features that we wanted to help users pick something to watch easily. It has similar but distinctive characters in their own way.

Smart pick VS Pick by mood

‘Smart pick’ — It gives random contents with the data driven algorithm based on users interest, watching history and rating.

‘Smart Pick’ iteration — name and design change by Michaela

‘Pick by mood’ — Users pick something based on their mood — this feature adapted from one of the competitors’ and implemented with our Tone of Voice.

‘Pick by Mood’ iteration — name and design change, open card button reduced unnecessary users’ journey by Tom

Initially, we treated ‘Smart pick’ and ‘Pick by Mood’ as similar features then we put them on the separate page — we wanted a winner for the A/B testing. After a few iteration sessions, we defined these features as different from each other — one giving the contents and the other selecting the contents — we relocated them in one page. Both design patterns got changed for better recognition and easy accessibility by exposing front to encourage its usages. The feature name — ‘Random Pick’ — failed its recognition while usability testing. ‘Random’ gave a negative reaction to users which unconsciously rejected the use of the feature.

Autoplay trailers

Autoplay trailer prototype on Protopie by Tom

When wireframing concepts developed, We wanted to test how autoplay trailers would affect cognitive browsing behaviour. In prototyping, there were limitations on Figma to test an autoplay clip with its plugin — Anima. We reviewed other prototype tools that we could use it for testing — Framer and Protopie were tested for executing this feature. One of the team members succeeds to produce the functional prototype with Protopie.

Socialising — Live chat & Share

Live chat iteration and design pattern by Áine
Sharing feature with more contact options — reduce bounce rate during interact with friends by Micheal

Users still want to connect and share their experience while they watch something. To achieve that we developed and tested a ‘Live chat’ feature. In this experience, users wanted to have more privacy while on the live chat that iterates the design to distinguish between public and private chat with a clear colour coded button.

Appendix. Full prototype on Figma / Prototype screencast


Between paper prototype til usability testing, we kept analysing our design solutions for few changes in each iteration session. There were also minor adjustments in the grid system for better hierarchy and relationship among the elements. Iteration keeps going after usability testing, most of our hypothesis validated but feels like never enough to do iterate to get better user experience.



Jaesin Yu

Graphic Designer, Textile Designer, MSc UX Design Student