Quadcode

Together with a team of 7 designers, I create interfaces for several brands within a single holding company. I work as a Senior Product Designer and oversee the work on creating a new platform.

Role

Product Designer

Year

Scope

Links

2024 – Now

Product Design, UX/UI, Prototype, Design System, Research, App, Mentorship

Quadcode.com

Issue

Solution

The old version accumulated a lot of legacy that hindered product development. Many features were created, some of which did not show statistically significant results, but disabling them was risky. After transitioning from the sketch, some layouts were lost during the move to Figma. Some functionality was drawn on screenshots. The iOS and Android applications were outdated and could not support updates.

It was decided to transition to a unified design for iOS/Android/Web/Adaptive. This was expected to reduce the number of hours spent on development and delivery of features to production. Additionally, thanks to the redesign, we updated the visual style of our platform and refreshed our UX/UI solutions. As a product designer, I am responsible for delivering new features, conducting design reviews of development, and maintaining part of the design system (widgets, pages, icon pack, chart). We work closely with the Head of Design and Design Technologist.

Platform redesign

Issue

Solution

The current withdrawal system was unclear to users. Document verification might be required for withdrawals, which we did not initially inform users about, and they could only see this upon entering the section. On part of the platform, all work with withdrawals remained on the company's website, which meant there was no information in the personal account (Web, Desktop App) about what was currently happening with the withdrawal.

The entire withdrawal process was proposed to be divided into 5 stages that the back office initially works with. All stages were shown in "Staging". Now the user could see that the withdrawal was not just in the status of In Progress, but was going through specific stages. I added descriptions and average processing times for each stage. Additionally, the descriptions of the methods were improved. We added transparent fees, card linking for instant withdrawals, and a unified verification flow. I also reached a compromise with the Back End Engineers on minor adjustments in the API and design. Because of this, we were able to release the feature a month earlier than the planned release.

Withdrawals

Issue

Solution

Since we needed to pass different screen sizes to development, it took a significant amount of time to reformat layouts for 4 resolutions (Mobile Vertical, Mobile Horizontal, Tablet Vertical, Desktop Horizontal).

Based on the concepts, I identified 6 types of layouts that can be used for our platform. Using Variable and Slot, I created a Master Component that allows for the adaptation of layouts for different resolutions in seconds.

Multy-layout

Issue

Solution

We wanted to get as close as possible to the realities of development and support the logic of component operation in production on the Figma side. Since the pages on Desktop/Mobile share a common base, we needed to support all pages in two variants. As a result, the number of layouts increased, making it increasingly difficult to maintain them.

I suggested developing widgets. They are something between components (input/button/checkbox) and pages. Widgets consist of components developed by a design technologist and help update multiple layouts located in different files with changes made in one place. Widgets are a separate library.

Widgets

Issue

Solution

Sometimes, a user flow can include 10-50-100 screens. Maintaining each of these screens individually is challenging, and the likelihood of making a mistake increases.

To address this, we introduced another level to the library — Pages. This is a page template (mobile & desktop) from which I create the flow. If the content on the page is important, we add a page with the content inside. If the content is not important, we use a context page.

Pages & Contexts

Issue

Solution – Branches

Some of our processes were not documented or were functioning incorrectly. I proposed my ideas for improvement, which were subsequently implemented across the entire design team.

Each major section received its own file containing the actual flow in production. New features or improvements are added through a branch. While a feature is being worked on by a designer or developer, it remains in the branch. After publication in production, components and widgets are moved to the library. The branch is merged with the main file. This allows us to have 1-to-1 layouts in Figma with production and provides convenience for each member of the design team.

Solution – Handoff

Since each designer had their own habits and rules for working with flows, I proposed a unified approach for everyone working in Figma. Consistent spacing between layouts, arrows, dividing scenarios into parts, working with annotations, and task descriptions.

Process improvement