Mobile App Design for Luxury Brand Platform

Designing a mobile-first e-commerce experience for a UAE-based beauty and haircare brand

Project Overview

Feranchesco Professional is a UAE-based beauty brand offering a wide range of haircare and cosmetic products. The goal was to design a mobile app that makes it easy for users to explore specialized product categories, understand treatments, and confidently complete purchases.

As the UX/UI Designer, I focused on creating a clear and intuitive shopping experience tailored to users who may not always be familiar with technical product types like keratin, plex, or protein treatments.

The Challenge

The brand had an existing website but lacked a native mobile app to reach a wider audience across the GCC. At the same time, its complex product categories, such as keratin, plex, and protein treatments, were not intuitive for everyday users, making product discovery challenging.

Simplify complex categories into clear, user-friendly structures
Enable users to easily understand product purpose and benefits
Create intuitive navigation that supports effortless discovery
Reinforce trust in a professional-grade product range through clarity and presentation

The Solution

To address this, I designed a mobile-first experience that extends the brand beyond its website and makes it accessible to a wider audience across the GCC. The solution focused on simplifying complex product categories, introducing clearer navigation, and improving product understanding so users can confidently explore and purchase the right products. The result is an intuitive shopping experience that bridges product education with seamless browsing and checkout.

The Process

A user-centered process focused on creating a clear, trustworthy, and conversion-driven experience.

The Strategic Process

UX Audit & Market Analysis

As a freelance consultant, I began the project with a comprehensive UX audit of the existing Feranchesco website. The primary goal was to identify why a relatively simple e-commerce catalog felt difficult to navigate.

The Discovery

My audit revealed that the existing category architecture was built around technical product names rather than user needs. For a customer who isn't a professional stylist, the differences between various hair treatments weren't clear, leading to "choice paralysis." The structure was flat and lacked the visual hierarchy needed to help a user distinguish between similar-looking products. To find a better way to organize the catalog, I benchmarked how leading digital beauty platforms handle complex product ranges:

Most high-end beauty apps use benefit-driven filters (e.g., "Repair," "Hydrate," "Volume") to help users find products without needing to know the technical ingredients.
Specialist apps provide deep technical specs but often fail to provide a simple, "scannable" experience for the everyday buyer.

The Design Strategy

Combining these insights, I restructured the Information Architecture to bridge the gap between professional authority and consumer simplicity. I moved away from a confusing, flat list of products and introduced intuitive category groupings and plain-language labels. This allowed users to navigate the catalog based on their specific hair goals rather than technical terminology.

Information Architecture

I architected a high-level navigation framework that prioritizes the core shopping experience and product categories while keeping discovery tools and account management easily accessible. This modular structure ensures the app remains intuitive for the user today while allowing the business to easily scale with new features and professional services in the future.

Wireframing

Before applying any visual styling, I used low-fidelity wireframes to validate the new layout. This allowed me to test how to present product information clearly, ensuring the hierarchy felt intuitive on a small screen.

Design System

To ensure a polished and consistent feel, I created a lightweight design system. I established a clean typography scale, a balanced color palette, and a library of reusable components (like product cards and buttons). This not only made the initial build faster but also ensured the app stays visually cohesive as the product catalog grows.

Final Design

The final interface moves away from a technical "product list" and toward a confidence-driven shopping experience. By using a clean, high-contrast layout and a rigorous visual hierarchy, I ensured that even the most specialized treatments felt approachable to a first-time buyer.

The design prioritizes "at-a-glance" understanding, utilizing intentional white space and clear typography to guide users from initial discovery to a frictionless checkout.

Impact

As this was a targeted UX intervention for a new platform, the success of the design was measured by the removal of structural friction and the readiness of the product for market scaling.

Transformed a confusing catalog into an intuitive journey. Users can now navigate professional-grade treatments independently, removing the need for external stylist guidance to make a purchase.
Delivered a modular design framework that allows the client to expand their product lines or add professional services without cluttering the UI.
Delivered a structured component library, I ensured a high-fidelity handoff that reduced development rework and maintained visual integrity across all mobile devices.

Learnings

This project highlighted that in mobile e-commerce, clarity is key. For "professional-grade" products, UX designers must simplify the technical aspects to create a clear, guided story for everyday consumers.

If I were continuing this engagement as a Lead Designer, my next strategic steps would be:

Conduct moderated usability testing sessions to identify "hidden" friction points in the product discovery and checkout flows.
Implement event tracking to monitor drop-off rates at the category level, allowing us to pivot from qualitative assumptions to quantitative optimizations.
Explore "Hair Profile" features where the app remembers a user’s specific hair type to provide a curated, high-touch experience that mimics a personal salon consultation.

Interested in more work?

Next case study Book a call