New feature

Shorts

The Shorts feature

In the newly redesigned Online Video platform, Shorts refer to repurposed short-form videos created from existing content. Users can easily upload their content and organize it into playlists for efficient management.

With three unique display formats and over 20 customizable settings, creators can personalize their Shorts to match their content and brand identity, offering audiences a seamless viewing experience tailored to their preferences.

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.

Shorts are hot

Short-form video content is quickly becoming one of the most popular forms of social media content source

  • 30% of marketers plan to invest in short-form video content.
  • 73% of consumers prefer short-form video content.
  • 30% of short-form video content is watched 81% through.
  • Highest ROI: As well as best format for lead generation and engagement.

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:

  • Research shows users love this, so we planned how to design and sell it.
  • We learned that shorts are successful because they quickly provide a lot of information or essential details. This keeps users updated on what interests them.
Define

Clearly define the problem or challenge to be addressed:

  • Optimize player experience for Shorts behavior and features.
  • Enable clients to embed a Shorts player in their website or app.
  • Allow Channel creators to add a Shorts section to their Channel or website.
  • Offer clients monetization options for Shorts.
  • Provide clients with metrics to optimize Shorts viewer engagement.
Ideate

Generate a wide range of potential solutions through brainstorming:

  • We thought about how users can view a series of shorts videos.
  • It’s important to visualize the controls available in the player.
  • We considered how users can create a ‘shorts experience’ on the platform and what configuration options they need.
  • Since it can be used on both desktop and mobile, we thought about different video formats and how they behave.
     
Prototype

Make specific representations of the proposed solutions.

  • We first created wireframes to visualize the ‘shorts experience,’ showing all videos and the backend configuration.
  • The initial version of the ‘shorts experience’ was visualized, built, and demonstrated at DMEXCO (Digital Marketing Expo & Conference) link.
  • To stay consistent with the player skin redesign, we reused the same icons and controls but positioned them differently for the ‘shorts experience.’
Test

Gather feedback by testing the prototypes with users.

  • During testing, we received positive feedback but needed to improve performance as it could be laggy.
  • We created a list of improvements and addressed them in each sprint.
  • This was also the time to add a separate ‘shorts’ experience in the main menu of the platform, allowing users to create their own ‘shorts experience.
 
Iterate

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

  • After multiple sprints and user tests, we launched the ideal ‘shorts experience.’ This was integrated with the release of the updated video platform. See LinkedIn post.

     

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:

Flowcharts

Flowcharts to outline the steps for creating shorts.

  • During the wireframe phase, flowcharts are used to outline the steps for creating shorts. This helps in planning and visualizing the process from start to finish.
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.

Results

After visualizing the wireframes, we achieved:

  • Defined the flows.
  • Set player behavior for shorts.
  • Designed ad appearance.
  • Supported video formats.

Achievements

  • Player states for desktop and mobile.
  • Various video formats.
  • Create shorts experience in the redesigned platform.
  • Fully responsive.
  • Embed on your page.

Learning moments

During the redesign, I focused on familiar patterns to keep the design consistent. Headers could differ in content but needed to have the same look and feel across different menus.

For example, the media library page is different from the shorts page, which presents a series of videos. It was challenging to keep everything visually fitting but consistent and recognizable for users.

I also found it interesting to logically split the configuration options. Creating a responsive concept for both the front and back end of the shorts experience was enjoyable. Regardless of the video format, it should scale well and perform smoothly.