mobile app
Full list of screens from the specification for iOS, Android version of key screens, loading, error and empty list states, and UI Kit. Brand style preserved: pink #F86C9E, graphite text, fonts from the site — Noto Serif Display in headings and Inter in the interface.
Key solution: the shop mechanic “second model in the cart — wholesale price for both” is visible at every step. The shopper sees the wholesale price on the product page, in favourites, in the cart and at checkout, so the average basket grows without separate promotions.
iOS
All 16 screens from the specification plus onboarding and order confirmation. The order follows the shopper’s journey from first launch to repeat purchase.
First launch
women's clothing
Version 1.0Launch
Logo on a gently pink brand background, no ad banners. During the splash screen the app fetches the catalogue and cart, so the home page opens already filled.
Two items — wholesale price for both
Add any two models to the cart and each price drops automatically. No discount codes or minimum amounts.
NextThree slides on first launch
New collection, wholesale price from two pieces, Nova Poshta delivery. Each slide can be skipped, so the intro doesn’t bother users who came for a specific item.
Login or sign‑up
We’ll send a code via SMS. If you’re here for the first time, the account will be created automatically.
By continuing, you accept the public offer agreement. Cart and favourites from guest mode will transfer to your account.
Phone number login
One screen instead of two: number and code from SMS. Password not needed, and registration happens automatically. You can shop without logging in; we suggest creating an account only when you place an order.
Product selection
Fall 2026
Jackets, trench coats and warm knits
View collection
New arrivals
Jackets
Suits
Dresses
SaleNew arrivals
All
New
Start
Exhibition like in an app, not a page in a window: search bar always at hand, collections in circles like stories, seasonal banner with real store photos. The “2+” badge explains the wholesale price in one line.
New arrivalsNew
Jackets and coatsTrench coatsSuitsDressesShirts and t‑shirtsCategories with photos
Each category is shown by a real item from it, so visual browsing is easier than a text menu. The “For her / For him” toggle repeats the two store collections.
Jackets and coats
NewFilters always visible
Selected filters appear as chips above the grid and can be removed with a single tap. Grid in two columns with large images, and wholesale price is shown on each card.
Jackets and coats
Filters
ClearBottom panel
Filters open above the list, so the shopper doesn't lose space in the catalogue. Sizes come from the store grid, and the “My size is available” toggle hides models that aren't in her size.
Results while typing
Suggestions, recent queries and products with image and price appear instantly, without navigating to a separate page. You can also search by item number, like in a store.
Purchase
Perfect biker jacket with lining
Product card
Full‑screen photo, because clothing sells the image. Colour is chosen via thumbnails of real photos, size — with buttons from the store grid. The cart button is pinned at the bottom, under the thumb.
Favourites hint at a benefit
The app automatically calculates how much two favourite items will cost together. The “Add to cart” button is on every card so you don’t have to reopen the product.
Cart
1 product
Complete the look
price already wholesaleCart
The “1 of 2” scale shows how much is missing to reach wholesale price, and the set below lets you do it with one tap. Prices in the set are already wholesale — you can see exactly how much the buyer saves.
Placing the order
One screen for payment
Contact details, delivery and payment on one screen, and when you reorder everything is already filled in. A separate line shows how much you saved with the wholesale price, and delivery is clearly marked “payable on delivery”, just like in a store.
Delivery and payment
Methods that already work
Only the services and payments available in the store: Nova Poshta, Ukrposhta with the “from 2 pcs” condition, international delivery, LiqPay and PrivatBank terminals. The branch can be searched by number or address.
Thank you! Order received
№ 48217The tracking number will arrive by SMS and here as soon as we hand over the package to Nova Poshta.
2 230 ₴What’s next — told right away
Order number, amount, delivery method and a promise of a tracking number. The next step is one – tracking the order, so there will be fewer anxious “where is my package” questions.
Account
Account with no clutter
Orders, favourites and addresses lifted to the top as tiles. “My size” is saved once and then applied to filters and product pages.
Status and tracking on one card
The scale shows where the package is, and the waybill number is visible without extra steps. A delivered order can be reordered with one tap or rated.
Notifications
Read allFall new arrivals: shortened coats and trench coats now in the catalogue.10:05Only useful notifications
Order status, size appearing in favourites and new arrivals. No mass mailings, and each notification type can be turned off individually in your profile.
Delivery and payment
NPNova Poshta
- 2–5 business days, to a convenient branch
- From 80 ₴ according to the rate, cash on delivery
- Tracking number arrives via SMS
UPUkrposhta
- 5–10 business days, even to remote villages
- From 45 ₴, added to the order total
Minimum order — 2 units of the product
Payment
- Visa / Mastercard via LiqPay
- Cash at PrivatBank terminals
Store texts easy to read
Delivery, returns, offer, contact. The store text is split into short cards, and the most important, like “Ukrposhta from 2 units”, is highlighted so it doesn’t get lost in the copy.
Android
Key screens in Material 3 alongside iOS. Brand, grid and copy are shared, while navigation, buttons and gestures are native to each platform.
Fall 2026
View collectionNew arrivals
AllNewStart
The same showcase, but following Android guidelines: Material 3 search‑pill field, filter chips instead of story circles, cards with 28‑radius and bottom navigation with pill indicator. Brand fonts and colours are the same, so the app is recognizable on both platforms.
Perfect biker jacket with lining
Product card
On Android, “Back” is an arrow, not a chevron, actions are hidden in the “⋮” menu, and size is chosen with a segmented Material 3 button with a checkmark. Pill‑shaped buttons are 56 px high and “Favourites” sits next to the primary action, as is standard on Android.
Cart
Complete the look
price already wholesaleCart
The wholesale‑price slider became a linear Material 3 indicator, the quantity counter a tonal pill, and the “Order” button a full‑width pill above navigation. Logic and copy are the same as on iOS, so the developer gets one spec for two platforms.
States
What’s often missed in mockups, but later the developer has to invent. Each state has its own text and action, not just a grey placeholder.
Dresses
Skeleton instead of a spinner
The grid appears in the shape of future cards, so the screen doesn’t jump when images load. Animation turns off if “Reduce motion” is enabled in the system.
Dresses
No connection
The catalogue didn’t load. Cart and favourites are saved on the device, nothing is lost.
Try againAn error that reassures
We explain what happened and that the purchase is fine, with a single action — try again. If the error affects only one block, the rest of the screen keeps working.
Cart
The cart is currently empty
Any two items — and the price for both becomes wholesale.
See what's newViewed
Empty, but there’s somewhere to go
An empty cart reminds you of the wholesale price and lets you continue from what the shopper has already viewed. The same approach is used for empty favourites, search and orders.
UI Kit
Tokens on two levels: brand base colours and roles (text, background, accent, wholesale price). In Figma these are Variables with iOS / Android modes, so components switch between platforms without redrawing.
Colours
#F86C9Eaccent, badges
#FFEAF2wholesale price, hints
#B9356Atext on pink
#282828text, buttons
#6E6E6Esecondary text
#F7F7F7fields, backgrounds
Typography
Noto Serif DisplayFall 2026
Noto Serif DisplayComplete the styling
Inter SemiboldPerfect leather jacket lining
Inter RegularSuede on diving, lining. Delivery 2–5 days.
Inter Bold, tabular (equal-width) figures1 400 ₴ 1 300 ₴
Buttons
Selection and quantity
Product card
Fields and selection
Statuses, chips, notifications
Android · Material 3
Bottom navigation
iOS: tab bar with labels, “Back” gesture. Android: Material 3 Navigation bar with pill indicator, system “Back” button.
States
What’s shown here
All 16 screens from the spec for iOS, onboarding and order confirmation, three key Android screens, states and core design system. Images and prices — from the current catalogue koshka.com.ua.
What will be in the final
Full set of Android screens, UI Kit in Figma with components and Variables for iOS / Android modes, clickable prototype of main scenarios and mockups for small and large screens, ready to hand off to a developer.
Path to order
From card to payment, four taps: size, “Add to cart”, “Order”, “Pay”. On repeat orders, contact details and branch are already filled in.
Concept for discussion. Product photos and logo belong to Koshka.com.ua and are taken from the store site solely for this mockup.