channels

New feature

Blue Billywig’s Channels feature offers customizable templates to create Netflix-like video experiences, seamlessly integrating into websites and apps. Features include customizable thumbnails, video detail pages, and search functionality to enhance engagement.

Channels are intuitive, responsive, and easy to brand, allowing users to organize and monetize content effectively while analyzing performance to optimize viewer engagement.

Live:
“NEC Nijmegen: Explore NEC TV Channels”

Links:

What is Channels?
New innovations for channels.
Channels just got even better.

Role
Facilitate brainstorming sessions. User research, wireframing, prototype, mentored junior designer.

Methods
Design thinking, usability testing, interviews, wireframes, crazy 8, agile, scrum.

Team
Stakeholders, product owners, product manager, front-end developers, back-end developers, designers.

Challenge

The Channels feature wasn’t meeting customer expectations, so we decided to overhaul it. While the Channels recently received updates, the Channel editor in the OVP is still outdated.

Our goal was to update this editor to be completely self-service, enabling non-technical customers to manage their own Channels easily.

Our goals

Simplify Channel Creation

The original Channel editor was too technical, requiring trial and error for customers to achieve their desired setup.

We simplified the creation process, making it more accessible by reducing complexity and hiding advanced options behind toggles to prevent configuration conflicts.

Easy Channel Customization

Previously, customizing a Channel’s appearance required CSS skills, which many customers lacked.

We made it possible to easily adjust font families, sizes, and colors directly from the editor, allowing customers to effortlessly align their Channel’s design with their brand.

Approach

We chose for design thinking method due to its emphasis on user-centric innovation, providing a structured approach to problem-solving while encouraging creativity and empathy.

Our process

Emphatize

Understand the users’ needs and perspectives:

We immersed ourselves in the needs of our users through interviews and observations. For instance, we conducted user sessions to understand the problems they encountered with our current Channel editor.

Define

Clearly define the problem or challenge to be addressed:

We used insights from the empathize phase to formulate a clear problem statement. For example, we identified that users struggled to customize the appearance of their Channels without CSS knowledge.

Ideate

Generate a wide range of potential solutions through brainstorming:

We held several brainstorming sessions to come up with creative solutions for the defined problems. One of the ideas was to develop an intuitive interface where users could easily adjust fonts, colors, and layouts without technical skills.

Prototype

Make specific representations of the proposed solutions.

We created a prototype of the new Channel editor, allowing users to make changes through a user-friendly interface. This prototype included visual elements such as customizable buttons and previews of the changes.

Test

Gather feedback by testing the prototypes with users.

We tested the prototype with a select group of users to gather feedback and identify areas for improvement. During these tests, we found that users found the new interface intuitive and that it saved them time when customizing their Channels.

Iterate

Refine and improve the solutions based on user feedback, repeating the process as needed.

Based on user feedback, we refined the prototype to address their suggestions. For instance, we enhanced the editor by adding options for different font styles, integrating a comprehensive search function for videos, introducing a detailed view screen for each video, and expanding banner customization options.

Link:
Channels just got even better.

Wireframes

Before diving into Figma, I visualized some concepts using wireframes. This helped me outline ideas and structure before getting into the detailed design work.

Wireframing provided a simplified blueprint, easing the transition to the more refined stages in Figma where I fleshed out the designs with greater detail and interactivity.

Considerations during wireframe development:

User stories

As a
OVP user

I must have access to
an easy to use Channels editor

So that I can
easily create and share new Channels with my content on them.

As a
OVP user

I must have access to
easily change the appearance of my Channel,

So that I can
make it blend in with the styling and branding on my own page.

Detailed wireframes

Detailed wireframes for discussions with the dev team.

During the wireframe phase, it was important to create wireframes for both the front end and the back end. This allowed us to clearly visualize and differentiate what the user sees—a series of videos—and how they can be created in the system.

I visualized wireframes and considered which elements users might want to style and how they could do it. I thought about the order of these elements and how to categorize them to keep the options organized and manageable.

Results

After visualizing the wireframes, we achieved:

Achievements

Create your own layout.
Choose from different headers.
Choose from various playlists.
Ad space (banner).
Responsive layouts.
Select fonts and button styles.
Detail screen with or without blurred background image.
Search function.

Learning moments

It was challenging to offer the builder effectively to the customer. The number of options remains manageable, and what started as a feature with fewer components has shown great potential. We have since added more styling options to provide customers with a unique experience, while keeping it controllable for our platform.

If more features are added in the future, it might be worthwhile to consider creating a ‘builder’ environment where users can select, drag, and drop elements on a canvas, similar to Wix or Elementor.