Case Study

4 to 6 min read

Presentime

Presentime

Helping presenters deliver high quality and buffer free livestreams - from the very start.

Helping presenters deliver high quality and buffer free livestreams - from the very start.

Design Process

Introduction

Problem Discovery

Primary Research

Secondary Research

Problem Statement

Solution

Ideation

Design

Post Launch

Conclusion

Background and Context

Presentime is a livestreaming service meant to delivery high-quality audio and visuals from the very beginning. Research shows that audience members have a negative opinion on low quality streams. The competition FAILS to setup your stream based on a user's environment. Presentime helps user deliver product pitches, proposals, and opinions - at the beginning.

CLIENT

Presentime
(Conceptual)

TEAM SIZE

Solo UX Designer

TIMELINE

Dec 23' - Feb 24'

DELIVERABLES

Prototype

DELIVERABLES

Final Prototype

Note: Video displays varying states of components to showcase UI.

Click here for the 4K Resolution on YouTube (Highly Recommended!)

Note: Video displays varying states of components to showcase UI.

Click here for the 4K Resolution on YouTube (Highly Recommended!)

Use the interactable prototype here.

Use the interactable prototype here.

PROBLEM DISCOVERY

Introduction

As a UX Designer, I figure there will be a day where I will have to present to stakeholders and B2B.

I looked back on my previous experiences in university online classes and disliked presentations with poor audio and visual quality.

I want to find out — Is it REALLY a problem to have low-quality audio and visuals?

As a UX Designer, I figure there will be a day where I will have to present to stakeholders and B2B.

I looked back on my previous experiences in university online classes and disliked presentations with poor audio and visual quality.

I want to find out — Is it REALLY a problem to have low-quality audio and visuals?

Scientific Studies State Bad Quality is a Problem

Scientific Studies State Bad Quality is a Problem

I browsed scholarly journals to determine if my thoughts were a biased opinion or a problem.

I browsed scholarly journals to determine if my thoughts were a biased opinion or a problem.

“Despite identical content, people evaluated the research and researcher less favorably when the audio quality was low, suggesting that audio quality can influence impressions.”

“Despite identical content, people evaluated the research and researcher less favorably when the audio quality was low, suggesting that audio quality can influence impressions.”

— Science Communication 2018, Vol. 40(2) 246 –257

The correlation between the engagement metrics and the quality metrics becomes visually and quantitatively even more striking at the viewer level.

The correlation between the engagement metrics and the quality metrics becomes visually and quantitatively even more striking at the viewer level.

— CMU School of Computer Science (2011) Study

Needless to say, poor audio and visuals ARE a problem if someone is presenting. But, how BAD is the problem?

Needless to say, poor audio and visuals ARE a problem if someone is presenting. But, how BAD is the problem?

PRIMARY RESEARCH

User Interviews

I interviewed eight users who acted as an audience and a presenter in a livestream to discover if their primary frustrations were tied to quality or other factors.

Some sample questions:

I interviewed eight users who acted as an audience and a presenter in a livestream to discover if their primary frustrations were tied to quality or other factors.

Some sample questions:

  • From dealbreaker to least annoying - what aspects turn you away from a presentation?

  • As an audience member, what common technical issues do you see and how bad is it?

  • When you presented, what were some issues you experienced? How did you diagnosis it?

Interviewees HATE A/V and Technical Problems

Complaints were sorted into problem categories. Data was then turned into percentages to determine the weight of the problem category.

Complaints were sorted into problem categories. Data was then turned into percentages to determine the weight of the problem category.

Category

Category

Audio Problems

Technical Problems

Visual Problems

Other Problems

Complaints

Complaints

Muddiness, distortion, static, hissing, background noises

Muddiness, distortion, static, hissing, background noises

Buffering, stuttering, crashes

Blurry video, artifacts, pixelation

Unrelated to livestreaming software.

Number of Complaints (% Rounded)

Number of Complaints (% Rounded)

40%

35%

20%

5%

What the Interviewees Assume is the Fix

The interviewees however; also experience issues when they attempt to present.

Fia (This is me.)

Have you tried to set the quality to the highest possible? If so, what happened?

Interviewee 1 (Used Zoom)

I did! My entire meeting started to lag!

Interviewee 5 (Used Zoom)

I left my settings on default honestly. Didn’t want to ruin anything.

Interviewee 6 (Used OBS)

My computer started to freak out.

Well this isn't good…

But, you can’t just set the quality to maximum.

I suspected that users do not know WHY they face issues when they host due to the nature of their environment or hardware. It can actually get very complicated.

I suspected that users do not know WHY they face issues when they host due to the nature of their environment or hardware. It can actually get very complicated.

Cause

Cause

Low Bitrate

Low Bitrate

Poor Hardware Specs

Poor Hardware Specs

Low Upload Speed

Low Upload Speed

Poor Audio Equipment

Poor Audio Equipment

Effect

Effect

Stuttering, buffer, motion blur, pixelation, stream crash

Stuttering, buffer, motion blur, pixelation, stream crash

Stuttering, buffer, motion blur, pixelation, stream crash

Application crashing, freezing

Application crashing, freezing

Stream crash, stuttering, buffering

Stream crash, stuttering, buffering

Muddy vocals, static, clipping

Muddy vocals, static, clipping

User Journey

I plotted a user journey to discover when and why problems start. Most of the problems actually start BEFORE their livestream setup. I concluded - this could be from poor setup or onboarding.

I plotted a user journey to discover when and why problems start. Most of the problems actually start BEFORE their livestream setup. I concluded - this could be from poor setup or onboarding.

Click to expand image

SECONDARY RESEARCH

The competition SETS YOU UP FOR FAILURE from the very BEGINNING

In order to verify that the problem was poor setup or onboarding, I downloaded competitor applications and performed a fresh install.

I noticed two key themes:

In order to verify that the problem was poor setup or onboarding, I downloaded competitor applications and performed a fresh install.

I noticed two key themes:

  • Competitors fail to explain important A/V terms and practices, on setup.

  • Competitors fail to optimize or offer settings based on each person's environment, on setup.

Little explanation or optimization results in low-quality and/or stuttering streams.

Little explanation or optimization results in low-quality and/or stuttering streams.

Current Assumptions and Insights

Seeing as problems can occur as soon as the live setup stage, I thought: Can issues be alleviated at the onboarding?

Seeing as problems can occur as soon as the live setup stage, I thought: Can issues be alleviated at the onboarding?

Most users don't know..

  • A/V terms and definitions. (Bitrate, Codecs, EQ)

  • A/V interactions. (Upload Speed correlates to higher bitrates.)

  • How to use important audio tools. (Sound Gate, Compressor, De-Esser)

Insights

  • Interviewees dislike poor audio and visual quality.

  • Interviewees themselves don't know how to get high quality without technical problems.

  • The competition doesn't guide users to proper practices, settings, and optimization.

PROBLEM STATEMENT

How might we help users deliver high-quality audio and visuals and minimize stuttering and buffering by delivering a better onboarding?

How might we help users deliver high-quality audio and visuals and minimize stuttering and buffering by delivering a better onboarding?

The problem appears to stem from a lack of guidance, explanation, and optimization as soon as installation.

Objectives

Seeing as problems can occur as soon as the live setup stage, I thought: Can issues be alleviated at the onboarding?

Seeing as problems can occur as soon as the live setup stage, I thought: Can issues be alleviated at the onboarding?

Requirements

Requirements

  • Decrease cognitive load of audio and visual terms.

  • Introduce an onboarding process custom tailored to a user's environment and hardware.

  • Create standout features that help us stand out in the market.

  • Decrease cognitive load of audio and visual terms.

  • Introduce an onboarding process custom tailored to a user's environment and hardware.

  • Create standout features that help us stand out in the market.

SOLUTION

Develop an application for livestreaming with a focus on a better onboarding to delivery high quality audio and visuals

Develop an application for livestreaming with a focus on a better onboarding to delivery high quality audio and visuals

From my competitive analysis, I concluded that there's a gap in the market. No product exists that custom tailors itself to your stream environment to promise high quality audio and visuals and little technical problems.

Project Limitations and Outside Thinking

Project Limitations and Outside Thinking

  • Unable to do backend to implement video filters, codecs, ect.

  • Case study designed to address crucial problems other users face.

  • Requires discussion of backend and expenditures(bitrate cap, codec license fees, transcoding options) if developed.

IDEATION

Informing and Optimizing BEFORE Problems start

The biggest challenge was creating an onboarding experience that was easy to understand. The primary focus was using words and terms most people were familiar with.

The biggest challenge was creating an onboarding experience that was easy to understand. The primary focus was using words and terms most people were familiar with.

Click to expand image

Determining Features and Backend

I categorized stand out features that help us stand out from the market with a MoSCoW Matrix.

Click to expand image

Standout Features and Benefits

Key features that differentiate us from current livestreaming applications.

Key features that differentiate us from current livestreaming applications.

Feature

Feature

H.265 & AV1 Encoder Support

Audio and Video Setup Wizard

Notice Board
(Home Screen)

User Benefits

User Benefits

  • Less blur, pixelation, artifacts

  • Higher resolution at lower bitrates.

  • Simplifies setup process

  • Optimizes based on the user's environment.

  • Checks for change in Wi-Fi, Hardware, IP Address.

  • Reminds user to rerun Wizard.

Business Benefits

Business Benefits

  • Lower overhead costs

  • No license fees for using AV1.

  • Higher customer satisfaction rates.

  • Lower help tickets.

  • Higher task completion rate.

Click to expand image

User Flow

The process is designed to optimize the user's quality before getting a chance to go live in order to minimize the frustrations from my interviews.

The process is designed to optimize the user's quality before getting a chance to go live in order to minimize the frustrations from my interviews.

Legends

Click to expand image

Installation

Click to expand image

Starting a Livestream

Click to expand image

DESIGN

Stream Wizard Setup (Mid-Fidelity Wireframe)

I jumped straight into Mid-Fidelity wireframes to focus on rapid iterations and picking easy to understand concepts and words.

Essentially, I developed the core feature of the application while also wireframing.

I jumped straight into Mid-Fidelity wireframes to focus on rapid iterations and picking easy to understand concepts and words.

Essentially, I developed the core feature of the application while also wireframing.

  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
  • Silhouette in Snow
  • Astronaut on Cars
  • Floating Astronaut
  • Floating Car
  • Silhouette in Snow

Click image in slideshow to expand

Home Screen (Hi-Fidelity Mockup)

I designed the home screen due to it's necessity as an MVP and to tailor it around our unique stream setup wizard.

Focus was prioritized on the user interface creation, then repositioning the elements from my Mid-Fidelity screens into a Hi-Fidelity Prototype.

I designed the home screen due to it's necessity as an MVP and to tailor it around our unique stream setup wizard.

Focus was prioritized on the user interface creation, then repositioning the elements from my Mid-Fidelity screens into a Hi-Fidelity Prototype.

Click to expand image

Home Screen - Key Features

Home Screen - Key Features

  • Setup Wizard Button. Easy visible access to the wizard setup.

  • Pre-Checks. Notifies the user of A/V problems BEFORE a livestream.

  • Notices. Checks for last stream anomalies, hardware, or location changes.

Hi-Fidelity Prototype

Note: Video displays varying states of components to showcase UI.

Click here for the 4K Resolution on YouTube (Highly Recommended!)

Note: Video displays varying states of components to showcase UI.

Click here for the 4K Resolution on YouTube (Highly Recommended!)

Use the interactable prototype here.

Use the interactable prototype here.

User Testing

I gathered a set of four participants to test the Prototype.

I gathered a set of four participants to test the Prototype.

Limitations of Studies

  • Severely limited prototyping features.

  • Figma limitations (no video or text field input support).

  • Focused on gathering feedback to see if the user understands the few A/V terms presented.

Results

The feedback I received from testing showed a sounding success.

The feedback I received from testing showed a sounding success.

Click to expand image

POST LAUNCH

What I Would Do Next

I chose to develop the product as an MVP livestreaming service only; however, there's a few decisions I would take if this product was real.

I chose to develop the product as an MVP livestreaming service only; however, there's a few decisions I would take if this product was real.

Post Launch Decisions

Post Launch Decisions

  • Stagger new A/V features to further improve quality and prevent cognitive overload.

  • Introduce premium advanced features for monetization such as - custom sound EQ.

  • Add key features such as video recording.

Problems to Address

Some problems we might have if the product continues to grow.

Some problems we might have if the product continues to grow.

Standout Issues

  • Account for new users' cognitive overload if they join when multiple features are shipped.

  • How to stagger introduction of A/V options based on product growth.

  • Prioritize which features to launch based on demand.

CONCLUSION

Project Reflection

Thank you for reading! As my UX skills continue to grow, so did my process and time optimization.

Thank you for reading! As my UX skills continue to grow, so did my process and time optimization.

Challenges

  • Critical Thinking. The project was designed around optimization based on environment. However, it took several drafts before I could reframe "Bitrates" into "Upload Speed" then create a formula to account for presets AND no stuttering/buffering.

  • MVP Decisions and Time Constraints. Prioritizing what's needed and included in MVP prototype was a hard choice. However, if I had more free time I would have designed the livestream and chat UI.

Learnings and Improvements

  • Process Improvement. Skipping lo-fi wireframes because I knew the product relied more on UX Writing and I could reframe it into a dashboard format — as is most livestream applications.

  • Design simplification. It's okay to have a minimal design, and I prioritized the UX over flashiness.

↑ Back to the Top ↑

Home

Works

About

Contact

Resume

HOME

HOME

HOME

HOME

6:59:43 PM

© 2024 - Fia

Website Theme: Space 🌌 + Stationery 📝 = Space Station

HOME

HOME

HOME

HOME

6:59:43 PM

© 2024 - Fia

Website Theme: Space 🌌 + Stationery 📝 = Space Station

HOME

HOME

HOME

HOME

6:59:43 PM

© 2024 - Fia

Website Theme: Space 🌌 + Stationery 📝 = Space Station