E-commerce
Balaan
An online luxury store with big photos and fast browsing.
- Client
- Balaan Co., Ltd.
- Categories
- Cloths, Shoe, Bag, Accessory, Jewelry
- Deliverables
- Desktop pages, mobile layouts, UI states
- System
- Colour styles, 17 text styles, components
Overview
A luxury store that lets products speak.
Balaan is an online luxury shop for bags, shoes, clothing, accessories and jewelry, from Gucci, Burberry, Balenciaga and Alexander McQueen, plus Preloved.
I designed the home page, listing, product detail, search, cart and language and currency screens for desktop and mobile.
The challenge
A huge catalogue, lots of detail.
- 01One list holds 431,781 products, so filters had to stay simple.
- 02Each small card holds brand, status, price and discount.
- 03Shoppers had to add items without losing their place.
The approach
A quiet canvas that lets products lead.
- 01A serif wordmark with navy and white keeps focus on the photos.
- 02Pill badges like Most popular, 21% off and Sold Out sit in one spot.
- 03Quick view, quick add and a slide-in cart work from the list.
Structure
One store, six destinations.
Taken from the page names in the design file.
Home
- Product searchSearch page
- Product listingFiltersSort byDesigner filterQuick viewQuick add
- Product detailSize chartSold out state
- CartEmpty cartItems added
- PrelovedHomeListing with gradeProduct detail
- Language and currencyPopup, desktopPopup, mobile
Key screen
The home page, first screen.
A sale bar, a two level menu and one campaign banner.
- 1Sale bar
A navy strip with a summer sale timer.
- 2Audience menu
Women, Men, Golf and Preloved.
- 3Quick tools
Search, cart, wishlist and account.
- 4Category row
Cloths, Shoe, Bag, Accessory, Jewelry and Designer.
- 5One campaign, one action
Beat The Heat With The Coolest Style, plus Shop now.
- 6Banner carousel
Dots show more campaigns.
Page flow
A home page built for browsing.
Products, offers and brand moments take turns.
- 1Banner and marquee
The banner, then a moving line: Online luxury boutique, Elegant Exclusives.
- 2Featured Designers
Chanel, Gucci, Balenciaga, Burberry, Bottega Veneta, Saint Laurent.
- 3Categories
New In, Bags and Shoe photo cards.
- 4Top 10 Products
Tabs for Bags, Cloths, Shoe, Accessory, Jewelry.
- 5Limited Time Offer
A deal with a live countdown.
- 6Collections and offers
Women's winter collection, Spotlight from Louis Vuitton, Get Up To 50% Off.
- 7Top 10 Luxuries
The same grid, sorted by designer tabs.
- 8Reviews and history
Star-rated reviews, then Recently Viewed.
- 9Service and footer
Easy refunds, free shipping and help.
Product listing
Finding one pair in thousands.
Filters on the left, products on the right.
- 1Breadcrumb
Shoe / Sneakers shows where you are.
- 2Result count
Total: 431,781 sits under the collection title.
- 3Hide filters and Sort by
Two pill buttons control the whole grid.
- 4Filter sidebar
Category, Designers, Color, Availability, Price.
- 5Status badges
Most popular, 21% off and Sold Out.
- 6Quick view and quick add
Two round buttons by the price.
Quick actions
Shopping without leaving the page.
Quick view opens a pop-up. The cart slides in from the right.
Mobile
The same store in one hand.
Home, list and product pages at 375 px.
Visual language
Navy, white and a touch of indigo.
Navy is for text and buttons. Indigo, rose and green mark badges.
- Gray 900
#111827 - Primary 700
#4338CA - Gray 500
#6B7280 - Rose
#BE123C - Green
#00E841 - Gray 100
#F3F4F6 - White
#FFFFFF
Typography
Typeface
Aa
Poppins
One family for headlines, product names, prices and buttons.
- Regular
- Medium
- SemiBold
Type scale
48 / 10
Poppins
Seventeen text styles, from Display 5XL at 48 to Text XSS at 10.
- 48
- 40
- 30
- 24
- 20
- 18
- 16
- 14
- 12
- 10
Deliverables
What I delivered.
- Home, desktop and mobile
- Product listing
- Quick view and quick add
- Mobile filters and sort
- Product detail
- Size chart
- Sold out states
- Cart
- Search page
- Language and currency
- Preloved pages
- Colour and text styles
Want this kind of clarity for your online store?
Book a free 30 minute call. You leave with 3 written fixes, even if we don’t work together.
Nafees ZulfiqarUsually replies within an hour
5.0 from 33 Upwork reviewsTop Rated
