Toggle – Building a better experience

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

Initial Hypothesis

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
Audience Numbers of Mobile vs Traditional TV
Positive Reviews on Toggle
Positive Reviews on Toggle

Other Metrics for Toggle

Toggle Metrics on the App Store and Google Play Store.
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.

Competitive Analysis

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.

Personas

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.

 

User Journeys.

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.

Problem Statement:

“Users cannot find the shows they are looking for”

We then proceeded to craft out

Solution Statement:

“Restructure and provide clear information about the content”

Information Architecture

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

Wireframes

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.

DEMO

http://xo50ee.axshare.com/#g=1&p=loading_page

A demo of the app prototype, to search in the demo Type “blue”.

Future Considerations

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.

Survey Monkey

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

User Research

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.

Affinity Mapping

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.

User flows

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.

Usability Testing

Storyboard

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

Team management

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.

“Experience Design is about filling in the Gaps with intention.” — Jared Spool

Feature prioritization

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.

“The hardest part of design … is keeping features out.” — Donald A. Norman

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.

When creating great experiences, it’s not so much about doing what users expect. Instead, it’s about creating a design that clearly meets their needs at the instant they need it. — Jared Spool