Menu
Content protection means making sure that your videos or live streams are only seen by the people you want to see them.
This could mean keeping them away from certain parts of the world, specific websites, or people who haven’t paid to watch. It’s like putting a lock on your content to keep it safe and under your control.
Role
User research, brainstorm sessions, wireframing, prototype.
Methods
Design thinking, user interviews, A/B testing, wireframes, Agile, scrum.
Team
Stakeholders, Product owners, Product manager, front-end developers, back-end developers, designers.
Our challenge was to keep our clients’ media clips/live streams/channels private, allowing access only to authorized viewers due to rights, sensitive content, or subscription rules.
We needed a solution that our clients could use to easily manage access for all or some of their content.
Our goals
Attract New Clients:
Improve Client Experience:
Client Control Features:
Let clients control access by:Supported Content Types:
Viewer Notification:
As a content publisher
I want to be able to restrict access to my content based on geolocation
So that I can comply with specific distribution rights.
Â
BUSINESS REQUIREMENTS
As a content publisher
I want to be able to restrict access to my content based on IP or domain
So that I can safely distribute my internal communications video content.
Â
BUSINESS REQUIREMENTS
As a content publisher
I want to be able to restrict access to my content based a password
So that I can control who has access to my video content.
BUSINESS REQUIREMENTS
Â
As a content publisher
I want to be able to restrict access to my content based subscriptions and/or transactions
So that I can monetise my premium video content.
BUSINESS REQUIREMENTS
Â
As a content publisher
I want to be able to restrict access to my content based on a token
So that I can safely distribute my internal communications videos.
BUSINESS REQUIREMENTS
"How can we provide new and existing clients with a solution that allows them to easily create policies to protect their videos?"
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
Understand the users’ needs and perspectives:
Clearly define the problem or challenge to be addressed:
Keep it Simple:
Not all users are “power users”; make it easy for everyone to set and manage policies.
Trust:
Limit the ability to create and update policies to a few users.
Transparency:
Allow all OVP users to see what policies are set.
Visuals and Explanations:
Provide easy-to-understand visuals and clear explanations.
Select Multiple:
Enable users to select multiple countries at once for policies.
Generate a wide range of potential solutions through brainstorming:
I created wireframes showing two different user flows (one with a wizard and one without). My goal was to make it as simple and understandable as possible. Because it’s quite technical, I focused on making it feel intuitive. I researched similar mechanisms and experimented with them.
After several meetings with the dev team and the client, I visualized a method in wireframes that everyone agreed on. Then, I translated these wireframes into pixel-perfect designs in Figma, matching the new platform redesign.
Make specific representations of the proposed solutions.
While visualizing the flows, I also thought about how we should display certain notifications in the player skin. For example, how do you show messages when users don’t have permission to watch a video?
These screens also need to be configurable. I discussed this with the team and shared our findings in a meeting. I also brought prototypes to ensure we were all aligned with the solutions.
Gather feedback by testing the prototypes with users.
During the testing phase, I showed all the solutions again to the dev team and customers. By sharing and collecting feedback more frequently, the chance of major changes being needed was much smaller.
This was true for both the dev team and the client. This allowed me to finalize the designs and hand them over to the dev team.
Refine and improve the solutions based on user feedback, repeating the process as needed.
Before diving into Figma, I started by sketching concepts the old-fashioned way. These wireframe sketches helped me outline ideas and structure before moving on to detailed design work.
Wireframing provided a simplified blueprint, making the transition to the more refined stages in Figma smoother. In Figma, I fleshed out the designs with greater detail and interactivity.
Considerations during wireframe development:
After visualizing the wireframes, we achieved:
Link to all files:
Link to all files:
I have learned how content protection works and understood the technology and terminology. I also learned about different types of policies that can be created. This knowledge helped me design a more intuitive user interface. Although the technical meetings with the development team were sometimes hard to follow, using wireframes made it easier to discuss and understand.
I enjoyed getting enthusiastic feedback and involving the team in all stages of the design process. This collaboration allowed us to create something valuable for end users together.