Jolina Huang | Product Designer

Case Study

Unifying data streams into one dashboard

Freelance Product Design Intern @Mythical

Role

Product Designer

Timeline

10/24 – 12/24

team

1PM, 3 Designers, 6 Developers

skills

UX Design

UX Research

User Interviews

Design Systems

Introduction

Mythical Entertainment is a digital entertainment company founded by Rhett and Link, creators of the popular YouTube show Good Mythical Morning (with over 19 million subscribers).

The company produces a variety of online content, including comedy, talk shows, podcasts, and scripted series. It has expanded into multiple media ventures, one being Mythical Society.

about mythical society

Mythical Society is Rhett and Link’s exclusive membership platform offering fans exclusive content, behind-the-scenes access, unique collectibles, and more.

The platform creates a space where fans can access content and interact with both the creators and fellow fans in ways that go beyond what is available to the general public.

user problem

The current analytics setup makes it difficult for non-technical team members to interpret key metrics.

Mythical Society’s mobile and web apps pull data from Google Analytics, Firebase, and JW Player, 3 completely separate platforms, leading to confusion and difficulty in making data-driven decisions for their team.

Google Analytics

Firebase

JW Player

user interviews

Conducting in-depth interviews and task analyses with the Mythical team helped us uncover major usability challenges and opportunities for a more intuitive dashboard experience.

We collected key major findings from these user interviews and grouped them into separate groups organized by patterns within the data. A finding that stood out significantly was that:

For 2/3 user tasks we asked the members on the team to complete:
- 66% of them rated an average of 0/10, with 0 being the most difficult
- The most technical person on the entire Mythical team had difficulties with figuring out how to complete the 3 given tasks

competitive analysis

Users struggle to perform simple tasks due to overwhelming layouts and unclear hierarchies on competing data analytics platforms.

In researching and considering insights from the user interviews for all of Mythical’s currently used platforms, here are some some findings:

Firebase → Navigation bar has a cognitive overload of information, which is overwhelming to look at and especially to use
JW Player → There are so many widgets, buttons, and text, that users have difficulty with determining what actions to perform
- Found that the "View Analytics" button is used the most, but it doesn't stand out much in hierarchy
Google Analytics → Lack of customization, so when scrolling through data, there are so many types that users (especially those who are non-technical) don't know where to start

Firebase

Google Analytics

JW Player

Lack of customization

Cognitive overload of information

Button that users perform the most, but it doesn’t stand out enough in hierarchy

Difficulty with understanding what actions to perform

top user pain points

Insights from user pain points shaped our focus on clarity, customization, and simplifying overall experiences.

Existing dashboards are overwhelming and hard to navigate. One team member said, “Explain it to me like I’m five years old,” highlighting the need for simpler and more intuitive terminology.

Current dashboards lack customization, making it difficult for team members to focus on key metrics. Users can’t filter behaviors or adjust date ranges, limiting insights relevant to each role.

Teams rely on multiple platforms that don’t integrate seamlessly with one another, which creates confusion and inefficiencies when accessing or analyzing data across platforms.

framing the Problem

How might we design a dashboard that centralizes Firebase, Google Analytics, and JW Player, making it easier to analyze and report key metrics for data-driven decisions?

proposed solution

A unified platform that allows members of the Mythical Society team to view a mix of data points across all their analytics tools in a single, user-friendly dashboard.

This enables the team to easily access key insights and make informed decisions to refine their content strategy. It also allows them to gain a better understanding of their user engagement, video performance, and the popularity of their custom events.

design system

Accessibility and brand consistency guided the design system.

Using the branding kits from Good Mythical Morning and Mythical Society, we created a design system focused on accessibility and consistency. We prioritized dark mode to reduce information overload and selected black and green-blue contrasts because they best met WCAG guidelines, ensuring the system is visually cohesive and user-friendly.

Typography

Archivo

Heading 1

Archivo - 42px - Bold

Heading 2

Archivo - 35px - Bold

Heading 3

Archivo - 30px - SemiBold

Subtitle 1

Archivo - 20px - Bold

Subtitle 2

Archivo - 20px - SemiBold

Body 1 (SemiBold)

Archivo - 16px - SemiBold

Body 1 (Regular)

Archivo - 16px - Regular

Body 2 (SemiBold)

Archivo - 14px - SemiBold

Body 2 (Regular)

Archivo - 14px - Regular

Text

#F4F4F4

Text 2

#E4E4E4

Background

#181818

Accent Background

#2D2C2E

Primary

#70A59B

Secondary

#39BFA6

#094F41 - 100%

#39BFA6 - 100%

Gradient 1

#70A59B - 100%

#2C2B2D - 0%

Gradient 2

Color Palette

Effects

Shadows

Shadow for dropdowns

Shadow for quick actions

Round corners

15px for widgets

10px for buttons

Logo

Components

Dashboard

Real-Time Analytics

Custom Report

Media Library

Search any insight, data point, or video

11/20/24

11/27/24

Add Widget

Zach’s View

personal dashboard final design

Designed a customizable dashboard that prioritizes quick actions and data visibility for Mythical’s internal team.

Descriptive Terminology

Surfaced and simplified confusing data types by concisely explaining what each category means

Surfaced Key Actions

Quick-access buttons make frequently completed tasks faster and easier to reach

Customizable Layout

Users can add and delete data types, and/or rearrange widgets for personalized views

media library final design

Created a centralized media hub to organize, analyze, and customize video data.

Filter by Key Attributes

Users can reorder or select key information about videos by applying filters

Integrated Video Gallery

All video data is organized in one place for easier access and management

Relevant Data Widgets

Displays most commonly analyzed video statistics based on what team members found important during user interviews

Detailed Video Insights

Key info like media ID, tags, and published details are shown for quick reference and reporting

*All mock data shown is for demonstration purposes only

client handoff

Our final handoff surpassed client expectations and redefined efficiency.

In our final stakeholder meeting, we received feedback that our cross-functional team accomplished more in six weeks than their internal team ever had on a project. They resonated with the clarity of the dashboard redesign, the added customization features, and the overall user-friendly experience. Our final product eliminated the feeling of overwhelm, reduced the learning curve, and made team collaboration more seamless.

future improvements

If I had more time, I would conduct usability testing, leverage real-time analytics, and redesign graphs.

I would conduct further usability testing to uncover more pain points, frustrations, and confusions from Mythical's internal team. I would also want to integrate real-time analytics to better understand how users interact with key features as they navigate the platform. Insights from both would guide iterative redesigns of graphs and visualizations to make data more intuitive, actionable, and engaging.

What did i learn?

I experienced the impact of effective teamwork, ongoing communication, and confident design advocacy.

Here are some of my most impactful takeaways:

Collaborate effectively with other designers, engineers and a project manager to hand off final product successfully and on time to our stakeholders.
Present progress and receive constant feedback through weekly meetings with stakeholders.
Advocate for my ideas within a cross-functional team with confidence.