PEARL

PEARL

PEARL

PEARL

Pearl is a curated modest fashion directory designed to simplify the discovery of stylish modest brands across local and online spaces. Created in response to the fragmented experience of searching across Google, Instagram, TikTok, and word-of-mouth recommendations, the platform brings discovery into one intentional experience. Designed in Figma and developed through an AI-assisted coding workflow using Claude Code.

Client

Pearl

Industry

Fashion

Service

Web Development

UI / UX Design

Digital Design

Duration

9 Weeks

OverView

Pearl is a curated digital directory designed to help Muslim women discover modest fashion brands for special occasions and cultural or religious events. The platform centralizes online and local brands into one searchable experience, making it easier to find stylish modest clothing without relying on endless TikTok searches, Instagram saves, or word-of-mouth recommendations.

The problem

Finding modest and special-occasion fashion can be a fragmented and time-consuming experience, especially for Muslim women. Many existing platforms do not prioritize modest options, making it difficult to find clothing that aligns with both personal style and cultural values.

Users often need to search across multiple websites, boutiques, and social platforms to find suitable options, leading to decision fatigue and an inefficient discovery process. There is a lack of a centralized, curated space that brings together modest fashion in a way that is accessible, organized, and tailored to real-life use cases such as events and special occasions.and engaged throughout the process.

COMPETITIVE analysis

The current modest fashion discovery experience is highly fragmented across platforms like TikTok, Instagram,

Google, and Pinterest. While these platforms support inspiration and trend discovery, they are not designed to

function as organized, searchable directories for modest fashion brands. As a result, users often spend significant

time navigating scattered recommendations, saved content, and inconsistent search results. Pearl was designed to

centralize this experience into one curated and accessible platform.

research

CONCEPT FEEDBACK TESTING

Research was conducted through informal conversations with friends, family members, and women within the modest fashion community. These conversations explored shopping behaviors, discovery methods, frustrations, and the role social media currently plays in finding brands.

Pearl was heavily inspired by my own personal experiences searching for modest fashion for graduations, holidays, special occasions, and some everyday wear.

Finding clothing that felt modern, stylish, and aligned with my preferences often required hours of searching across TikTok, Instagram, Google, Pinterest and recommendations.

Throughout this process, I frequently encountered fragmented information, inconsistent search results, and difficulty relocating brands I had previously discovered. These experiences revealed a larger opportunity for a centralized platform dedicated to modest fashion discovery and accessibility.

Throughout the design process, Pearl was continuously refined through gallery walkthroughs, instructor critiques, peer reviews, and iterative discussions. Early feedback revealed that the platform would function more effectively as a responsive website rather than a standalone mobile app due to the potential scale and growth of the directory.

Additional feedback informed decisions around branding, typography, hierarchy, accessibility, readability, and navigation. These iterations helped simplify the user experience, reduce visual clutter, and create a cleaner, more approachable interface centered around discovery and usability.

USER INTERVIEWS

key insights

• Discovery is fragmented across multiple platforms

• Trust and curation matter

• Local modest fashion discovery feels hidden

• Simplicity improves usability

• Community contribution can support long-term growth






Feature Concepts

The feature concepts phase explored ways to make discovering modest fashion brands feel more intentional, accessible, and community-driven. Early concepts focused on curated browsing, searchable brand directories, local discovery, and community recommendations to reduce the fragmented experience of searching across multiple platforms. These ideas evolved through ongoing feedback, iteration, and usability considerations throughout the design process.

Curated Store Directory

Browse modest fashion brands through organized detailed store cards.

Multi-Platform Access

Direct links included to brands:

• Instagram

• TikTok

• Websites

Local & Online Discovery

Support for:

• New York City and Northern New Jersey Stores

• Online U.S. Brands

• International Brands

Embedded Store Navigation

Google Maps integration for local store discovery.

Community Contributions

Users can recommend brands/stores for review and verification.

Scalable Growth Model

Pearl launches with up to 50 curated stores and expands gradually through ongoing manual updates and

community submissions.

Mid-fidelity wireframes

Pearl initially began as a mobile app concept focused on making modest fashion discovery feel simple, curated, and

accessible. The mid-fidelity screens explored the core user flow, including browsing brands, viewing store details,

saving favorites, and accessing important information like location, website, and social media links. These screens

helped define the foundation of the product experience before the concept evolved into a responsive website.

Mid-fidelity wireframes - VERSION 1 (EDITORIAL)

This initial version focused heavily on storytelling, visual inspiration, and editorial exploration. Designed almost like

a digital fashion magazine, it presented curated Eid outfit ideas through themed collections such as minimal, festive,

and traditional styles. Users could browse styled looks and explore full outfit breakdowns, creating an experience

centered not just around shopping, but around inspiration, discovery, and aesthetic guidance.

Mid-fidelity wireframes - VERSION 2 (Directory / Map View)

This second version shifted toward a more functional and search-driven experience. Instead of focusing primarily on

inspiration, the platform evolved into a centralized directory for discovering modest fashion stores both online and in

physical locations across places like NYC. Users could browse and filter stores based on location, price range, style,

and availability, creating a faster and more efficient path from searching to finding.

Mid-fidelity wireframes - VERSION 3 (COMMUNITY)

This version explored a more community-driven experience centered around shared recommendations and real user

experiences. Users could contribute outfit inspiration, recommend stores, leave reviews, and share styling tips based

on their own experiences. The goal was to create a more dynamic and trustworthy platform where discovery felt

collaborative, social, and rooted in community rather than solely curated content.

Branding / MVP Core App Designs - ITERATION 1

As the concept became more defined, I began developing the visual identity and core MVP experience for Pearl. The branding direction focused on creating something clean, minimal, and approachable while still feeling elevated and fashion-oriented. Since the platform’s primary goal was discovery, I wanted the interface to feel intuitive and easy to navigate without overwhelming users.

From there, I began designing the core screens that would shape the MVP experience, including browsing stores, viewing detailed store information, exploring categories, and accessing external links such as websites, Instagram, TikTok, and maps. The initial MVP focused on creating a simple but scalable foundation that could continue growing over time through additional stores, features, and community contributions.


MVP Core App Flow- Iteration 2 (High-Fidelity Designs)

The following screens showcase the core MVP app flow developed during the second but light iteration of Pearl.


MVP Core Desktop Flow - Iteration 1

After critiques, concept testing, and iterative feedback, it became clear that transitioning Pearl from a mobile app into a responsive website was the stronger direction for the product. The shift allowed for more scalable growth, making it possible for Pearl to begin as a smaller curated directory while creating room for the platform to expand significantly over time.


MVP Core Desktop - Iteration 2 (High-Fidelity Final Designs)

The following high-fidelity designs represent the next iteration of Pearl leading into the final production phase. These mockups refined the overall visual identity, user experience, and responsive layout while establishing a stronger design system for the platform. The focus of this stage was creating a cleaner, more polished, and scalable experience that balanced fashion-inspired visuals with intuitive discovery and usability before moving into development and production. This stage concludes the high-fidelity design process before transitioning the project into development using AI-assisted workflows through Claude Code.


AI-ASSISTED DEVELOPMENT

While Pearl was designed entirely through my own product thinking, branding, UX decisions, and visual direction, AI-assisted development tools were used to help translate designs into a functional website.

Using Claude Code allowed me to experiment with “vibe coding” workflows and explore how AI can support designers in rapidly prototyping and testing product ideas.

The Solution

The solution for Pearl focused on creating a centralized and community-driven platform for discovering modest fashion brands across local and online spaces. By combining curated browsing, searchable directories, and accessible product discovery, the platform aimed to reduce the fragmented experience of searching across multiple social and digital platforms.


TBD

FINAL LIVE WEBSITE

The following section showcases the final live website for Pearl, bringing together the browsing experience, store cards, navigation system, brand profiles, maps integration, and responsive layouts into a fully functional product experience. This stage focused on transforming the final designs into a scalable and accessible platform centered around discovery and ease of use.

FULLY RESPONSIVE WEBSITE

Pearl was developed as a fully responsive website experience designed across mobile, tablet, desktop, and larger screen breakpoints. The platform was built to create a seamless browsing and discovery experience across devices while maintaining consistency in usability, navigation, and visual identity.

CORE PRODUCT EXPERIENCE

The core product experience centers around browsing curated stores and exploring detailed brand profiles. Users can seamlessly discover modest fashion brands through organized store cards and access additional information including brand descriptions, social media links, websites, locations, and maps integration. The experience was designed to make discovery feel intuitive, accessible, and visually engaging across devices.

The Result

Since Pearl has only recently launched as a live website, the project is still in its early stages of growth and community engagement. Throughout the design process and coding iterations, I received ongoing conceptual feedback through critiques, walkthroughs, and testing that helped shape the platform’s direction and user experience.

Moving forward, the next step is sharing Pearl more broadly with the modest fashion community and observing how the platform evolves over time through real user interaction and feedback. As someone who personally experienced the challenges that inspired this project, I’m proud to have created a product that has the potential to support both myself and others within my community by simplifying and improving the process of discovering modest fashion brands.

Other Projects

Other Projects

Other Projects

Other Projects

Create a free website with Framer, the website builder loved by startups, designers and agencies.