diff --git a/dist/img/misc/illustrations/bike-dog.svg b/dist/img/misc/illustrations/bike-dog.svg new file mode 100644 index 0000000..b86a3a3 --- /dev/null +++ b/dist/img/misc/illustrations/bike-dog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/img/misc/illustrations/nomad-life.svg b/dist/img/misc/illustrations/nomad-life.svg new file mode 100644 index 0000000..7573850 --- /dev/null +++ b/dist/img/misc/illustrations/nomad-life.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/img/misc/illustrations/spying.svg b/dist/img/misc/illustrations/spying.svg new file mode 100644 index 0000000..6234443 --- /dev/null +++ b/dist/img/misc/illustrations/spying.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/img/misc/illustrations/team-options.svg b/dist/img/misc/illustrations/team-options.svg new file mode 100644 index 0000000..d499d78 --- /dev/null +++ b/dist/img/misc/illustrations/team-options.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 8b309e3..841b9ee 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,4 +10,4 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip - Portfolio
Μenu
Ship, celebrate and measure illustration

Designing products with user insights.

Let's dive into the needs, preferences and behaviours of your audience. Let's create beautiful products that not only meet people's needs but exceed their expectations too.

Selected work

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View 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

Selected work

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
User person arrow apps element
Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View project

Lightning bolt icon

Lightning fast 1st cuts

Footage duration

Camera icon869m.

User iconRequirements

  • Combine footage
  • Take selection
  • Remove silences

YouTube channel avatar@Channel

Dummy lines icon
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
Resarch and discovery illustration

Research and discovery

Wireframing and prototyping illustration

Wireframing and prototyping

User interviews and iteration illustration

User interviews and iteration

Hi-fi mockup design illustration

Hi-fi mockup design

Ship, celebrate and measure illustration

Ship, celebrate and measure

My design process

My design process

Resarch and discovery illustration

Research and discovery

Wireframing and prototyping illustration

Wireframing and prototyping

User interviews and iteration illustration

User interviews and iteration

Hi-fi mockup design illustration

Hi-fi mockup design

Ship, celebrate and measure illustration

Ship, celebrate and measure

About me

Hello! I'm Vasilis Kolip, a product designer who likes to wear colourful sneakers.

I'm a half-Greek and half-Turkish citizen of the world who has lived and worked in Athens, Amsterdam, Birmingham and Istanbul.

I've got an academic background in design as well as computer science and artificial intelligence. Most importantly, I've been working as a product designer for the past decade.

What sets me apart is my extensive product design and user research experience on a vast array of successful projects with diverse cross-functional teams.

View profile Connect on LinkedInDiagonal arrow

About me

"Talk of the town"

Cheers to cheers!

Read all on LinkedInDiagonal arrow
Valia Lekka testimonial Meta logo

"Vasilis is first and foremost a wonderful person."

Valia Lekka — Manager

Maria Kourousi testimonial Meta logo

"Vasilis is a talented and skilled designer."

Maria Kourousi — Software Engineer

Chara Konstantakopoulou testimonial GateIO logo

"Amazing designer, talented in breaking down complex ideas."

Chara Konstantakopoulou — Multidisciplinary designer

Haris Renieris testimonial Meta logo

"Very smart and talented professional."

Haris Renieris — Software Engineer

Alkistis Katsantoni testimonial Meta logo

"One of the most creative and cooperative people I have worked with."

Alkistis Katsantoni — Manager

Stelios Bournous testimonialMeta logo

"An exceptional designer and teammate."

Stelios Bournous — Manager

Frini Paschou testimonial Meta logo

"Vasilis made UX workflows development less intimidating."

Frini Paschou — Software Engineer

In a nutshell

Best known for

Figma icon

Masterful command of Figma

User icon

User research

Illustrator icon

Proficiency across Adobe

Micro-interactions icon

Micro-interactions & animations

Accessibility icon

Accessibility standards

Progressive web app icon

Progressive web app design

Native MacOS app icon

Native MacOS app design

Native Windows app icon

Native Windows app design

More than 10 million people use the products I've worked on.

Experience

Star icon10Star icon

Ten years of know-how in UI/UX, product design and user research.

Skills

Crafting captivating interfaces by leveraging user-centric design processes

Design process scheme
Users icon

Empathize

Define icon

Define

Ideate icon

Ideate

Prototype icon

Prototype

Test icon

Test

Implement icon

Implement

Let's begin already

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
\ No newline at end of file + }Vasilis Kolip - Portfolio
Μenu
Offcanvas illustration

Designing products with user insights.

Let's dive into the needs, preferences and behaviours of your audience. Let's create beautiful products that not only meet people's needs but exceed their expectations too.

Selected work

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View 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

Selected work

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
User person arrow apps element
Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View project

Lightning bolt icon

Lightning fast 1st cuts

Footage duration

Camera icon869m.

User iconRequirements

  • Combine footage
  • Take selection
  • Remove silences

YouTube channel avatar@Channel

Dummy lines icon
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
Resarch and discovery illustration

Research and discovery

Wireframing and prototyping illustration

Wireframing and prototyping

User interviews and iteration illustration

User interviews and iteration

Hi-fi mockup design illustration

Hi-fi mockup design

Ship, celebrate and measure illustration

Ship, celebrate and measure

My design process

My design process

Resarch and discovery illustration

Research and discovery

Wireframing and prototyping illustration

Wireframing and prototyping

User interviews and iteration illustration

User interviews and iteration

Hi-fi mockup design illustration

Hi-fi mockup design

Ship, celebrate and measure illustration

Ship, celebrate and measure

About me

Hello! I'm Vasilis Kolip, a product designer who likes to wear colourful sneakers.

I'm a half-Greek and half-Turkish citizen of the world who has lived and worked in Athens, Amsterdam, Birmingham and Istanbul.

I've got an academic background in design as well as computer science and artificial intelligence. Most importantly, I've been working as a product designer for the past decade.

What sets me apart is my extensive product design and user research experience on a vast array of successful projects with diverse cross-functional teams.

View profile Connect on LinkedInDiagonal arrow

About me

"Talk of the town"

Cheers to cheers!

Read all on LinkedInDiagonal arrow
Valia Lekka testimonial Meta logo

"Vasilis is first and foremost a wonderful person."

Valia Lekka — Manager

Maria Kourousi testimonial Meta logo

"Vasilis is a talented and skilled designer."

Maria Kourousi — Software Engineer

Chara Konstantakopoulou testimonial GateIO logo

"Amazing designer, talented in breaking down complex ideas."

Chara Konstantakopoulou — Multidisciplinary designer

Haris Renieris testimonial Meta logo

"Very smart and talented professional."

Haris Renieris — Software Engineer

Alkistis Katsantoni testimonial Meta logo

"One of the most creative and cooperative people I have worked with."

Alkistis Katsantoni — Manager

Stelios Bournous testimonialMeta logo

"An exceptional designer and teammate."

Stelios Bournous — Manager

Frini Paschou testimonial Meta logo

"Vasilis made UX workflows development less intimidating."

Frini Paschou — Software Engineer

In a nutshell

Best known for

Figma icon

Masterful command of Figma

User icon

User research

Illustrator icon

Proficiency across Adobe

Micro-interactions icon

Micro-interactions & animations

Accessibility icon

Accessibility standards

Progressive web app icon

Progressive web app design

Native MacOS app icon

Native MacOS app design

Native Windows app icon

Native Windows app design

More than 10 million people use the products I've worked on.

Experience

Star icon10Star icon

Ten years of know-how in UI/UX, product design and user research.

Skills

Crafting captivating interfaces by leveraging user-centric design processes

Design process scheme
Users icon

Empathize

Define icon

Define

Ideate icon

Ideate

Prototype icon

Prototype

Test icon

Test

Implement icon

Implement

Let's begin already

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
\ No newline at end of file diff --git a/dist/js/about.js b/dist/js/about.js index a9cb8e2..8ecd48c 100644 --- a/dist/js/about.js +++ b/dist/js/about.js @@ -20,7 +20,7 @@ function checkifLenis() { } $(document).ready(function() { - checkiftooltip(); + //checkiftooltip(); checkifLenis(); //get athens' temp @@ -68,10 +68,10 @@ requestAnimationFrame(raf) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('href')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); @@ -80,10 +80,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('[data-target^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('data-target')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); diff --git a/dist/js/homepage.js b/dist/js/homepage.js index e1b030c..8b39535 100644 --- a/dist/js/homepage.js +++ b/dist/js/homepage.js @@ -45,27 +45,23 @@ requestAnimationFrame(raf) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('href')); - setTimeout(function() { - showAnim.reverse(); - }, 3050); }); }) document.querySelectorAll('[data-target^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('data-target')); - setTimeout(function() { - showAnim.reverse(); - }, 3050); }); }) //scroll toTop visibility $(window).scroll(function() { - $(this).scrollTop() > 800 ? $("#toTop").fadeIn("fast", function() {}) : $("#toTop").fadeOut("fast") + $(this).scrollTop() > 800 ? $("#toTop").css("opacity", 1) : $("#toTop").css("opacity", 0) }); //scroll toTop visibility end diff --git a/dist/js/meta.js b/dist/js/meta.js index d2d6553..15f359b 100644 --- a/dist/js/meta.js +++ b/dist/js/meta.js @@ -48,10 +48,10 @@ requestAnimationFrame(raf) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('href')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); @@ -60,10 +60,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('[data-target^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('data-target')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); diff --git a/dist/js/microsoft.js b/dist/js/microsoft.js index 86c2c7f..1408c97 100644 --- a/dist/js/microsoft.js +++ b/dist/js/microsoft.js @@ -48,10 +48,10 @@ requestAnimationFrame(raf) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('href')) bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); @@ -60,10 +60,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('[data-target^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('data-target')) bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); diff --git a/dist/js/voicemod.js b/dist/js/voicemod.js index e8f396a..0b668d6 100644 --- a/dist/js/voicemod.js +++ b/dist/js/voicemod.js @@ -48,10 +48,10 @@ requestAnimationFrame(raf) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('href')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); @@ -60,10 +60,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('[data-target^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); + e.stopPropagation(); lenis.scrollTo(this.getAttribute('data-target')); bootstrap.Tooltip.getInstance('.close-button').dispose(); setTimeout(function() { - showAnim.reverse(); [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); }, 3050); }); @@ -71,7 +71,7 @@ document.querySelectorAll('[data-target^="#"]').forEach(anchor => { //scroll toTop $(window).scroll(function() { - $(this).scrollTop() > 800 ? $("#toTop").fadeIn("fast") : $("#toTop").fadeOut("fast") + $(this).scrollTop() > 800 ? $("#toTop").css("opacity", 1) : $("#toTop").css("opacity", 0) }); //scroll toTop end diff --git a/dist/meta.html b/dist/meta.html index bbda094..121b353 100644 --- a/dist/meta.html +++ b/dist/meta.html @@ -10,4 +10,4 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip - Meta
Μenu
Ship, celebrate and measure 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

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
\ No newline at end of file + }Vasilis 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

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
\ No newline at end of file diff --git a/dist/microsoft.html b/dist/microsoft.html index 5a07e07..a856b2c 100644 --- a/dist/microsoft.html +++ b/dist/microsoft.html @@ -10,4 +10,4 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip - Microsoft
Μenu
Ship, celebrate and measure illustration
Microsoft logo Power Automate logo

Reimagined interface unleashes the power of simplicity and usability!

Witness a remarkable transformation as I unveil the revamped UI/UX of WinAutomation into Power Automate Desktop, elevating user-friendliness and visual appeal to unprecedented heights. Bid farewell to the outdated design and embrace a sleek, modern interface that effortlessly captivates and simplifies people’s experience.

 

Role

Senior designer (full-time)

Employer

Softomotive, acquired by Microsoft, Athens (hybrid)

Teammates

George's pictureSavva's pictureTrifon's pictureKaterina's picture

Year

2019 2020 2021

Tools

Adobe Suite, Sketch, Figma & Axure RP

Skills

Overview

One of the products I'm most proud of designing is a desktop app initially called WinAutomation from Softomotive.

I was the principal designer on the project, responsible for everything from user research to iterated UI/UX design in a truly agile (meaning that we abided by all the rituals) team of seven.

I conducted internal user testing and feedback sessions throughout the design process to ensure the app met the needs of our target audience. On the process, the app was acquired by Microsoft and is now included in Windows 11 with its new name, Power Automate Desktop or PAD for short.

PAD is a low-code desktop automation solution that allows users to free up time and focus on things that really matter. Its key highlights:

1

Automates repetitive tasks

2

Enhances productivity

3

Integrates multiple systems

 

Problems

Prior to its transformation into PAD, the product was known as WinAutomation and was under the ownership of Softomotive.

Upon joining the team, I encountered three primary challenges with the product:

Screenshot from WinAutomation

1

It was dated

A visually outdated and disconnected design was observed by everyone

2

It was hard to use

A shift towards simplified user journeys for a wider user base was needed

3

It was not accessible

Inclusive design is paramount for users with various limitations

Opportunity

"How can we streamline and simplify automation support for a broad audience?"

User persona

To gain a deeper understanding of our users, I crafted a persona to empathize and connect with their needs on a personal level.

Bot icon

Execute without oversight

"I'm tired of spending hours on end doing the same monotonous tasks."

Thumbs up icon

Boost productivity

"The repetitive nature of these tasks leave me feeling unproductive."

Bulb icon

Methodical at work

"I'm motivated to find a way to free up my time and focus on more important work."

Repeat icon

Automate workflows

"I yearn for a solution that brings ease and efficiency into my daily workflow."

Trash icon

Failing to meet OKRs

"The lack of automation options makes me waste time and my potential."

Design goals

The design process for WinAutomation commenced with thorough internal research. I initiated discussions with key stakeholders, including designers, developers, managers, the CTO and the CEO who had started it all.

My primary focus was on customer care representatives who had valuable first-hand insights. Additionally, I collaborated closely with tech writers who had been writing help page articles based on customer requests.

After gathering all the necessary pieces, the head of design, product manager and I collaborated to meticulously subcategorize the tasks into four main categories that I worked on as a the principal designer.

UI design4

UX improvements3

Accessibility3

Design system4

UI redesign

When I undertook the UI facelift of the app (in 2019), it was still sporting a skeuomorphic design style reminiscent of the mid-2000s.

We embarked on a transformational journey by introducing:

  • Colors
  • Flat style icons
  • Enhancing layouts
  • Incorporating helpful illustrations

Click on the switch below Right arrow

Screenshot from WinAutomation
Compare icon

Curious about details? Dive a little deeper

WinAutomation iconWinAutomation (before)

Power Automate Desktop iconPower Automate Desktop (after)

WinAutomation UI layout
WinAutomation right click menu
WinAutomation browser recording dialog
WinAutomation Variables pane
WinAutomation main pane
WinAutomation icons
WinAutomation top icons
Power Automate Desktop UI layout
Power Automate Desktop right click menu
Power Automate Desktop browser recording dialog
Power Automate Desktop Variables pane
Power Automate Desktop main pane
Power Automate Desktop icons
Power Automate Desktop top icons

UX improvements

During the project, I communicated with stakeholders, involved developers early, maintained consistency with existing patterns, made enhancements, prioritized accessibility and conducted design QA checks for usability

Users icon

User research

I conducted user research to gain insights

Diamond icon

Defined objectives

I clearly defined the objectives of the UX & UI improvements based on feedback and business priorities

Ascending and sorting icon

Information architecture

I assessed the app's UX flows and identified opportunities to simplify them

Tools icon

Wireframing & prototyping

I created wireframes and interactive mockups to validate design ideas, with feedback from stakeholders

Build icon

Iterative design

Incorporating feedback I iterated on the mockups and prototypes

Magnifier icon

Usability testing

I conducted usability testing sessions to identify further areas for refinement

Accessibility

Why it matters

Every human on the planet approaches situations differently.

We all have different ways to think about problems, different things we need to make decisions and different ways we like to learn.

— Cambridge Cognition

Users with different needs
Users with different needs

Inclusive design principles

My work was based on three principles:

  • Recognize exclusion
  • Learn from diversity
  • Solve for one, extend to many

Throughout the development process, I meticulously oversaw the implementation, ensuring that screen readers and high contrast modes worked without any disruptions.

Power Automate Desktop without high contrast

Design system

When I joined WinAutomation, there was no established design system in place.

One of my responsibilities was to initiate the process by carefully analyzing the existing patterns and compiling an inventory of design assets and components across the entire Softomotive product family.

Just as I began the componentization process, the company underwent acquisition by Microsoft.

Consequently, I shifted gears and transitioned to utilizing Microsoft's renowned Fluent design system, aligning our efforts with their established framework.

PAD Typography
PAD Theme
PAD Buttons

Project launch results

Starting with a closed circle of beta testers, we verified that we had successfully achieved all the project goals.

From there on, since its acquisition by Microsoft, the app's user reach grew exponentially. As part of the Power Automate family (which allows other parts of Microsoft Office and more automation) it offers a lot more than originally anticipated.

Since it's included in Windows 11, it's attracting millions of users worldwide who rely on it to save time and prioritize their core tasks.

The business impact was huge and can be seen by the peer reviews it has received.

4.6 out of 5

Rating stars icon 349 reviews
G2 logo

4.4 out of 5

Rating stars icon 137 ratings
Gartner logo

8.4 out of 10

Rating stars icon 185 ratings
TrustRadius logo

4.4 out of 5

Rating stars icon 149 reviews
Capterra logo

4.0 out of 5

Rating stars icon 50 reviews
PeerSpot logo

Key takeaways

Effective collaboration: The project's success hinged on seamless collaboration among individuals from diverse teams and locations.

Clear communication: Open and effective communication channels were essential to ensure everyone was aligned and felt productive in a cohesive working environment.

Adaptability to change: The acquisition of the company introduced new systems and processes, requiring the team to adapt and embrace change, leveraging it as an opportunity for growth.

Humility and teamwork: A low-ego approach and a strong focus on teamwork allowed accepting feedback and a collective commitment to achieving the project's objectives.

Continuous improvement: Regular retrospective rituals provided valuable insights for refining workflows, identifying areas for improvement and implementing adjustments to enhance future projects.

NEXT STEPS
The journey of Power Automate Desktop is an ongoing one, marked by continuous growth and endless possibilities.

By harnessing the power of Chat GPT's technology across our product lineup, we have revolutionized the ease of building natural language-based automations.

Thank you for reading! Glasses icon

Power Automate Desktop iconYet another daily standup

Yet another daily standup

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconMicrosoft at night

Microsoft at night

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconUser journeys

User journeys

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconGeorge & Jesus

George and Jesus

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconApollo team on a typical standup

Apollo team on a typical standup

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconApollo team in retrospective mode

Apollo team in retrospective mode

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconWorking on the icons

Working on the icons

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconDesign + QA

Design team with the QA grand-master

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconGood ol' fun around the Xmas tree

Good ol' fun around the Xmas tree

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconAt the new office

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconDesign team out and about

Design team out and about

Like heart and comment bubble icons Bookmark icon

Press

Microsoft acquires Softomotive to expand low-code robotic process automation

"Today, we are announcing the acquisition of Softomotive, a world-leading provider of robotic process automation (RPA) with over 15 years of experience and the creator of WinAutomation." —Microsoft

Read articleDiagonal arrow
Person working on a laptop with Microsoft Power Automate.

Real world automation stories with Microsoft Power Automate

This post contains a set of automation stories curated by the Power CAT team with a focus on robotics process automation (RPA) in Power Automate. —Microsoft

Read articleDiagonal arrow
Person working on a laptop with Microsoft Power Automate.

On this page

Next project

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
\ No newline at end of file + }Vasilis Kolip - Microsoft
Μenu
Offcanvas illustration
Microsoft logo Power Automate logo

Reimagined interface unleashes the power of simplicity and usability!

Witness a remarkable transformation as I unveil the revamped UI/UX of WinAutomation into Power Automate Desktop, elevating user-friendliness and visual appeal to unprecedented heights. Bid farewell to the outdated design and embrace a sleek, modern interface that effortlessly captivates and simplifies people’s experience.

 

Role

Senior designer (full-time)

Employer

Softomotive, acquired by Microsoft, Athens (hybrid)

Teammates

George's pictureSavva's pictureTrifon's pictureKaterina's picture

Year

2019 2020 2021

Tools

Adobe Suite, Sketch, Figma & Axure RP

Skills

Overview

One of the products I'm most proud of designing is a desktop app initially called WinAutomation from Softomotive.

I was the principal designer on the project, responsible for everything from user research to iterated UI/UX design in a truly agile (meaning that we abided by all the rituals) team of seven.

I conducted internal user testing and feedback sessions throughout the design process to ensure the app met the needs of our target audience. On the process, the app was acquired by Microsoft and is now included in Windows 11 with its new name, Power Automate Desktop or PAD for short.

PAD is a low-code desktop automation solution that allows users to free up time and focus on things that really matter. Its key highlights:

1

Automates repetitive tasks

2

Enhances productivity

3

Integrates multiple systems

 

Problems

Prior to its transformation into PAD, the product was known as WinAutomation and was under the ownership of Softomotive.

Upon joining the team, I encountered three primary challenges with the product:

Screenshot from WinAutomation

1

It was dated

A visually outdated and disconnected design was observed by everyone

2

It was hard to use

A shift towards simplified user journeys for a wider user base was needed

3

It was not accessible

Inclusive design is paramount for users with various limitations

Opportunity

"How can we streamline and simplify automation support for a broad audience?"

User persona

To gain a deeper understanding of our users, I crafted a persona to empathize and connect with their needs on a personal level.

Bot icon

Execute without oversight

"I'm tired of spending hours on end doing the same monotonous tasks."

Thumbs up icon

Boost productivity

"The repetitive nature of these tasks leave me feeling unproductive."

Bulb icon

Methodical at work

"I'm motivated to find a way to free up my time and focus on more important work."

Repeat icon

Automate workflows

"I yearn for a solution that brings ease and efficiency into my daily workflow."

Trash icon

Failing to meet OKRs

"The lack of automation options makes me waste time and my potential."

Design goals

The design process for WinAutomation commenced with thorough internal research. I initiated discussions with key stakeholders, including designers, developers, managers, the CTO and the CEO who had started it all.

My primary focus was on customer care representatives who had valuable first-hand insights. Additionally, I collaborated closely with tech writers who had been writing help page articles based on customer requests.

After gathering all the necessary pieces, the head of design, product manager and I collaborated to meticulously subcategorize the tasks into four main categories that I worked on as a the principal designer.

UI design4

UX improvements3

Accessibility3

Design system4

UI redesign

When I undertook the UI facelift of the app (in 2019), it was still sporting a skeuomorphic design style reminiscent of the mid-2000s.

We embarked on a transformational journey by introducing:

  • Colors
  • Flat style icons
  • Enhancing layouts
  • Incorporating helpful illustrations

Click on the switch below Right arrow

Screenshot from WinAutomation
Compare icon

Curious about details? Dive a little deeper

WinAutomation iconWinAutomation (before)

Power Automate Desktop iconPower Automate Desktop (after)

WinAutomation UI layout
WinAutomation right click menu
WinAutomation browser recording dialog
WinAutomation Variables pane
WinAutomation main pane
WinAutomation icons
WinAutomation top icons
Power Automate Desktop UI layout
Power Automate Desktop right click menu
Power Automate Desktop browser recording dialog
Power Automate Desktop Variables pane
Power Automate Desktop main pane
Power Automate Desktop icons
Power Automate Desktop top icons

UX improvements

During the project, I communicated with stakeholders, involved developers early, maintained consistency with existing patterns, made enhancements, prioritized accessibility and conducted design QA checks for usability

Users icon

User research

I conducted user research to gain insights

Diamond icon

Defined objectives

I clearly defined the objectives of the UX & UI improvements based on feedback and business priorities

Ascending and sorting icon

Information architecture

I assessed the app's UX flows and identified opportunities to simplify them

Tools icon

Wireframing & prototyping

I created wireframes and interactive mockups to validate design ideas, with feedback from stakeholders

Build icon

Iterative design

Incorporating feedback I iterated on the mockups and prototypes

Magnifier icon

Usability testing

I conducted usability testing sessions to identify further areas for refinement

Accessibility

Why it matters

Every human on the planet approaches situations differently.

We all have different ways to think about problems, different things we need to make decisions and different ways we like to learn.

— Cambridge Cognition

Users with different needs
Users with different needs

Inclusive design principles

My work was based on three principles:

  • Recognize exclusion
  • Learn from diversity
  • Solve for one, extend to many

Throughout the development process, I meticulously oversaw the implementation, ensuring that screen readers and high contrast modes worked without any disruptions.

Power Automate Desktop without high contrast

Design system

When I joined WinAutomation, there was no established design system in place.

One of my responsibilities was to initiate the process by carefully analyzing the existing patterns and compiling an inventory of design assets and components across the entire Softomotive product family.

Just as I began the componentization process, the company underwent acquisition by Microsoft.

Consequently, I shifted gears and transitioned to utilizing Microsoft's renowned Fluent design system, aligning our efforts with their established framework.

PAD Typography
PAD Theme
PAD Buttons

Project launch results

Starting with a closed circle of beta testers, we verified that we had successfully achieved all the project goals.

From there on, since its acquisition by Microsoft, the app's user reach grew exponentially. As part of the Power Automate family (which allows other parts of Microsoft Office and more automation) it offers a lot more than originally anticipated.

Since it's included in Windows 11, it's attracting millions of users worldwide who rely on it to save time and prioritize their core tasks.

The business impact was huge and can be seen by the peer reviews it has received.

4.6 out of 5

Rating stars icon 349 reviews
G2 logo

4.4 out of 5

Rating stars icon 137 ratings
Gartner logo

8.4 out of 10

Rating stars icon 185 ratings
TrustRadius logo

4.4 out of 5

Rating stars icon 149 reviews
Capterra logo

4.0 out of 5

Rating stars icon 50 reviews
PeerSpot logo

Key takeaways

Effective collaboration: The project's success hinged on seamless collaboration among individuals from diverse teams and locations.

Clear communication: Open and effective communication channels were essential to ensure everyone was aligned and felt productive in a cohesive working environment.

Adaptability to change: The acquisition of the company introduced new systems and processes, requiring the team to adapt and embrace change, leveraging it as an opportunity for growth.

Humility and teamwork: A low-ego approach and a strong focus on teamwork allowed accepting feedback and a collective commitment to achieving the project's objectives.

Continuous improvement: Regular retrospective rituals provided valuable insights for refining workflows, identifying areas for improvement and implementing adjustments to enhance future projects.

NEXT STEPS
The journey of Power Automate Desktop is an ongoing one, marked by continuous growth and endless possibilities.

By harnessing the power of Chat GPT's technology across our product lineup, we have revolutionized the ease of building natural language-based automations.

Thank you for reading! Glasses icon

Power Automate Desktop iconYet another daily standup

Yet another daily standup

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconMicrosoft at night

Microsoft at night

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconUser journeys

User journeys

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconGeorge & Jesus

George and Jesus

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconApollo team on a typical standup

Apollo team on a typical standup

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconApollo team in retrospective mode

Apollo team in retrospective mode

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconWorking on the icons

Working on the icons

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconDesign + QA

Design team with the QA grand-master

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconGood ol' fun around the Xmas tree

Good ol' fun around the Xmas tree

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconAt the new office

Like heart and comment bubble icons Bookmark icon

Power Automate Desktop iconDesign team out and about

Design team out and about

Like heart and comment bubble icons Bookmark icon

Press

Microsoft acquires Softomotive to expand low-code robotic process automation

"Today, we are announcing the acquisition of Softomotive, a world-leading provider of robotic process automation (RPA) with over 15 years of experience and the creator of WinAutomation." —Microsoft

Read articleDiagonal arrow
Person working on a laptop with Microsoft Power Automate.

Real world automation stories with Microsoft Power Automate

This post contains a set of automation stories curated by the Power CAT team with a focus on robotics process automation (RPA) in Power Automate. —Microsoft

Read articleDiagonal arrow
Person working on a laptop with Microsoft Power Automate.

On this page

Next project

Voicemod logo

Senior staff product designer (full-time) 2022 2023

Voicemod is a B2C MacOS and Windows real-time voice changing app.

Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.

View project

Uninstall rate reduced by 80%

Streamer

Streamer mic element
Streamer icons
\ No newline at end of file diff --git a/dist/profile.html b/dist/profile.html index 51e2435..d211d66 100644 --- a/dist/profile.html +++ b/dist/profile.html @@ -10,4 +10,4 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip - About me
Menu
Ship, celebrate and measure illustration

Hey! Hi! Hello!

I'm a product designer working remotely from Athens and occassionaly, from Amsterdam.

Have you already checked out my CV?

Download now

Design experience

Voicemod icon

Senior staff product designer (full-time) 2022 2023

Voicemod, Valencia (remote)

Voicemod is a B2C company with real-time voice changing app for Windows and MacOS.

  • User research & usability testing
  • Collaborated cross-functionally
  • Provided constructive feedback in design critiques
  • Maintained design systems
  • Contributed to delivering a high-quality product with proven results
Meta icon

Senior UX designer (full-time) 2021 2022

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

Originally employed by accusonus and following the acquisition by Meta Reality Labs, I contributed to the development of cutting-edge audio and visual technologies.

  • User research
  • Designed user-centric experiences for existing and new products
  • Collaborated with product managers, engineers and designers
  • Iterative design processes to improve usability
  • Design critiques
Microsoft icon

Senior designer (full-time) 2019 2020 2021

Softomotive, acquired by Microsoft, Athens (hybrid)

Following Softomotive's acquisition by Microsoft, I carried working on Power Automate Desktop (included by default in Windows 11) a B2B automation building tool.

  • Served as the principal designer
  • Led the UX design process
  • Icon design
  • Focused on accessibility
ContactPigeon logo

Lead product designer (full-time) 2016 2017 2018 2019

ContactPigeon, Athens

ContactPigeon is a B2B SaaS e-commerce automation platform.

  • Took charge of the entire UI/UX process
  • Oversaw the design and development of key features, including the email editor, popup editor, and push notification designer
  • Kept direct touch with users
  • Collaborated with cross-functional teams
  • Ensured consistency and visual coherence
Ellinopoula logo

Product & visual designer (full-time) 2015 2016

Ellinopoula, Athens

Ellinopoula is a B2C ed-tech.

  • Worked with product and marketing teams
  • Played a vital role in enhancing the user experience
Sam Media logo

UI/UX designer (full-time) 2011 2012 2013 2014 2015

Sam media, Amsterdam

Sam Media is a B2C mobile content services company active in 46 countries with 1,5 million subscribers.

  • Designed hundreds of landing pages and banners
  • Collaborated with marketing
  • Drove conversion rates over the roof
  • Conducted tens of A/B tests
LR logo

Designer & video editor (full-time) 2010

LR Health & Beauty Systems, Athens

LR Health & Beauty is a direct sales enterprise.

  • Designed captivating animated banners
  • Created visually appealing video content that drove sales
Dousis publications icon

Graphic / web designer (full-time) 2008 2009

Dousis publications, Athens

Dousis publications is a media publishing group.

  • Took the lead in designing advertorial pages
  • Designed eye-catching social media banners
Potnia Thiron icon

Graphic designer (full-time) 2007 2008 2009 2010

Potnia Thiron, Athens

Potnia Thiron was a contemporary art gallery in Exarcheia.

  • Designed exhibition catalogues and marketing collateral
  • Collaborated with external partners to plan and set up exhibitions
INKY icon

Graphic designer (full-time) 2006 2007

INKY, Athens

INKY is a t-shirt and shop window sticker printing shop.

  • Created and imprinted visually appealing designs for t-shirts
  • Designed eye-catching shop window stickers

Education

Middlesex University emblem

BA in animation & interactive media

Middlesex University, Athens

Birmingham University emblem

BSc in AI and computer science

Birmingham University, Birmingham

High school of Hellenikon emblem

Majored in computer science and networks 2000 2001 2002

High school of Hellinikon, Athens

A decade of workspaces

Summer 2023

2023

My latest desk setup, 2023

2023

My desk at the ImpactHub common space

2022

My desk in standing mode, 2021

2021

My desk at home in Faliro, 2021

2021

One too many screens!

2021

My desk at night Softomotive/Microsoft

2020

My desk at my home in Faliro, 2018

2018

My desk at my home in Glyfada, 2016

2016

My desk at my home in Glyfada, 2014

2014

My desk at home in Amsterdam, 2012

2013

My desk at the new office of Sam media, early 2010's

2013

My desk (mid noughties)

2006

My room (early noughties)

2004

Birmingham university's computer lab at 2am (2002)

2002

My room in the late 90's

1998

Quote mark

Humanity, creativity and purpose, transform companies and their relationships with the people they serve.

When organizations prioritize humanity, they embrace empathy, understanding and compassion in their interactions.

They go beyond transactional relationships and foster deeper emotional connections with their customers.

Let's create meaningful experiences and establish ourselves as forces for good in the world.

Questions I'm asked

I have an academic background in design and computer science and I've been working in the UI/UX industry for the past 10 years.

In all my roles I've designed successful products that have received industry recognition and are being used by millions of people.

I have a curated list of blogs and online communities which I follow and learn things from. I also attend design conferences and I'm also a member of a local design community.

I try to stay up-to-date with the latest trends by regularly watching YouTube videos so I can incorporate them in my designs and push the limit further.

Figma, Sketch, Adobe Photoshop, Illustrator, Premiere, After Effects, InDesign, Lookback, Maze, Calendly, MS Office, GSuite and anything else that might be needed.

A supportive and inclusive culture that values collaboration, creativity and personal growth.

I seek an environment that encourages open communication, where ideas are valued and diverse perspectives are embraced.

It is important to me to be part of a company that prioritizes user-centric design allowing designers to be productive, innovative and giving them the space to pursue excellence through iterations. I prefer companies which have a strong sense of purpose and work on meaningful projects that make a positive impact.

I believe in fostering strong collaboration with cross-functional teams by maintaining open lines of communication, actively listening to different perspectives and valuing the expertise and insights each team member brings to the table.

By establishing a shared understanding of project goals and requirements, I ensure that design decisions align with both user needs and technical feasibility.

Regular meetings, workshops and design reviews are key to fostering a collaborative environment where ideas can be openly discussed, refined, and implemented effectively.

Would love to hear from you

Contact details

Résumé

Download
Résumé thumbnail

Dig deeper...

Click below to view the Figma file or the repo of this portfolio page.

...This is currently an ongoing project!

Figma fileFigma iconGitHub repoGitHub icon
\ No newline at end of file + }Vasilis Kolip - About me
Menu
Offcanvas illustration

Hey! Hi! Hello!

I'm a product designer working remotely from Athens and occassionaly, from Amsterdam.

Have you already checked out my CV?

Download now

Design experience

Voicemod icon

Senior staff product designer (full-time) 2022 2023

Voicemod, Valencia (remote)

Voicemod is a B2C company with real-time voice changing app for Windows and MacOS.

  • User research & usability testing
  • Collaborated cross-functionally
  • Provided constructive feedback in design critiques
  • Maintained design systems
  • Contributed to delivering a high-quality product with proven results
Meta icon

Senior UX designer (full-time) 2021 2022

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

Originally employed by accusonus and following the acquisition by Meta Reality Labs, I contributed to the development of cutting-edge audio and visual technologies.

  • User research
  • Designed user-centric experiences for existing and new products
  • Collaborated with product managers, engineers and designers
  • Iterative design processes to improve usability
  • Design critiques
Microsoft icon

Senior designer (full-time) 2019 2020 2021

Softomotive, acquired by Microsoft, Athens (hybrid)

Following Softomotive's acquisition by Microsoft, I carried working on Power Automate Desktop (included by default in Windows 11) a B2B automation building tool.

  • Served as the principal designer
  • Led the UX design process
  • Icon design
  • Focused on accessibility
ContactPigeon logo

Lead product designer (full-time) 2016 2017 2018 2019

ContactPigeon, Athens

ContactPigeon is a B2B SaaS e-commerce automation platform.

  • Took charge of the entire UI/UX process
  • Oversaw the design and development of key features, including the email editor, popup editor, and push notification designer
  • Kept direct touch with users
  • Collaborated with cross-functional teams
  • Ensured consistency and visual coherence
Ellinopoula logo

Product & visual designer (full-time) 2015 2016

Ellinopoula, Athens

Ellinopoula is a B2C ed-tech.

  • Worked with product and marketing teams
  • Played a vital role in enhancing the user experience
Sam Media logo

UI/UX designer (full-time) 2011 2012 2013 2014 2015

Sam media, Amsterdam

Sam Media is a B2C mobile content services company active in 46 countries with 1,5 million subscribers.

  • Designed hundreds of landing pages and banners
  • Collaborated with marketing
  • Drove conversion rates over the roof
  • Conducted tens of A/B tests
LR logo

Designer & video editor (full-time) 2010

LR Health & Beauty Systems, Athens

LR Health & Beauty is a direct sales enterprise.

  • Designed captivating animated banners
  • Created visually appealing video content that drove sales
Dousis publications icon

Graphic / web designer (full-time) 2008 2009

Dousis publications, Athens

Dousis publications is a media publishing group.

  • Took the lead in designing advertorial pages
  • Designed eye-catching social media banners
Potnia Thiron icon

Graphic designer (full-time) 2007 2008 2009 2010

Potnia Thiron, Athens

Potnia Thiron was a contemporary art gallery in Exarcheia.

  • Designed exhibition catalogues and marketing collateral
  • Collaborated with external partners to plan and set up exhibitions
INKY icon

Graphic designer (full-time) 2006 2007

INKY, Athens

INKY is a t-shirt and shop window sticker printing shop.

  • Created and imprinted visually appealing designs for t-shirts
  • Designed eye-catching shop window stickers

Education

Middlesex University emblem

BA in animation & interactive media

Middlesex University, Athens

Birmingham University emblem

BSc in AI and computer science

Birmingham University, Birmingham

High school of Hellenikon emblem

Majored in computer science and networks 2000 2001 2002

High school of Hellinikon, Athens

A decade of workspaces

Summer 2023

2023

My latest desk setup, 2023

2023

My desk at the ImpactHub common space

2022

My desk in standing mode, 2021

2021

My desk at home in Faliro, 2021

2021

One too many screens!

2021

My desk at night Softomotive/Microsoft

2020

My desk at my home in Faliro, 2018

2018

My desk at my home in Glyfada, 2016

2016

My desk at my home in Glyfada, 2014

2014

My desk at home in Amsterdam, 2012

2013

My desk at the new office of Sam media, early 2010's

2013

My desk (mid noughties)

2006

My room (early noughties)

2004

Birmingham university's computer lab at 2am (2002)

2002

My room in the late 90's

1998

Quote mark

Humanity, creativity and purpose, transform companies and their relationships with the people they serve.

When organizations prioritize humanity, they embrace empathy, understanding and compassion in their interactions.

They go beyond transactional relationships and foster deeper emotional connections with their customers.

Let's create meaningful experiences and establish ourselves as forces for good in the world.

Questions I'm asked

I have an academic background in design and computer science and I've been working in the UI/UX industry for the past 10 years.

In all my roles I've designed successful products that have received industry recognition and are being used by millions of people.

I have a curated list of blogs and online communities which I follow and learn things from. I also attend design conferences and I'm also a member of a local design community.

I try to stay up-to-date with the latest trends by regularly watching YouTube videos so I can incorporate them in my designs and push the limit further.

Figma, Sketch, Adobe Photoshop, Illustrator, Premiere, After Effects, InDesign, Lookback, Maze, Calendly, MS Office, GSuite and anything else that might be needed.

A supportive and inclusive culture that values collaboration, creativity and personal growth.

I seek an environment that encourages open communication, where ideas are valued and diverse perspectives are embraced.

It is important to me to be part of a company that prioritizes user-centric design allowing designers to be productive, innovative and giving them the space to pursue excellence through iterations. I prefer companies which have a strong sense of purpose and work on meaningful projects that make a positive impact.

I believe in fostering strong collaboration with cross-functional teams by maintaining open lines of communication, actively listening to different perspectives and valuing the expertise and insights each team member brings to the table.

By establishing a shared understanding of project goals and requirements, I ensure that design decisions align with both user needs and technical feasibility.

Regular meetings, workshops and design reviews are key to fostering a collaborative environment where ideas can be openly discussed, refined, and implemented effectively.

Would love to hear from you

Contact details

Résumé

Download
Résumé thumbnail

Dig deeper...

Click below to view the Figma file or the repo of this portfolio page.

...This is currently an ongoing project!

Figma fileFigma iconGitHub repoGitHub icon
\ No newline at end of file diff --git a/dist/voicemod.html b/dist/voicemod.html index c66ba45..b3a198d 100644 --- a/dist/voicemod.html +++ b/dist/voicemod.html @@ -10,4 +10,4 @@ "sameAs": [ "https://www.linkedin.com/in/vasiliskolip/" ] - }Vasilis Kolip - Voicemod
Μenu
Ship, celebrate and measure illustration
Voicemod logo

My revamped onboarding flow, cut dropouts by 80%

Voicemod is a voice changing app for in-game use or with Discord, Google Meet or Zoom.

Approximately 25% of our new users uninstalled the app within the first 24 hours.

 

Role

Senior staff product designer (full-time)

Employer

Voicemod, Valencia (remote)

Teammates

Marta's pictureMarie's pictureRenan's picture

Year

2022 2023

Tools

Figma, Miro, Typeform, Lookback, Calendly & RewardGenius

Skills

Overview

Voicemod is a real-time voice changing app for use with meeting apps such as Discord, Google Meet, Zoom but not just! Our users typically use it within games when they're streaming or just playing with friends.

I am one of the main designers for the MacOS version.

Video streaming apps

Jazz up your live streams

Meeting apps

Add some humor to your meetings

Metaverse apps

Anonymize your virtual presence in the Metaverse

Have fun while gaming

Transform your gaming experience

Role-play

Immerse yourself in character and interact

Create content

Captivate your audience with voice effects

Give it a go Right arrow

Play and toggle

Sound Information

Duration:
Source:
Status: Loading

Playing Information

0
playing progress
Fancy arrow

Try different voices

Problem

Our "uninstall survey" (a survey that pops up when the user uninstalls the app) revealed a high dropout rate. New users were experiencing problems due to difficulty in setting up the app correctly.

25% of new users uninstalled within 24 hours due to lack of experience in using audio software; they couldn't set-up their gear properly, didn't know what was wrong and how to connect to a third party app.

Download icon

Downloaded

Installation icon

Installed

Troubled user icon

24.6% faced issues

Uninstall icon

Uninstalled

Horizontal bracket

Within 24 hours

What was the number one thing that motivated you to uninstall Voicemod?

134.7k out of 134.7k people answered this question

Voicemod didn't work

Thumbs down icon14.4% 19k resp.

What exactly didn't work?

19.3k out of 134.7k people answered this question

I couldn't open Voicemod

Thumbs down icon24.6% 4.8k resp.

I couldn't connect Voicemod with Discord etc

Thumbs down icon21.2% 4.1k resp.

Typeform logo

To address this issue I proposed an onboarding process that would guide new users through the setup process and allow them to reach the "wow" moment of the app right from the start.

I presented my recommendations to the stakeholders and with minor changes, we decided to move forward to user validation using this Figma prototype.

Opportunity

"How can we effectively guide users quickly setup the app and experience the 'wow moment' in 5 minutes?"

Competitive analysis

Before anything, I conducted a competitive analysis to analyze strengths and weaknesses from key competitors.

The best and closest match to our case was Krisp.ai - a tool that allows users the stifle background noise to zero.

    Ideas that would work

    • Ideas best to avoid

Analysis image

During the onboarding process Krisp.ai requires users to record their voice...

Analysis image

...and then test it to see the difference themselves. That's the "wow moment"!

Analysis image

Make sure users connect to third party apps right off the bat!

Analysis image

Asking users to train their voice to clone it from the start would be time consuming...

Analysis image

Introducing a soundboard during onboarding, would be nice but unnecessary...

User persona

Once done with the competitive analysis, I drafted a persona for me and the team to get acquainted with and feel empathetic towards.

The target audience consists mostly of Gen Z males as evidenced by surveys and user interviews.

Generation z males

Motives

  • Have fun with friends
  • Curiosity
  • Stream on YouTube & Twitch

Values

  • Authenticity
  • Autonomy
  • Community

Pain points

  • Too complicated
  • Don't know where to start
  • Can't change voice from Male to Female

Goals

  • Realistic voice
  • Recognizable characters (e.g., sound like a specific hero)

User journey

Having conducted thorough explorations, I identified three potential user journeys.

I carefully evaluated each journey and selected the one that best met the needs of both users and the business.

User opens VM

Select use case

Pick your microphone & headphones

OS dialog for mic permission

Voice recording

User tries out various voices (wow moment)

Selects 3rd party app

Gets instructions

Complete

Moment of celebration!

Design goals

Survey results showed a high dropout rate, prompting a need for drastic action. We converted our key problems into opportunities to solve for in the new onboarding experience.

Audio setup3

Wow moment3

Third party integration4

Wireframes

Some of the early sketches that lead to the final result.

Wireframe
Wireframe
Wireframe
Wireframe

Prototype

When done with the wireframes and mockups, I created this Figma prototype taking into consideration feedback from the stakeholders (including developers).

By incorporating their perspectives, I refined the design and started preparing for the user testing process.

The Figma prototype for the user testing

My desk while working on the prototype

I think it looks quite nice

Question mark icon

Research fan? Take a look at the process

Research plan

To validate the new flow, the user research plan I prepared included the following key steps:

  • Research objectives
  • Research questions
  • Participant criteria

To ensure a successful user interview with everyone involved, I required the presence of two colleagues playing key roles:

  • a note-taker who should ideally be closely connected to the project (such as a product manager or stakeholder), and
  • an observer who validates that subsequent iterations are based on user feedback

Since I was the facilitator who conducted the interview with the user, I sought assistance from my partners in crime.

Of course I could have conducted the interviews alone and check later the recordings, but two heads are better than one...

User interview diagram
Question mark icon

My user research tools include Typeform to recruit participants & accepting GDPR terms, Calendly to schedule the interview slots and Lookback to conduct and record the interviews.

User interview intro script on a notepad

User interviews

During the user testing sessions, we explained our objectives and had participants complete the dummy onboarding with the prototype while asking open-ended questions to collect their thoughts and feedback.

While they interacted with the app, we observed their behavior, noted issues, confusions and paid attention to both verbal and nonverbal cues.

A short recording from Lookback.

Iteration

When done with the testing sessions, we reviewed our notes and compiled a list of issues and opportunities for improvement.

We then analyzed this feedback to determine which changes were most important to address and incorporated them into our design.

Our Miro board looks a bit messy right after taking the notes. We groom it later.

Design system

The new onboarding experience not only drew upon the existing design system but also incorporated additional elements (atoms and molecules), further advancing and expanding the ecosystem.

Part of Voicemod's design system

Project launch results

By providing clear guidance and instructions, users gained a better understanding of how to navigate and utilize the app effectively. As a result, the dropout rate dramatically decreased from 24.6% to an astounding 5%.

The implementation of the new onboarding flow brought tremendous success to the app, significantly reducing user uninstalls.

Dropout rate

5% -79.27%Arrow down icon

Dropouts with old version

Thumbs down icon24.6%

Dropouts with new version

5% Trophy icon

Problems during integration to Discord etc

2% -90.57%Arrow down icon

Problems with old version

Thumbs down icon21.2%

Problems with new version

2% Trophy icon

Typeform logo

Conclusions

Despite the increase in the number of clicks during the onboarding process, we observed a significant decrease in the dropout rate.

The main takeaways from this experience are:

  • Effective communication among teammates is crucial
  • User validated design decisions will always prevail

Next steps:

  • Further refinement and enhancement of onboarding development
  • Exploring automation possibilities with AI for smoother app setup

Thank you for reading! Glasses icon

ps. This was only one example of my work @Voicemod. Another major project I am involved with is the design of a completely new voice creating app.

Press

AI-driven tech changing peoples' voices

"Jaime Bosch, the CEO of Voicemod, tells Julia Chatterley his technology gives users greater expression." —CNN

View videoDiagonal arrow
Jaime Bosch live on CNN

Voicemod is now available on Mac with real-time AI voice changing and soundboards

"Voicemod lets you transform your voice into fantasy characters or use a soundboard in games or Discord calls." —The Verge

Read articleDiagonal arrow
Voicemod on MacOS

On this page

Next project

Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View project

Lightning bolt icon

Lightning fast 1st cuts

Footage duration

Camera icon869m.

User iconRequirements

  • Combine footage
  • Take selection
  • Remove silences

YouTube channel avatar@Channel

Dummy lines icon
\ No newline at end of file + }Vasilis Kolip - Voicemod
Μenu
Offcanvas illustration
Voicemod logo

My revamped onboarding flow, cut dropouts by 80%

Voicemod is a voice changing app for in-game use or with Discord, Google Meet or Zoom.

Approximately 25% of our new users uninstalled the app within the first 24 hours.

 

Role

Senior staff product designer (full-time)

Employer

Voicemod, Valencia (remote)

Teammates

Marta's pictureMarie's pictureRenan's picture

Year

2022 2023

Tools

Figma, Miro, Typeform, Lookback, Calendly & RewardGenius

Skills

Overview

Voicemod is a real-time voice changing app for use with meeting apps such as Discord, Google Meet, Zoom but not just! Our users typically use it within games when they're streaming or just playing with friends.

I am one of the main designers for the MacOS version.

Video streaming apps

Jazz up your live streams

Meeting apps

Add some humor to your meetings

Metaverse apps

Anonymize your virtual presence in the Metaverse

Have fun while gaming

Transform your gaming experience

Role-play

Immerse yourself in character and interact

Create content

Captivate your audience with voice effects

Give it a go Right arrow

Play and toggle

Sound Information

Duration:
Source:
Status: Loading

Playing Information

0
playing progress
Fancy arrow

Try different voices

Problem

Our "uninstall survey" (a survey that pops up when the user uninstalls the app) revealed a high dropout rate. New users were experiencing problems due to difficulty in setting up the app correctly.

25% of new users uninstalled within 24 hours due to lack of experience in using audio software; they couldn't set-up their gear properly, didn't know what was wrong and how to connect to a third party app.

Download icon

Downloaded

Installation icon

Installed

Troubled user icon

24.6% faced issues

Uninstall icon

Uninstalled

Horizontal bracket

Within 24 hours

What was the number one thing that motivated you to uninstall Voicemod?

134.7k out of 134.7k people answered this question

Voicemod didn't work

Thumbs down icon14.4% 19k resp.

What exactly didn't work?

19.3k out of 134.7k people answered this question

I couldn't open Voicemod

Thumbs down icon24.6% 4.8k resp.

I couldn't connect Voicemod with Discord etc

Thumbs down icon21.2% 4.1k resp.

Typeform logo

To address this issue I proposed an onboarding process that would guide new users through the setup process and allow them to reach the "wow" moment of the app right from the start.

I presented my recommendations to the stakeholders and with minor changes, we decided to move forward to user validation using this Figma prototype.

Opportunity

"How can we effectively guide users quickly setup the app and experience the 'wow moment' in 5 minutes?"

Competitive analysis

Before anything, I conducted a competitive analysis to analyze strengths and weaknesses from key competitors.

The best and closest match to our case was Krisp.ai - a tool that allows users the stifle background noise to zero.

    Ideas that would work

    • Ideas best to avoid

Analysis image

During the onboarding process Krisp.ai requires users to record their voice...

Analysis image

...and then test it to see the difference themselves. That's the "wow moment"!

Analysis image

Make sure users connect to third party apps right off the bat!

Analysis image

Asking users to train their voice to clone it from the start would be time consuming...

Analysis image

Introducing a soundboard during onboarding, would be nice but unnecessary...

User persona

Once done with the competitive analysis, I drafted a persona for me and the team to get acquainted with and feel empathetic towards.

The target audience consists mostly of Gen Z males as evidenced by surveys and user interviews.

Generation z males

Motives

  • Have fun with friends
  • Curiosity
  • Stream on YouTube & Twitch

Values

  • Authenticity
  • Autonomy
  • Community

Pain points

  • Too complicated
  • Don't know where to start
  • Can't change voice from Male to Female

Goals

  • Realistic voice
  • Recognizable characters (e.g., sound like a specific hero)

User journey

Having conducted thorough explorations, I identified three potential user journeys.

I carefully evaluated each journey and selected the one that best met the needs of both users and the business.

User opens VM

Select use case

Pick your microphone & headphones

OS dialog for mic permission

Voice recording

User tries out various voices (wow moment)

Selects 3rd party app

Gets instructions

Complete

Moment of celebration!

Design goals

Survey results showed a high dropout rate, prompting a need for drastic action. We converted our key problems into opportunities to solve for in the new onboarding experience.

Audio setup3

Wow moment3

Third party integration4

Wireframes

Some of the early sketches that lead to the final result.

Wireframe
Wireframe
Wireframe
Wireframe

Prototype

When done with the wireframes and mockups, I created this Figma prototype taking into consideration feedback from the stakeholders (including developers).

By incorporating their perspectives, I refined the design and started preparing for the user testing process.

The Figma prototype for the user testing

My desk while working on the prototype

I think it looks quite nice

Question mark icon

Research fan? Take a look at the process

Research plan

To validate the new flow, the user research plan I prepared included the following key steps:

  • Research objectives
  • Research questions
  • Participant criteria

To ensure a successful user interview with everyone involved, I required the presence of two colleagues playing key roles:

  • a note-taker who should ideally be closely connected to the project (such as a product manager or stakeholder), and
  • an observer who validates that subsequent iterations are based on user feedback

Since I was the facilitator who conducted the interview with the user, I sought assistance from my partners in crime.

Of course I could have conducted the interviews alone and check later the recordings, but two heads are better than one...

User interview diagram
Question mark icon

My user research tools include Typeform to recruit participants & accepting GDPR terms, Calendly to schedule the interview slots and Lookback to conduct and record the interviews.

User interview intro script on a notepad

User interviews

During the user testing sessions, we explained our objectives and had participants complete the dummy onboarding with the prototype while asking open-ended questions to collect their thoughts and feedback.

While they interacted with the app, we observed their behavior, noted issues, confusions and paid attention to both verbal and nonverbal cues.

A short recording from Lookback.

Iteration

When done with the testing sessions, we reviewed our notes and compiled a list of issues and opportunities for improvement.

We then analyzed this feedback to determine which changes were most important to address and incorporated them into our design.

Our Miro board looks a bit messy right after taking the notes. We groom it later.

Design system

The new onboarding experience not only drew upon the existing design system but also incorporated additional elements (atoms and molecules), further advancing and expanding the ecosystem.

Part of Voicemod's design system

Project launch results

By providing clear guidance and instructions, users gained a better understanding of how to navigate and utilize the app effectively. As a result, the dropout rate dramatically decreased from 24.6% to an astounding 5%.

The implementation of the new onboarding flow brought tremendous success to the app, significantly reducing user uninstalls.

Dropout rate

5% -79.27%Arrow down icon

Dropouts with old version

Thumbs down icon24.6%

Dropouts with new version

5% Trophy icon

Problems during integration to Discord etc

2% -90.57%Arrow down icon

Problems with old version

Thumbs down icon21.2%

Problems with new version

2% Trophy icon

Typeform logo

Conclusions

Despite the increase in the number of clicks during the onboarding process, we observed a significant decrease in the dropout rate.

The main takeaways from this experience are:

  • Effective communication among teammates is crucial
  • User validated design decisions will always prevail

Next steps:

  • Further refinement and enhancement of onboarding development
  • Exploring automation possibilities with AI for smoother app setup

Thank you for reading! Glasses icon

ps. This was only one example of my work @Voicemod. Another major project I am involved with is the design of a completely new voice creating app.

Press

AI-driven tech changing peoples' voices

"Jaime Bosch, the CEO of Voicemod, tells Julia Chatterley his technology gives users greater expression." —CNN

View videoDiagonal arrow
Jaime Bosch live on CNN

Voicemod is now available on Mac with real-time AI voice changing and soundboards

"Voicemod lets you transform your voice into fantasy characters or use a soundboard in games or Discord calls." —The Verge

Read articleDiagonal arrow
Voicemod on MacOS

On this page

Next project

Meta logo

Senior UX designer (full-time) 2021 2022

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

Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.

View project

Lightning bolt icon

Lightning fast 1st cuts

Footage duration

Camera icon869m.

User iconRequirements

  • Combine footage
  • Take selection
  • Remove silences

YouTube channel avatar@Channel

Dummy lines icon
\ No newline at end of file diff --git a/src/img/misc/illustrations/bike-dog.svg b/src/img/misc/illustrations/bike-dog.svg new file mode 100644 index 0000000..a6ad85a --- /dev/null +++ b/src/img/misc/illustrations/bike-dog.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/misc/illustrations/nomad-life.svg b/src/img/misc/illustrations/nomad-life.svg new file mode 100644 index 0000000..19b2e2c --- /dev/null +++ b/src/img/misc/illustrations/nomad-life.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/misc/illustrations/spying.svg b/src/img/misc/illustrations/spying.svg new file mode 100644 index 0000000..d80b68c --- /dev/null +++ b/src/img/misc/illustrations/spying.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/misc/illustrations/team-options.svg b/src/img/misc/illustrations/team-options.svg new file mode 100644 index 0000000..fa49e56 --- /dev/null +++ b/src/img/misc/illustrations/team-options.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8dfcbb8..ac4004f 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,7 @@ - + Vasilis Kolip - Portfolio @@ -114,7 +114,7 @@
Μenu
Contact - Ship, celebrate and measure illustration + Offcanvas illustration @@ -849,7 +849,7 @@

Let's begin already

-
+
@@ -1042,7 +1042,7 @@

Next project

-
+
@@ -1330,7 +1330,7 @@

Next project

-
+
@@ -873,7 +873,7 @@

Would love to hear from you

-
+
@@ -1318,7 +1318,7 @@

Next project

-
+