Oleksii BykovProduct Designer
Case studyB2B e-commerce

TOP Cosmetics 2.0

A professional cosmetics app rebuilt from scratch for the company's 20th anniversary. I was the only designer, from the first visual directions to testing builds on devices.

Product
TOP Cosmetics mobile app
Role
Product designer (contract)
Period
Jul 2025 – May 2026
Team
PM, 3 developers, writer
Platform
iOS, Android
Live
App Store ↗Google Play ↗topcosmetics.ua ↗
TL;DR
1.0 → 2.0a new app designed from scratch on a new visual language, live in the App Store and Google Play
380+screens and states across 22 flows, from sign-up to checkout
Solothe only designer on the team, covering visual style, feature logic, grooming with engineers and device testing

Context

A rebrand outgrew the app

For its 20th anniversary the company rebranded. The app had to follow, and the old one no longer covered what the business needed.

TOP Cosmetics sells professional cosmetology products. Its app is a working tool for cosmetologists, dermatologists, aesthetic medicine specialists and doctors who do thread lifting: they use it to find products, place orders and follow the company’s training events.

There were also a few user complaints about inconvenient functionality. So this was not a reskin: version 2.0 was designed and built from scratch.

BeforeHome screen of the first version of the app
AfterHome screen of TOP Cosmetics 2.0 with balance, level, promotions and categories
The home screen before and after. The new one opens with the customer's balance and level, current promotions and shortcuts, and lets them browse by category or by brand.

My role

One designer, from first directions to device testing

I worked with a PM, three developers and a writer, as the only designer on the project.

  • Visual styleA new look for the app, based on the new brand
  • RedesignEvery flow in the app, from sign-up to checkout
  • Feature logicWorked out new features and presented them to the team
  • GroomingWent through ideas with the engineers before development
  • Device testingTested the product on real devices
What I relied on
  • Talks with managers
  • Talks with cosmetologists
  • Competitor analysis
  • Usability tests

Visual direction

Three visual directions, one chosen

I did not start with screens. I started with three versions of the redesign.

I presented all three to the team. One was chosen, and we moved forward with it: it became the base for every flow in the app.

Catalog and search · my idea

A catalog you can narrow down fast

The improved catalog was my idea. Before proposing it I studied how different services handle catalogs, filtering and search, and took the best solutions as a reference.

  • Two ways inThe catalog opens by category or by brand, on the home screen and in the catalog itself
  • Flexible filtersA product list can be narrowed by category and by product line
  • Search as you typeMatching products first, then their categories with the number of matches in each
Catalog screen with Categories and Brands tabsCategories or brands
Filter by product line with checkboxesFilter by product line
Search results with products and matching categoriesSearch with category counts

The product page was reworked too. Alongside the price it shows the recommended retail price, the number of applications in a pack and the cost of one application, plus availability, payment in instalments and delivery time.

Category filter opened over a product listFilters open over the list
Product page with price, recommended retail price, number of applications and delivery timeProduct page

Loyalty · new in 2.0 · my proposal

A loyalty programme you can read at a glance

How the programme looks and what the levels are called was my proposal, which I presented to the team.

  1. Starter
  2. Professional
  3. Expert
  4. Elite

The card answers three questions without a tap: how many TopCoins I have, what my level and discount are, and how much is left to the next level.

It sits at the top of the home screen and in the profile, so the next step is always in sight.

Home screen with the loyalty card at the topStarter, on the home screen
Profile screen with the Expert level card and bonus historyExpert, in the profile

Calendar · new in 2.0

Event sign-up moved from a phone call into the app

TOP Cosmetics runs seminars and training for specialists. I researched how other products handle event calendars, proposed a solution and presented it to the team.

Before

To sign up for an event, you called a manager.

In 2.0

You open the event and send an application from the app.

The calendar has all events, a My events tab and a tab for favourites. Each card shows the date, city, speaker and status. The event page ends with one button: send an application.

Calendar screen with a list of events, their cities, speakers and statusesCalendar with statuses
Event page with description, speaker and a Send application buttonApply from the event page

Onboarding

A guided tour for a rebuilt app

To introduce the new functionality, 2.0 has an interactive onboarding: a tour of seven short steps on top of the real home screen, each pointing at one part of the app.

Step two of seven in the product tour, pointing at the profileStep 2 of 7

The checkout flow and the promotions flow were improved in the same release.

Result

Released on both platforms

TOP Cosmetics 2.0 is live in the App Store and on Google Play.

I do not have product metrics to share for this project. What I can point to is what shipped:

  • New visual languageFor a company with 20 years of history
  • CatalogBrowse by brand or category, filter by product line
  • SearchResults and matching categories while you type
  • Loyalty programmeFour levels, balance and progress on the home screen
  • Event calendarSign-up without a phone call
  • Interactive onboardingA seven-step tour of the new app

App Store ↗Google Play ↗