Stas Kisly

Intro

Born of an Interface

Hi! I will lead you throw the UX process, based on my personal 15 years experience in UX and UI Field. Critical thinking and communication skills helps me zoom in a problem in parallel with empathy and getting insights. I believe that UX . process is a team work that leads to great product creation as outcome. Let me show you process on Avantra where I worked as Senior Product Designer from 2021 till 2023.


Creating a value

Pic 0. Design process

Initiating the Idea

Domain research

Starting with domain research, I begin by looking for competitors and studying their approaches, the market ecosystem, social networks, analytical data, statistics by topics, and notes from professional research magazines and books. I then proceed to investigate user behavior in a specific field and gather valuable experiences.


Pic 1.  Architecture and concept

Pic 1. Architecture and concept

Process

Prototyping

Now it's time to transform ideas and considerations into tangible concepts on paper. This involves creating wireframes as a fast tool, sketches, mind maps, empathy maps, and user stories. We can't definitively say what's better; what we truly need is to integrate as much as possible. By bringing all these elements together, we can derive the best value.


Pic 2.  Login popup window wireframe

Pic 2. Login popup window wireframe


Nobody knows what will happen in the future, but a UX designer must strive to understand.


Pic 3. Personas in Avantra

Pic 3. Personas in Avantra


Let's delve deeper into wireframing, progressing from low fidelity to high fidelity prototypes. We transition from static designs to interactive ones using tools like InVision, Figma, or Miro boards. Additionally, it's crucial to document the entire process using Confluence, aiming to construct a system that can be expanded and supported by the next generation of professionals. Returning to the process: we now need more than one variant. Let's aim to generate at least three of them and then compare these variants. We'll decide on a testing method perhaps an A/B test or a 5 second test to determine which option is superior

Pic 4. User Roles in Avantra

Pic 4. User Roles in Avantra

Process

UI Mockups

Now, with Chromatic, Jira, and GitHub in place, it's time for an incredible cross team effort. Let's focus on development before moving on to testing.


Pic 5. Login popup UI design Avantra

Pic 5. Login popup UI design Avantra

Process

Components

Decision made: we've chosen path A. Working with elements, components, molecules, and atoms, or building backwards. Utilizing Figma and Miro, we bring the UI design and prototype to life.


Pic 6. Accent action component

Pic 6. Accent action component

Process

Implementation

We now have some free time to expand our molecules into a design system. Let's focus on the product structure card sorting seems like the best approach, don't you agree? We'll define the core values either for or against our key audience. Perhaps personas can shed light on this. Should we consider alternatives for both unqualified and overqualified users? Yes, offering help and wizards will guide our users through the process, ensuring a smooth experience!


Pic 7. Structure Card sorting workshop

Pic 7. Structure Card sorting workshop



Help is a great idea, and it's important to measure its effectiveness. Let's ensure we don't overlook this in future steps. Our mockups are ready and have been implemented. Now, we need to ensure their consistency and compliance with accessibility standards. What about contrast, colors, and sizes for icons or text? I say, both! But, how can we minimize churn?


Implementation

Simplification and minimization where do we draw the line? We need predictability, placeholders, and defined states. We're getting close to the MVP!

Process

Iterating

Deadlines are approaching fast, and with testing and the first release, it's both crazy and exciting! We can't waste any time improvements will be based on user feedback, analytics, inquiries, and support tickets.
Let's leverage advanced technologies like Mixpanel, Optimizely, and VWO. Let's strive for perfection!


Pic 8. Onboarding Dashboard Page

Pic 8. Landscape view. Checks popup.

My experience

Dominos

Avantra

VS Lift

UVL

CreditUp

AODance

JRS

Egar

Talentway

Dinai

Vivigle

Bubnovsky

GOgame

Smatos

Simmetria

Edicasoft

SpeakUp