From fd348aef1688cacb319eecc7c2934e87bdaea7f4 Mon Sep 17 00:00:00 2001 From: Vasilis K Date: Thu, 21 Dec 2023 15:47:38 +0200 Subject: [PATCH] css --- dist/accusonus.html | 2 +- dist/index.html | 2 +- dist/meta.html | 2 +- dist/microsoft.html | 2 +- dist/profile.html | 2 +- dist/voicemod.html | 2 +- src/accusonus.html | 2 +- src/index.html | 2 +- src/meta.html | 2 +- src/microsoft.html | 2 +- src/profile.html | 4 ++-- src/voicemod.html | 2 +- 12 files changed, 13 insertions(+), 13 deletions(-) diff --git a/dist/accusonus.html b/dist/accusonus.html index 3bc8f81..be554b4 100644 --- a/dist/accusonus.html +++ b/dist/accusonus.html @@ -21,4 +21,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

accusonus logo

Make online calls better with Spotify and voice tweaks.

Quickly and easily. Scroll to find out more!

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, HTML/CSS & JS

Skills

Summary

  • OgmaCast is a simple tool to fine tune your voice and add ambient music during online calls
  • I was the principal designer working on this "greenfield" project
  • Conducted research to identify use cases
  • Designed user journeys, wireframes, mockups and a prototype
  • Iterated further based on user feedback
  • Production blocked due to company's acquisition

Overview

OgmaCast is your go-to solution for enhancing voice quality during calls and infusing them with Spotify or local background music, all with remarkable ease.

While initially crafted to cater to the needs of gamers, streamers, and podcasters, our vision pivoted to instead cater for business professionals seeking a seamless audio experience.

Whether in a virtual meeting or leading a yoga class, OgmaCast empowers you to own your voice and set the perfect audio backdrop, creating unforgettable online interactions.

Main features

Μusic with Spotify illustration

Μusic with Spotify

Noise remover illustration

Noise remover

Overall better voice call illustration

Overall better voice call

Voice deepener icon

Voice deepener

Voice EQ icon

Voice EQ

Voice leveler icon

Voice leveler

Problems

Mostly based on assumptions through research, the team decided to focus on three key problems that professionals were facing during online calls.

1

Inability to add music to online calls

2

Babies crying, dogs barking in the background

3

Flaky sounding voice can lead to miscommunication

Opportunity

"How can we improve the quality of online calls? How can we allow instructors to add music using Spotify and local files?"

Competitive analysis

During the research, we found that all meeting apps lacked a background noise suppression mode, creating a unique opportunity for our product. The same for adding music using Spotify and local files.

Our analysis examined key players in the online communication meeting space, uncovering strengths and weaknesses. These insights guided our product's differentiation and the right market fit.

Competitors

Krisp icon

Krisp

Voicemod icon

Voicemod

Meeting apps

Teams icon

Teams

Meet icon

Meet

Discord icon

Discord

Slack icon

Slack

Zoom icon

Zoom

Skype icon

Skype

Music apps

Spotify icon

Spotify

Tidal icon

Tidal

Discovery phase

During the discovery phase, I analyzed UI's and UX's from key competitors as I typically do.

A sound shield during calls

A sound shield during calls

A sound shield during calls

Krisp.ai

Voicemod

Voicemod - Little did I know I'd be working with them next

Logitech's Blue Vo!ce

Logitech's Blue Vo!ce

Moreover, I tried to understand and define what we wanted to build. The process I follow from finding to execution can be split into two big clusters, where each of them represents a substantial part of building the right thing.

Those two cover the product discovery itself and the product development based on the previous findings. There's also a learning stage, where findings, takeaways and insights are shared with the team in order to improve the next interactions.

Design framework

My go-to design framework

User persona

Our user personas typically were casual users engaged in online calls through platforms like Google Meet, Zoom, Teams, Discord or Skype.

During my research I stumbled upon additional personas such as content creators in the streaming and podcasting world to those hosting live web radio shows. We decided to cater to their needs as well.

All of them share a common desire for enhanced voice quality and the ability to add music in the background whether it's for entertainment or business purposes.

1

Increased clarity

I want top-notch audio, intuitively managed, no pricey gear

2

Higher confidence perception

I want my voice to convey authority and accountability

3

Richer content with background music

I want to easily add music from Spotify or my local files

User persona

User journey

Idea? Check! Assumptions? Check. User validation? Semi-check! Let's get crackin' then and we'll see how it goes!

Which path is the easiest? Which solution creates least friction? What do the findings from competitors say? Do they work? Can we improve them? It was a period of shaping.

Splash screen onboarding process

Start by selecting a microphone

Record a small clip of my voice

Auto-tune with optimal settings

Play voice with the ability to bypass & compare

Show tabs/dials for options:

Noise Remover

Voice EQ

Voice leveler

Voice deepener

Add music using Spotify or local files

Wireframes

Although I started presenting the product as it eventually came to be, its initial version had additionally a voice changer and small library of sound effects.

The team was considering launching this app with its main target audience gamers however we pivoted from that.

Below are some of the wireframes that helped shape the product.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Initial mockups (Mid-Fi)

What the framework above showed was basically the double diamond model. Depending on the requirements and the time restrictions, I leverage it to guide my product design process by emphasizing divergent and convergent thinking in two distinct phases.

In the first diamond, I explore and broaden possibilities during the discovery phase, using wireframing to converge on a clear direction. The second diamond involves defining the chosen path and refining details.

The double diamond model

The Double Diamond Model - adapted from the UK design council

In my experience thus far, the divergence and convergence occur during the initial phase namely during wireframing, while the final version takes shape during mockup design. That was until this project came along.

This time around the convergence happened during the mockup design. Why? Well because that was when I had a moment of realization. Check out below the mockups based on the wireframes.

Initial variations

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

The aesthetics were heavily influenced by the design system of our family of products.

The ERA Bundle

Voice Leveler

Voice Leveler

Reverb Remover

Reverb Remover

Voice autoEQ

Voice autoEQ

The company's main offering were the audio plugins above. By taking advantage of our technology we wanted to create this a new product called "OgmaCast".

The size of the window and the design architecture assumed that the user would use this app on its own.

Audio Clean-Up Assistant was a plugin that combined other plugins

All of these plugins were available for use within video and audio editors. We were looking to expand our offerings and escape the limited container of plugins.

We figured, why not create a standalone app that would leverage the tech behind the ERA family? Why not channel that expertise into another segment?

The ERA Bundle

The ERA Bundle

Dribbble shot by Charisto Konstantakopoulou

Prototype

Since our company was 90% remote, we were all potential users of this app. For starters it was decided by the stakeholders to test our assumptions within the company and so, I conducted user testing sessions with my colleagues.

More specifically:

  1. I enlisted colleagues from departments other than design and development
  2. I arranged the meetings
  3. I made them feel at ease
  4. I asked them to try out the Figma prototype while sharing their screens, hearts and minds
  5. I asked them open ended questions
  6. I rephrased and re-asked important questions
  7. I took notes and shared them with the product manager for us to decide what we deemed important

Iteration based on user feedback

One of the things that really hit the spot when it comes to user research, is the way ideas and implementation is challenged. When designing things within a closed circle of people, no matter how experienced its members are, there's always the possibility of something escaping from the team's perception.

This time around, was the size of the window and its architecture. Why was it so big? Why did we think that the users would want it to be in landscape orientation? I was the one to blame really; I hadn't visualized it properly in context but thankfully, after the user interviews, it occurred to me.

I redesigned the app in a way more simplified way and presented it to the team of stakeholders and explained why it was important. They all bought in.

Question mark icon

User testing ensures that the end product aligns seamlessly with user needs and expectations. "You've got to start with the customer experience and work backward to the technology." —Steve Jobs

Final mockups (Mid-Fi)

Following the feedback I received and our overall work on the project, I changed the look and feel quite a bit. We needed the window to be smaller so it could be side by side with any given meeting app for the user to customize their voice and depending the persona, the background music too.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

OgmaCast main screens for voice optmization, background music & settings

OgmaCast during a yoga class

OgmaCast during a yoga class

OgmaCast mockup screen
OgmaCast mockup screen
OgmaCast mockup screen

OgmaCast (aka ProjectWire) dark theme, fun exploration

Prototype

Figma prototypes no doubt rule.

The way anyone can quickly create one and add all sorts of animations, effects, sticky sections and all that is stunning.

Building a prototype with HTML may be somewhat harder and more time-consuming to create, but in the end of the day, they're better in conveying a true sense of the final product. They're a lot better in helping the team see even clearer possible pitfalls and shortcomings of the design.

That's why I really like working on HTML prototypes using Bootstrap. I love validating the UX and the UI of the app in depth.

Here's the HTML prototype of OgmaCast, check it out!

A clickable HTML prototype

Sudden death

Before having a chance to really polish the UI and make the app production ready, the company was acquired by Meta and blocked further development of this app.

Would it have turned into a solid competitor to Krisp.ai? I think so! It's a shame we didn't get to find out. Either way the next steps would have been to:

  1. Polish the UI to reflect brand's identity but awesomeness too in dark and light theme
  2. Add new components and update the design system accordingly
  3. Conduct usability tests to ensure ease of use
  4. Learn, improve and take the experience to the next level by identifying new features

Thank you for reading! Glasses icon

On this page

Previous

Microsoft

Up next

About

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
Credits

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

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

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

\ No newline at end of file + gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

accusonus logo

Make online calls better with Spotify and voice tweaks.

Quickly and easily. Scroll to find out more!

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, HTML/CSS & JS

Skills

Summary

  • OgmaCast is a simple tool to fine tune your voice and add ambient music during online calls
  • I was the principal designer working on this "greenfield" project
  • Conducted research to identify use cases
  • Designed user journeys, wireframes, mockups and a prototype
  • Iterated further based on user feedback
  • Production blocked due to company's acquisition

Overview

OgmaCast is your go-to solution for enhancing voice quality during calls and infusing them with Spotify or local background music, all with remarkable ease.

While initially crafted to cater to the needs of gamers, streamers, and podcasters, our vision pivoted to instead cater for business professionals seeking a seamless audio experience.

Whether in a virtual meeting or leading a yoga class, OgmaCast empowers you to own your voice and set the perfect audio backdrop, creating unforgettable online interactions.

Main features

Μusic with Spotify illustration

Μusic with Spotify

Noise remover illustration

Noise remover

Overall better voice call illustration

Overall better voice call

Voice deepener icon

Voice deepener

Voice EQ icon

Voice EQ

Voice leveler icon

Voice leveler

Problems

Mostly based on assumptions through research, the team decided to focus on three key problems that professionals were facing during online calls.

1

Inability to add music to online calls

2

Babies crying, dogs barking in the background

3

Flaky sounding voice can lead to miscommunication

Opportunity

"How can we improve the quality of online calls? How can we allow instructors to add music using Spotify and local files?"

Competitive analysis

During the research, we found that all meeting apps lacked a background noise suppression mode, creating a unique opportunity for our product. The same for adding music using Spotify and local files.

Our analysis examined key players in the online communication meeting space, uncovering strengths and weaknesses. These insights guided our product's differentiation and the right market fit.

Competitors

Krisp icon

Krisp

Voicemod icon

Voicemod

Meeting apps

Teams icon

Teams

Meet icon

Meet

Discord icon

Discord

Slack icon

Slack

Zoom icon

Zoom

Skype icon

Skype

Music apps

Spotify icon

Spotify

Tidal icon

Tidal

Discovery phase

During the discovery phase, I analyzed UI's and UX's from key competitors as I typically do.

A sound shield during calls

A sound shield during calls

A sound shield during calls

Krisp.ai

Voicemod

Voicemod - Little did I know I'd be working with them next

Logitech's Blue Vo!ce

Logitech's Blue Vo!ce

Moreover, I tried to understand and define what we wanted to build. The process I follow from finding to execution can be split into two big clusters, where each of them represents a substantial part of building the right thing.

Those two cover the product discovery itself and the product development based on the previous findings. There's also a learning stage, where findings, takeaways and insights are shared with the team in order to improve the next interactions.

Design framework

My go-to design framework

User persona

Our user personas typically were casual users engaged in online calls through platforms like Google Meet, Zoom, Teams, Discord or Skype.

During my research I stumbled upon additional personas such as content creators in the streaming and podcasting world to those hosting live web radio shows. We decided to cater to their needs as well.

All of them share a common desire for enhanced voice quality and the ability to add music in the background whether it's for entertainment or business purposes.

1

Increased clarity

I want top-notch audio, intuitively managed, no pricey gear

2

Higher confidence perception

I want my voice to convey authority and accountability

3

Richer content with background music

I want to easily add music from Spotify or my local files

User persona

User journey

Idea? Check! Assumptions? Check. User validation? Semi-check! Let's get crackin' then and we'll see how it goes!

Which path is the easiest? Which solution creates least friction? What do the findings from competitors say? Do they work? Can we improve them? It was a period of shaping.

Splash screen onboarding process

Start by selecting a microphone

Record a small clip of my voice

Auto-tune with optimal settings

Play voice with the ability to bypass & compare

Show tabs/dials for options:

Noise Remover

Voice EQ

Voice leveler

Voice deepener

Add music using Spotify or local files

Wireframes

Although I started presenting the product as it eventually came to be, its initial version had additionally a voice changer and small library of sound effects.

The team was considering launching this app with its main target audience gamers however we pivoted from that.

Below are some of the wireframes that helped shape the product.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Initial mockups (Mid-Fi)

What the framework above showed was basically the double diamond model. Depending on the requirements and the time restrictions, I leverage it to guide my product design process by emphasizing divergent and convergent thinking in two distinct phases.

In the first diamond, I explore and broaden possibilities during the discovery phase, using wireframing to converge on a clear direction. The second diamond involves defining the chosen path and refining details.

The double diamond model

The Double Diamond Model - adapted from the UK design council

In my experience thus far, the divergence and convergence occur during the initial phase namely during wireframing, while the final version takes shape during mockup design. That was until this project came along.

This time around the convergence happened during the mockup design. Why? Well because that was when I had a moment of realization. Check out below the mockups based on the wireframes.

Initial variations

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

The aesthetics were heavily influenced by the design system of our family of products.

The ERA Bundle

Voice Leveler

Voice Leveler

Reverb Remover

Reverb Remover

Voice autoEQ

Voice autoEQ

The company's main offering were the audio plugins above. By taking advantage of our technology we wanted to create this a new product called "OgmaCast".

The size of the window and the design architecture assumed that the user would use this app on its own.

Audio Clean-Up Assistant was a plugin that combined other plugins

All of these plugins were available for use within video and audio editors. We were looking to expand our offerings and escape the limited container of plugins.

We figured, why not create a standalone app that would leverage the tech behind the ERA family? Why not channel that expertise into another segment?

The ERA Bundle

The ERA Bundle

Dribbble shot by Charisto Konstantakopoulou

Prototype

Since our company was 90% remote, we were all potential users of this app. For starters it was decided by the stakeholders to test our assumptions within the company and so, I conducted user testing sessions with my colleagues.

More specifically:

  1. I enlisted colleagues from departments other than design and development
  2. I arranged the meetings
  3. I made them feel at ease
  4. I asked them to try out the Figma prototype while sharing their screens, hearts and minds
  5. I asked them open ended questions
  6. I rephrased and re-asked important questions
  7. I took notes and shared them with the product manager for us to decide what we deemed important

Iteration based on user feedback

One of the things that really hit the spot when it comes to user research, is the way ideas and implementation is challenged. When designing things within a closed circle of people, no matter how experienced its members are, there's always the possibility of something escaping from the team's perception.

This time around, was the size of the window and its architecture. Why was it so big? Why did we think that the users would want it to be in landscape orientation? I was the one to blame really; I hadn't visualized it properly in context but thankfully, after the user interviews, it occurred to me.

I redesigned the app in a way more simplified way and presented it to the team of stakeholders and explained why it was important. They all bought in.

Question mark icon

User testing ensures that the end product aligns seamlessly with user needs and expectations. "You've got to start with the customer experience and work backward to the technology." —Steve Jobs

Final mockups (Mid-Fi)

Following the feedback I received and our overall work on the project, I changed the look and feel quite a bit. We needed the window to be smaller so it could be side by side with any given meeting app for the user to customize their voice and depending the persona, the background music too.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

OgmaCast main screens for voice optmization, background music & settings

OgmaCast during a yoga class

OgmaCast during a yoga class

OgmaCast mockup screen
OgmaCast mockup screen
OgmaCast mockup screen

OgmaCast (aka ProjectWire) dark theme, fun exploration

Prototype

Figma prototypes no doubt rule.

The way anyone can quickly create one and add all sorts of animations, effects, sticky sections and all that is stunning.

Building a prototype with HTML may be somewhat harder and more time-consuming to create, but in the end of the day, they're better in conveying a true sense of the final product. They're a lot better in helping the team see even clearer possible pitfalls and shortcomings of the design.

That's why I really like working on HTML prototypes using Bootstrap. I love validating the UX and the UI of the app in depth.

Here's the HTML prototype of OgmaCast, check it out!

A clickable HTML prototype

Sudden death

Before having a chance to really polish the UI and make the app production ready, the company was acquired by Meta and blocked further development of this app.

Would it have turned into a solid competitor to Krisp.ai? I think so! It's a shame we didn't get to find out. Either way the next steps would have been to:

  1. Polish the UI to reflect brand's identity but awesomeness too in dark and light theme
  2. Add new components and update the design system accordingly
  3. Conduct usability tests to ensure ease of use
  4. Learn, improve and take the experience to the next level by identifying new features

Thank you for reading! Glasses icon

On this page

Previous

Microsoft

Up next

About

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
Credits

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

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

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

\ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 5cdac38..857f651 100644 --- a/dist/index.html +++ b/dist/index.html @@ -21,4 +21,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

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 Meta Microsoft
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 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

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
Credits

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

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

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

\ No newline at end of file + gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

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 Meta Microsoft
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 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

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
Credits

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

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

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

\ No newline at end of file diff --git a/dist/meta.html b/dist/meta.html index edee305..07cacc8 100644 --- a/dist/meta.html +++ b/dist/meta.html @@ -21,6 +21,6 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

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.

Role

Senior UX designer (full-time)

Employer

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

Teammates

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

Year

2021 2022

Tools

Figma, Typeform, Maze & Calendly

Skills

Summary

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

Overview

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

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

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

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

Effortless editing illustration

Effortless editing

Time saver illustration

Time-saver

Streamlined selection illustration

Take selection

Adobe Premiere icon

Adobe Premiere

Final Cut icon

Final Cut

DaVinci Resolve icon

DaVinci Resolve

Problems

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

1

Time-consuming file synching

2

Tedious removal of filler words

3

Hassle of selecting the best takes

4

Multiple cameras and mics syncing

Opportunity

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

Competitive analysis

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

Descript rules!

Screenshot from Descript app

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

Screenshot from Veed.io app

YouTube Studio is OK for some minor editing...

Screenshot from YouTube Studio

User persona

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

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

1

Seamless footage combination

Effortlessly merge multiple video clips and audio tracks

2

Removal of silences and filler words

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

3

Fast clip selection

Quick and efficient journey for reviewing and selecting the best takes

User persona

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

The result is exported to XML into Premiere (and others) 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.

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

User persona

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

The result is exported to XML into Premiere (and others) for final refinement.

Research plan & (un)moderated user tests

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

To gather feedback I conducted unmoderated user tests using Maze.

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

Iteration based on user feedback

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

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

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

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

 
Question mark icon

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

Final version and conclusions

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

The seamless pace and our unhurried approach felt perfectly aligned.

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

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

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

 

Thank you for reading! Glasses icon

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

Press

Facebook owner Meta close to deal for Greek startup Accusonus

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

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

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

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

Read articleDiagonal arrow
accusonus Series A Press

On this page

Previous

Voicemod

Up next

Microsoft

Next project

Microsoft logo

Senior designer (full-time) 2019 2020 2021

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

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

View project

Process automation made easy.

Clock icon...Process running

New UI/UX yields great reviews

Rating stars logo icon

4.4 out of 5

Gartner logo icon
Credits

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

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

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

\ No newline at end of file diff --git a/dist/microsoft.html b/dist/microsoft.html index f1a5d4d..19214c6 100644 --- a/dist/microsoft.html +++ b/dist/microsoft.html @@ -21,4 +21,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

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

Summary

  • Principal designer for Power Automate Desktop (Windows 11)
  • Collaborated with stakeholders to define clear design goals
  • Redesigned UI and improved UX through iterative design and usability testing
  • Addressed dated design, user-unfriendly UI and accessibility issues
  • Prioritized accessibility with high-contrast and screen reader enhancements
  • Enhanced iconography and overall design system
  • Result: successful project launch with impressive reviews

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 inaccessible

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

User persona

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.5 out of 5

Rating stars icon 376 reviews
G2 logo

4.5 out of 5

Rating stars icon 137 ratings
Gartner logo

8.3 out of 10

Rating stars icon 200 ratings
TrustRadius logo

4.4 out of 5

Rating stars icon 162 reviews
Capterra logo

4.0 out of 5

Rating stars icon 51 reviews
PeerSpot logo

Conclusions

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 iconAt the new office

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

"During his Build keynote, Microsoft CEO Satya Nadella today confirmed that the company has acquired Softomotive, a software robotic automation platform." —TechCrunch

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

Previous

Meta

Up next

accusonus

Next project

accusonus logo

Senior UX designer (full-time) 2021 2022

With OgmaCast you can make online calls better with Spotify and voice tweaks.

Check this out to find out how I led this greenfield project and designed a new product from scratch!

View project

Add music to your online meetings.

Spotify iconUsing Spotify

Give authority to your voice

Credits

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

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

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

\ No newline at end of file + gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

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

Summary

  • Principal designer for Power Automate Desktop (Windows 11)
  • Collaborated with stakeholders to define clear design goals
  • Redesigned UI and improved UX through iterative design and usability testing
  • Addressed dated design, user-unfriendly UI and accessibility issues
  • Prioritized accessibility with high-contrast and screen reader enhancements
  • Enhanced iconography and overall design system
  • Result: successful project launch with impressive reviews

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 inaccessible

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

User persona

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.5 out of 5

Rating stars icon 376 reviews
G2 logo

4.5 out of 5

Rating stars icon 137 ratings
Gartner logo

8.3 out of 10

Rating stars icon 200 ratings
TrustRadius logo

4.4 out of 5

Rating stars icon 162 reviews
Capterra logo

4.0 out of 5

Rating stars icon 51 reviews
PeerSpot logo

Conclusions

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 iconAt the new office

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

"During his Build keynote, Microsoft CEO Satya Nadella today confirmed that the company has acquired Softomotive, a software robotic automation platform." —TechCrunch

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

Previous

Meta

Up next

accusonus

Next project

accusonus logo

Senior UX designer (full-time) 2021 2022

With OgmaCast you can make online calls better with Spotify and voice tweaks.

Check this out to find out how I led this greenfield project and designed a new product from scratch!

View project

Add music to your online meetings.

Spotify iconUsing Spotify

Give authority to your voice

Credits

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

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

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

\ No newline at end of file diff --git a/dist/profile.html b/dist/profile.html index da17451..e327a57 100644 --- a/dist/profile.html +++ b/dist/profile.html @@ -21,7 +21,7 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-00CVF9DH83');
Μenu
Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

Hey! Hi! Hello!

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

Vasilis Kolip large portrait

Design experience

Voicemod icon

Senior staff product designer (full-time) 2022 2023

Voicemod, Valencia (remote)

As a senior staff product designer @Voicemod I worked (remotely & autonomously) on elevating Voicemod's B2C voice-changing app on MacOS and Windows, slashing uninstall rates by ~80%.

I was part of an agile team consisted of another senior designer, two front-end and three back-end developers. We worked closely with our product manager and by aligning with users, we propelled ahead.

  • Significantly reduced uninstall rates
  • Led internal dev workshops
  • Conducted external user interviews
  • Provided constructive feedback and mentorship
  • Developed & maintained the design system
Meta icon

Senior UX designer (full-time) 2021 2022

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

Originally employed by accusonus leading to the company's acquisition by Meta Reality Labs, I contributed to the development of cutting-edge audio and visual technologies with practical designs based on user research.

  • Designed user-centric experiences
  • Collaborated with cross-functional agile teams, reducing development time by 20%
  • Iterative design processes to improve usability
  • Leveraged HTML/CSS/JS for prototypes
  • Participated in design critiques elevating quality
Microsoft icon

Senior designer (full-time) 2019 2020 2021

Softomotive, acquired by Microsoft, Athens (hybrid)

At Softomotive / Microsoft, I worked on Power Automate Desktop, an automation tool included in Windows 11.

I served as the principal designer leading the UX design and research process. I worked on all the parts of UI/UX design throughout a transitional period throwing out the old and getting on with the new.

Moreover, I focused on the app's iconography (I hand-crafted almost two-hundred icons) and on making the app inclusive.

The results were stunning as users top-graded the app at third party pages like Gartner, G2, TrustRadius & Capterra as one of the best of the industry.

  • Served as the principal designer of the agile team
  • Led the UX design process & improved accessibility
  • Worked on iconography
  • Got great reviews at Gartner, Capterra & TrustRadius
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, 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

Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer

Hey! Hi! Hello!

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

Vasilis Kolip large portrait

Design experience

Voicemod icon

Senior staff product designer (full-time) 2022 2023

Voicemod, Valencia (remote)

As a senior staff product designer @Voicemod I worked (remotely & autonomously) on elevating Voicemod's B2C voice-changing app on MacOS and Windows, slashing uninstall rates by ~80%.

I was part of an agile team consisted of another senior designer, two front-end and three back-end developers. We worked closely with our product manager and by aligning with users, we propelled ahead.

  • Significantly reduced uninstall rates
  • Led internal dev workshops
  • Conducted external user interviews
  • Provided constructive feedback and mentorship
  • Developed & maintained the design system
Meta icon

Senior UX designer (full-time) 2021 2022

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

Originally employed by accusonus leading to the company's acquisition by Meta Reality Labs, I contributed to the development of cutting-edge audio and visual technologies with practical designs based on user research.

  • Designed user-centric experiences
  • Collaborated with cross-functional agile teams, reducing development time by 20%
  • Iterative design processes to improve usability
  • Leveraged HTML/CSS/JS for prototypes
  • Participated in design critiques elevating quality
Microsoft icon

Senior designer (full-time) 2019 2020 2021

Softomotive, acquired by Microsoft, Athens (hybrid)

At Softomotive / Microsoft, I worked on Power Automate Desktop, an automation tool included in Windows 11.

I served as the principal designer leading the UX design and research process. I worked on all the parts of UI/UX design throughout a transitional period throwing out the old and getting on with the new.

Moreover, I focused on the app's iconography (I hand-crafted almost two-hundred icons) and on making the app inclusive.

The results were stunning as users top-graded the app at third party pages like Gartner, G2, TrustRadius & Capterra as one of the best of the industry.

  • Served as the principal designer of the agile team
  • Led the UX design process & improved accessibility
  • Worked on iconography
  • Got great reviews at Gartner, Capterra & TrustRadius
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, 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

Vasilis Kolip portrait thumbnail

Vasilis Kolip

Product designer