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.
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.
Interaction Design Foundation: Design Thinking
Retrieved from Interaction Design Foundation, January 23, 2021:
Rekhi, S. (2017) Don Norman’s Principles of Interaction Design
Retrieved from Medium, January 23, 2021:
Visual Design System
The Following Images Break Down The Sketching/Wireframe Development Iterative Stages
Stage One: Initial Sketches
Stage Two: Gathering of Similar Screens
Stage Three: Paper Prototyping
Stage Four: Collaborative Wireframe Work
Stage Five: Divided User Flows
Stage Six: Higher Res Development
Stage Seven: Full Prototype One
Stage Eight: Revised Final Prototype