This document is an excerpt of the comprehensive design work that I was included with YuppTV. This document demonstrates the framework undertaken to develop a single design approach for all the devices.

1. Reimagine YuppTV viewing
experience

2. Yupptv is visited by more
than 1 million users per
month, across 11+
countries.
17+ TV
Devices
Play
stations
Desktops and
Tablets
It is available in 17 Tv devices, PlayStation,
Mobile & Tablets, Desktop devices

3. Why redesign ? 17+ TV
Devices
Play
stations
Desktops and
Tablets
After launching its first site in 2007 the
product kept growing, stakeholders started
providing requirements for the website, but
the site experienced major issues to
accommodate those requirements.

4. Identifying the pain points? 17+ TV
Devices
Play
stations
Desktops and
Tablets
Scalability
• Home page looks weird with huge list of
channels which takes the prime area.
Communication
• The websites lacks to communicate
about new movie arrivals
Discoverability
• It is often difficult to find the movie from
the list
View Minutes
• As a result site failed to keep the
customers engaged and numbers started
to decline on devices & websites
$%#@&

5. Scalability
Discoverability
Communication

6. The Solution 17+ TV
Devices
Play
stations
Our solution is to produce an experience
that allows to our customer a better way to
discover content, a scalable solution to
accommodate requirements from
stakeholders.

7. Challenge is to design a
multi-device experience
that considers dynamics
of each device
17+ TV
Devices
Play
stations
Desktops and
Tablets
We adopted a framework includes core features like
navigation, content remains same across the devices
with minor alteration on sizes and interactions to
allow device-specific rules.

8. Framework Foundations
1. Grid
2. Color
3. Typography
4. Iconography

9. Grid
We have defined Horizontal grid to make
user just to focus on the content .This
approach helps to reduce unnecessary
distractions and let user scan the content
quickly.
1 2 3 4
5
1. Global navigation
2. Container navigation
3. Content – Adaptive width
4. Gutter – Fixed spacing between columns
5. Column-Guides which content aligns to.

10. In the framework, we allotted spaced for navigation container and added a adaptive layout for content. We choose two types of grids a
fixed width and a fluid grid layout. A fluid grid works better with data and interaction heavy screens.
Grid
Grid Type Fixed width
Columns 12
Margins 58px
Gutter 20px
Grid Type Fluid grid
Columns 10
Margins 30px
Gutter 20px
Grid Type Fluid grid
Columns 10
Margins 30px
Gutter 20px

11. Color
To bring the tone to our product, we defined a
color pallet that reflects our brand identity.
1. Brand color
2. Primary colors
3. Secondary
4. Neutrals

12. Primary Color
They are the brand color used in color scheme
often used for crucial components like primary
CTA's.

15. Secondary Color
Each colour is selected to provide meaningful
feedback for the product are often grey scale
colours usually range five to eight levels of grey.

16. Secondary color
for CTA during
active state

17. Neutrals
They are group of colors often used for system
alerts, messages notifications and warnings.

18. Neutral

19. Brand Font
We have tested multiple google fonts for
Yupptv on different screens like tv, mobile, and
desktop of different resolutions to finalize a
font that has enough color contrast between
elements for the people with low vision.
.

20. Lato Font Styles
Trending Channels
Trending Channels
Trending Channels
Trending Channels
Trending Channels
Trending Channels
Font:Lato Regular
Font:Lato bold
Bg:#ffffff
Font:Lato Regular
Font:Lato bold
Bg:#f2efef
Font:Lato Regular
Font:Lato bold
Bg:#121212

22. Iconography
We designed icons that are simple and functional. We
have designed them for different sizes
(12px,16px,24px,32px) so they can be scaled across
different resolutions without getting pixelated.

23. Informative Icons

24. Informative Icons

25. New Features

26. Banners standardization
Play
stations
Desktops and
Tables
They act as the primary touch point to customers. We
have set the guidelines for banners across devices to
ensure they remain consistent in all devices.

27. Banner dimensions
WEB & TV
1600PX
475PX
MAX RES
Banner W - 1600 X H – 475 pixels
Resolution : Max
This resolution can be used as universal dimension
for banner image since it can be compressed to
different resolutions without reducing the image
quality.
Base dimension
Dotcom Web & TV
54pt(Medium)
26pt(Regular)
24pt(Regular)
Font : MONTSERRAT
518PX
475PX
518PX
475PX
AD Slot (movies) AD Slot (Packages)
20pt(Regular)
24pt(Regular)
20pt(Regular)
24pt(Regular)
30pt(Regular)

28. Dock Feature (Picture-In-
Picture)
17+ TV
Devices
Play
stations
In order to improve our engagement on our site we
have introduced dock feature aka picture-in-picture
to provides customers a TV experience by watching a
video and browsing content simultaneously.

29. The dock component allows to organize information in an intelligent order, provides customers the necessary information about the
video that is live in the channel.
Dock feature in different devices
Resolution Dock enabled
1920-1024 Yes
720 and less No
Device Dock enabled
Android Yes
IOS No
Roku Yes
Html/Lgtv No
Device Dock enabled
Android Yes
IOS Yes

30. It is a quick and intuitive way to provide information about channel
LiveTV card details
• The card compose of two modules
1. Channel component
2. Image component
• The card is 2:1 ratio
• A scalable size across all devices
3. Name of live program
Device Dimensions
Desktop 345 px -158 px
Mobile App(720 res) 776 px -30 px
TV device 455 px-210 px
1
3
2

31. It is a quick and intuitive way to provide information about channel
Catchup card details
• The card contains
1. channel icon with the
2. Blurred image of the program
• Ratio of the card is 16:9
• It is scalable for all resolutions
3. Channel Name
Device Dimensions
Desktop 345 px -158 px
Mobile App (720 res) 310 px -174 px
TV device 455 px-210 px
1
2
3

32. This component is designed to convey information about the channel program.
Catchup Video Thumbnail
• The card contains
1. Program thumbnail
2. Video status Ex- live/Catchup upload time etc
3. Metadata
1. Program Name
2. Duration
3. Timestamp
• Ratio of the card is 16:9
• It is scalable for all resolutions
1
2
3

33. It allows watching video from the time we desired
DVR functionality
• For any live channel, this feature provides
control to watch the stream for any duration.
Go Live
Play “program”
from start

34. Package Process
An improved version of package purchase
Channel grouping and comparison
Step1
Selecting a package
Summary of selected packages,
addons selected
Step2
Select Addon’s
Step3
Make Payment
Payment Success

35. 17+ TV
Devices
Play
stations
Desktops and
Tablets
Search
• To improve our search experience we have
brainstormed on user behavior on
• What they want to watch
• How do they type
• What they click
• What users browse
• Then we have list down all the types of content
that should appear in search results.

36. Search Process
Meta styles Initial sketches for search suggestions and
results

37. Search Results Metadata

38. A global Yupptv account that contains all the information about user account, transactions, devices etc.
Account
Desktop account version will allow users to have more
account settings compare to other devices

39. We have created an template for few scenarios to accommodate all the usecases
Message layouts

40. 17+ TV
Devices
Play
stations
Desktops and
Tablets
Analytics
• Once the development is under progress, we
have defined the list of metrics to capture to
know the health of the application
• Performance metrics
• App load time
• Network errors
• User metrics
• Monthly Active Users (MAU)
• Daily Active User (DAU)
• Devices & OS
• Geo Metrics
• Engagement metrics
• Session length
• Session interval
• Retention rate

41. This Web analytics tool gives us insight about user interaction as a video format
Hotjar
We have created a document for funnel flows to capture.

42. Funnel Flow
Hotjar
This insights helped us to rethink to optimize our package process

43. Heatmaps
Hotjar
This insights helped us to do minor changes as
- To remember user details default
- Auto fill user email id and so on..

44. This analytics tool gives us information about device and mobile apps behavior
Localytics

46. 17+ TV
Devices
Play
stations
Desktops and
Tablets
User’s Feedback
• We interacted with our customers to know
their feedback after launching the app.

49. Changes after feedback

50. Before user feedback After user feedback

51. Before user feedback After user feedback

52. Before user feedback After user feedback

53. One single design for all

54. Thankyou
14 th June 2018