Peech is a web-based product that offers an algorithm-backed platform that turns raw video content into professionally edited videos. 

A newly formed company based out of Israel, Peech approached us with the request that we refine their product to better communicate the features and benefits of their unique video editor. 

I was part of a remote team of three talented visual designers with occasional support from stakeholder design managers and scrum leaders. As a team, we coordinated all facets of the design process including visual, product and prototyping as well as conducting user research thru remote interviews and surveys.

 

*    *    *

 

THE CHALLENGE

TAKING A VIDEO EDITOR  PRODUCT TO A HIGHER LEVEL MVP

The original developed MVP created by Peech was for us to use as a starting point. Reaching that next level MVP required a hybrid approach of both UX and UI design strategy. Our kick off client meeting provided us with platform requirements and user focused goals. With only a 4-week timeline, the team needed to make sure we stayed focused on our research-based decisions.
Peech target users include: 

  • Working professionals in the marketing, educational or general small business sector.
  • Have little experience with video editing but are comfortable using software and tools.
  • Have a need to find a quick and easy way to produce edited videos.

 

 

*    *    *

 

THE PROCESS

DESIGN ISN'T A STRAIGHT LINE

 

 

*    *    *

 

THE DISCOVERY

RESEARCH, INSIGHTS & TAKEAWAYS

 

EVALUATING THE VIDEO EDITING LANDSCAPE

Focusing on exploring competitors to find strengths, opportunities and patterns, our team looked at direct and indirect competitors. These brands are known for video or presentation editing and focused on customization abilities and ease of use for new users. Key insights included:

Side by side comparison of insights found during our competitive research.

Key Insights: 

  • Dark backgrounds with a high contrast
  • Playful color palette with a defined accent color.
  • Simple and open layouts allow for focused direction. 
  • Highlighted their ability to customize.
  • Targeted small to medium businesses.

 

SPEAKING TO NON-VIDEO USERS TO RESEARCH VIDEO USERS

To gain additional user research and validate our designs throughout the process, the team performed 18 interviews over three rounds of remote 1-on-1 's  with potential users. Combining both qualitative and quantitative information, this allowed us to better direct our design decisions on how non-video editors use Peech.

ROUND 1 : Desirability Testing | Style Tiles
ROUND 2 : Desirability / Usability Testing | Hi-Fi Designs
ROUND 3 : Usability Testing | Completed Prototype

Still image from one of many fun remote user interviews.

 

DESIGN PRINCIPLES

LAYING A FOUNDATION FOR SOLUTIONS

 

EMPOWER WITH MOTIVATION

Show confidence and trust with the automation process yet allow user interaction to alter the outcome while feeling encouraged and connected throughout.

LESS IS MORE

Nurture clarity and avoid ambiguity by providing fewer options. Guide the user to a clear decision with efficient explanations and easy navigation throughout the platform.

HELPFUL WAYFINDING

The process should be easy to understand and logical so that they can do it again when they come back.  Users should be informed of what their choices will do and know the outcome.

 

*    *    *

 

DEFINE

DECIDING WHAT TO BUILD

 

MEET TONY, A FAKE IT TILL YOU MAKE IT VIDEO EDITOR

To design for non-video editors I constructed a persona to highlight key needs and frustrations of users.

Tony has little to no experience using video editing software so he's going to rely heavily on the automation process. To accomplish this Peech needs to be easy to use and understand by ensuring tools and icons are familiar while also guiding him throughout the process.

 

*    *    *

 

IDEATIONS

EXPLORATION FOR A DESIGN DIRECTION 

After determining the effectiveness of my design direction through the first round of user interviews I felt this direction was ready to move forward with.

 

*    *    *

 

THE SOLUTIONS

DESIGNING TO SOLVE OUR MVP GOALS

With a focused direction based on user feedback, design principles, and user needs, we were ready fo focus on solving the three main MVP goals. 

Continuing to work independently for the first hi-fi testing round, allowed us to each explore design ideas before converging for the final set of high-fidelity designs.

 


 

01 GOAL

UPLOAD THE REQUIRED ITEMS

In order for the Peech algorithm to start the automation process a user is required to do the following: Enter a title for the project, upload a logo as a branding element, and upload a video file.

SOLUTION

ONBOARDING OVERLAY

The team brainstormed that the best way to solve this would be to utilize an onboarding overlay ensuring that users can’t get around this must first step. My first idea was to combine all the required uploads to be on the same overlay module, however users didn't agree in testing. 

INTRO OVERLAYS - FINAL TEAM HIGH FIDELITY The final version uses separate panels for each element, as users found this easier to understand and navigate.  Updated color and graphics tested well and confirmation checkpoints and interactions provide user assurance.
INTRO OVERLAYS EXPLORATION My original idea was to make this process easier by combining all the uploads on one overlay but users didn't agree.
INTRO OVERLAYS - PROTOTYPE Final prototype shows full screens with engaging microinteractions.

INTRO OVERLAYS - FINAL TEAM HIGH FIDELITY The final version uses separate panels for each element, as users found this easier to understand and navigate.  Updated color and graphics tested well and confirmation checkpoints and interactions provide user assurance. INTRO OVERLAYS EXPLORATION My original idea was to make this process easier by combining all the uploads on one overlay but users didn't agree. INTRO OVERLAYS - PROTOTYPE Final prototype shows full screens with engaging microinteractions.

 

02 GOAL

SHOW PROGRESS OF AUTOMATION PROCESS

Research showed that the automation process would average 10 min due to the algorithm analyzing the required uploads to create the video project. The client felt that this goal was very important as it highlights the true power of the Peech product. 

SOLUTION

PROGRESS INDICATOR

Creating an engaging progress indicator would keep the users updated and informed of what, why and how long. These elements are also very important to the client as it highlights the true power of the Peech program with its algorithm-based automation process.

My take on the progress indicators was to be informative and use separate circle progress graphs for each step, but users found this difficult to read and just too overwhelming.

PROGRESS INDICATOR - FINAL TEAM HIGH FIDELITY Combining our efforts improved the design greatly by adding a colorful gradation, increasing text contrast, and reducing the lengthy text.
My take on the progress indicators was to be very informative and a separate circle progress graph for each step, but users found this difficult to read and just too overwhelming.
PROGRESS INDICATOR - PROTOTYPE Part of the fun was creating engaging graphs and completion markers to provide user assurance.

PROGRESS INDICATOR - FINAL TEAM HIGH FIDELITY Combining our efforts improved the design greatly by adding a colorful gradation, increasing text contrast, and reducing the lengthy text. My take on the progress indicators was to be very informative and a separate circle progress graph for each step, but users found this difficult to read and just too overwhelming. PROGRESS INDICATOR - PROTOTYPE Part of the fun was creating engaging graphs and completion markers to provide user assurance.

 

03 GOAL

FOCUS ON THE ALGORITHM PROCESS

From the beginning, the client expressed how they want the users to depend on the algorithm for their video projects, but want them to feel like they are making the decisions. To provide customization options, but only a limited amount to help guide them to the right choices.

SOLUTION

NON EXPOSED CUSTOMIZATION 

Hidden customization features let users focus on the automation yet are easily accessible when needed.

Even from my style tile concepts, I played with the idea of keeping the editing tools and trimmer hidden so as to only be seen when needed.

HIDDEN TOOLS - FINAL TEAM HIGH FIDELITY Revising to expose all the tools right away on a solid blue hover pleased users. Updated icons and trimmer drop down position allowed for ease of use.
Even from my style tile concepts, I played with the idea of keeping the editing tools and trimmer hidden so as to only be seen when needed.
HIDDEN TOOLS - PROTOTYPE Testing showed users felt that editing tools like the trimmer was easy to understand and liked the way it was hidden when not needed.

HIDDEN TOOLS - FINAL TEAM HIGH FIDELITY Revising to expose all the tools right away on a solid blue hover pleased users. Updated icons and trimmer drop down position allowed for ease of use. Even from my style tile concepts, I played with the idea of keeping the editing tools and trimmer hidden so as to only be seen when needed. HIDDEN TOOLS - PROTOTYPE Testing showed users felt that editing tools like the trimmer was easy to understand and liked the way it was hidden when not needed.

CRAVE MORE?

You can view the full prototype here!

 

*    *    *

 

DESIGN SYSTEM

The design system we created provides the necessary insights like colors, typography, graphics, and layout elements. To view the full design system click here.

 

*    *    *

 

RECAP

ENDING WITH POSITIVE RESULTS, BUT THERE'S ALWAYS MORE TO IMPROVE

FUTURE RECOMENDATIONS

To complete our project, our team presented Peech with future recommendations based on our research from our final round of interviews. With the help of one last client workshop, we were able to present these based on their priority and urgency. This list included:

  • TEST ERROR STATES: The team provided untested examples and recommendations on use.
  • SEARCH FUNCTION: We highlighted users wishes to be able to search for when graphic elements are added.
  • HELP MENU & GUIDED TOUR: Users felt a help section or even a guided tour of how to use the product would be beneficial.

REFLECTION

All of our changes were very positively received by the users we tested and to our clients when we presented our high level MVP. The final prototype yielded successful task completions and positive feedback on the upgrades we made to the Peech product.

The Peech team are experts at video editing but needed help bringing a modern experience to their user interface.  The extra time I spent on the UX side really pushed the end result to that next level MVP that they needed and I'm very thankful for this unique experience. I'm also very grateful that I worked alongside two other strong and hardworking UI designers, without them these successful end results wouldn't of been possible.

Whew! You made it! 

Don’t hesitate to reach out if you’d like to learn more about my work with Peech, working with a remote team, or 6a user interviews with SME in Israel.

Lets Chat! 

Contact me


Using Format