Telewebion

Website (Reponsive), Android, iOS, Android TV

Visit Google Play Cafe Bazaar
Project

Overview

Telewebion is the largest IPTV service provider in Iran that archives television programs such as movies, serials, football matchs. Users can also watch live on more than 50 TV channel via live streaming. Telewebion is available on web and mobile (Android and iOS) and Android TV.

Project

Goals

The goal was to redesign the website and app with new trends after 6 years, as well as increase the user's time on the website and add spaces for advertising to the website.
It also created an integrated user experience between mobile and the website and other platforms.

Project

My Role, Team & Duration

My Role, Product Design Manager.
Duration, From August 2018 to August 2019. (12 Months)
Team, 1 UI Designer, 1 User Researcher

Design Process

Research > Prototyping > Design > Evalution

  1. Gathering information about business from stakeholders, product manager and marketing team.
  2. Collect data from Google Analytics & Firebase.
  3. Starting a usability study for finding problems base on heuristic evaluation.
  4. Benchmarking with competitors.
  5. Start monitoring user activities with CrazyEgg.
  6. Step by step improvement and A/B testing.
  7. Redesign website, home page, episode, movies and serials.
  8. Usability testing and UX KPI's for the number of watched videos, time on site and bonus rate.
  9. Improve user problems and finalize.

Research

Problem

More than 500 videos from TV programs are added daily to the Telewebion, many users visit the Telewebion for watching movies, serials, football and other programs, but the user time was low, as well as users leaving the site after viewing one video.

Research

User Research

Interview with users and collect feedback
User Needs, more than %50 of users browse website with mobile browsers.
Feedbacks Collect feedbacks from support, user's comments in app stores, comments from Twitter, Instagram and etc.

Personas

Sarah, 32
She is 32 years old and due to lack of time on the website, she is looking for the archive of TV series to watch it on her smart TV.

Shayan, 46
He is 46 years old and due to his job position, when he wants to watch football matches live, he does not have access to TV and watches the match on his mobile phone.

Roja, 38
Roja is a social reporter looking for popular programs and topics and daily events.

Maryam, 10
She is 10 years old and watches cartoons with her tablet.

Interview & Pain Points

1. Improper display of the website on the mobile.
2. Long page scroll to achieve live streaming section.
According to the needs of users, which is to watch live broadcasts of TV networks, in the current version, users should be able to access the networks by scrolling vertically and horizontally. 3. Main menu not available.
To use the other pages or login to the site, the user must first access the menu via the Burger Menu and then the pages.
4. Achieving search is possible with a large number of clicks and in many steps.
5. The structure of the episode pages is erratic and therefore difficult to find content.
6. Lack of proper filter for movie and serial pages.
7. Sophisticated access to content and hourly archives.
8. Problem visually displaying Thumbnails for programs.
9. The difficulty of accessing episodes from other episodes in such a way that following a series of related content takes a long time for the user.
10. Difficulty using cutting tools.
11. The complexity of the user login and registration process.
12. Duration of low user presence on Telewebion website.

...

Research

Usability Study

We start a usability study program and testing with CrazyEgg for finding users how to surfing our website, and also gathering user's feedback from support, comment on app stores and social media. We found this problems:

  • Navigation cliks
  • Most viewed channels
  • User scrolling

Design Guidelines

Why Dark Color?

Some dark UIs are designed to minimize “digital eye strain.” With an increase in digital technology, we stare at screens for most of the day. Digital eye strain is a common condition that affects millions of people on a daily basis. Caused by everything from excessive computer use to regular exposure to bright light, it can cause headaches, neck pain, blurred vision, and burning/stinging eyes.
The Telewebion users sometime for watching a Tv program or live event, stare at screens for more that 60 minutes. We using dark mode for better accessibility.

Task Flows

Ideation & Wireframing

User Interface Design

Pages

Home Page,
Program,
Live,
Archive,
EPG,
User,
Episode,
Channels,
Movies & Serials,
Player,

Mobile App, Android and iOS and PWA

Android TV

Website Before / After

Design

Deliverables

Using InvisionApp Elements

Project

Result

  • Improve the Bounce rate from 45% to 15%.
  • Increase user’s time on site from 3 minutes to 10 minutes.
  • Improve navigation menu for better findability.
  • Add advertiments.
  • Improve player experience on desktop and mobile.
  • Improve accessibility for blindness users.
Design

Tools

Stats & Highlights

8 m
User
10:53
Time on Site
15%
Bounce Rate
256
Alexa Rank