product-designer-ux-ui-portfolio-los-angeles-web-
product-designer-ux-ui-portfolio-los-angeles-web-

Introduction

Role: Product Designer (UCLA)

Timeline: 10 Weeks

Platform: Mobile

Tools: Figma

StreamTyme is a streaming platform that let's people discover and watch popular movies and TV shows. This was a semester-long project part of my UCLA UX coursework.

I worked across the full product lifecycle, focusing on strategy and business objectives to deliver measurable impact beyond design execution.

I also took the initiative to push my project beyond assignment requirements. I created a style guide, mapped out and designed the full signup flow, and addressed key edge cases.

Problem

StreamTyme has yet to implement native-social integration features into it's app. As a result, this negatively impacts organic discovery of new content and reduces play starts.

Solution

I introduced native social features which allows users to share their watch data within their social circles. This included features such as aggregated friend and community scores to facilitate easier content discovery, and organically increase play starts.

Research

Hypothesis

Users want to share our content, but encounter friction when trying to share Streamtyme content due to no native pathway.

Our competitors make it easy for users to passively promote content, creating organic growth opportunities through social sharing and engagement. This is a low-cost, high-impact way to drive exposure to our content and increase subscriptions. If Streamtyme doesn't address this gap now, we risk falling behind in user engagement and long-term organic growth. We also risk over-spending and over-reliance on paid marketing.



The goal of this research is to understand how and why users share video content to help StreamTyme stay competitive and uncover opportunities for growth. 

Our competitors make it easy for users to passively promote content, creating organic growth opportunities through social sharing and engagement. This is a low-cost, high-impact way to drive exposure to our content and increase subscriptions. If Streamtyme doesn't address this gap now, we risk falling behind in user engagement and long-term organic growth. We also risk over-spending and over-reliance on paid marketing.



The goal of this research is to understand how and why users share video content to help StreamTyme stay competitive and uncover opportunities for growth. 

Our competitors make it easy for users to passively promote content, creating organic growth opportunities through social sharing and engagement. This is a low-cost, high-impact way to drive exposure to our content and increase subscriptions. If Streamtyme doesn't address this gap now, we risk falling behind in user engagement and long-term organic growth. We also risk over-spending and over-reliance on paid marketing.



The goal of this research is to understand how and why users share video content to help StreamTyme stay competitive and uncover opportunities for growth. 

🔎 Key Business Questions

How might improving the sharing experience reduce our reliance on paid advertising?

Which features are most likely to increase user engagement and drive measurable lifts in organic traffic, referrals, and watch starts?

Which signals do users find valuable versus noisy, and how can prioritizing the useful ones improve engagement and reduce churn risk?

Methodology

For my methodology, I conducted five 45-minute 1-1 user interviews. I had originally planned on three, but early insights sparked my curiosity to dig deeper, prompting me to add two additional participants.

Within the limits of available resources, and given that StreamTyme serves a broad audience, I recruited participants from a general user pool. As a result, I was able to capture diverse perspectives and uncover common needs and behaviors.

Data Analysis

I transcribed each interview to preserve exact wording and reduce interpretation bias. I then used affinity mapping to surface repeated patterns in my participants response.

data-affinity-mapping-ux-product-design-research

3 Element Insight Framework

Using affinity mapping allowed me to prioritize the most common tensions and shape them into five-distinct insight stories. I applied the three-element insight framework to help me connect each tension to a potential solution for users and measurable business outcome. From there, I selected the insight story with the strongest potential to drive value, making it the foundation for my ideation.

⚠️ Tension

Users value connection with friends, but have no visibility into what their peers are watching 

⚠️ Tension

Users value connection with friends, but have no visibility into what their peers are watching 

🔑 Unlock

By helping users get a clearer sense of community viewing habits and perceptions...

🔑 Unlock

By helping users get a clearer sense of community viewing habits and perceptions...

📈 Impact

we could could drive higher engagement and support organic user growth through social connection

📈 Impact

we could could drive higher engagement and support organic user growth through social connection

Ideation

Crazy 8 Sketches & Solution Sketches

To generate a wide range of ideas, I ran a Crazy 8s exercise. Since I was working independently, I knew I risked missing out on fresh perspectives that collaboration could bring. To push past my first instincts, I challenged myself by running the exercise twice, which surfaced new directions I hadn’t considered. From there, I developed a solution sketch to illustrate how a user flow might directly address the tension I identified in research.

To generate a wide range of ideas, I ran a Crazy 8s exercise. Since I was working independently, I knew I risked missing out on fresh perspectives that collaboration could bring. To push past my first instincts, I challenged myself by running the exercise twice, which surfaced new directions I hadn’t considered. From there, I developed a solution sketch to illustrate how a user flow might directly address the tension I identified in research.

To generate a wide range of ideas, I ran a Crazy 8s exercise. Since I was working independently, I knew I risked missing out on fresh perspectives that collaboration could bring. To push past my first instincts, I challenged myself by running the exercise twice, which surfaced new directions I hadn’t considered. From there, I developed a solution sketch to illustrate how a user flow might directly address the tension I identified in research.

sketch-ux-ui-product-design-designer-los-angeles

Crazy 8 (Attempt 2)

sketch-solution-ux-product-design-business-los-angeles

Solution Sketch

Information Architecture

To bridge my concept sketches with structural thinking, I created a site map and user flow to clarify the app’s information hierarchy. By doing this, I reduced ambiguity in the user experience.

To bridge my concept sketches with structural thinking, I created a site map and user flow to clarify the app’s information hierarchy. By doing this, I reduced ambiguity in the user experience.

To bridge my concept sketches with structural thinking, I created a site map and user flow to clarify the app’s information hierarchy. By doing this, I reduced ambiguity in the user experience.

Site Map

Site Map

ux-design-mobile-product-design-user-flow-los-angeles-designer-movies-app

User Flow

User Flow

ux-design-mobile-screen-tree-site-map-designer-product-los-angeles
ux-design-mobile-screen-tree-site-map-designer-product-los-angeles

Low Fidelity Wireframes

Low-fidelity mockups developed to help me further visualize and demonstrate the how this initial functionality could work. As I moved toward higher-fidelity design I highlighted several key areas to consider:

Empty states - What happens if a user has no friends connected yet?

Trust in AI summaries - Users may want to know where the summary is pulling from.

Hierarchy of information - consider testing whether the AI summary should be higher up on the Reviews tab.

Low-fidelity mockups developed to help me further visualize and demonstrate the how this initial functionality could work. As I moved toward higher-fidelity design I highlighted several key areas to consider:

Empty states - What happens if a user has no friends connected yet?

Trust in AI summaries - Users may want to know where the summary is pulling from.

Hierarchy of information - consider testing whether the AI summary should be higher up on the Reviews tab.

Low-fidelity mockups developed to help me further visualize and demonstrate the how this initial functionality could work. As I moved toward higher-fidelity design I highlighted several key areas to consider:

Empty states - What happens if a user has no friends connected yet?

Trust in AI summaries - Users may want to know where the summary is pulling from.

Hierarchy of information - consider testing whether the AI summary should be higher up on the Reviews tab.

ux-design-mobile-screen-tree-site-map-designer-product-los-angeles
wireframes-ux-design-low-fidelity-movies

Design

Style Guide

To bring StreamTyme to life, I built a style guide inspired by competitors like Netflix and Hulu. I wanted to capture the same excitement and energy people feel when they walk into a theatre while delivering an experience that users can enjoy from the comfort of their homes. Setting this foundation shaped the creative direction of my high-fidelity mock-ups.

style-guide-mobile-design-app-product-designer

High Fidelity

I first designed the following three screens of my mockup which represented the core interactions that would be concept tested.

mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies

Figure 1 - Solution Screens

I expanded the scope of the project to design the full onboarding flow so StreamTyme would feel like a complete, fully realized product and give context to the full user experience.

mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies

Figure 2 - Onboarding Flow

I made a deliberate decision not to prompt users to follow friends during sign-up. While social integrations were central to what we were testing, introducing them too early risked overwhelming new users and driving drop-off. I deferred this step, and instead allowed users to sync contacts later through the Activity page. This protected conversion rates at sign-up while still preserving opportunities for long-term social engagement

mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies
mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies

Figure 3 - New users following friends

Testing & Iteration

Concept Testing

I conducted a concept test with five participants. This was an unmoderated test where participants were shown the three solution screens (Figure 1) sequentially and asked to answer a set of questions. Three of the following participants were returning testers who had participated in the interviews. Two of the participants had no prior exposure to this project.

  • What stands out to you about this screen?

  • What do you expect to happen when you click on a movie poster

  • What would you change on the screen to make it more useful to you?

  • Is this what you expected? Why or Why not?

  • What would your next step be? 

  • What would you change to make it more useful to you?

  • What would you change to make it more useful to you?

  • How helpful is this information? 

Insights

Findings from concept testing were connected back to the research objectives and addressed the key business questions we set out to answer

How might improving the sharing experience reduce our reliance on paid advertising?

Participants showed interest in friend-driven discovery, suggesting opportunity for increased referral led play starts. This could viably expands organic reach and lessen the dependence on paid advertising.

Which features are most likely to increase user engagement and drive measurable lifts in organic traffic, referrals, and play starts?

Participants flagged the absence of a “Add to Watchlist” button. They expressed that this feature would be a lightweight pathway for friends (followers) to explore each other’s lists, boosting engagement and play starts.

Which signals do users find valuable versus noisy, and how can prioritizing the useful ones improve engagement and reduce churn risk?

Participants preferred real reviews as opposed over an AI summary. We understand that our users are need for authenticity and transparency. However, we risk information fatigue which may undermine conversion metrics we aim to improve.

Iteration

design-before-after-mobile-movie-app-final-los-angeles-portfolio

Prototype

In Figma I prototyped my design of my final iteration to showcase the whole experience beyond still mockups. Fun fact: Movies featured in my prototype are some of my favorite films.

A/B Testing

A/B Testing

Taking my final iteration, I remain confident moving forward with an A/B test. Four of five participants reported they’d use the features shown in the concept test, and all participants showed interest in exploring the all the features the app has to offer further.

Target

We will be targeting mobile-only users with a 50/50 split. By doing this we can isolate the impact of new social features on the segment that is most likely to adopt them. This also allows us to focus on one UI paradigm at a time.

Primary Metrics & Guardrails

Metric 1: Content Discovery Speed - defined by the time app opens to first play

Guardrail: Session Watch Time, Bounce Rate, Search Success Rate

Metric 2: CTR on Contact Sync - defined by the % of users who sync their contacts or link their Letterboxd

Guardrail: Opt-out Rate, Privacy Settings, Activity View Rate

mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies

Control

mockup-iphone-ux-design-ui-product-design-landing-page-explore-movies

Variant

Outcome

Although I wasn’t able to conduct an A/B test for this project, I outlined how I would evaluate success if testing were possible.

If primary metrics prove to be statistically significant without harm to guardrails then we will proceed to roll out to 100% of our mobile users. If our primary metrics are neutral we will revisit the design and consider iterations then relaunch the test again. If our guardrails decline, we will not ship this feature and do further analysis

Reflection

Working on StreamTyme challenged me to operate beyond design execution and work within the full product lifecycle. By grounding my decisions in research, I was able to connect design choices back to measurable business impact.

One constraint I faced was ideating independently. In a professional setting, I would actively seek out the perspective of colleagues (designers and non-designers) to welcome a diversity of ideas.

User feedback during concept testing also challenged my assumptions and pushed me to reconcile my design solution with technical feasibility and business priorities.

If given the chance, I would launch an A/B test to understand how these features perform in the context of the full experience. Whether the results validate the design or send us back to the drawing board, learning early prevents wasted investment and brings us closer to making better product decisions.

This project demonstrates that I can move fluidly between design execution and strategy. I am not only a technically skilled designer, but one who understands delivering value and long-term growth.

Thank you for reading my case study!

Ellie Brayton

Ellie Brayton

Ellie Brayton