Brook Preloader
CancelEvent
Tips
EnterLiveStream

No Filter Network UI & ID Development

Summary

Introducing NoFilter Network, a visionary platform tailored for those with a zeal for crafting dynamic live experiences. NoFilter equips users with the means to seamlessly schedule, share, and monetize their events or series, driving compelling viewer engagement. This intuitive platform empowers users to curate 4K streaming content effortlessly, akin to professional creators. The project’s scope encompassed enhancing the brand identity, UI, and UX for the prelaunch beta phase. This involved refining the WebRTC-operated website interface and streaming environment to provide an elevated user experience.

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
In developing colors that would both work in marketing and in the product's platform UI; I introduced calming, high contrast colors that would allow some visual excitement by blending atmospheric colors with more human, soft, unconventional color selections that No Filter Network can speak to a diverse audience. For function, the color pallet does help the user’s eye to not feel strained to see the platform’s functionality and increase user flow.
Style Research
In pulling together a theme that would work for the platform, I reviewed competitors, fellow design's interpretations of some mainstream streaming services, and customer feedback on their current experiences with streaming services.
WCAG Compliance
All colors selected were tested for readability and how the colors would translate across different streaming devices
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 site’s platform was hard-coded with a WebRTC integration that controlled the majority of the user’s interface throughout 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
In pulling together a theme that would work for the platform, I reviewed competitors, fellow design's interpretations of some mainstream streaming services, and customer feedback on their current experiences with streaming services.
Storyboarding - Planning
I built digital storyboards to conceptualize the platform's visual pathway to firm support with the development team and stakeholders
NO FILTER Sitemap 2021 (1)
NO FILTER Broadcasting Platform Sitemap 2021

Monetized Features

The scope broadened its primary emphasis to address the absence of a monetized UX function in the initial beta platform. This omission prevented users from fully capitalizing on their recorded content. In pursuit of the client’s objective, I collaborated with the team to strategize and implement site enhancements. We devised mapped functions, subsequently partnering with development to construct “Modal Features.” These innovative additions enabled the platform to effectively expand its business model and accommodate 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 problem in the initial design was not intuitive or journeyed the customer and producer productively. I reviewed TV streaming services, fellow design's interpretations of some mainstream ticketing and pay per video platforms along with, customer feedback on their current experiences with streaming platforms.
UX - Storyboarding
Once you input your material into “The Scheduler” the platform builds what is called “The Show card” This card is a template to frame all data from the scheduler to display upcoming, live and, “Vaulted Content”. I felt it was a centralized solution for producers, to display their content to look just like their favorite streaming TV show without having to be a designer.
Prototyping - UI
I created a self-published channel card, familiar to conventional online streaming platforms. In designing the card, it was important that it be formatted would fit across multiple displays, from mobile to television. In production, I created spec ready, exportable icons, phases, prompts, rollover states along with a features and function annotated layout for each device
StreamCard_Published
StreamCard
Feature Mod
Features-Rollover
Feature Mod Copy
My role in creating NF's

Vanity Link

UX - Storyboarding
Along with the “Show card”, The Scheduler generates what is called a “Vanity Link. The prompt display's streamer's event description, series show or one time event art and purchase options.
Prototyping - UI
Collaborating with site engineers, we developed a “digital movie poster”, calling it the vanity page. The prompt section allows publishers to share their events on all social media channels for live updates of event times or event additions. The vanity link pulls all of is summited data from the schedule and personal profile database to publish a detailed, preformatted page. The vanity link, programmed to display multiple phases: Pre Show Live Display Post Show In production, I created spec ready, exportable icons, phases, prompts, rollover states along with a features and function annotated layout for each device.
NF_VanityLink

Tips

The tip feature takes the place of the conventional “like button,” channeling attention towards content enthusiasts who actively support its ongoing creation through contributions. This innovative approach fosters the provision of resources. The tip feature is seamlessly integrated into the content creator’s “Show card” – visible before, during, and after the show – as well as within their bio section and during live content streams.

Tips
NF_TipIcon
Concept pitch of

Streaming Hub

The streaming hub formed an integral component of the network’s second release during the soft launch phase, following funding. The idea was to consolidate both content creators’ and viewers’ access to the online streaming content section, providing a centralized platform. This design is responsive, adapting seamlessly to desktop, mobile, and TV formats. This control system enables users to:

  • Login or Start an existing stream simplified
  • Account User Controls
  • Content Creator Controls
  • Dashboard
  • Ad / Content Feature Background Slider
  • Viewer Green Room
  • Co Host Green Holding Room
Re-designed

Live Stream Room

The live stream room was visually transformed to serve as a versatile space for both streaming broadcasts and “in session” communications, along with integrated merchandise display. Operating similar to standard online video conferencing setups, the controls remain user-friendly for the general audience. However, content creators possess advanced controls to effectively moderate streams across mobile, desktop, and future TV streaming modes.

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 enables viewers to express their interest in joining the live broadcast stream. Through a notification system, viewers are informed about their queue status, inclusion in the broadcast, rejection, removal, or when a user exits the live stream.

NF_StreamingRoom_LiveStream_EarlyRelease
NF_Knocker Viewer Prompts
NF_Knocker Host Prompts Cont

User Controls & Vault

Re-designed

Within this framework, I devised a visual solution for the creator’s private content vault. Users are provided with controls to customize and edit posted content, granting the ability to remove it from the featured cycle or establish an access expiration. Simultaneously, members are granted access to a similar solution, albeit with restricted options.

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