RTE Player Redesign: Blog Three

Learning Outcomes/Deliverables of this blog post

The five Design Thinking Modes were most blended in our process during the prototyping phase. Our design process has been broken into eight different stages or rounds of iteration to illustrate the developments and collaborative work between Saturn. Our competitor analysis detailed in blog one supported our design research, and this was developed further with our chosen design system and tone of voice research.

Stages of Development (fig.11–19)

We each sketched what routes we thought the app could go in to realise our ‘to-be’ scenario, and how specific features might work, before gathering similar screens together to critique our approaches to certain screens. A collaborative session had us working together in two teams to develop the first digital wireframes for each task flow, before they were allocated to each member to develop to a higher fidelity. After more critique, we brought these into our first hi fidelity prototype which was used in our usability testing, and then improved upon for our final prototype.

Specific Feature Development

During research, we tossed potential features or necessary elements around in our discussions, and initial sketches finally realised these visually. Integrating a social element emerged as a route worth exploring. Research work done on indirect competitors like Instagram and Spotify revealed potential in making video streaming a social experience. Through interviews and conversations with users, we quickly got feedback that seeing what your friends were watching (like with music on Spotify) could be an uncomfortable feature for users, but they still enjoyed discussing videos with their friends. This informed our decision that a chat feature on the Live tab was worth exploring, also supported from our empathy maps and personas.

The ‘Pick By Mood’ feature and ‘Random Pick’ were both solving the same issue of helping the user decide what to watch quickly, and during sketching it became clouded if the two were actually one feature. Instead of cancelling anything out early, we kept all ideas with potential, and through iteration, discussion and prototyping, we clarified and distinguished the ‘Pick By Mood’ from the ‘Random Pick’ into two very separate but useful features. After usability testing results, the ‘Random Pick’ was renamed ‘Smart Pick’.

Content Analysis (fig. 5–6)

Content Analysis carved our new navigation structure which was central to our redesign and brought a high level of visibility (Don Norman’s six principals of Design) to existing content. Shows were often hidden, and in observational studies we saw surprise from users when they finally discovered high quality content they didn’t expect to be on RTE Player, like Love Hate. We used the best shows in our prototype but restructured so it was impossible to miss.

Visual Development (fig.1–2)

The Material Design System from Google brought consistency with its high level of adaptability, minimality, compatibility in Figma and it was open sourced. Tone of Voice research identified improvements to RTE’s general perception of being dull and indistinct, by creating a lighthearted, playful, self deprecating attitude with a space for Irish humour. Spaces to incorporate were limited because of the amount of content on the app, but on features like Pick By Mood, this was achieved. We kept to RTE’s established dark mode but pulled back on the use of red after our usability test.

Paper Prototyping

A paper prototype model that incorporated the best parts of what we had discussed in our initial sketching phase was created for testing. Keeping consistency with virtual paper prototyping was difficult, and a printable version was created so we could all work from the same version.

However, with time restraints, we found it more productive to work together in one file on Figma. The low-fi wireframes were particularly useful in figuring out the navigation structure.

References

Interaction Design Foundation: Design Thinking

Retrieved from Interaction Design Foundation, January 23, 2021:

https://www.interaction-design.org/literature/topics/design-thinking#:~:text=The%20five%20stages%20of%20Design%20Thinking,%20according%20to%20d.,different%20stages%20of%20Design%20Thinking.

Rekhi, S. (2017) Don Norman’s Principles of Interaction Design

Retrieved from Medium, January 23, 2021:

https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33

Visual Design System

(fig.1) Scale of Google Design System/ Our Customised Team Elements

(fig.2) Tone of Voice Research

Journey Mapping

(fig.3) Group Customer Journey Map

(fig.4) Individual Journey Map

Content Analysis

(fig.5) Content Analysis Explanation

(fig.6) Content Analysis Working

Task Flow

(fig.7A) Task Flow

(fig.7B) Task Flow

(fig.8) Task Analysis, To Be Customer Journey

(fig.9) Specific Task Flow Breakdown

Navigation Structure

(fig.10) Navigation Structure Revised

The Following Images Break Down The Sketching/Wireframe Development Iterative Stages

Stage One: Initial Sketches

(fig.11) Team Individual Sketches (scroll right!)

(fig.12) Aine Individual Sketch

Stage Two: Gathering of Similar Screens

(fig.13) Final Selection of Screens

Stage Three: Paper Prototyping

(fig.14) Paper Prototype with instructions for use

Stage Four: Collaborative Wireframe Work

(fig.15) Lowfi Development work on watching screens and live tab

Stage Five: Divided User Flows

(fig.16) Initial Divided User Flows

Stage Six: Higher Res Development

(fig.17) Work spaces with developed

Stage Seven: Full Prototype One

(fig.18) Full Prototype workspace with Mock Up

Stage Eight: Revised Final Prototype

(fig.19) Selection of revised elements (see blog four)