Redesign

Redesign HTML 5 player skin

The new player skin

With the branded video player I created, your videos stand out by easily customizing colors, logos, and thumbnails. The user-friendly editor allows you to create a custom player in minutes, with updates instantly visible on your website.

I undertook a redesign of the player for three main reasons. Firstly, to create the most aesthetically pleasing player skin on the market, enhancing user experience and interface.

Secondly, to improve performance, making the player more lightweight and less cumbersome.

Lastly, to use a more efficient code base, aligning with our mission to achieve net-zero emissions through a more eco-friendly video player.

Role
Facilitate brainstorming sessions. User research, wireframing, prototype.

Methods
Design thinking, usability testing, A/B testing, wireframes, crazy 8, Agile, scrum.

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

Challenge

The player skin was outdated. Buttons were too small or not well-aligned, making it feel non-intuitive. Given that videos in the player skin were used by major clients like Allerhande and Ajax, it was essential to have a modern player skin that matched the style of their websites.

Our goals

Modern player skin

We wanted to create the best player skin that looks modern and is easy to use. This player skin should rank alongside major player skins like YouTube and Vimeo.

Customization options

The number of options made it too complex for users to create a player skin. The goal was to offer enough customization options without overwhelming users. The idea was “less is more.”

Best user experience on any screen

This player not only needed to look modern but also feel intuitive on every possible screen, from desktop to mobile.

Lighter and faster version

The old player skin was outdated, and the code needed cleaning up and partly rewritten to make loading videos easier and display transitions smoother.

WCAG compliant

We made sure our modern player is accessible to everyone by following WCAG guidelines, focusing on level AA. This ensures inclusivity for our target audience without compromising on design.

“How can we improve the user experience and ease of use of our player skin, which is also customizable at the same time so that it matches the corporate identity of the customer?”

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:

  • I interviewed many colleagues who work with clients configuring the player skin daily. While initially focusing on its appearance, I also listened to their experiences in creating/configuring the player skin, aiming to involve the organization in the process—a step not previously emphasized by previous designers.
  • Additionally, I interviewed 5 clients to gather feedback on their experience with the player skin.
  • I also interviewed 5 end-users within my network who represent the target audience and incorporated their feedback into my research.
  • I investigated user preferences regarding the display of various controls and states (such as start, pause, end state) in the player skin. This includes the positioning of play buttons, time display, volume controls, progress bars, etc., for both desktop and mobile.
  • Furthermore, I examined existing players like YouTube, Vimeo, Netflix, Videoland, NPO, and apps like Ziggo and KPN video players. I observed where they place functionalities and how the interface behaves.
Define

Clearly define the problem or challenge to be addressed:

  • Users worldwide encounter difficulties with the player skin’s mobile usability due to small buttons.
  • Users perceive the player skin as outdated compared to modern alternatives, impacting their satisfaction.
  • Customers who configure the player skin express a desire for more uniqueness and customization options.
  • The problem is most pronounced on mobile devices, particularly on news and sports websites.
  • Improving the user experience and interface of the player skin is crucial for ensuring user and customer satisfaction.
  • Enhancing satisfaction leads to increased profitability for the organization.
  • We need to consider various scenarios when designing the player skin: interactive video, live, stories/shorts, mobile, channels and audio.
Ideate

Generate a wide range of potential solutions through brainstorming:

  • Brainstorm Session: Player Skin

    • Objective: Generate ideas for modernizing the player skin and improving usability on desktop and mobile devices.
    • Desired Outcome: Detailed sketches for scenarios and prototypes.

  • Card Sorting Brainstorm Session:

    • How can we ensure the player skin matches the customer’s website or app identity?
    • How can we improve the scalability of the player skin on desktop and mobile devices?

  • Brainstorm Session with Crazy 8 Method:

    • Redesigning the player skin for interactive videos, considering options like displaying buttons below the video or providing a set of buttons for implementation within interactive content.
    • Ensuring video thumbnails align with the website or app’s aesthetic.
    • Enhancing the end screen of the player skin.
    • Designing a portrait mode player skin for short videos.
    • Creating a player skin for audio-only content.
    • Improving the user experience for seeking specific information within videos.
Prototype

Make specific representations of the proposed solutions.

  • Visualized sketches from the brainstorming session in Figma.
  • Documented the design and implementation process of a player skin for the development team.
  • Created interactive components of the buttons and documented their functionality.
Test

Gather feedback by testing the prototypes with users.

  • Tested the player skin on both desktop and mobile devices.
  • Checked if the transitions were correctly implemented, including button animations triggered upon clicking or pressing.
  • Regularly collaborated with the front-end developer to fine-tune and perfect the details of the player skin.
  • Conducted internal tests of the player skin and shared findings with the design team.
  • Incorporated feedback into the following sprint.
Iterate

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

  • Throughout the months we spent designing and developing the player skin, we constantly iterated and made improvements. For example, I increased the contrast of icons and titles by adding a shadow border, ensuring they remain visible on light backgrounds and are WCAG compliant. Additionally, gradients were added behind all icons (functionalities) and text to maintain visibility and usability at all times.

Wireframes

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:

Visualizing the Start Screen

I’ve contemplated how and where I want to visualize the play button on the start screen. Additionally, I’ve considered where the user might want to see the title and time display.

Type of player skins

The platform must accommodate many scenarios, making it crucial to design a player skin that fits each situation. These scenarios include live streaming, interactive video, shorts, channels, mobile, and audio content.

By tailoring the player skin to these specific use cases, we ensure an optimal viewing experience across different types of media and user interactions.

Icons & patterns

I prioritized making sure users can easily recognize the icons, and positioned them in a grid layout that feels intuitive for both desktop and mobile. I experimented with this approach, taking into account current trends and examining how existing players handle paddings, margins, and icon usage.

Results

After visualizing the wireframes, we achieved:

  • Two types of configurable player skins.
  • Options for different styles of play buttons.
  • Documentation of the player skin.

Links:


Customers:

Achievements

  • Fresh look.
  • New customizations options.
  • The best user experience on every screen.
  • Going green at lightning speed.
  • WCAG improved.

Learning moments

I learned that designing a player skin is more complex than it seems. It involves handling various states and ensuring responsiveness. We introduced a contrast checker for the play buttons, so if users choose colors with poor contrast, an automatic contrasting color is applied.

The player skin now includes a second design and additional features like chapters, highlights, and live video. These were designed with components, but in hindsight, a separate design system specifically for the player skin would have been better, similar to the OVP redesign.