From 3366069a7b657c782770c75acaea171331ecf898 Mon Sep 17 00:00:00 2001 From: Vasilis K Date: Fri, 17 Nov 2023 15:35:01 +0200 Subject: [PATCH] minor improvements --- .gitignore | 2 ++ dist/js/microsoft.js | 2 +- dist/meta.html | 4 ++-- src/js/microsoft.js | 2 +- src/meta.html | 5 +++++ 5 files changed, 11 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 31ee6ab..ccb13a7 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,5 @@ dist/js/voicemod-debug.js _everything/ src/video/final-with-stumble.mp4 dist/video/final-with-stumble.mp4 +dist/video/ennely.mp4 +src/video/ennely.mp4 diff --git a/dist/js/microsoft.js b/dist/js/microsoft.js index d3e6e82..f21fb38 100644 --- a/dist/js/microsoft.js +++ b/dist/js/microsoft.js @@ -1 +1 @@ -const tooltipTriggerList=document.querySelectorAll('[data-bs-toggle="tooltip"]'),tooltipList=[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e)),lenis=new Lenis;function checkiftooltip(){$(window).width()>768?($('[data-toggle="tooltip"]').tooltip(),$("[data-toggle='tooltip']").tooltip(),$('[data-toggle="tooltip"]').tooltip("enable")):$('[data-toggle="tooltip"]').tooltip("disable")}function checkifLenis(){0==$(window).width()<768?lenis.start():lenis.destroy()}function raf(e){lenis.raf(e),requestAnimationFrame(raf)}lenis.stop(),$(document).ready(function(){var e=$(".opportunityHeight").outerHeight(),t=$(".dotted-bg").outerHeight();setTimeout(function(){$("body").append("")},700),checkiftooltip(),lenis.start(),$("body").removeClass("opacity-0"),$("html").css("opacity",1)}),$(window).resize(function(){checkiftooltip();var e=$(".opportunityHeight").outerHeight(),t=$(".dotted-bg").outerHeight();$("body").append("")}),lenis.on("scroll",ScrollTrigger.update),gsap.ticker.add(e=>{lenis.raf(1e3*e)}),gsap.ticker.lagSmoothing(0),requestAnimationFrame(raf),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),lenis.scrollTo(this.getAttribute("href")),bootstrap.Tooltip.getInstance(".close-button").dispose(),setTimeout(function(){[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e))},3050)})}),document.querySelectorAll('[data-target^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),lenis.scrollTo(this.getAttribute("data-target")),bootstrap.Tooltip.getInstance(".close-button").dispose(),setTimeout(function(){[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e))},3050)})}),$(window).scroll(function(){$(this).scrollTop()>800?$("#toTop").fadeIn("fast"):$("#toTop").fadeOut("fast")});const showAnim=gsap.from(".main-navbar",{yPercent:-100,paused:!0,duration:.3}).progress(1);ScrollTrigger.create({start:"top top",end:99999,onUpdate:e=>{-1===e.direction?showAnim.play():showAnim.reverse()}}),gsap.registerPlugin(ScrollTrigger),gsap.to(".progress-circle",{strokeDashoffset:0,ease:"none",scrollTrigger:{scrub:.3},onComplete:e=>{$(".icon-wrap").addClass("bg-secondary"),$(".icon--close path").css({fill:"#3A2D52"})},onUpdate:e=>{"0px"!==$(".progress-circle").css("stroke-dashoffset")&&($(".icon-wrap").removeClass("bg-secondary"),$(".icon--close path").css({fill:"#3A2D52"}))}}),$(document).on("click","#oldNewSwitch",function(){$(this).prop("checked")?($("#oldNewImageContainer").attr("src","img/misc/elements/power-automate-desktop.png"),$("#oldNewImageContainer").attr("alt","Screenshot from Power Automate Desktop")):($("#oldNewImageContainer").attr("src","img/misc/elements/winautomation-old.png"),$("#oldNewImageContainer").attr("alt","Screenshot from WinAutomation"))}),$(document).on("click","#accessibilitySwitch",function(){$(this).prop("checked")?($("#accessibilityImgContainer").attr("src","img/misc/elements/pad-high-contrast.png"),$("#accessibilityImgContainer").attr("alt","High contrast version")):($("#accessibilityImgContainer").attr("src","img/misc/elements/pad-no-high-contrast.png"),$("#accessibilityImgContainer").attr("alt","Regular version"))});var $scrollableDiv1=$("#scrollableDiv1"),$scrollableDiv2=$("#scrollableDiv2");$("#scrollableDiv2").on("scroll",function(){var e=$scrollableDiv2.scrollLeft();$scrollableDiv1.scrollLeft(e)});var startX,scrollLeft,isDragging=!1;$("#scrollableDiv2, #scrollableDiv1").mousedown(function(e){e.preventDefault(),isDragging=!0,startX=e.pageX-$("#scrollableDiv2").offset().left,scrollLeft=$("#scrollableDiv2").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDragging){var t=e.pageX-$("#scrollableDiv2").offset().left-startX;$("#scrollableDiv2").scrollLeft(scrollLeft-t)}}).mouseup(function(){isDragging=!1});var startXImprovements,scrollLeftImprovements,isDraggingImprovements=!1;$("#scrollableDivImprovements").mousedown(function(e){e.preventDefault(),isDraggingImprovements=!0,startXImprovements=e.pageX-$("#scrollableDivImprovements").offset().left,scrollLeftImprovements=$("#scrollableDivImprovements").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDraggingImprovements){var t=e.pageX-$("#scrollableDivImprovements").offset().left-startXImprovements;$("#scrollableDivImprovements").scrollLeft(scrollLeftImprovements-t)}}).mouseup(function(){isDraggingImprovements=!1});var startXImages,scrollLeftImages,isDraggingImages=!1;function showBeforeAfter(){$("#beforeAfter").removeClass("d-none"),$(".beforeAfterBtn").addClass("d-none"),lenis.scrollTo("#beforeAfter"),$(".scrollableArea").scroll(),setTimeout(function(){var e=$(".dotted-bg").outerHeight();$("body").append("")},100)}function checkScrollableLeftSpace(e){const t=e.parent().find(".btn-left");e.scrollLeft()<=0?t.addClass("d-none"):t.removeClass("d-none")}function checkScrollableRightSpace(e){const t=e.parent().find(".btn-right"),o=e.get(0).scrollWidth-e.width();e.scrollLeft()>=o?t.addClass("d-none"):t.removeClass("d-none")}function handleManualScroll(){const e=$(this);checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}$("#scrollableDivImages").mousedown(function(e){e.preventDefault(),isDraggingImages=!0,startXImages=e.pageX-$("#scrollableDivImages").offset().left,scrollLeftImages=$("#scrollableDivImages").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDraggingImages){var t=e.pageX-$("#scrollableDivImages").offset().left-startXImages;$("#scrollableDivImages").scrollLeft(scrollLeftImages-t)}}).mouseup(function(){isDraggingImages=!1}),function(e,t){var o=e.createElement(t),a=e.getElementsByTagName(t)[0];o.onload=function(){window.voiceflow.chat.load({verify:{projectID:"64f776b3d0a6dd00073f976a"},url:"https://general-runtime.voiceflow.com",versionID:"production"})},o.src="https://cdn.voiceflow.com/widget/bundle.mjs",o.type="text/javascript",a.parentNode.insertBefore(o,a)}(document,"script"),$(".scrollableArea").on("scroll",handleManualScroll),$(".btn-left").click(function(){const e=$(this).parent().find(".scrollableArea");e.animate({scrollLeft:"-=300px"},"fast"),checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}),$(".btn-right").click(function(){const e=$(this).parent().find(".scrollableArea");e.animate({scrollLeft:"+=300px"},"fast"),checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}),$(".scrollableArea").each(function(){checkScrollableLeftSpace($(this)),checkScrollableRightSpace($(this))}),0===$(window).scrollTop()?gsap.set(".anim01, .anim02, .anim03, .anim04, .anim05",{opacity:"0"}):gsap.set(".anim01, .anim02, .anim03, .anim04, .anim05",{opacity:"1"});const timeline=gsap.timeline();timeline.add(gsap.to(".anim01",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim02",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim03",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim04",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim05",{duration:1,opacity:1}),"-=0.3");let trigger=document.getElementById("worksDropdown");document.getElementById("worksDropdown").addEventListener("mouseover",()=>{$(trigger).hasClass("show")||bootstrap.Dropdown.getOrCreateInstance(trigger).toggle()}),document.getElementById("dropdown-menu").addEventListener("mouseleave",()=>{bootstrap.Dropdown.getOrCreateInstance(trigger).toggle(),$(trigger).hasClass("show")||($("#ddImgContainer").attr("src","img/misc/illustrations/spying.svg"),$("#ddImgContainer").attr("alt","Spying illustration"))}),$(".ddLink").on("mouseover",function(){switch($(this).attr("class").split(" ")[1]){case"voicemodDD":$("#ddImgContainer").attr("src","img/misc/logos/voicemod-logo-card.svg"),$("#ddImgContainer").attr("alt","Voicemod logo");break;case"metaDD":$("#ddImgContainer").attr("src","img/misc/logos/meta-logo-card.svg"),$("#ddImgContainer").attr("alt","Meta logo");break;case"msftDD":$("#ddImgContainer").attr("src","img/misc/logos/msft-logo-card.svg"),$("#ddImgContainer").attr("alt","Microsoft logo");break;case"accusonusDD":$("#ddImgContainer").attr("src","img/misc/logos/accusonus-logo.svg"),$("#ddImgContainer").attr("alt","accusonus logo")}}); \ No newline at end of file +const tooltipTriggerList=document.querySelectorAll('[data-bs-toggle="tooltip"]'),tooltipList=[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e)),lenis=new Lenis;function checkiftooltip(){$(window).width()>768?($('[data-toggle="tooltip"]').tooltip(),$("[data-toggle='tooltip']").tooltip(),$('[data-toggle="tooltip"]').tooltip("enable")):$('[data-toggle="tooltip"]').tooltip("disable")}function checkifLenis(){0==$(window).width()<768?lenis.start():lenis.destroy()}function raf(e){lenis.raf(e),requestAnimationFrame(raf)}lenis.stop(),$(document).ready(function(){var e=$(".opportunityHeight").outerHeight(),t=$(".dotted-bg").outerHeight();setTimeout(function(){$("body").append("")},900),checkiftooltip(),lenis.start(),$("body").removeClass("opacity-0"),$("html").css("opacity",1)}),$(window).resize(function(){checkiftooltip();var e=$(".opportunityHeight").outerHeight(),t=$(".dotted-bg").outerHeight();$("body").append("")}),lenis.on("scroll",ScrollTrigger.update),gsap.ticker.add(e=>{lenis.raf(1e3*e)}),gsap.ticker.lagSmoothing(0),requestAnimationFrame(raf),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),lenis.scrollTo(this.getAttribute("href")),bootstrap.Tooltip.getInstance(".close-button").dispose(),setTimeout(function(){[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e))},3050)})}),document.querySelectorAll('[data-target^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),lenis.scrollTo(this.getAttribute("data-target")),bootstrap.Tooltip.getInstance(".close-button").dispose(),setTimeout(function(){[...tooltipTriggerList].map(e=>new bootstrap.Tooltip(e))},3050)})}),$(window).scroll(function(){$(this).scrollTop()>800?$("#toTop").fadeIn("fast"):$("#toTop").fadeOut("fast")});const showAnim=gsap.from(".main-navbar",{yPercent:-100,paused:!0,duration:.3}).progress(1);ScrollTrigger.create({start:"top top",end:99999,onUpdate:e=>{-1===e.direction?showAnim.play():showAnim.reverse()}}),gsap.registerPlugin(ScrollTrigger),gsap.to(".progress-circle",{strokeDashoffset:0,ease:"none",scrollTrigger:{scrub:.3},onComplete:e=>{$(".icon-wrap").addClass("bg-secondary"),$(".icon--close path").css({fill:"#3A2D52"})},onUpdate:e=>{"0px"!==$(".progress-circle").css("stroke-dashoffset")&&($(".icon-wrap").removeClass("bg-secondary"),$(".icon--close path").css({fill:"#3A2D52"}))}}),$(document).on("click","#oldNewSwitch",function(){$(this).prop("checked")?($("#oldNewImageContainer").attr("src","img/misc/elements/power-automate-desktop.png"),$("#oldNewImageContainer").attr("alt","Screenshot from Power Automate Desktop")):($("#oldNewImageContainer").attr("src","img/misc/elements/winautomation-old.png"),$("#oldNewImageContainer").attr("alt","Screenshot from WinAutomation"))}),$(document).on("click","#accessibilitySwitch",function(){$(this).prop("checked")?($("#accessibilityImgContainer").attr("src","img/misc/elements/pad-high-contrast.png"),$("#accessibilityImgContainer").attr("alt","High contrast version")):($("#accessibilityImgContainer").attr("src","img/misc/elements/pad-no-high-contrast.png"),$("#accessibilityImgContainer").attr("alt","Regular version"))});var $scrollableDiv1=$("#scrollableDiv1"),$scrollableDiv2=$("#scrollableDiv2");$("#scrollableDiv2").on("scroll",function(){var e=$scrollableDiv2.scrollLeft();$scrollableDiv1.scrollLeft(e)});var startX,scrollLeft,isDragging=!1;$("#scrollableDiv2, #scrollableDiv1").mousedown(function(e){e.preventDefault(),isDragging=!0,startX=e.pageX-$("#scrollableDiv2").offset().left,scrollLeft=$("#scrollableDiv2").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDragging){var t=e.pageX-$("#scrollableDiv2").offset().left-startX;$("#scrollableDiv2").scrollLeft(scrollLeft-t)}}).mouseup(function(){isDragging=!1});var startXImprovements,scrollLeftImprovements,isDraggingImprovements=!1;$("#scrollableDivImprovements").mousedown(function(e){e.preventDefault(),isDraggingImprovements=!0,startXImprovements=e.pageX-$("#scrollableDivImprovements").offset().left,scrollLeftImprovements=$("#scrollableDivImprovements").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDraggingImprovements){var t=e.pageX-$("#scrollableDivImprovements").offset().left-startXImprovements;$("#scrollableDivImprovements").scrollLeft(scrollLeftImprovements-t)}}).mouseup(function(){isDraggingImprovements=!1});var startXImages,scrollLeftImages,isDraggingImages=!1;function showBeforeAfter(){$("#beforeAfter").removeClass("d-none"),$(".beforeAfterBtn").addClass("d-none"),lenis.scrollTo("#beforeAfter"),$(".scrollableArea").scroll(),setTimeout(function(){var e=$(".dotted-bg").outerHeight();$("body").append("")},100)}function checkScrollableLeftSpace(e){const t=e.parent().find(".btn-left");e.scrollLeft()<=0?t.addClass("d-none"):t.removeClass("d-none")}function checkScrollableRightSpace(e){const t=e.parent().find(".btn-right"),o=e.get(0).scrollWidth-e.width();e.scrollLeft()>=o?t.addClass("d-none"):t.removeClass("d-none")}function handleManualScroll(){const e=$(this);checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}$("#scrollableDivImages").mousedown(function(e){e.preventDefault(),isDraggingImages=!0,startXImages=e.pageX-$("#scrollableDivImages").offset().left,scrollLeftImages=$("#scrollableDivImages").scrollLeft(),$(this).removeClass("grab"),$(this).addClass("grabbing")}).mouseup(function(){isDraggingImprovements=!1,$(this).addClass("grab"),$(this).removeClass("grabbing")}),$(document).mousemove(function(e){if(e.preventDefault(),isDraggingImages){var t=e.pageX-$("#scrollableDivImages").offset().left-startXImages;$("#scrollableDivImages").scrollLeft(scrollLeftImages-t)}}).mouseup(function(){isDraggingImages=!1}),function(e,t){var o=e.createElement(t),a=e.getElementsByTagName(t)[0];o.onload=function(){window.voiceflow.chat.load({verify:{projectID:"64f776b3d0a6dd00073f976a"},url:"https://general-runtime.voiceflow.com",versionID:"production"})},o.src="https://cdn.voiceflow.com/widget/bundle.mjs",o.type="text/javascript",a.parentNode.insertBefore(o,a)}(document,"script"),$(".scrollableArea").on("scroll",handleManualScroll),$(".btn-left").click(function(){const e=$(this).parent().find(".scrollableArea");e.animate({scrollLeft:"-=300px"},"fast"),checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}),$(".btn-right").click(function(){const e=$(this).parent().find(".scrollableArea");e.animate({scrollLeft:"+=300px"},"fast"),checkScrollableLeftSpace(e),checkScrollableRightSpace(e)}),$(".scrollableArea").each(function(){checkScrollableLeftSpace($(this)),checkScrollableRightSpace($(this))}),0===$(window).scrollTop()?gsap.set(".anim01, .anim02, .anim03, .anim04, .anim05",{opacity:"0"}):gsap.set(".anim01, .anim02, .anim03, .anim04, .anim05",{opacity:"1"});const timeline=gsap.timeline();timeline.add(gsap.to(".anim01",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim02",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim03",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim04",{duration:1,opacity:1}),"-=0.3").add(gsap.to(".anim05",{duration:1,opacity:1}),"-=0.3");let trigger=document.getElementById("worksDropdown");document.getElementById("worksDropdown").addEventListener("mouseover",()=>{$(trigger).hasClass("show")||bootstrap.Dropdown.getOrCreateInstance(trigger).toggle()}),document.getElementById("dropdown-menu").addEventListener("mouseleave",()=>{bootstrap.Dropdown.getOrCreateInstance(trigger).toggle(),$(trigger).hasClass("show")||($("#ddImgContainer").attr("src","img/misc/illustrations/spying.svg"),$("#ddImgContainer").attr("alt","Spying illustration"))}),$(".ddLink").on("mouseover",function(){switch($(this).attr("class").split(" ")[1]){case"voicemodDD":$("#ddImgContainer").attr("src","img/misc/logos/voicemod-logo-card.svg"),$("#ddImgContainer").attr("alt","Voicemod logo");break;case"metaDD":$("#ddImgContainer").attr("src","img/misc/logos/meta-logo-card.svg"),$("#ddImgContainer").attr("alt","Meta logo");break;case"msftDD":$("#ddImgContainer").attr("src","img/misc/logos/msft-logo-card.svg"),$("#ddImgContainer").attr("alt","Microsoft logo");break;case"accusonusDD":$("#ddImgContainer").attr("src","img/misc/logos/accusonus-logo.svg"),$("#ddImgContainer").attr("alt","accusonus logo")}}); \ No newline at end of file diff --git a/dist/meta.html b/dist/meta.html index 3e50540..56badcb 100644 --- a/dist/meta.html +++ b/dist/meta.html @@ -10,7 +10,7 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip • MetaVasilis Kolip • Meta
Μenu
Offcanvas illustration
Meta logo

A video editing assistant for lightning-fast first cuts!

Say goodbye to tedious editing! Ennely helps content creators assemble an initial video draft in minutes, allowing them to dive deep into the creative process.

Whether you're using Premiere, Final Cut, or Resolve, Ennely streamlines your workflow so you can focus on perfecting your masterpiece. Art icon

 

Role

Senior UX designer (full-time)

Employer

accusonus, acquired by Meta Reality Labs, Athens (remote)

Teammates

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

Year

2021 2022

Tools

Figma, Typeform, Maze & Calendly

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

Ennely was a video editor assistant that enabled content creators to create a first cut within minutes.

Working with scripted videos editing is a tedious and time-consuming process.

Ennely's AI engine took care of mundane tasks (such as audio sync and sequence selecting), freeing up creators to concentrate on refining their videos using Premiere, Final Cut and Resolve.

I was the principal designer on this project and worked in an agile team of six (including myself).

Effortless editing illustration

Effortless editing

Time saver illustration

Time-saver

Streamlined selection illustration

Take selection

Adobe Premiere icon

Adobe Premiere

Final Cut icon

Final Cut

DaVinci Resolve icon

DaVinci Resolve

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...

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(!).

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

On this page

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.

Figma, Bootstrap, GitHub, GreenSock, Animix, DotLottie, Google Analytics, HotJar, Lenis, TS Particles, Wistia and finally jQuery.

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.

\ No newline at end of file + -->

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

On this page

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.

Figma, Bootstrap, GitHub, GreenSock, Animix, DotLottie, Google Analytics, HotJar, Lenis, TS Particles, Wistia and finally jQuery.

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.

\ No newline at end of file diff --git a/src/js/microsoft.js b/src/js/microsoft.js index 656833e..cb0c6cb 100644 --- a/src/js/microsoft.js +++ b/src/js/microsoft.js @@ -25,7 +25,7 @@ $(document).ready(function() { var dottedBGHeight = $('.dotted-bg').outerHeight(); setTimeout(function() { $('body').append(""); - }, 700); + }, 900); checkiftooltip(); lenis.start(); diff --git a/src/meta.html b/src/meta.html index 16fa9c6..57f7501 100644 --- a/src/meta.html +++ b/src/meta.html @@ -39,6 +39,7 @@ + @@ -939,6 +940,10 @@

Final version and conclusions

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.