Bareezé.com
Designing an iconic Pakistani fashion brand's online store.
Bareezé is an institution of sorts in Pakistan. Founded in 1985 and still creatively led by Seema Aziz, the brand (and the greater group) has become a hallmark of quality and operational excellence. Bareezé designs, embroiders and manufactures its own unstitched fabric collections. I designed their first properly researched website at Shopistan, where I wanted its aesthetic sense and performance to reflect the values of the brand fully. Bareezé is luxurious, but the opposite of superfluous.
I designed the site, the color schemes, the design system and the two things I’m particularly proud of:
1. The unique product page for loose fabric (see below)
2. A loose-fabric scroll preview that - in addition to the clothes shot on models in chosen silhouettes - allowed users to move the mouse to scroll through (linearly up/ down) stretched, flat pieces of the fabric. It was my attempt at replicating how salesmen display large amounts of cloth for close up viewing on tables and counters.
I also prototyped, shot and finalized all lighting and angles for product photography on models with my in-house photography and retouch studio at Shopistan.
Unstitched Fabric - Custom UX
In Pakistan, the traditional way women shopped for clothing was to pick out loose fabric of choice in the right amounts, and have tailors stitch them to personal fitting. Bareezé sells only luxury unstitched fabric. It’s pricey, and also cannot be returned once cut to length. To add to the challenge, a ‘suit’ or outfit typically consists of at least 2, if not 3 parts:
-The Kameez (shirt equivalent)
-The Shalwar or Pajama (trouser equivalent)
-The Dupatta (scarf/ shawl equivalent)
When combined with the fact that fabric can be purchased in independent amounts (and depending on personal choice, used interchangeably (what’s to say your shirt can’t be made of what the store suggested your trousers should be made of, as an example) - the permutations can be endless.
First sketch of how to create sub-products within a product/ buy page.
Shooting videos of fabric- later scripted into scrollable .mp4s on the product page
At Shopistan, we inherited a rigidly designed website from the previous agency. Not only did I want to make the aesthetics reflect those that all the fabric was designed with, I also wanted a digital buying experience to reflect how loose fabric itself was sold - by the yard/ meter.
Ali, our founder and de facto head of engineering proposed creating bundles in Magento - that would connect directly with RetailPro - the inventory and pricing software the brand used. I wanted the user to be able to add independent amounts of fabric for each article (kameez, shalwar or dupatta) and see pricing update in real time. Equally important, was the ability to display real time quantity (i.e. meterage) available, to the user.
Assigning 𝑥, 𝑦 and z to the individual values we were able to easily display total price before adding the amount to cart on the product buy page.
A rather flippant modification/ sketch to the original .psd I laid out the page in.
Final Product Page:
Landing Page Animation: Sketch ⟶ Actual
The only way to be fair to the engineering team - for whatever’s in my head - is to sketch animations and structures as best as I can - no matter how poorly. :)
Left: a short loop of an embroidery in action which played on hover.
Right: An inverted zoomed shot of the final embroidery.
Launch video.
For launch, I wanted to have a short video where Mrs. Seema Aziz, the founder of Bareeze, was talking through her story with the brand. Since we had little time, I shot, edited and perfected it with my friend Saad H. Khan's help in less than 24 hours.