Brook Preloader
CancelEvent
Tips
EnterLiveStream

No Filter Network UI & ID Development

Summary

Project: NoFilter Network Platform Interface – Revolutionizing Live Experience Creation

Overview:
NoFilter Network is a groundbreaking platform designed for creators passionate about producing dynamic live experiences. The platform empowers users to effortlessly schedule, share, and monetize their events or series, fostering meaningful viewer engagement. With its intuitive interface, NoFilter enables users to produce and stream 4K content with the finesse of professional creators.

Role: Creative UX/UI Design Lead

Tools & Technologies:
WebRTC, Sketch, Adobe Creative Suite, User Testing Platforms

Key Achievements

  • Delivered a cohesive brand identity that resonates with the platform’s target audience of ambitious creators.
  • Designed a user-friendly interface that simplifies complex functionalities, enabling users to focus on content creation.
  • Enhanced the streaming environment to support 4K content, ensuring a premium viewing experience for audiences.

Scope of Work

  • Brand Identity Enhancement: Redefined the visual and tonal identity of No Filter Network to reflect its innovative and user-centric ethos.
  • UI/UX Design: Overhauled the prelaunch beta interface, focusing on seamless navigation and an engaging user experience.
  • Streaming Environment Optimization: Elevated the WebRTC-powered streaming interface to ensure high-quality, professional-grade live-streaming.

Impact

NoFilter Network’s refined brand identity and intuitive design have positioned it as a go-to platform for creators seeking to elevate their live-streaming capabilities. The platform’s seamless user experience and professional-grade tools have set a new standard in the live experience creation space.

Brand ID

My active role
Illustration - Typography
Design illustration proposed to be leveraged within the web platform's UI and global market Identity
Iconography
No Filter Network’s ID conceptually includes a “microphone featured” icon treatment. In the concept application; an alternative mark was introduced with the following version; a mark that would carry a social relevancy and can be easily identifiable and bold. Highlighting the “NF play button” icon in the mark to make it visually adoptable to across broad expression spectrums.
Proposed Identity
Asset 5
Asset 8
Asset 6
Asset 7
ID Mark
Asset 9
Asset 12
Asset 11
Asset 10
Mobile Button

Color Story

My active role
Color Scheming
To create a versatile color palette that seamlessly transitioned between marketing materials and the platform's UI, I introduced a harmonious blend of calming, high-contrast tones. This approach combined atmospheric hues with soft, unconventional shades, reflecting NoFilter Network's inclusive and innovative ethos while appealing to a diverse audience. Functionally, the palette was designed to reduce visual strain, ensuring effortless navigation and enhancing overall user flow across the platform.
Style Research
To craft a cohesive theme for the platform, I conducted in-depth research by analyzing competitors, studying fellow designers’ takes on mainstream streaming services, and gathering insights from customer feedback on their streaming experiences.
WCAG Compliance
Every color chosen was rigorously tested for readability and cross-device compatibility, ensuring optimal performance and consistency across various streaming platforms.
Primary Colors
Style Copy 4
Style Copy 9
Style Copy 12
Brand Display Gradient
Color Styles
NF_GradientCresent
NF_Cresent
Secondary Platfrom Colors
Style Copy 10
Style Copy 8
Style Copy 7
Style Copy 5
Style Copy 6
My active role in

NoFilter.net Platfrom

Site Mapping - Planning
The platform was built with a hard-coded WebRTC integration, which served as the backbone for the majority of the user interface across the website. I created a “look-and-feel”, flexible layouts that adapt to the capabilities of standard device screen sizes; however, we primarily focused on soft rollout needs first. I created designs iteratively with the support of development using predominantly native coding, so created efficiencies in the design flow to allow for short testing and design adjustments within the 3-month design window.
Style Research
To develop a cohesive theme for the platform, I conducted extensive research, analyzing competitors, exploring fellow designers’ interpretations of mainstream streaming services, and synthesizing customer feedback on their existing streaming experiences.
Storyboarding - Planning
I created digital storyboards to visualize the platform's user journey, ensuring alignment and buy-in from both the development team and stakeholders.
NO FILTER Sitemap 2021 (1)
NO FILTER Broadcasting Platform Sitemap 2021

Monetized Features

The project’s scope expanded to address a critical gap in the initial beta platform: the lack of a monetized UX function, which hindered users from maximizing the value of their recorded content. To align with the client’s vision, I led the team in strategizing and implementing key site enhancements. We conceptualized and mapped out new functionalities, collaborating closely with developers to bring “Modal Features” to life. These innovative additions enriched the user experience and enabled the platform to scale its business model, paving the way for sustainable growth.

My role in creating

The Scheduler

Style / UX Research
In pulling together a solution that would uniquely for the platform, I reviewed competitors, fellow design's interpretations of some mainstream video conferencing services, and customer feedback on their current experiences with streaming & video conferencing services.
UX - Storyboarding
Part of expanding the project scope was to fill in the blanks where the beta experience needed a monetized “bridge”. My solution “The Scheduler” allows the user to set time, date, and details about their scheduled event or streaming series. The scheduler also, allows the user to control deployment time and set amounts of each stream. I wanted flow to make it easy enough where it felt familiar to a traditional video conferencing solutions but, reimagined to a “build your own” scripted and unscripted content streaming channel.
Prototyping - UI
I designed spec ready, exportable icons, phases, prompts, rollover states along with a features and function annotated layout

Self Published show card

My active role
Style / UX Research
The initial design lacked intuitiveness, failing to guide both customers and producers through a seamless and productive journey. To address this, I conducted extensive research, analyzing TV streaming services, exploring fellow designers’ approaches to mainstream ticketing and pay-per-view platforms, and synthesizing customer feedback on their experiences with existing streaming services.
UX - Storyboarding
Once content is entered into “The Scheduler,” the platform automatically generates a “Show Card”—a streamlined template that organizes and displays all event details, including upcoming, live, and “Vaulted Content.” This centralized solution empowers producers to showcase their content with the polished aesthetic of a professional streaming service, eliminating the need for design expertise.
Prototyping - UI
I designed a self-published channel card, inspired by conventional online streaming platforms, ensuring it was fully responsive and adaptable across multiple devices—from mobile to television. During production, I delivered spec-ready, exportable assets, including icons, phases, prompts, rollover states, and a detailed annotated layout outlining features and functionalities for each device type.
StreamCard_Published
StreamCard
Feature Mod
Features-Rollover
Feature Mod Copy
My role in creating NF's

Vanity Link

UX - Storyboarding
In addition to the “Show Card,” The Scheduler generates a “Vanity Link”—a customizable prompt that showcases the streamer’s event description, artwork for series or one-time events, and purchase options, creating a seamless and engaging viewer experience.
Prototyping - UI
Working closely with site engineers, we developed a “digital movie poster,” known as the Vanity Page. This feature enables publishers to share their events across all social media channels, providing live updates for event times or additions. The Vanity Link dynamically pulls data from the scheduler and personal profile database to generate a detailed, preformatted page. The Vanity Link is programmed to display multiple phases: Pre-Show Live Display Post-Show During production, I delivered spec-ready, exportable assets, including icons, phases, prompts, rollover states, and a comprehensive annotated layout detailing features and functionalities for each device type.
NF_VanityLink

Tips

The Tip Feature reimagines the traditional “like button,” shifting focus to content enthusiasts who actively support creators through financial contributions. This innovative approach fosters ongoing content creation and empowers creators with tangible resources. Seamlessly integrated into the platform, the feature is accessible via the creator’s “Show Card” (visible before, during, and after shows), their bio section, and during live streams, ensuring maximum visibility and engagement.

Tips
NF_TipIcon
Concept pitch of

Streaming Hub

The Streaming Hub was a cornerstone of the network’s second release during the soft launch phase, introduced post-funding. Designed to centralize access for both content creators and viewers, it serves as a unified platform for online streaming content. Fully responsive, the hub seamlessly adapts to desktop, mobile, and TV interfaces. Key features include:

— Simplified login or stream initiation
— Account and user controls
— Content creator controls
— Dashboard management
— Ad/content feature background slider
— Viewer Green Room
— Co-Host Green Holding Room

Re-designed

Live Stream Room

The Live Stream Room was reimagined as a dynamic, multi-functional space for streaming broadcasts, real-time “in-session” communications, and integrated merchandise displays. Designed with simplicity in mind, the interface mirrors familiar online video conferencing tools, ensuring ease of use for general audiences. At the same time, content creators are equipped with advanced moderation tools to manage streams seamlessly across mobile, desktop, and future TV streaming platforms.

StreamBar

Later rollout concepts for the live environment:

  • NoFilter Studio controls: Full control of audio mixing, commercials, chat, dashboard, stream cue control and multi camera broadcasting.
  • NoFilter Digital Prompter: Full Overlay prompter that allows the content creator and “co-creators” to stick to the script and not lose connection with the camera and the audience.
  • NoFilter Green Room: Holding area for viewers, VIP, and co-host/creators. The environments allow participants to speak among themselves, while advertisements run in preselection zones, and production notes shared with participants before a live event or pre-recorded event for co-creators.
KnockFeature

Knock Feature

The “Knock Feature” modal allows viewers to request participation in a live broadcast. Integrated with a notification system, it keeps users informed about their queue status, whether they’ve been added to the stream, rejected, removed, or if they choose to exit the live session.

NF_StreamingRoom_LiveStream_EarlyRelease
NF_Knocker Viewer Prompts
NF_Knocker Host Prompts Cont

User Controls & Vault

Re-designed

Within this framework, I designed a visual solution for the creator’s private content vault. Creators are equipped with tools to customize, edit, and manage posted content, including the ability to remove it from the featured cycle or set access expiration dates. Members are provided with a parallel interface, though with limited controls to ensure content security and creator autonomy.

Host Controls Copy
Screen Shot 2021-06-30 at 12.42.00 PM
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
Click outside to hide the comparison bar
Compare