User-Centric Design for SaaS, FinTech, and EdTech

Pro

Andriy Boychuk

Starting at

/hr

About this service

Summary

I provide user-focused design solutions that simplify complex processes, ensuring a seamless and intuitive experience. My approach combines clean, modern aesthetics with functionality, tailored to meet the unique needs of each project. What sets me apart is my attention to detail and ability to balance creativity with practicality, delivering designs that truly resonate with users.

Process

Initial Consultation

Start with a call to understand the project goals, target audience, and client expectations. This step ensures alignment and sets a strong foundation for the design process.

Research

Following the Initial Consultation, I conduct thorough research to gain insights and inspiration for the project. This includes exploring competitors to see how they address similar problems or implement features discussed during our consultation. If specific features are not found among competitors, I broaden the research to include other services that offer comparable solutions.

The primary goal of this step is to identify effective approaches to the challenges and features in the project, presenting these to the client for feedback. Together, we decide whether to adopt existing methods or develop something unique. Research is considered complete only when both the client and I have a shared understanding of how all features should function and appear.

As a deliverable, I provide a Figma file containing:

Screens from competitors or other services that address the project's challenges.

A detailed table summarizing the insights and information gathered from all researched sources.

User Flows & Information Architecture

At this stage, I organize all the features identified for the project into logical groups, ensuring a clear and intuitive structure. Using a block or schema view, I map out how each feature connects and fits into the overall system. This process helps visualize the user journey, identify potential bottlenecks, and establish a foundation for seamless navigation and interaction. The result is a well-organized framework that guides the subsequent steps in the design process.

Wireframes

Building on the User Flows and Information Architecture, I create wireframes to cover all the elements and interactions outlined in the user flow. Wireframes are designed to focus on functionality and user journeys, rather than visual design, allowing us to prioritize usability and logic.

I ensure that all states—such as error messages, loading screens, and empty states—are included to provide a comprehensive view of the user experience. This step helps establish a strong, intuitive flow where users can navigate effortlessly without encountering issues.

Clickable Prototype

This stage is one of the most crucial in the design process. A clickable prototype allows us to test the product’s usability and logic with actual users or existing users if it’s a redesign. Their feedback ensures that the flow and features meet user expectations before moving forward.

Equally important, the prototype provides developers with a clear understanding of the design’s logic and interactions. From experience, even with detailed designs and notes, developers may overlook certain states or reinvent logic, causing delays. To avoid this, I ensure developers review the fully clickable prototype during a call, walking them through the flow to align our understanding. This proactive step saves time, prevents miscommunication, and ensures a smoother development process.

Style Approval

This step involves two key phases:

Moodboard Selection: I create a mood board showcasing various design styles that align with the project's goals. The client selects one or a combination of styles they prefer.

Style Application: Based on the chosen style, I design a few sample screens to bring the vision to life. The client reviews these screens and provides feedback or suggests improvements.

Once the style is finalized and approved, we move forward to the next step.

UI Design

In the UI Design stage, I begin by creating a design system based on the results of the Style Approval step, where the initial screens and visual direction were finalized with the client. This design system includes components like colors, typography, buttons, and other reusable elements that ensure consistency across the project.

Once the design system is complete, I start applying it to the wireframes, adding colors, typography, and other stylistic details to bring the design to life. In some cases, this involves primarily styling the existing layout. However, if the client prefers a different layout than what was established in the wireframes, I reorganize the content and structure to align with the approved style, ensuring a cohesive and polished final design.

Adaptation (Responsive Design)

Once the UI Design stage is complete or a specific logical block is approved, I proceed to adapt the design for different screen sizes. This includes creating layouts for mobile screens (375px or 430px) and full HD screens (1920px), ensuring the design works seamlessly across devices.

For the mobile version, I also prepare a clickable prototype. This is crucial to demonstrate how the design will function on smaller screens, ensuring developers clearly understand the intended interactions and flow. Additionally, the prototype allows the client and users to test the mobile experience, verifying that all solutions work effectively and meet their needs.

Handoff Files

Deliver organized Figma files with properly named layers and a design system (if applicable) to developers for smooth implementation.

This process is flexible and can be tailored to meet specific client needs, ensuring a personalized approach for every project.

What's included

Figma Design Files:
• Complete UI/UX design for all screens. • Organized layers with clear and consistent naming. • Responsive designs (if applicable) for different screen sizes.
Style Guide:
• Defined typography (fonts, sizes, weights). • Color palette with primary, secondary, and accent colors. • Button styles, input fields, and other UI components. • Iconography and imagery guidelines. (Provided for smaller to mid-sized projects.)
Design System (For Larger Projects):
• Comprehensive library of reusable components. • Scalable and consistent design framework for future updates. • Documentation for developers to easily implement designs.

Skills and tools

UX Engineer

UX Designer

UI Designer