UX/UI DESIGNER

PORTFOLIO

Who am I and what do I do

OPTIMIZED AND USEFUL FRAMES

I design meaningful digital products and experiences with a strong focus on user needs and business goals. I work at the intersection of design, technology, and strategy, helping businesses turn ideas into clear, functional, and scalable digital solutions.

What sets my work apart is a thoughtful, user-centered approach, attention to detail, and a strong sense of ownership throughout the entire product lifecycle.

My work covers the full design process — from discovery and concept development to UX/UI design and implementation. I collaborate closely with clients and development teams to create products that are not only visually refined, but also intuitive, accessible, and built for long-term impact.

Our Team

MY MAIN PROJECTS

This is the space to introduce visitors to the business or brand. Briefly explain who's behind it, what it does and what makes it unique. Share its core values and what this site has to offer.

NEURO

CORAGI

AQBERRY

Our Vision

TRANSFORMING BRANDS, DRIVING SUCCESS

Our Journey

A LEGACY OF
EXCELLENCE

This is the space to introduce visitors to the business or brand. Briefly explain who's behind it, what it does and what makes it unique. Share its core values and what this site has to offer.

Content management application

For marketing companies

a video showing the key
operation of the application
(prototype made in Figma)

creating a post

Functionalities:

Content editor field:
Enables direct content creation and editing within the application.
Includes basic text formatting tools (bold, italic, alignment, hyperlink insertion, emoji, etc.), allowing users to create content ready for social media publication.
“Generate” / “Save” button:
- Default state: greyed out (disabled) – becomes active only after the user inputs content.
- Purpose: prevents proceeding to the next step without fulfilling minimum input requirements.
Tooltips / hints:
- When hovering over an icon, a tooltip appears with a short description of its function (e.g., “Generate media,” “Post preview”).
- Implemented to enhance intuitiveness and align with client UX requirements.
Right sidebar panel:
- Contains a set of icons representing selected social media platforms (e.g., Facebook, Instagram, LinkedIn, X).
- Clicking an icon opens a post preview in the corresponding format, allowing users to review the visual layout before publishing.

Non-Functional Requirements:

The application must be intuitive and responsive (RWD), optimized for both desktop and tablet screen resolutions.
The UI response time for user interactions must not exceed 200 ms.
The design must comply with the client’s UX/UI design system, including color palette, typography, and spacing standards.

General Description:

A full-screen layout designed to optimize access to the application’s core functionalities. The interface follows a minimalist aesthetic, featuring a dominant white background to ensure high readability and visual clarity.

Color Scheme and Style:

Main background: #FFFFFF (white) – a neutral, clean canvas for content.
Interactive elements: dark green (#003D31) – used for buttons, icons, and text input fields.
Decorative / accent elements: mint (#C0D8D7) – applied to graphical details to emphasize the interface and maintain strong contrast with the dark green elements.
Contrast rule: all interactive elements must comply with a minimum WCAG 2.1 (AA) contrast ratio.

Error Display:

The error message system is designed in accordance with standard usability and accessibility principles (UX/UI, WCAG).

Errors are displayed as clear red messages accompanied by an exclamation mark icon, which explicitly indicates the occurrence of an error.

The error message remains visible until the user corrects the error, ensuring full awareness and preventing the message from being overlooked.

This approach guarantees immediate problem visibility, enables quick identification and correction, and maintains visual consistency with other system notification elements.

Text Editing Field Interaction:

To ensure maximum intuitiveness and a clean interface, the text editor implements contextual functionality display.

When the user selects a portion of text, three contextual actions become visible and can be applied directly to the selected fragment.

If the cursor is placed anywhere in the text field without selecting text, the same three functions are available for the entire content.

One of the available options is “Prompt”, which allows full personalization of the tool’s behavior — the user can specify a custom instruction (prompt) describing what the system should do with the text.

These contextual options are displayed only when needed (upon text selection or field activation) and disappear automatically when the user clicks outside the editing area.

This behavior optimizes workspace clarity, reduces visual clutter, and ensures a clean and focused editing experience.

Post Scheduling:

The post scheduling process is implemented using a modal window that opens within the current view of the application.

This approach allows the user to remain in the same interface context, enabling a quick return to the previous view if they decide to cancel or change their mind.

When the scheduling feature is activated, a list of available profiles is displayed, allowing the user to select which accounts to post to.

Clicking on the date field opens an interactive calendar, providing a clear and accurate way to select a publication date, reducing the likelihood of input errors.

Change in the Notifications Section Presentation:

The notifications section has been designed as a simple and clear list displaying the most important informationrelevant to the user.

To improve readability and distinguish individual entries, each row is visually separated using alternating background colors.

Clicking the text area on the right allows users to quickly access to the specific action.

This approach ensures clarity, ease of interaction, and alignment with intuitive UX/UI design principles.

Media Generation View:

The media generation view has been designed to be simple and clear, enabling users to intuitively create graphical materials.

By utilizing the same layout and interface design as the content generation view, the system maintains visual and functional consistency across the application.

This approach allows users familiar with the content generation process to seamlessly transition to media generation, enhancing usability and overall UX efficiency.

User Permissions System:

In line with the client’s requirements, the tool was designed to be suitable for use by large marketing organizations, where multiple users with different roles and responsibilities operate within the same environment.

To address this, a user permission system was implemented, allowing granular control over access to specific functionalities.

As a result, not every user has access to all operations. For example:

only selected users have the right to approve posts,
others may have access to edit or create posts,
while some users may have view-only permissions.

Permissions are assigned and managed within the administrative settings section, accessible exclusively to users with the Administrator role.

This approach ensures security, controlled publishing workflows, and efficient team management in enterprise environments.

Calendar View (Post and Campaign Planning):

Since post scheduling and marketing campaign planning are key aspects of the tool, a calendar view has been implemented as a central feature for managing communication workflows.

The calendar provides a visual representation of scheduled and published posts over time, helping users maintain consistent posting frequency and identify gaps in the campaign timeline.

A color-coded distinction is used to clearly differentiate between:

scheduled posts (blue),
published posts (yellow).

This solution allows users to instantly understand the publication status, coordinate marketing campaigns more effectively, and plan team activities efficiently across the timeline.

Posts View:

The posts view is designed as a clear and structured table layout, enabling efficient management of a large number of posts in an organized and intuitive way.

At the top of the interface, filter tabs are provided to allow users to categorize and navigate posts based on specific criteria.

Users can:

select multiple posts to perform bulk actions such as delete, approve, or reject,
apply filters by social media platform (e.g., display only Facebook or Instagram posts),
narrow results by date range,
filter posts by status (draft, published, scheduled),
filter by author or connected account.

Additionally, a search bar (magnifying glass icon) allows users to quickly find a specific post by entering a keyword, campaign name, or part of the post content.

This setup ensures high usability, supports collaborative content management, and enables efficient browsing, filtering, and editing of posts within a single, consistent view.

Pricing View:

The pricing section is presented as three panels, allowing users to quickly compare available options.

The central panel is highlighted as the most advantageous option, using brighter colors and stronger visual emphasis to draw user attention.
The central panel includes a call-to-action button (“Buy 300 tokens”) that directly initiates the purchase or subscription process.

Pricing is divided into two models:

Tokens – one-time credit packages,
Individual plan – recurring plan.

Users can switch between these options via a tab located at the top of the section, enabling dynamic adjustment of the offer display according to the preferred payment model.

This approach ensures intuitive comparison of plans, easy navigation, and direct access to purchase, enhancing conversion and user experience.

DEMO

VERSION

Demo Version:

A demo version of the application is available, covering essential features and services.

The demo allows users to experience the application firsthand and explore key functionalities before committing to a purchase or subscription.

To start using the demo, the user must enter a profile name, which enables personalization of the test environment and simulates real usage scenarios.

The demo provides an intuitive and interactive experience, allowing users to test core functionalities and evaluate the usability and effectiveness of the UX before full deployment.

Profile Management in the Demo Version:

The demo version allows users to add multiple profiles, enabling them to experience managing several accountswithin a single environment.

Users can also set a default profile, which simplifies app usage and provides quick access to the most frequently used account. The profile management view is designed to focus user attention on the core functionalities, selecting and adding profiles, without unnecessary distractions.

This approach ensures simple interaction, intuitive handling, and a quick start for users exploring the application.

Social Media Account Configuration:

To start using the application, users must configure their social media accounts, connecting them via the appropriate API integration. This step is mandatory for enabling full functionality of the application, including scheduling, posting, and post analytics. The configuration view is designed as four tiles, corresponding to the social media platforms available in the application. The elements are centered and isolated within the panel, ensuring that users focus on the specific task without distraction. This design provides an intuitive configuration workflow, clear user guidance, and visual consistency, ensuring that users understand exactly what steps to take to start using the application.

Main Functionality Selection:

The next step presents the user with two possible paths:

Content Generation
Media Generation

Clicking on the selected option takes the user directly to the corresponding view, providing quick access to the core functionality of the application.

This design allows users to immediately test the tool, minimizes the number of steps required to start working, and enhances usability and overall user comfort.

The view is designed so that users can immediately see the available options, making the selection process fast, clear, and free from unnecessary distractions.

Demo Version Survey:

To investigate how users learned about the application, gather feedback, and identify potential improvements, an interactive survey has been implemented in the A version.

The survey allows users to share their experience, report any issues, suggest new features, and evaluate the intuitiveness and usability of the interface.

Data collected through the survey enables:

UX/UI improvements,
detection of technical issues,
alignment of the application with user needs,
identification of effective marketing and communication channels.

Including the survey in the demo version provides direct interaction with users in a test environment, supporting the iterative enhancement of the product.

FAQ and Contact Form in the Demo Version:

The demo version of the application includes an FAQ section and a contact form to minimize issues during testing and provide users with guidance and support.

The FAQ presents frequently asked questions and answers, allowing users to quickly resolve issues and understand the application’s functionality without contacting support.
The contact form enables users to directly submit feedback, questions, or issues, enhancing user support and confidence in using the application.

This approach ensures that users are not left without guidance, while the development team can respond quickly to feedback and improve the overall user experience.

MOBILE
VERSION

NEURO

Calm Tech E-commerce App

(Mobile & Desktop)

Problem Statement

Modern e-commerce platforms are often overwhelming : visually noisy, filled with aggressive CTAs, complex navigation, and unnecessary decision points.

Users who seek calm, focus, or better sleep are forced to interact with interfaces that do the opposite.

How might I design an e-commerce experience that supports calm, clarity, and focus, from the first interaction to checkout?

Business & User Goals

Business:

Build a recognizable calm-tech brand;
Increase trust and product understanding;
Reduce cart abandonment;
Create a portfolio-quality UX case;

User:

Quickly understand what the brand offers;
Feel calm and confident while browsing;
Make intentional purchase decisions;
Complete checkout without friction;

Target Audience Analysis

Primary Audience

Age: 23–40

Location: urban areas

Lifestyle: digital, design-aware, remote or hybrid work

Values: minimalism, wellness, intentional living

Key User Needs & Pain Points

Needs:

Visual calm
High contrast & readability
Clear product purpose
Low cognitive load
Trustworthy checkout

Pain points:

Overstimulating UIs
Too many product choices
Unclear benefits
Long checkout processes

Brand Identity Justification

NEURO’s brand identity is built around calm technology, products that support the user without demanding attention.

Brand Principles

Quiet confidence
Minimal visual language
Purpose-driven design
Respect for user attention

Key Functionalities

Core Features:

Needs-based navigation (Focus / Sleep / Relax)
Product pages with clear benefit hierarchy
Minimal cart with progress indicator
Fast checkout (3–4 steps max)
Multiple payment options

UX Enhancements:

Calm onboarding
Microcopy that reduces anxiety
Automatic dark mode (evening hours)
Accessible contrast & spacing
Responsive layouts

Design Decisions & Rationale

High contrast colors to support accessibility
Large typography to reduce eye strain
Whitespace to create visual calm
Limited choices to avoid decision fatigue

Usability Testing

Goals:

Validate navigation clarity and information architecture
Identify friction points in the shopping and checkout flow
Ensure the interface supports calm, low-cognitive-load interactions

Methods:

Moderated usability testing (remote, 1:1 sessions)
Task-based scenarios, e.g.:
Find a product to improve focus
Add an item to the cart
Complete checkout
Think-aloud protocol to understand user decision-making

Key Metrics:

Task completion rate
Time on task
Error rate
User confidence (self-reported)

Iteration:

Insights from testing were used to:
simplify navigation labels
reduce the number of steps in checkout
adjust CTA hierarchy and microcopy

A/B Testing

What was tested:

Hero headline variations (emotional vs functional)
Primary CTA copy (“Explore products” vs “Find your calm”)
Product card layouts (image-first vs text-first)
Success Metrics:
Click-through rate (CTR)
Conversion rate
Scroll depth

Results informed decisions around content hierarchy and messaging clarity.

Analytics & Data Tracking

Tools:

Google Analytics 4
Google Tag Manager
Acquisition & Behavior:
Traffic sources
Bounce rate
Scroll depth
Time on page

E-commerce Performance:

Add-to-cart rate
Cart abandonment rate
Checkout completion rate
Conversion funnel drop-offs

UX Signals:

Rage clicks
Dead clicks
Navigation loops

Funnel Analysis

A dedicated funnel was created to track user behavior from:

Home → Category → Product → Cart → Checkout → Confirmation

This allowed identification of:

friction points
unnecessary steps
content misunderstandings

Optimizations focused on reducing cognitive load at each step.

Accessibility Testing

Standards:

WCAG 2.2 A

Checks Included:

Color contrast validation
Keyboard navigation
Screen reader compatibility
Focus states and hit areas

Accessibility improvements were treated as part of the core UX, not an afterthought.

Performance Monitoring

Tools:

Google Lighthouse
PageSpeed Insights

Focus Areas:

First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
Interaction to Next Paint (INP)

Performance optimizations supported a smoother, more calming experience — especially on mobile.

Testing

Hydroponics company specializing in corporate greenery management.

I developed the complete brand identity,

including the logo, business cards, marketing materials, website design, and iconography.

Website made in Wix Studio.

Website and Visual Identity – Minimalist Design:

The client requested a highly minimalist website, with an aesthetic evoking both architecture and greenery. The site was designed to avoid distracting content and focus solely on key information.

Visual Elements and Style:

The website uses two main colors: black and white, emphasizing minimalism and elegance.
Colored elements are limited to photographs of greenery or architectural structures, reinforcing associations with nature and design.
Arrows, sharp corners, and architectural photography automatically evoke buildings and architectural design.

Logo:

Designed in a minimalist style, consistent with the overall website.
Features a simple typeface with distinctive details in the letters “a” and “q”, making the brand recognizable.
Together with the website, the logo creates a Scandinavian minimalist aesthetic.

Business Card:

Maintains maximum minimalism and a modernist design.
Use of lowercase letters emphasizes simplicity and elegance.
The back of the card includes engraved letters forming the distinctive company logo, adding a three-dimensional, modern touch.

The overall project combines Scandinavian minimalism, architectural aesthetics, and natural accents, creating a cohesive and elegant brand image in both digital and physical spaces.

Company providing sustainable solutions for businesses, offering a full team of specialists dedicated to addressing and solving corporate challenges.

I led the full brand identity redesign including logo creation, business collateral (business cards & promotional materials), website development, and iconography design.

Website made in Wix Studio.

Website – Technology and Modernism:

The client required the website to convey a sense of technology and modernism, while being dynamic and visually striking. The design incorporates animations and bold colors, giving the site an energetic and contemporary character.

Color Scheme and Visual Elements:

Main colors include neon yellow, black, and muted gray, creating a cohesive and dynamic color trio.
Repeating wavy cubes provide a technical feel without distracting from the main content.
The website features multiple Call to Action elements, including:
- contact forms,
- newsletter subscriptions,
- initial pop-up encouraging subscription, serving as a primary CTA.

Logo:

The logo reflects an analytical company, incorporating a graph element, signaling a focus on data and analytics.

Overall, the design combines technological aesthetics, modernist design, and dynamic interactivity, creating an intuitive and engaging interface that simultaneously promotes key user actions through prominent CTAs and animations.

Business Card – Modern Design:

The business card is designed in a modern style, consistent with the website’s look and color scheme.

Visual and Functional Elements:

Includes a QR code, providing quick access to the website or other digital materials.
Displays key contact information clearly and concisely.
The colors and style of the business card are aligned with the main visual identity of the website, ensuring brand consistency and a modern appearance.

The business card combines minimalist aesthetics, functionality, and technological modernity, creating a professional impression while maintaining cohesion with the company’s visual identity.