ABOUT

The bank's marketplace partnership allows users to earn bonuses from purchases made with their bank card and spend them on discounted products and services from partners. Users can also convert bonuses to cash for regular use.

This initiative helps customers access significant discounts while enabling the bank and its partners to promote their products and identify in-demand categories. Additionally, the service includes gamification features that let users donate bonuses to charitable organizations supporting people, animals, and environmental causes. Every purchase creates an impact!

Product Designer (80%) & Design Manager (20%).

My main task was to increase product sales on the marketplace through research and improvement of user journeys, develop a responsive version of the website, and enhance communication between designers and contractors' developers. Additionally, I took on tasks related to synchronizing the web and mobile versions, developing a local library, guidelines, a glossary, and overall visual patterns.

MY ROLE

Partnership: AIS & EPAM (designers & developers)
Platforms: Web & iOS / Android (web-view)

01. UX research & identification of the main user pain points
02. Development of user journeys and features
03. Product synchronization across platforms
04. Development of a responsive version of the website
05. Development of guidelines and components
06. Collaboration with product owners, developers, designers, and copywriters
07. Updating illustrations and icon pack
08. Structuring the Figma files
09. Product improvements
10. Development of a universal guideline for creating advertising banners

RESULTS

€15k

0,5m

+27%

Orders increased on average per month

New active users

Funding for charitable foundations increased

After changing the purchasing scenarios and conducting user research, sales of products and services increased.

All planned features and scenarios were released as agreed. Some sections were updated from a UX perspective, resulting in a 7% increase of active users.

20%

Resources were reduced

A component library and documentation were developed, which helped decrease the time spent on design approvals and development.

Newly developed concepts and layouts supported internal charitable projects focused on reducing water and food consumption and assisting the elderly.

CONCEPT

The problem & The GOALS

PART ONE

Users prefer to transfer cashback to their debit cards instead of buying goods from partners at a discount

— to increase the users' purchasing power and increase the order volume by at least 20%

Product and documentation analysis, conducting UX research, and prototyping.

01

02

03

Data analysis, finding the solution and rebuilding journeys, redesigning, iterative UX-research

User journey revision in both front-end and back-end development, front-review, data collection and analysis

stages:

Teamwork First:
Enhancing Collaboration

There was insufficient communication between the teams, and the features were developed in isolation from the overall product. This is why we simultaneously started working on the process with the design team. Here's how the design team's work was transformed:

The base group of components includes components and their varieties which are often used in developing a banking application interface and are arranged in alphabetical order. Components are divided into atoms and molecules, this gives more variability to each component and does not overload Design System. Component state switching works entirely by Variants. The organization of components makes it easier to work with components for both the library designer and the interface designer. Thus, the organization of Design System has been developed according to the following important aspects:

Methodology

STEP 1: RESEARCH

I started with research and I wanted to identify how users interact with the product, navigate the site, and handle scenarios they encountered for the first time. The research was conducted in collaboration with the UX team. The goal was to determine how user-friendly and understandable the product is.

Understand the general perception of UX and UI, convenience and speed of going through scenarios. Identify the strengths and weaknesses of the UI/UX of the product, determine the necessary improvements in UI \ UX.

Goals

Non-users and bank clients who actively use the affiliate program at least once a month. Men and women between the ages of 25 and 55 with a $1,000 salary. The gender and age distributions are equal.

Target audience

UI/UX of the product do not affect subjective speed and convenience of a script execution and using of the product. Navigation is intuitively clear and has been positively evaluated by users.

Main hypotheses

Face-to-face moderated testing, with an interview lasting around 70 minutes. Testing clickable Figma prototypes of mobile version of the site on mobile devices.

Methods

Check your bonus balance, buy and order a Skillbox certificate for home delivery.

Scenarios

Conducted

10 interviews

Here you can see part of the screens from the linear scenario where the user was supposed to find the desired product and how they actually navigated through the scenario. We observed how they got confused with the navigation and struggled to answer some questions about the labeling of elements or sections.

When we were gathering prototypes, the designers were already familiar with the product, and by this stage, we had accumulated questions about the scenarios. However, we decided to fully trust our users and wait for the research results. I should note that we cannot blindly trust research findings; it's important to combine them with the company's and marketing goals, as well as the fundamental rules of UX/UI.

The real user journey

Research results

The respondents could not find the desired category in the catalog due to complexity of navigation. The product list seemed too long that it caused them to go to the main page search. They couldn't figure out how the search worked because an error regularly appeared indicating that nothing was found.

Over 40% of respondents experienced difficulty with the UI elements during their journey.

Catalog & Search

The respondents believed that it was necessary to show the price of the goods in a client's local currency. On top of that, there was no estimated delivery time.

Over 40% of respondents experienced difficulty with the UI elements during their journey.

Product cards

The respondents found it strange that shipping options were listed on the shopping cart screen. They thought that the order would be placed without choosing a delivery method. The respondents could not understand why choosing a delivery option at checkout comes before providing an address. Reentering the delivery address also confused the respondents.

Over 60% of respondents encountered an issue that significantly impacted the execution of the journey.

Shopping cart & Checkout

The buyer’s journey

STEP 2: planning

The user must have control over the interface. It is important that they are able to identify which section of the website they are currently in and that the website does not perform any unexpected actions on their behalf. We addressed the issue of user control by implementing a clear and consistent navigation system that is both easy to understand and consistent across all platforms.

I aimed to create a positive user experience with partner purchases by optimizing the product selection and checkout process. To achieve this, I accelerated the product selection process by enhancing its intuitiveness, allowing users to quickly find the desired products through the use of search and filters. While the enhanced step-by-step format resulted in a slightly longer checkout process, we launched data autocompletion to streamline the checkout process and further improve the user experience.

Home page and navigation

STEP 3: redesign

One of the main problems was a confusing navigation. I built the script logic in a user-friendly sequence, the best examples that show it - Home page, menu and catalog.

01. Only the essential elements were remained in the header. The size of the banner was reduced.

01. The website navigation has been completely revamped and synchronized with both the web version and the mobile app.

02. It was decided to display the bonus balance directly in the menu this reduces the number of clicks needed to view products.

03. Multiple entry points to sections confirm the transparency of the navigation.

01. The name of the section the user is in is always displayed on the screen.

01. The checkout process has been divided into steps. Brief explanations have been added for each step/action that could potentially confuse the user.

Checkout process

The checkout process has been divided into familiar steps for the user. An auto-fill feature for user information has been added, and the details about delivery and combined payment have been clearly explained for the user.

03.The visual style has been changed: the icons and illustrations have become more three-dimensional and appealing, while the increased rounding of the cards has made the design visually softer.

02. The design of the product group block has been redesigned; the new approach allows us to showcase more offers. Thanks to the slider and updated illustrations, we encourage users to browse through them.

02. Promotions and offers have been moved to a separate subsection.

03. The first level of the catalog displays only the main sections arranged in alphabetical order. Icons help users navigate more quickly.

The search bar with suggestions and filters are always available in the catalog.

04. A convenient calculator is provided for combined payments, along with an explanation of the costs.

02. Users can add addresses that are automatically saved.

03. Available delivery options and prices are shown in various currencies chosen by the user.

a line journey

the resultS

Over the course of four months, precise planning and synergy with the team led to the following results:

Impact on the Business

0,5m

+27%

Orders increased on average per month

New active users

After changing the purchasing scenarios and conducting user research, sales of products and services increased.

All planned features and scenarios were released as agreed. Some sections were updated from a UX perspective, resulting in a 7% increase of active users.

Conclusions:

— Marketing and Product Design must work in synergy;

— By dividing the product into streams based on platforms and considering collaboration with different vendor companies, we need to synchronize our efforts.

The problem & The GOALS

PART two

Frequent changes in designers, collaboration with multiple vendors, and a high volume of tasks led to the creation of massive files, duplication of scenarios, and a lack of a clear structure

stages:

01

Analyzing files, gathering layouts and components, developing libraries and guidelines, and creating a unified product concept.

02

Collaboration with the team, establishing processes for task acquisition, processing, and transferring designs to the development team, and improving the review process for the finished product.

— Create a comfortable environment for designing layouts;

— develop guidelines for recurring tasks, and create libraries and styles

Key solution elements

Catalog structure

Arrange sections in alphabetical order, and add icons to update the catalog structure.

Review the position and appearance of catalog and general site searches.

Checkout

Rebuild the checkout process and include an autocomplete feature to make it simpler and quicker.

Product cards

Add descriptions when showing payment and delivery options.

To show prices in different available currencies.

Information architecture

A site map was developed that gave a complete picture of how the site works. The parts of the mobile application and the website are no longer inconsistent, and most importantly, it makes it possible to visualize potential features and sections of the product.

Design Mockups

Understanding the process allowed us to determine how to better structure the file and pages in the Figma file for all team members. This task was accomplished by understanding how design tasks are assigned, how mockups are handed over to development, and how mobile app and website developers work with the mockups.

To save developers time searching for the necessary sections, we organized all mockups into a single group and clearly marked the ready pages in the page titles.

In the mockups themselves, scenarios were divided by releases, which allowed us to prohibit designers and analysts from making changes to the mockups once they had been sent to development.

NEW Communication with the team

Scheme for Approving and Transferring Mockups to Development.

Design Handoff

A guideline for grids and a component library for all platforms were developed based on fundamental rules. This allowed the design team to focus more on scenario development. Additionally, it enabled us to spend less time transferring designs to development since all rules were already documented and strictly followed in the mockups.

the resultS

Over the course of four months, precise planning and synergy with the team led to the following results:

Impact on the Business

€15k

+20%

Resources were reduced

Funding for charitable foundations increased

A component library and documentation were developed, which helped decrease the time spent on design approvals and development.

Newly developed concepts and layouts supported internal charitable projects focused on reducing water and food consumption and assisting the elderly.

Conclusions:

— Interaction between Marketing and Product Design is essential;

— Even when the product is divided across different platforms and we collaborate with various vendors, our harmonious synchronization is a key factor for success.

Mobile application HOME GYM

A sports community where the person individuality comes above all and motivation and communication are main values

Mobile Design System for a Bank

Design system as a visual communication with the client, uniting all mobile products of the bank into a single concept

The critical view of the homepage simple functionality and identifying the real reason for the customer to buy

Website for a Production Center

VIEW OTHER PROJECTS

A few more projects in different design branches: branding, graphic design, typography etc.

Quick preview of my other projects