Μenu
Offcanvas illustration
YouBeHero logo

Donate for free when you shop online!

Automate your social responsibility at no cost. Connect with a non-profit organization and contribute transparently to its progress.

 

Role

Product designer (part-time)

Employer

YouBeHero, Athens (remote)

Teammates

Valia's pictureChara's pictureMaria's pictureAlkisti's pictureThanos's picture

Year

2019 2020 2021 2022 2023

Tools

Figma, HTML/CSS & JS

Skills

Summary

  • Ennely (MacOS) lead designer
  • Competitive analysis and user persona creation
  • Designed user journeys, wireframes, mockups & HTML prototype
  • Addressed time-consuming video content management
  • User research, usability tests and iterative design
  • App well-received by content creator community
  • Company acquired by Meta (Reality Labs)

Overview

YouBeHero is an award winning nonprofit organization that helps nonprofit organization across Greece to raise funds and awareness.

An online platform that creates economic impact via the online purchases at affiliated e-shop its users make.

As a thank you each e-shop shares a commission with YouBeHero which then is turned into a donation to the nonprofit the user selected during her sign-up.

I was the main product designer on this project and still do my bit in my spare time.

Problems

As a company closely collaborating with content creators in the sound engineering industry, our team created a survey which identified three key challenges commonly encountered by many YouTubers publishing scripted videos.

1

Time-consuming file synching

2

Tedious removal of filler words

3

Hassle of selecting the best takes

4

Multiple cameras and mics syncing

Opportunity

"How can we help users to swiftly export a rough cut and empower them to concentrate to craft something unique?"

Competitive analysis

Despite the absence of comparable tools, I dedicated time to analyze different UI’s to identify the best ways to onboard users and import footage from different cameras, microphones, drives and (online) folders.

Descript rules!

Screenshot from Descript app

Veed.io has a great UI which helps the user feel at ease.

Screenshot from Veed.io app

YouTube Studio is OK for some minor editing...

Screenshot from YouTube Studio

User persona

To develop Ennely, we collaborated with renowned content creators, drawing inspiration from their experiences and insights to shape our persona.

This time, we got persona(l) to discover their biggest pain points.

1

Seamless footage combination

Effortlessly merge multiple video clips and audio tracks

2

Removal of silences and filler words

Get rid of "ehms", "uhms", "errrs" and long pauses right off the bat

3

Fast clip selection

Quick and efficient journey for reviewing and selecting the best takes

Question mark icon

Content creators' main needs revolve around audience engagement, monetization & community building.

User journey

Designing the user journey was a meticulous process, focusing on simplicity and speed.

I helped streamline the process of merging video and audio footage from multiple sources, allowing users to swiftly create a first draft.

Loading Figma file...Loading...

Design goals

Our design goals for this tool focused on maximizing efficiency and ensuring user-friendliness.

We aimed to provide content creators with a streamlined experience offering them flexibility over the final output.

Design for efficiency4

User-friendliness4

Flexibility & control3

Design system4

Wireframes

During the wireframing process, I carefully mapped out the key functionalities, including the onboarding flow, aligning them with the MVP user stories.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Mockups

To maintain momentum and foster creativity, our team made a strategic choice before diving into the hi-fi mockups.

We prioritized creating lo-fi versions first and deliver results quickly.

This decision kept the team's morale high!

Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups
Ennely mockups

Prototype

When most of the mockups of the MVP were in place and the team had approved the Figma prototype, I emphasized the need for an HTML prototype to really test out our assumptions.

Within a week we developed a browser based version of the app.

A short demo Right arrow

 

What I'm presenting above is how to Right arrow

1

Sync footage and remove filler words

Ennely effortlessly processes and syncs un-synced, unedited footage, delivering a rough cut within minutes.

Silences and filler words are intelligently removed, simplifying the editing process.

2

Take selection

Grouped takes enable creators to swiftly review and select the best moments.

3

Export to XML

When done, the result can be exported to XML, for seamless transition to Premiere etc for final refinement.

Research plan & (un)moderated user tests

To understand user interactions with the app and assess their ability to create a rough video cut, I created a research plan.

To gather feedback I conducted unmoderated user tests using Maze.

This approach allowed us to gather feedback efficiently and accommodate the limited availability of the content creators.

Iteration based on user feedback

The moderated (conducted internally) and unmoderated user tests yielded insights that shaped the app's further improvement.

For example, we discovered that some users struggled to locate the way to fine tune the duration of a specific take. As a result, we reconsidered that path to enhance discoverability.

Moreover, we discovered a strong preference for an easy-to-use media file import and organization feature.

These insights from both types of tests guided our iterative design process, allowing us to address specific pain points.

Question mark icon

Un-moderated user tests provide valuable insights by allowing users to asynchronously interact with a product in their own terms.

Final version and conclusions

Embarking on the journey of developing a tool like this alongside its target audience, content creators and a highly skilled team was an incredibly fulfilling experience.

The seamless pace and our unhurried approach felt perfectly aligned.

...Just as we were preparing for production, an unexpected twist occurred—the company was acquired by Meta.

This acquisition although allowed us to further improve the product, it eventually left us with lingering curiosity about the untapped potential for success as it was abruptly halted from launching publicly(!).

Only recently a similar video assistant appeared in the market by none other than Microsoft:

 

Thank you for reading! Glasses icon

ps. This was just one example of my work @Meta. Other projects included the improvement of existing designs as well as the development of a completely new desktop app that improved audio during calls and added background music from Spotify.

Press

Facebook owner Meta close to deal for Greek startup Accusonus

"Meta Platforms Inc (FB.O), the owner of Facebook, is close to acquiring Greek audio software startup Accusonus" —Reuters

Read articleDiagonal arrow
A 3D printed Facebook's new rebrand logo Meta is placed on laptop keyboard in this illustration

Accusonus raises $3.3M to use AI to help content creators repair the audio in their videos

"Accusonus, the Greece and U.S.-based AI company helping content creators improve the audio in their videos, has raised $3.3 million in Series A funding." —TechCrunch

Read articleDiagonal arrow
accusonus Series A Press

Next project

Microsoft logo

Senior designer (full-time) 2019 2020 2021

Power Automate desktop is a B2B Windows app that saves its users time from doing repetitive tasks on their computers.

Join me in the world of desktop automation and let's explore how an app created by a small company, became part of Windows 11.

View project

Process automation made easy.

Clock icon...Process running

New UI/UX yields great reviews

Rating stars logo icon

4.4 out of 5

Gartner logo icon
Credits

This page was made possible by using many technologies which are either open source, or free to use. The least I could do, is to give credits to all the contributors for making our world open. THANK YOU.

Local dev environment set on Node.js & Gulp. The font I use is GT America and the icons are from ICONS8 collection named Dusk. Finally, the Notion-style illustrations are from Notioly.