Brand page
A brand page that opens with a campaign banner, then a short brand story and a logo card, so shoppers learn who they are buying from.
- Brand-of-the-month campaign banner
- Short brand story
- Logo card for quick recognition
All projects
Case study
RaviaCare: a beauty and skincare e-commerce for the Gulf
A full-cycle design engagement, from user research to final UI, for desktop and mobile in English with Arabic localisation support.
- Client
- RaviaCare
- My role
- UI/UX design, research to final UI
- Platform
- Web, desktop and mobile
- Market
- UAE and the Gulf
Overview
RaviaCare is a beauty and personal care e-commerce platform designed for the Gulf, with a focus on the United Arab Emirates. It connects customers with skincare, haircare, body care and fragrance from trusted international brands such as Vichy, La Roche-Posay, Eucerin and CeraVe.
The brief called for a full-cycle engagement, from user research through final UI, covering desktop and mobile in English with Arabic localisation support.
About the client
- 12+product categories
- 200+international brands
- 6remote user interviews
What it covers
- Home
- Brand pages
- Category listing
- Cart and checkout
- Order details
- Account settings
The challenge
What had to be solved
A fragmented market
Products are sold across many channels, rarely with consistent information, trust signals or a seamless purchase journey.
Not sure what suits my skin
Users struggled to find products for their skin type.
Doubt about delivery and returns
Little confidence in delivery timelines and return policies, which feeds cart abandonment.
Bilingual from day one
Reach an English and Arabic audience without a mirrored template.
Goals
- Launch a regionally relevant beauty destination for the Gulf
- Support 12+ categories and 200+ international brands on one platform
- Deliver a consistent, high-trust experience across desktop and mobile
- Enable EN/AR audience reach from day one
- Show transparent delivery options to reduce cart abandonment
Workflow
From brief to screens
Brief and analysis
I take the brief from the client, then read it closely: goals, audience, constraints and what success looks like. Nothing is drawn until the requirement is clear.
Sketch
I start on paper: quick sketches of structure and key flows, so ideas are cheap to change before any pixel is placed.
Foundations and design system
I set the foundations: colour, type, spacing and core components. If the client already has a design system I build on it, otherwise I create one for the project.
Build the screens
With the system in place I assemble the screens from its components, so every page stays consistent and fast to build.
The process
How the work moved
Research
Secondary research, competitive analysis, a research plan and a screener survey.
Interviews
Six remote user interviews over video call.
Synthesis
Affinity diagram, empathy map and a primary persona.
Structure
Information architecture and low-fidelity wireframes for desktop and mobile.
System and UI
Colour, type, spacing and components, then high-fidelity desktop and mobile screens.
The work
The homepage, full length
raviacare.com
Hover to scroll the page
Selected screens
6 screens that carry the system
Category listing
The category page leads with a bright campaign hero, then circular sub-categories for quick browsing.
- Campaign hero for each category
- Circular sub-category shortcuts
- Consistent header and search
Shopping cart
A cart that keeps the order summary beside the items, with a promo-code field and one clear route to checkout.
- Quantity and price on every item
- Order summary with a promo code
- Proceed to checkout as the main action
Checkout
Checkout stacks the shipping address and delivery method on one side and keeps the summary on the other, which is where delivery transparency pays off.
- Saved shipping address with a change option
- Delivery options with their costs
- The summary stays in view
Order details
An order page that tells the story of the delivery as a four-step timeline, with invoice, reorder and help actions underneath.
- Order status and total at the top
- Timeline: placed, confirmed, shipped, delivered
- Download invoice, reorder, get help
Account settings
A calm settings screen: a side menu for every account area and a single form for personal information with a save action.
- Side menu for all account areas
- Personal information form
- Change password section
Design decisions
The thinking behind the choices
A delivery-details module
A dedicated screen makes logistics transparent, answering the delivery and returns doubt directly.
Campaign sections that earn attention
Glow Season, New Arrivals and Brand Showcase blocks bring promotion into the layout without noise.
Guidance by skin type
Content hierarchy per section helps shoppers find what suits their skin.
Built for EN and AR
Layouts were considered for switching between English and Arabic from the start.
The brand
Colours the design speaks in
- #9A244CPlumFrom the logo
- #000000BlackWordmark and text
- #B4A6C2LilacSampled from the cover
- #F7E8EEBlushSurfaces (derived)
What I delivered
- Research report and persona
- Information architecture
- Wireframes, desktop and mobile
- Design system
- High-fidelity UI
Next case studyFlairsTech: an AI-powered managed services websiteView case study
