Portfolio Deniz Topuz
Portfolio Deniz Topuz
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.
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
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
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:
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.