How to build a better TV Viewing Experience on Mobile?
Our Choice for this project is Toggle a Mediacorp online video service. We focused to redesign the App to make a better viewing experience.
Tools and Methods Used:
- Data Analytics
- Affinity Mapping
- User Interviews
- Affinity Mapping (To Synthesise Research)
- User flows
- Axure for Interaction Design
My initial assumptions of Toggle is that its an online archival of news and local tv shows. However as I interview users on how they used it, their reply was that Toggle was heavily marketed to them for catching up on missed aired shows and they used it for that function primarily.
Good points about Toggle
Mediacorp has taken a leap to provide shows besides broadcast in the digital age in response to new competition from stream servics such as netflix or youtube. The landscape overall is TV is moving to digital mediums.
Audience Numbers of Mobile vs Traditional TV Positive Reviews on Toggle
Other Metrics for Toggle
Toggle Metrics on the App Store and Google Play Store.
However things were not so good as we look at other metrics of the App on the App Store.
Metric data for Toggle from Apple Store and Google Store.
Overall the data meterics showed there were more negative reviews than positive ones on the toggle app.
Some feedback from users Interviews
- Users are not happy about ads
- Users commented that it was difficult to find shows even after they search for it.
- App is slow and not efficient.
- A user commented that the toggle website was generally more pleasant to use. He did not considered using the App.
We did a comparison of Toggle with other popular video streaming apps on features and business models. Some findings when we compared the app to other popular streaming Apps are that :
- Easier Signup Process
- Better control over the Ad Experience
- Better search functions to find shows
- Giveng Users suggestions on shows and other media
- Micro-interactions to keep users engaged with the app.
SYNTHESISING the research
From her we crafted 2 Personas based on the Affinity Mapping of our user research.
For this project we crafted 2 Personas based off the user research and interviews. This helped us to create a hypothetical archetype of our users, to remind us of the user when we craft the solution.
Luke — The Live Streamer
Typical use of the app would be on the train as he is a busy business analyst and can only watch his shows after or before work.
His main frustrations is that he can’t find his catch up tv shows in a logical manner.
Jessica — Catch Up Serial Queen
Jessica’s main frustration with the app is the search results presented to her about her shows are not useful.
How can a persona can inform business decisions and opportunities? We take these Archetype as a reminder of how they use the app as we make refinement and improvements to our existing app.
Next were each persona User journey as our personas used the app.
Opportunities in Blue
From the User journey we could identify what gaps the Personas were having and there lies business opportunites for Toggle to engage or imporve the user experience over various touch points.
Findings from the User Journeys
Toggle has opportunities to keep users engaged with toggle such as when they go out to Google to search of shows Toggle can create a linkback from Google search results that sends them back into the app when they click on a show link
Findings and Solutions proposal
Old Toggle Hamburger Menu
Based on our findings of the User Research and Crafting Personas and doing A User Journey Map we came up with our Problem statement.
“Users cannot find the shows they are looking for”
We then proceeded to craft out
“Restructure and provide clear information about the content”
Some labels needed to be renamed as it was confusing and reduced the number of catergories and merged various information into the new catergories. We also borrowed some of the naming conventions used in the main toggle website for the app.
New IA After doing the changes
Wireframe of the new Toggle App
We removed the hamburger menu and replaced it with a navigation bar at the bottom for features users used the most.
We added a language switching drop down menu so that users need not go search for the show in a different language.
We made the search results more useful by adding a thumbnail to each show result shown.
Users were marketed by Toggle as a Catup-TV Shows app that feature was added to the bottom Navigation bar for quick access, based on our user interviews it was the most used feature of the app.
Usability Testing & Iterations:
We iterated 3 times based on usability testing, we changed the wireframes after each test.
Comments by Users from User Testing
- Preferred to access content by Search
- Preferred navigation menu to access content
- Refine search was not accessible on page scroll
- Expected language filters in search
Iteration of the search function before and after usability testing. Initally the refine search function was not easily found by users.
Final Solution Feedback
On our final test users were generally satisfied with the new prototype of the Toggle App.
A demo of the app prototype, to search in the demo Type “blue”.
Gamification of Ads
Gamify the ads. or Preload Ads infront of the video. Don’t repeat the same ad twice. Since the viewing of catch up TV shows has been streamlined for user there is now a right opportunity to present ads as they will be less
Better Media Strategy
Creating a better media plan of shows, can lead to monetisation of content. Mediacorp has a premium service that is largely not visible to the user. Many users in our interview did not consider subscribing to Toggle as it was marketed to them as a Catchup TV Service. If there is a better explanation of benefits of subscribing to toggle users may sign up and an added revenue stream will come through the app.
Consistency between mobile App and the website.
We generally found the website of toggle faily easy to use and it looked great. It would be good to align the Moble and Web versions in Layout and IA so that users would not be lost in either platform. Other features we can implement is if a user watches a show on the website he can continue watching on mobile.
Approach we took to make the analysis.
Data Metrics Analysis, IA Comparisons, Heuristic Evaluation, User Interviews & Surveys, Personas, User Journey, Storyboard, wireframes and Sketching, Usability Testing.
We crafter a set of multiple choice and open ended questions for our users to see if we can get a sense if the general users out there in Singapore are using the toogle app or competitors app
This time round to gather user research we applied User Interviews and Surveys techniques.
Competitive Analysis & Heuristic evaluations
We used Jacob Nielson Heuristic Evaluations for this round of comparisons between Toogle and other video apps.
Personas & User Journeys
This all cumulated into our 2 Personas. (See above for other personas)
User Journeys — This helped us to see what kind of opportunites the brand can interact with the user at various touchpoints of the journey.
We constructed various userflows of the task our users would do in the app.
Wireframes and Sketches
As a team we did various wireframes sketches and selected the best one which suited the user feedback needs.
Project Management and Timeline
We used a combination of Agile and Waterfall methods.
Agile at the beginning as we were unsure of the scope of the project
Towards the end we switch to waterfall to task ourselves to deliver the project.
Trello was the hub of our project management system.
Lessons Learnt & Reflections
Not easy to get everyone on the same page. But having a team increases the chance for success as a team can check if I made mistakes. A team keeps our bias in check when coming up a solution it may not benefit the users.
Using Trello as our Project Manager, it helped keep everyone on track and see a big picture of deliverables. Morning Stand-ups helped to discuss problems and give quick updates on progress quickly before they escalate into the danger zone.
User Journeys and Personas
Crafting the personas were hard but the Persona tool help strengthen our userflows and design intentions. When doing wireframes it is easy to get carried away to design according to our own aesthetic.
User journey Maps were an interesting exercise to do after making a persona it helped us see the gaps in the user experience.
Many times during the development of the prototype we came up with features that sounded good like adding certain shortcuts or interactions which did not aid to the users tasks.
Overall having doing this project made me realise that UX needs to balance between users and the company stakeholders. You can’t go too far and make something interesting while ignoring the primary needs.