UX/UI redesign case study — RTE Player
Design development — Idea to digital prototype
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.
Appendix. Tone of voice research / Design system guideline
Challenges
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
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.
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
Personalisation
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
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
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
‘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.
‘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.
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
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
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
Summary
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.
