Skip to content
All work
The Zeli app icon: a black tile with the word zeli in Bodoni and a rose-gold diamond for the dot of the i.

Zeli

Zeli is one app to shop fashion in Myanmar. Local brands, authentic imports and SHEIN sit in one feed and one cart, and you pay with a QR code from any banking app.

Role
Product designer and builder
Product
Fashion shopping app for Myanmar
Platform
Android, iOS (Flutter)
Status
In development
  • Zeli Home screen
    HomeBrowse

    Sale banner, departments, occasions and categories above an endless feed.

  • Zeli Product screen
    ProductDecide

    Price first, then fit, delivery, payment and the shop's bundle deal.

  • Zeli Cart screen
    CartBuy more

    Grouped by shop, with the next bundle step and the best voucher picked.

  • Zeli MMQR screen
    MMQRPay

    One QR for every banking app. The page checks for payment by itself.

  • Zeli Points screen
    PointsCome back

    A daily check-in streak that turns into money off the next order.

The idea

I shaped the product, the brand, the design system and the screens, then built the customer app in Flutter with Claude Code from a clickable prototype. The look is dense on purpose: shoppers here know SHEIN, Temu and Shopee, so a busy, fast feed feels familiar, not crowded.

3
Kinds of seller, one cart
36
Routes, from splash to refund
138
Automated tests in the app and design system
0
Receipt uploads. Payment is a QR code

The problem

Shopping fashion in Myanmar means juggling sellers, data and payment.
  • Three kinds of seller

    Local brands ship in days and take cash. SHEIN takes weeks. Authentic imports sit in between. Shoppers had to use a different place for each.

  • Prepaid, limited data

    Many shoppers are on prepaid data. Screens have to be light, show skeletons while loading and survive going offline.

  • Sizes that miss

    A wrong size from abroad is a slow, costly return. The app has to help people pick right the first time.

Business goals

  • Bigger orders

    Shop bundles: buy 3 from one shop, save 15%. Pushed on the product page, in the size sheet and in the cart.

  • Fewer returns

    A fit profile, a size guide that highlights your size, and QC photos before an import ships.

  • Easy sign-up

    Telegram or Google only. Guests browse and fill a cart, and sign in at checkout.

  • Cheap, reliable payment

    MMQR from any banking app, with an optional 50% deposit and cash on delivery for the rest.

Three sellers, one cart

Every product card carries a source tag, and the cart splits into shipments by seller, so delivery time and rules are never a surprise.

SellerTagHow it ships
  • Local brandsGreen Local tag1 to 3 days, cash on delivery possible, shop bundles apply
  • AuthenticWhite Authentic tagOriginal brand items, shipped together from Thailand
  • SHEINBlack SHEIN tagThrough the team's border warehouse, longer, with QC photos before shipping

Buy more per order

The bundle deal follows you. A red strip on the product page, a live hint in the size sheet (add one more to unlock 15% off), and a row per shop in the cart with progress and an Add button.

  • Zeli product page with price, rating, source tag and a red bundle strip

    Bundle strip on the product

  • Size sheet with size M selected, quantity 2 and a hint to add one more

    Live hint in the size sheet

  • Cart grouped by shop with a bundle progress row and a shop voucher

    Per-shop progress in the cart

Fewer returns

Fit is designed in, not bolted on. The size guide opens over the product and highlights the shopper's size. Imported orders get QC photos before they ship, and a problem is reported by tapping the photo.

  • Size guide sheet with body measurements and a prompt to set up a fit profile

    Size guide over the product

  • Report a problem screen with QC photos and refund or replacement choices

    Report from the QC photos

  • My orders list with QC checked shipments and next actions

    Orders by shipment

Paying with a QR code

No card forms and no receipt screenshots. Checkout offers a 50% deposit with cash on delivery, or paying in full. The QR is valid for 15 minutes and the page checks for the payment by itself.

  • Order summary with two shipments, savings and deposit or pay in full choice

    Deposit or pay in full

  • Pay with MMQR screen showing a QR code, a 15 minute timer and how to pay

    One QR, any banking app

Reasons to come back

Light game mechanics, in Zeli's own colours. A lucky spin once a day on Home, a new member gift on sign-up, a check-in streak for points, and vouchers to collect.

Every reward amount is a placeholder until the business sets the real numbers.

  • Lucky spin wheel with rewards from Ks 500 to Ks 10,000

    Lucky spin

  • Sign-up screen with a Ks 15,000 new member gift and Telegram or Google buttons

    Sign-up gift

  • Welcome gift page with four coupons and starter picks

    Welcome gift

  • Collect vouchers page with sale, flash and minimum spend vouchers

    Vouchers

The design system

Every screen is built from one Flutter package, zeli_ds. Features never use a raw colour or font size: they use a semantic role, and the role comes from a palette. One change in the package restyles the whole app.

  1. 01Palette

    Raw values. Zinc neutrals only, plus a few commerce colours. Never used in features.

  2. 02Semantic

    Roles like primary, page background, hairline, sale, success and gem.

  3. 03Components

    Z widgets: product card, price, tags, voucher ticket, bundle banner, sheets, toasts.

  4. 04Rules

    A checklist in the repo, so code from Claude Code stays on the system.

  • Ink#18181B
  • Band#F4F4F5
  • Hairline#E4E4E7
  • Sale#DC2626
  • Local#15803D
  • Gem#C9A58A
Type
Geist with tabular figures. Sizes 10 to 28 only. Bodoni Moda for the logo
Colour
Colour only means something: red is sale or error, green is local or success, black is the main action
Shape
Radius 2 for tags, 4 for images and chips, 8 for cards and buttons, 12 for sheets
Density
Compact controls, 20 to 48 high, with a touch area of at least 40 everywhere
Layout
White sections on an 8px grey band. Product grid in two columns with a 4px gutter

Rules

  • No raw hex or font size in a feature
  • Red only for sale, price or error
  • No filled black chips
  • No decorative gradients or shadows
  • One product card, used on every screen

Built with Claude Code

The prototype was the spec. Claude Code built the app milestone by milestone against it, and every milestone ended with the same checks: analyzer clean, tests green, no raw values in features, each screen compared with the prototype at 390 by 844.

  1. 01Shell and browse

    Splash, sign-up, navigation, Home, Category, Search, Results, Product and Shop.

  2. 02Buy

    Cart grouped by shop, checkout, MMQR payment, and one cart calculator with its own tests.

  3. 03After-sales

    Orders, tracking, QC report, refunds, reviews, fit profile, addresses, chat and vouchers.

  4. 04Polish

    Labels for screen readers, touch areas, reduce motion, a 360 px overflow pass and Burmese.

20
Days between the first and latest commit
88
Commits
18
Test files
975
Strings ready for translation

Made for Myanmar

  • Burmese

    Noto Sans Myanmar falls back after Geist, and Burmese text gets taller lines. The first strings are hand-written and waiting for a native review.

  • Kyat and local rules

    Prices in Ks, free delivery by township, cash on delivery for local shops, and a map pin so the rider knows where to go.

  • Light on data

    Photos decode at display size, feeds load in slices, and skeletons stand in while a page loads.

  • Search in two languages

    Search takes Burmese words, and search by photo finds items with similar colours.

What's next

  • Connect the real backend for catalog, orders and payment
  • Replace placeholder brands, prices and reward amounts with real ones
  • A native review of the Burmese strings
  • Real visual search in place of the colour match
  • Store release on Android and iOS

Tools

Claude CodeFlutterDartRiverpodgo_router
Previous projectNext project