drag

UI/UX TV Design

Mathco Pedia

My Role

User Research

Visual Design

Prototyping

Testing

Interaction

Upon stepping into the newly designed MathCo office, one is greeted by cool interiors with prominent MathCo branding, accompanied by a refreshing blast of air conditioning. With the aim of elevating the overall experience for both individuals and clients visiting the office, the concept of developing this application was conceived. Which is intended to offer valuable insights into the company's operations. I was responsible for designing this project from scratch and working closely with the marketing team, developers, and project managers at every stage of development.

Prototype

Discovery

To make the user interact with this application and get to know more about the people coming into the office. We began talking with the marketing team and new individuals joining our company.

When entering the office, everyone first goes through the reception area. Then make there way to meeting rooms.
The marketing team shares images, videos, podcast and blogs about math company on social media as well as the website but very small amount of people actually go through the same.
New individuals/clients that visit the company are interested in knowing more about the company but have very limited time.
If a person wants to know a particular thing about the company they are unable to get the information as they do not know where to get it from.

Result

We refined our ideas and decided to build a TV application cause :

It will be easy way to interact for a large number of people visiting the office and most of the content which will be displayed are videos and images.
User will be able to personalise their search and know more about the company.
Watch the latest blogs, post and videos about MathCo.
Watch news stories about our leaders, employees, and projects.
We discovered there are touchscreen TVs inside the office which can be used for this application.

Our Goal - Encourage individuals to effortlessly engage with the application and gain insights into what MathCo represents.

Challenges of designing for TV

This was my first time designing for TV, some of the things to keep in mind are :

There is a safe zone for TV that needs to be considered while designing for TV, the UI elements should be arranged so that none of them is in margins of approximately 5% on all sides.
Large amount of text is uncomfortable to read in TV.
Users should type as little as possible and typography should be simple, large and clean.
The screen may be far from the viewer or close to them
Designing the navigation should be easy for a remote to be used, this limits navigation to four directions: up, down, left and right. This also makes a grid the natural UI structure for TV applications

Style Guide

The colour and typography used while designing TV application is different from web and mobile. While designing i have kept the following in mind :

Color rendering on televisions can be imprecise compared to computer monitors or mobile devices. LCD and Plasma TVs often apply smoothing and sharpening filters, and color rendering may not match what you see on your computer screen.
Some color gradient combinations will show bands.
Avoid pure whites on large areas of the screen as it caused halos.
For highly saturated colors (especially reds, greens and blues) you should review them when used to fill significant areas of the screen.
The font size used in typography is big as well from 24px to 94px.

Navigation

The user will navigate using remote or touch, taking both scenario into consideration. I designed the main top navigation but as the application will have more content. The design changed by having rest of navigation as a vertical navigation. This might complicate the development but having sub-category in TV navigation will complicate the interaction.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Features

The follow ups

Upon initiating the application, users will be prompted to provide their names and email address. This information allows the company to send them updates on new and upcoming activities.

Case Studies And Blogs

The user will be able to read the latest our blogs and success stories. All the success stories have been tagged according to the industry and type for multiple users preference. The case studies are all videos which can be clicked and played on full screen.

Read Aloud

The users will be able to listen to text which makes it more accessible and it also is difficult to read lot of text on TV, so our application has a “Read Aloud” feature for all the text heavy post which are the blogs, articles and reports.

Homescreen

The app’s home screen puts the most interesting and up-to-date information about Mathco in one place : latest videos and news articles. On the home screen the navigation category are also mentioned as tiles for easy access to all the category for users.

In Conclusion

We believe an increased awareness of the latest developments at MathCo. Our goal was to for people to effortlessly interact with the application and take a part of MathCo home with them. Now the application has been improved and is compatible with tablets, for it to be showcased to the clients.

Have a look at the next project.

Next Project