Interaction Design Project | 03 Design Process
The design process
Emphasising with Derick and defining our problem we created the to be task flow. Using a dot voting system to each took a section each of the RTE player app to begin researching trends and sketching out paper prototypes implementing possible improvements which we could ideate, discuss and refine quickly as a group. When sketching the redesigned RTE Player, we were mindful to introduce ways to implementing new features to solve each stage of our to be user cycle.
From paper to wireframes to prototyping
The landing page
We wanted to redesign the landing page to better showcase the content. Large cards allowed the user to see one piece of content at a time. Cards, as a design pattern are common practice, users are already familiar with them and know how to interact with them. With large cards we could introduced autoplaying trailers when scrolling through the landing page, being mindful not to overwhelm the user. We added a suitable watching age and a star rating.
The new RTE player uses familiar navigation patterns. Scrollable tabs and cards and a fixed bottom navigation gave the users a recognisable UI pattern to follow.
Smart Pick
Our research told us users like to switch off and not have to think. As a way to ‘quick browse’ or ‘watch without having to think’ we implemented a feature which would autopay content when selected. Derived from an early idea called ‘Discover’ This feature uses the users viewing history to give recommendations. Pick for me, now ‘Smart Pick’ is a floating action button (FAB) is always visible on the users home screen.
Smart pick is a new integration into people watching lives. Using a FAB, which is seen on Google, is an already familiar pattern. Relieving any confusion or frustration with a user on first interaction with the app.
As a FAB condenses into an icon one the user interacts with the page, it allows the content to take centre stage whilst still being visible allowing discoverability.
People associate the word smart in technology with the smart phone, smart watch, smart TV. Appliances that use machine learning. Naming the button ‘Smart’ indicates that it is doing something clever, instilling trust.
Choosing Smart Pick autoplays a show selected for you based on your watching. Allowing you to ‘Pick again’ until you find something you like.
Pick by mood
Our research told us users wanted to watch content fast. They had their own genre preference. Giving the user a way to ‘filter out’ uninteresting content while still having control we introduced a ‘Pick by Mood’ feature. Cards represent a mood illustrated with a simple icon. When tapped, a ‘Stories’ feature (as seen on Instagram) overlays the screen with an autoplaying trailer. A row of trailers play which the user can swipe to see next, see more info, save and of course, watch.
This was derived from the same ‘Discover’ feature I created on an early iteration. This feature was later refined by Tom, he designed the ‘Pick my mood’ as you see it now.
Live chat
Live watching is one of RTE players competitive edge. To engage users and entice socialisation we wanted to implement live commenting and a live chat.
We created a chat toggle. The toggle asset keeps within contemporary design principals. While watching a live show users can ‘toggle’ chat on or off. Live chat as you see it now was research and refined by Aine.
Rating
Our research told us users took recommendations of friends and online reviews. By integrating RTE Player with IMBD and Rotten Tomatoes, users could easily see from reputable source what peers’ opinions were. We wanted to implement a rating system. Already used by IMBD we chose stars as they suggest movies and entertainment.
As feedback is an important principal of interaction, we implemented a piece of text letting the user know what the rating is used for. This solves Jakob’s Heuristic #1 Visibility of system status. Jaesin researched and refined this feature.
In the “review’ section of a show the user has another opportunity to rate the show. When a star rating is tapped ‘Write review’ appears, allowing the user to write their own review. This can be undone solving Heuristic #3: User control and freedom. The use can access the full list of submitted reviews from their profile.
Sharing
Introducing a ‘Share’ button while watching allows the user to copy or share a link without having to exit the show or leave the app. RTE Player does not currently offer this. The share option offers the current most popular social sites and an option to copy the link. A success message ‘Successfully copied link to clipboard’ gives the user feedback on their action. In the beginning we tried to implement a ‘tag‘ feature but later dropped it to stick within familiar standards in UI patterns.
Profile creation
Tom created a create account flow allowing the user to input their data or skip. As a group we decided this would be optional for the s=user but would improve suggestions by remembering when data when switching devices.
Keeping consistency with a design system
I evaluated different design system we could use to keep consistency and familiar patterns in our wireframes. The Material Design System developed by Google has a large range of resources available, it is highly adaptive, it is well integrated into users digital lives already and it has a clean, minimal aesthetic.
The RTE player app will be visually led which allowed us to utilised Materials grid-based layouts and cards. RTE Player uses a predominant dark theme, which we kept in our redesign to give current users some familiarity in the redesign. Materials depth effects such as lighting and shadows suited this.
References
Material design. Retrieved from https://material.io/
IMBD. Retrieved from https://www.imdb.com/
Personas. (n.d.). Retrieved from http://www.usability.gov/how-to-and-tools/methods/personas.html
Laubheimer, P. (2016). User Need Statements: The ‘Define’ Stage in Design Thinking. Retrieved from https://www.nngroup.com/articles/persona-types/
Salazar, K. Scenario Mapping for Design Exploration. https://www.nngroup.com/videos/scenario-mapping/
Gibbons, S. (2019). Retrieved from https://www.nngroup.com/articles/user-need-statements/
Gibbons, S. (2017). UX Mapping Methods Compared: A Cheat Sheet. Retrieved from https://www.nngroup.com/articles/ux-mapping-cheat-sheet/
Appendix
Personal sketches Sharepoint
Personal wireframes Figma
key insights from initial research
Personas and Empathy maps
Customer Journey
HMW problem statements
Customer journey map as is
User scenario to-be
JTBD statement
To be user cycle
Final persona ‘Derick’
Derick empathy map
Derick scenario
Individual task flows
