by.

E-Commerce TV App

UX Design | User Research
A shopping application with shows available on OTT.

01.

Introduction

Overview

This project is for a TV app of one of the largest jewelry retailers in the United States. They leverage an omni-digital strategy designed to elevate the customer experience through holistic, digitally-driven touchpoints, including live TV programming, available 24 hours a day to 84 million U.S. households. The app is already available on Roku, FireTV, and Apple TV. We needed to design it for Samsung and LG, as well as redesign it for previous devices.

The goal of this project is to create a TV app that provides a seamless and engaging experience for customers across multiple platforms, ultimately driving sales and enhancing the customer relationship with the jewelry retailer.

Duration

2 Years

Team Members

9

Tool

Figma

Platform

Web OS, Tizen OS, IOS TV, Android

Problem

The app's information architecture has several primary issues, including low-quality user experience due to poor in-app navigation, inconsistent user experience across devices, and a lack of basic features that are common in most other streaming apps. These issues can lead to user frustration, decreased satisfaction, and a competitive disadvantage in the streaming market

My Role

As the sole designer for the project, I conducted research to understand how people were using the existing app. My responsibilities included designing the UX/UI and presenting the design to both the client and the internal team.

Shop right from your Living Area

Designed JTV Live e-commerce app to bring a sense of community  to the shopping experience.

“TV users, primarily older viewers, need a user-friendly interface with clear and logical navigation to ensures that viewers can quickly and easily find the content they want to watch."

Finding “Rhythm”

Why do people thesse watch TV shows for shopping?

02.

Research

Assumptions

Initial Assumptions

  • Users were tired of the outdated design that was full of confusing UI elements and did not allow them to browse content while watching live or on-demand video.
  • Users want a “more familiar” streaming experience as they probably spend more time on other streaming services than they do on the App.
  • Users want to have an easier and quicker experience browsing, watching, and managing content.

Goal

Research Goals

  • To identify the needs, preferences, and behaviors of our target audience in relation to the existing product features.
  • To explore the competitive landscape and understand how other OTT platforms compares to similar offerings in the market.
  • To test the usability and effectiveness and define important tasks of users.

Delve deeper into the analytical data.

In close collaboration with my PM, I analyzed over a year's worth of analytics data to identify the most and least frequently used sections of the existing TV app. Based on this information, I focused my initial ideation process on optimizing the viewing experience of live video and recent products, global menu and grid navigations to access key user priotization.

Preliminary user interviews and then applied Maslow's
Hierarchy of Needs

In collaboration with my PM, I conducted over 20 phone interviews, multiple surveys, and more than 10 in-person user interviews across several states with current customers. The purpose of these interviews was to gather feedback on the previous versions of the JTV grid and channel guides, as well as the "Live Show" experience.
I further applied the finding in the Maslow's hierarchy of needs and I found that the self esteem and phycological needs of the users were not met however the app had the basic functionality.

Key Insights

70% users failed to access the full screen live shows. - User Analytics  Data

Most users have an established usage pattern, and the data says that most don't go to the full screen view.

Most users struggle to navigate quickly through the grid to find their desired content. - User Interviews

Content discoverability was one of the major pain point.

Most users interviewed did not use the channel guide and found it confusing. - User Interviews

Users found navigating interactions, such as viewing multiple product images, confusing and were unable to switch to new images.

Happy

Age  41-61 ( 70% ) - Primary User Group

"Even when sometimes I don't intend to buy anything, I enjoy watching product shows"

"I am not good at using Smart TV”

I led a design sprint to initiate the redesign process.

During the initial design sprint, we conducted a collective review of the analytics, user interviews, and client concerns. As the lead, I collaborated with the team to synthesize this information and identify key requirements for the (MVP).

Design sprint results

It can be challenging to condense all the insights gained from a design sprint. However, the most significant findings from the initial sprint were that restructuring the global menu and improving content discoverability would improve the user experience.

  • Improve Content Discoverability
  • Optimize on AirVideo and recent product views
  • Elevate  user experience with modified design system

Learning about the design guidelines for WebOS and Tizen OS

I reviewed the design guidelines for creating a user experience on webOS and Tizen TV, as outlined in the webOS TV UX checklist. This checklist provides both mandatory and recommended design guidelines for developers.

Live Shows and Grids

This case study is focused on three main areas: the Home screen, the Design System, and the Grid navigation

Home Screen

Home screen's main purpose is to provide users with quick access to live shows and recently viewed items.

Grid Navigation

Redesigning the grid navigation was crucial to ensure easy discoverability of content.

Design System

Audit and redesign of old design system

Live Video and
Home Screen

a.

Live videos were identified as a high-priority area for engagement, so I focused on ensuring that users could easily access optimized views of live shows.
By placing a strong emphasis on live shows and optimizing the viewing experience, I aimed to increase engagement and improve the overall user experience.

Old Live Show Screens and Flow

In the previous design of the app, users had to go through three clicks to reach the full-screen live show, which was considered the highest priority content. However, during my research, I found that many users missed clicking on the "watch now" button, and even if they reached the second screen, they did not realize that they could select the live show video to make it full screen.
As live shows highlight the existing products, I identified the need to improve the design for better engagement.

70% users failed to access the full screen live shows.
- User Analytics  Data

Design Explorations

Option 1 : The first design option focused on highlighting live shows in full screen mode, with an overlay feature displaying product details.
Recently viewed products were also listed for users to easily make a purchase. This design allowed users to easily switch to full screen mode when they were active.
‍

Option 2 : As part of the design, I incorporated a toggle between live shows and other recently viewed shows. Recently viewed shows were positioned at the bottom of the screen.

Option 3 : The initial design choice included prioritising the live show option as the default to ensure maximum visibility, while placing other recent items at the right of the page.

Design Direction

I recommended prioritizing the live show option as the default design to ensure maximum visibility, which involved keeping the live show in full screen mode with an overlay for product information. During the research phase, I discovered that users had a self-actualization gap when it came to using smart TVs. To address this, I incorporated intuitive features like auto maximize to ensure users could quickly navigate to the final designs.

After sharing the designs with the team and client, we chose the first design option. However, I later made modifications by placing the product information on the right side of the screen to avoid covering the L-Bar, which was an inbuilt feature of the video.

Iteration

I Conducted multiple virtual usability test. Each round had at least 4 users and was followed by an evaluation and some sort of development handoff or feedback. for the purposes of this case study, I will show few key design iterations and the biggest takeaways from the research I conducted.
‍

  • The overlay design was well received by the users. by default selected full screen button was easily identifiable.Product rating while viewing helped to decide.
  • Recent video at the button are very helpful to get other product suggestion.
  • The screen transforms into full; size in 8 minutes if their is no action. This feature was found helpful by the  users .

Final Home Screen with Live Show

The problem of users being unable to view live shows in full screen was completely resolved, and users found the product information and reviews to be helpful.
‍

Design System

b.

I conducted a design system audit. and mapped the findings to the research data. Through this process, I identified several UX issues and worked reimagining the design system to better align with user needs and preferences.

Design Audit

1

Global Menu item selected state
is not visually strong

2

Already Selected item,  is
not distinguished

3

Product description not clear

4

Visual appeal

5

No Minimized Menu

1

Placement of the Card

2

No Product Pricing

3

Product description not clear

4

Visual Hierarchy

5

Image Carousel on the card,
Very Small in size

1

Default Selected state not clear

2

Inconsistent Button
Style,  Rounded vs non rounded
corners

3

No Icons in the global menu,
it takes longer to navigate

4

Visual appeal

1

Occupy Larger Space  not suitable
for multiple row grid

2

Inconsistent Selected state

3

Multiple click Navigation, Without
icons in the global menu, it takes me
longertofind the option

4

Inconsistent User
Experience across devices

Grid Navigation

C.

User interviews revealed that many users found it difficult to navigate through the grid quickly and locate the content they were looking for. Some users reported clicking 3-4 times before finding the desired content.

Old Grid Navigation

User interviews revealed that many users found it difficult to navigate through the grid quickly and locate the content they were looking for. Some users reported clicking 3 times before finding the desired content.

In user interviews, the discoverability of desired content and navigation were identified as issues across all sections of the app.

I conducted several low-fi and mid-fi tests with users to demonstrate different flows and gather feedback. This process helped me gain insight into users' natural navigation patterns when using a grid, while also ensuring that we considered elements that were considered high-priority by the client. Overall, the tests helped inform our design decisions and ensured that the final product was user-friendly and met the needs of both users and the client.

Flow 1

The first row in the design showcases the top three popular videos, which makes it easy for users to quickly access popular content and most recent items. Users can easily switch between popular videos to the specific host or brand video .

Flow 2

The second  incorporated a grid navigation system, where the screen would change based on the selected grid. Each specialty show or host had a dedicated row, and upon reaching the row, the hero image and description would appear in the active grid.
‍

Flow 3

This flow allows the user to select a host, and the selected host's videos will appear in the bottom grid. This reduces the number of clicks required to reach the final video page and provides clarity to the user about their current location.

User Test

We finalized the first two flows and tested them with users. Due to COVID, most of the tests were conducted online. The first flow was the preferred choice because of the top video, however, the second one was more appreciated for repeated visits and second-time users.

First Iteration

The Concept of keeping top three videos were looking great but we had technical feasibility issues with pulling out those slides. The host grid also made user think if they need to click on it or keep scrolling to next. So I took consideration of these feedbacks.

Constraints

The Host and shows images were coming from the database some text was overlapping the images so I created a safe zone for using these images which helped me and engineers to keep the text at the right portion of the images.

Second Iterations

For the second iteration, I made changes to the top popular videos and conducted another test to validate the final design. The new grid navigation got great response from the users. I also tested other features at this stage like Product image display, programme schedule etc.

Final Designs

The final design incorporated a grid navigation system, where the screen would change based on the selected grid. Each specialty show or host had a dedicated row, and upon reaching the row, the hero image and description would appear in the active grid.
‍

Impact

For this project I worked on The Salesforce Lightning Design System to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices.

03.

Conclusion

Reflections

Deeper understanding of webOS and Tizen OSContent is the hero of OTT apps, designing an app that’s easy to use and pleasant to navigate is instrumental in helping the content reach its full potential and reach maximum eyes. I became a better designer.

‍

I learned how to conduct effective user research studies. Overall, I became more compassionate towards the millions of people who use the JTV app in their daily lives.

‍

Another major Challenge in this project was we could not design directly for the end user, the solution has to be route throw the companies. This required us to think of the solution in a totally different way which can still be able to solve the core problem.

MORE CASE STUDIES

Anthem

Salesforce

DeFi-App

Salesforce

UNICEF

iHRIS

GET IN TOUCH
(317) 827-4344