B-Listed is 2-sided marketplace that streamlines the licensing and distribution of content created by diverse filmmakers across Web3 and Web2. User roles include filmmakers, distributors and B-Listed admin.




Miguel Rodriguez (me) - Product Development
Joy Southers- CEO/Founder
Claudia Visfoss - Graphic Designer

Project Type

Product Architecture + UI & UX Design


Principal UX/UI Designer

Project Overview

Designing a multi-functional platform

B-Listed is a mobile and web application that I designed for B-Listed Media, inc. As a the leader of a small team, my job was to help manifest the vision of the founder while synthesizing research and balancing design thinking strategies with a fixed timeline.


Learn the product concept of the founder and create a usable, useful design cross-collaboratively with users and the team.

My Role/Responsibilities

Product Architecture
UX/UI Design
Style guide generation
User testing

Research & Planning

A design that's familiar but new

Competitive Analysis

In the founder's words - "the app should allow distributors to search and screen films just as easily as they would browse Netflix or Hulu".

Preliminary research began with visual studies of B-Listed's direct and indirect competitors to identify trends on how layout, typography and color are leveraged to create a consistent content streaming experience.


Most of the pre-product research and empathy data was collected before I joined the team. With that data as a foundation, I began to construct the core IA and wireframes to better understand core user journeys, and establish feedback loops with users and stakeholders.


After 3 iterations and 5 usability interviews per iteration, the layout and content of the wireframes increased in fidelity until stakeholders were satisfied. The decision to go mobile-first as a design best practice was accepted by stakeholders early in the process.


Establishing a branded, dynamic and scalable design system

Using the data gathered in earlier phases of the design process, I developed a small-scale design system that was visually exciting, and in-harmony with the brand guidelines.

Design System Ethos


Vibrant, yet purposeful use of color. Appealing to the future-leaning Gen Y & Gen Z target audiences.


Typographic hierarchy and contrast make important information stand out


Similar component layouts that repeat throughout the product


Proxima Nova was chosen by the brand designer for its neutral, Helvetica-like qualities and it's legibility at small scales.

Color Palette

I expanded the existing color palette to accommodate the needs of the platform’s  key functions.

Key Considerations
  • Shades of the primary colors facilitate visual hierarchy
  • Clear messaging is created via a bold secondary palette
  • Contemporary and vibrant tertiary tones standing out in the marketplace
Component Library

I created and maintained the component library throughout the design and development process, which successfully served as the single source of truth for all team members and ensured visual consistency across the platform.

Final Dashboards

Designing for clarity and familiarity

The final design aims to reduce the friction typically experienced by users navigating complex licensing and distribution processes. Combining these actions into one unified platform, filmmakers and distributors can focus on connecting, transacting, and enjoying their art with greater ease.

Home Dashboard

A familiar home page, with films showcased based on the user's tastes. This is the jumping off point for all action within the app.

Film Details and Quick Actions

Displays all pertinent film details and allows distributors to send document requests, messages, and schedule screeenings.


The shopping flow sits on an inviting and relaxing background gradient, which is intended to pull the user to the store over and over. Users can navigate through the shop quickly with oversized images, text and smooth transitions.


You can access the mobile prototype here.

    What's Next

    Launching soon!

    B-Listed is set to launch in mid 2022. After launching with an MVP, the team plans to further iterate on the product's design, features, and functionality.

    More Case Studies