diff --git a/dist/Vasilis-Kolip-Sr-Product-Designer.pdf b/dist/Vasilis-Kolip-Sr-Product-Designer.pdf index beabfd5..aca2d48 100644 Binary files a/dist/Vasilis-Kolip-Sr-Product-Designer.pdf and b/dist/Vasilis-Kolip-Sr-Product-Designer.pdf differ diff --git a/dist/accusonus.html b/dist/accusonus.html index 5850937..81caebc 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
Offcanvas illustration
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, Typeform, Maze & Calendly

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

Next project

Microsoft logo

Senior designer (full-time) 2019 2020 2021

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

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

View project

Process automation made easy.

Clock icon...Process running

New UI/UX yields great reviews

Rating stars logo icon

4.4 out of 5

Gartner logo icon
Credits

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

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

\ No newline at end of file + gtag('config', 'G-00CVF9DH83');
Μenu
Offcanvas illustration
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, Typeform, Maze & Calendly

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

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.

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 3355fe8..cc7529f 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
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

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

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.

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

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

Next project

accusonus logo

Senior UX designer (full-time) 2021 2022

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

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.

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 f48b729..cb32c52 100644 --- a/dist/profile.html +++ b/dist/profile.html @@ -58,4 +58,4 @@ c-2.1-2-3.2-4.7-3.2-8.2c0-3.9,1.7-6.9,4.8-9.1c3.2-2.1,7.6-3.2,13.3-3.2c4.4,0,8.2,0.7,11.4,2.1c3.3,1.3,5.9,3.4,7.8,6.2 l-6.7,5.6c-1.3-2.1-3-3.6-5.2-4.7c-2.2-1.1-4.9-1.7-7.9-1.7c-2.5,0-4.4,0.4-5.8,1.1c-1.4,0.8-2.1,1.8-2.1,3.2c0,1.3,0.4,2.3,1.4,3 s2.7,1.2,5.1,1.6l8.2,1.2c4.4,0.7,7.7,2,9.9,3.8c2.1,1.9,3.1,4.6,3.1,8.2c0,4.2-1.7,7.4-5,9.7 - C517.2,129.3,512.4,130.5,506.3,130.6z"/>
2013 2014 2018 2019 2021 2023 2023
2013
Quote mark

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

Organizations that prioritize humanity cultivate deeper emotional connections with customers.

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

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!

Credits

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

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

\ No newline at end of file + C517.2,129.3,512.4,130.5,506.3,130.6z"/>
2013 2014 2018 2019 2021 2023 2023
2013
Quote mark

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

Organizations that prioritize humanity cultivate deeper emotional connections with customers.

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 (or Sketch), Photoshop, Illustrator, Premiere, After Effects, Lookback, Dovetail, Maze, Calendly 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

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!

Credits

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

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

\ No newline at end of file diff --git a/src/Vasilis-Kolip-Sr-Product-Designer.pdf b/src/Vasilis-Kolip-Sr-Product-Designer.pdf index beabfd5..aca2d48 100644 Binary files a/src/Vasilis-Kolip-Sr-Product-Designer.pdf and b/src/Vasilis-Kolip-Sr-Product-Designer.pdf differ diff --git a/src/accusonus.html b/src/accusonus.html index a3532f4..2bfe1d6 100644 --- a/src/accusonus.html +++ b/src/accusonus.html @@ -1202,54 +1202,49 @@

Sudden death

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

-
- - - +
diff --git a/src/microsoft.html b/src/microsoft.html index a51b3a9..da69839 100644 --- a/src/microsoft.html +++ b/src/microsoft.html @@ -1345,40 +1345,38 @@

Next project

- Voicemod logo -

Senior staff product designer (full-time) 2022 2023 + accusonus logo +

Senior UX designer (full-time) 2021 2022

-

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.

+

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

- View project + View project

- - - - - -
-

Uninstall rate reduced by 80%

-
+ + + + -
-

Streamer

- Streamer mic element -
+
+

Add music to your online meetings.

+
-
- Streamer icons -
+
+

Spotify iconUsing Spotify

+
-
+
+

Give authority to your voice

+
+ +
diff --git a/src/profile.html b/src/profile.html index f0f5924..eae0f57 100644 --- a/src/profile.html +++ b/src/profile.html @@ -832,7 +832,7 @@

-

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

+

Figma (or Sketch), Photoshop, Illustrator, Premiere, After Effects, Lookback, Dovetail, Maze, Calendly and anything else that might be needed.