Website design case study

Who is the brand selling to?

Zein caters to Gen Z and millennial consumers who are passionate, ambitious, and driven. They seek meaningful self-expression and resonate with powerful, one-word Arabic quotes that reflect their mindset and values. For them, fashion isn’t just about style—it’s about wearing their philosophy on their sleeves (literally).

What do competitors do?

Competitors in the Arabic streetwear space follow different approaches for their websites, typically focusing on:

• Minimal & Aesthetic Layouts – Many use clean, modern layouts with large imagery and simple typography to reflect a premium feel.
• Dark Mode & High Contrast – Some brands use dark-themed websites to create a sleek, high-end aesthetic that resonates with streetwear culture.
• Story-Driven Homepage – Instead of just showing products, competitors often highlight their brand’s philosophy and inspiration before leading users to shop.
• Interactive & Animated Elements – Some brands use motion graphics and hover effects to add a sense of dynamism and exclusivity.

Zein needed a website that not only captured the bold identity of Arabic typography but also felt like an art piece itself, making the user experience immersive and memorable.

Writing the website copy

Since Zein’s branding embraces minimalism and modern aesthetics, the website copy followed the same philosophy. Instead of long descriptions and long web pages, I focused on short, impactful phrases and sections that resonate with the brand’s identity. Every word had to feel intentional—just like the designs themselves. The messaging was bold yet subtle, allowing the designs to speak for themselves.

Planning out a wireframe

Before diving into the visuals, I crafted the user flow and mapped out the website pages to ensure a seamless shopping experience. The wireframe was planned accordingly, focusing on clarity, conversion, and strong brand identity.

Preparing website assets

Initially, I requested flat-lay images of the products to align with the brand’s clean aesthetic, but the owner couldn't arrange a dedicated shoot. Instead, we opted for lifestyle product photography featuring the owner as the model. This not only showcased the apparel naturally but also reinforced a personal connection with the brand’s audience, making it feel more authentic and relatable.

Creating High-Fidelity UI

From the start, the owner was drawn to the way I incorporate animation into my designs. With that in mind, I focused on creating a highly dynamic experience with smooth, engaging motion that enhances the storytelling of the brand. The animations weren’t just for aesthetics—they played a role in guiding the user’s attention and reinforcing the brand’s bold, modern identity.

Choosing the right tech-stack

To develop the website with the functionalities shown in the design and ensure the brand owner could easily manage it, I needed a tech stack that was both flexible in design and user-friendly on the backend. Shopify was the ideal choice, offering a solid eCommerce foundation with customization capabilities. I built the website using:

• Shopify Liquid – For dynamic content and templating, ensuring seamless product and order management.
• HTML, CSS – To structure and style the site, creating a visually striking yet functional layout.
• Vanilla JavaScript – For interactive elements like hover effects, dynamic filtering, and custom pop-ups.
• Shopify Hosting – Providing a secure, scalable solution without the hassle of external hosting management.