Abrang Gallery

    Some shops you enter are not just commercial spaces; they are feelings. “Abrang” was exactly like that. From the moment you stepped in, the scent of cotton and silk fabrics mingled with the aroma of freshly brewed tea. The walls were made of kahgel – not the touristy kind, but the kind that seem to have stood there for years, breathing in memories. Handwoven carpets with authentic Persian patterns spread underfoot, and light streamed softly through wooden windows, falling on colorful fabrics. Everything here was familiar; everything Iranian, everything authentic. But the big question was: how could this feeling – this warmth, this intimacy, this rootedness – be taken into the digital world? The owner of Abrang, knowing that traditional clothing is not just fabric but a part of identity and culture, decided to find the answer in loyalty to roots, warm and intimate design, and intelligent interaction with the customer. The result was an online store that not only digitized the warm, Iranian atmosphere of the shop, but also offered a complete and different experience through an advanced loyalty club, a smart discount system, and a professional admin panel. Here, they don't just sell clothes; they offer Iranian authenticity and culture.

    Visit Project
    Technology Stack
    React
    TypeScript
    TailwindCSS
    Django
    SQL Server

    Our main goal was for the user to feel the warmth, authenticity, and rootedness of the brand from the very first interaction with the website – without visual exaggeration, without unnecessary clutter, and without the common clichés of online stores. We wanted Abrang to be a cultural experience before it was a store.

    Design & User Experience Approach

    The design of “Abrang” was built from the ground up on three core principles, each playing a decisive role in shaping the final identity of the project:

    Visual Serenity with Iranian Identity and Earthy Colors

    Contrary to the common approach in clothing stores that often use cold and modern colors, Abrang employs a palette of earthy tones, olive greens, warm browns, and touches of turquoise. Graphic elements are inspired by Isfahan tilework and traditional Iranian motifs, evoking the feeling of an old Iranian home. Purposeful negative space and principled spacing between elements allow the user's eye to browse products without fatigue or confusion.

    Preserving a Consistent Brand Identity Across All Pages

    The website's theme is an exact reflection of the physical Abrang store – from fonts inspired by traditional calligraphy and soft curves to decorative elements and warm lighting. This visual harmony ensures that a customer who has visited the physical store immediately recognizes the digital space, and conversely, an online user forms a clear mental image of the brand's physical atmosphere.

    Personalizing the Experience for Every User

    Upon logging into their account, each customer is welcomed by a dedicated dashboard that presents their relevant information coherently – from purchase history and order status to active discount codes, membership level, and registered addresses. This approach conveys a sense of belonging and importance to the user, encouraging deeper engagement with the brand.

    From the moment of entering the homepage to adding a product to the cart and finalizing the order, everything is designed with utmost simplicity and clarity. Categorized menus, intelligent filters based on material, color, size, and model, and the display of product variants (with the ability to choose fabric, color, and size) guide the user to their goal without complexity. Call-to-Action (CTA) buttons are placed at strategic points, and the checkout process is reduced to the minimum possible steps.

    Advanced Loyalty Club and Smart User Profile

    One of the project's central and distinguishing features was the design of a comprehensive system for managing loyal customers that goes far beyond a simple user account:

    Referral and Reward System: Every user who invites several friends or acquaintances to join Abrang receives a special discount code. This mechanism not only increases the incentive to share but also greatly contributes to the organic growth of the customer community. The referral process is carried out through unique links and automatic tracking of invitation statuses.

    Bronze, Silver, and Gold Membership Tiers: The Abrang loyalty club is designed based on intelligent scoring. Every user who enters Abrang, from their very first purchase, enters a path; a path that begins at Bronze, reaches Silver, and for the most loyal, ends at Gold. Each tier is a different experience. The Bronze user receives limited discounts and access to special offers. The Silver user, in addition to higher discounts, benefits from free shipping and early access to new collections. And the Gold user finds their way to the heart of Abrang; with the highest discount percentage, unlimited free shipping, monthly exclusive codes, and invitations to events held only for a limited number. Points are calculated based on purchase amount, site activity, and participation in the Abrang community, and users can see their distance to the next tier in their profile.

    Multi-Dimensional User Profile: In the user panel, each member can register and manage multiple different addresses simultaneously. Also, the precise status of each order – from payment confirmation to packaging, shipping, and delivery – is updated in real time. All active discount codes, their expiration dates, membership level, and current points are available in a separate section with a clear display.

    Project Challenges

    The main challenge of this project was striking a balance between the apparent simplicity of the user interface and the logical and technical complexity behind the scenes. While the user experience had to remain light, calm, and minimal, the system needed to manage orders, points, loyalty plans, and a scalable structure for the future precisely and reliably.

    Technical Implementation

    Frontend

    On the frontend, React was used together with TypeScript to create a secure, readable, and maintainable structure and to provide a fast and smooth experience for the user. For UI design, Tailwind CSS enabled the implementation of a fully custom, coherent, and minimal design.

    Backend

    On the backend, Django was chosen as the system's logical core to ensure secure data management, implementation of stable APIs, and readiness for future developments. Finally, SQL Server was used for data storage and management, with a focus on stability and data integrity.

    Final Outcome

    The output of this project is an online store that not only sells products but builds brand identity, creates user trust before purchase, and provides a strong infrastructure for long-term growth and scalability.

    Abrang is an example of the belief that authenticity is the result of precise decisions, attention to detail, and a thoughtful experience — not clutter. Abrang is a bridge between past and present; between the hands of a weaver who lovingly weaves fabric in a small workshop, and a young person who orders that same fabric from their phone.