Role
Lead Design and Web Development
Timeline
8 Weeks
Tech Stack
React, Next.js, Design System, Component-Based Styling
Impact Metric
1. Overview & The Brief
To design and develop two cohesive digital platforms that reflect the brand's overarching sisterhood while allowing each city its own distinct identity. The goal was to translate their massive social media presence—including over 40,000 members in Dubai—into a centralized, premium digital hub for corporate partnerships, event bookings, and community engagement.
2. The Context
Balancing a highly engaged, welcoming community vibe with a premium, professional interface necessary to attract top-tier brand partnerships. The architecture had to seamlessly accommodate two distinct audiences across two domains while maintaining a unified brand standard in the dynamic, fast-paced lifestyle of the UAE.
A community-first narrative approach prioritizes organic storytelling and relatable, high-quality content. Clear, frictionless pathways direct users toward joining respective social groups, exploring events, or submitting an inquiry to become a brand partner. Soft organic shapes and pill containers reinforce the brand's welcoming community values.
3. Ideation & Architecture
Organic storytelling layouts and unified user journeys built to elevate brand equity and drive partnership conversions.
Community-First Layout
Prioritized organic storytelling and benefits of joining over aggressive conversion tactics.
Frictionless Journeys
Implemented clear, unified pathways for joining social groups, exploring events, and partner inquiries.
Premium Editorial Canvas
Used Warm Pearl tones, custom city accent gradients, and serif headings to convey a refined lifestyle look.
B2B Partnership Planner & Simulator
That Dubai Girl & That Abu Dhabi Girl
4. Establishing the Visual Language
To ensure scalability, we developed a modular design system. The color palette utilizes semantic signals and distinct status indicators to provide instant feedback for user management. The typography prioritizes readability for high information density.
Semantic Coding System
Click any color block to copy its hex value.
Scale & Alignment
Prioritized text hierarchy for dynamic viewport densities.
Component Library
Atomic components with precise semantic signals.
5. Final UI & Key Features
Dual-Platform Visual Synergy
Identical structural blueprints to build brand equity, styled with city-specific color variables and assets.
Partnership Funnel
A dedicated B2B partnership pipeline ('Be a Partner') styled seamlessly within the B2C layout to easily scale collaborations.
Intuitive Events Slider
An interactive, visually engaging showcase of past and upcoming community gatherings like yoga and networking meetups.
High-Fidelity Interface Showcase
Interactive screen previews across multiple responsive layout viewports.
Screencapture Thatdubaigirl 2026 06 08 10 37 25
Screencapture Thatabudhabigirl 2026 06 08 10 42 45
6. Project Impact & Reflection
Two beautifully synchronized platforms that elevate the brand beyond social media, establishing a sophisticated digital estate that appeals equally to everyday members and high-value corporate partners. Component-based development allowed efficient restyling and perfectly synchronized updates.
More Projects
View All Projects →detacon GmbH
Conceptualized and developed a dynamic, tech-forward digital presence and secure infrastructure gateway for a premier German IT consulting firm.
