Redesign

Redesign Online Video Platform

The Video Platform

Imagine a cool video platform designed to make your life easier when dealing with video content. It’s like having a helpful assistant for businesses and content creators.

This platform makes uploading, organizing, and tweaking video content a breeze. So, whether you’re a small business or a solo creator, it’s got your back!

Challenge

The platform is awesome with all its features, but users find it overwhelming. There are too many options, and you can easily get lost in all the choices.

Our goals

Simplify Features

Review and streamline platform functionalities for user relevance.

Minimize User Confusion

Simplify navigation and feature usage to reduce reliance on support.

Improve Navigation Flow

Enhance user experience by minimizing navigation switches.

Modernize Platform Appearance

Update platform design for increased trust and reliability.

Clarify Terminology

Simplify technical language for better user understanding.

Ensure Accessibility (WCAG AA)

Adhere to WCAG AA standards for improved accessibility.

How can we help end-users complete tasks independently on the platform?

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:

  • Conducted stakeholder interviews to identify platform issues and gather initial insights.
  • Organized usability tests with both colleagues and customers, consisting of an initial interview followed by user interaction recording.
  • Allowed users to navigate the platform freely during testing, observing behavior and prompting verbal thoughts and feelings for deeper insights.
Define

Clearly define the problem or challenge to be addressed:

  • Categorized insights from interviews and usability tests, documenting pain points for each menu item digitally to streamline the process.
  • Defined problem statements based on identified pain points within each category, facilitating the application of the “how might we” method to brainstorm creative solutions for the next phase.
Ideate

Generate a wide range of potential solutions through brainstorming:

  • Conducted brainstorming sessions with various users to validate our findings and ensure alignment with their perspectives on the platform.
  • Collaboratively identified pain points and established solution boundaries to guide idea generation.
  • Utilized the “how might we” method to frame potential solutions within the defined boundaries.
  • Employed the Crazy 8 method to generate a multitude of ideas, allowing participants to pitch and vote on the most promising concepts for further digital development.
Prototype

Make specific representations of the proposed solutions.

  • Digitally developed designs using Whimsical, then presented solutions to both end users and the dev team, incorporating feedback to refine wireframes.
  • Visualized wireframes in Figma, establishing a design system for consistency and efficiency, defining grid systems, colors, and typography.
  • Implemented a 4px grid method and utilized component-based design to enhance efficiency and collaboration with the development team.
  • Prioritized redesigning the frequently used media library.
  • Focused initial redesign efforts on the “shorts” experience to align with market trends. The “shorts” feature enhances user engagement by enabling sequential viewing of short videos.
  • The platform received a comprehensive makeover, with the “shorts” feature being the first project rolled out to end users.
Test

Gather feedback by testing the prototypes with users.

  • The development team conducted multiple iterations to ensure all functionalities worked properly.
  • Regular meetings were held to ensure both functionality and visual aesthetics were satisfactory.
  • Enhanced interactivity to address static feel, adding color contrast and depth to elements like hover blocks.
  • Updated outdated navigation menu to match redesign, integrating it as a “quick win” within the overall project scope.
  • Shared a test link with select customers for testing, receiving overwhelmingly positive feedback.
Iterate

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

  • Conducted regular testing during sprints, recording findings and collaborating with the development team to incorporate improvements.
  • Introduced a toggle switch to allow users to switch between the old and new designs, easing the transition and enabling users to familiarize themselves with the redesign without losing access to their familiar environment.

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:

Competitive Analysis

Conducted despite challenges with closed systems, gaining insights from FAQs and help centers where possible.

Study of Similar Services

Examined UX/UI patterns of platforms like YouTube, Canva, Vimeo, and Adobe (Express).

Grid System

Implemented a scalable and responsive grid system to present functionalities in a clear and organized manner.

Incorporation of Brainstorming Concepts

Integrated concepts generated from brainstorming sessions into the wireframe designs.

Results

After visualizing the wireframes, we achieved:

Achievements

Learning moments

Managing multiple projects simultaneously while developing a design system can be complex and challenging.

Certain UI elements such as buttons, forms, typography, and filter usage behave differently in the redesign compared to the old interface. This can make it challenging to accommodate both scenarios when introducing new functionalities.