Beard Justice — logo
For you, because you are unique
لأنك مميز
Try the app demo ↗ View the case study
Scroll
The Brand

Nature's essence, rugged masculinity.

Here's to the birth of Beard Justice in 2024 — a lively fusion of Mother Nature's essence with rugged masculinity. Eco-friendly premium grooming products as a nod to authentic manhood, embracing sustainable living playfully.

The Beard Growth Kit caters to men looking for a comprehensive solution for beard grooming and enhancement — oils, balms and shampoos built on black oud, musk and natural ingredients.

Beard Justice — product design poster
١

Black Oud — Liquid Gold

The finest black oud gives every product its signature depth. Luxury begins here.

٢

Vitamin E Growth

Nourishes beard and skin, promotes healthy hair growth, calms itchy, dry skin.

٣

Anti-Bacterial

Natural anti-bacterial properties keep skin clean and healthy under the beard.

٤

Non-Greasy

Gently softens without residue. Absorbs fast, feels light, smells unforgettable.

Luxury begins here
الفخامة تبدأ من هنا
UX Case Study

From research to product.

The full UX process behind Beard Justice — purpose, problem, interviews, personas, wireframes and the visual system. Click any slide to view it full-screen.

Cover slide
01 · Cover
The Purpose slide
02 · The Purpose — 1/3
The Purpose slide
02 · The Purpose — 2/3
The Purpose slide
02 · The Purpose — 3/3
Research Questions slide
03 · Research Questions
Problem Statement slide
04 · Problem Statement — 1/10
Problem Statement slide
04 · Problem Statement — 2/10
Problem Statement slide
04 · Problem Statement — 3/10
Problem Statement slide
04 · Problem Statement — 4/10
Problem Statement slide
04 · Problem Statement — 5/10
Problem Statement slide
04 · Problem Statement — 6/10
Problem Statement slide
04 · Problem Statement — 7/10
Problem Statement slide
04 · Problem Statement — 8/10
Problem Statement slide
04 · Problem Statement — 9/10
Problem Statement slide
04 · Problem Statement — 10/10
Interviews & Insights slide
05 · Interviews & Insights
Persona slide
06 · Persona — 1/3
Persona slide
06 · Persona — 2/3
Persona slide
06 · Persona — 3/3
Target Audience slide
07 · Target Audience — 1/11
Target Audience slide
07 · Target Audience — 2/11
Target Audience slide
07 · Target Audience — 3/11
Target Audience slide
07 · Target Audience — 4/11
Target Audience slide
07 · Target Audience — 5/11
Target Audience slide
07 · Target Audience — 6/11
Target Audience slide
07 · Target Audience — 7/11
Target Audience slide
07 · Target Audience — 8/11
Target Audience slide
07 · Target Audience — 9/11
Target Audience slide
07 · Target Audience — 10/11
Target Audience slide
07 · Target Audience — 11/11
Focus slide
08 · Focus — 1/2
Focus slide
08 · Focus — 2/2
Company Principles slide
09 · Company Principles — 1/4
Company Principles slide
09 · Company Principles — 2/4
Company Principles slide
09 · Company Principles — 3/4
Company Principles slide
09 · Company Principles — 4/4
Design Solution slide
10 · Design Solution — 1/16
Design Solution slide
10 · Design Solution — 2/16
Design Solution slide
10 · Design Solution — 3/16
Design Solution slide
10 · Design Solution — 4/16
Design Solution slide
10 · Design Solution — 5/16
Design Solution slide
10 · Design Solution — 6/16
Design Solution slide
10 · Design Solution — 7/16
Design Solution slide
10 · Design Solution — 8/16
Design Solution slide
10 · Design Solution — 9/16
Design Solution slide
10 · Design Solution — 10/16
Design Solution slide
10 · Design Solution — 11/16
Design Solution slide
10 · Design Solution — 12/16
Design Solution slide
10 · Design Solution — 13/16
Design Solution slide
10 · Design Solution — 14/16
Design Solution slide
10 · Design Solution — 15/16
Design Solution slide
10 · Design Solution — 16/16
Visual Language & Design System slide
11 · Visual Language & Design System — 1/2
Visual Language & Design System slide
11 · Visual Language & Design System — 2/2
Lessons Learned slide
12 · Lessons Learned — 1/4
Lessons Learned slide
12 · Lessons Learned — 2/4
Lessons Learned slide
12 · Lessons Learned — 3/4
Lessons Learned slide
12 · Lessons Learned — 4/4
Conclusion & Learnings slide
13 · Conclusion & Learnings — 1/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 2/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 3/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 4/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 5/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 6/7
Conclusion & Learnings slide
13 · Conclusion & Learnings — 7/7
Drag / scroll horizontallyClick to enlarge
Color System

A calm teal engine.

Material 3 scheme from the Figma Color Guidance — deep teal, misty aqua, and the logo's navy & bone. Click any swatch to copy its hex.

Copy
Primary Teal
#006A66
Copy
Aqua Mist
#9CF1EC
Copy
Granite
#252629
Copy
Logo Navy
#000123
Copy
Logo Bone
#D1CDB0
Copy
Sage Container
#CCE8E5
Copy
Foam White
#F4FBF9
Splash Gradient — click to copy CSS
Typography

The exact scale from the file.

Helvetica Neue leads the display and headline tiers, Roboto covers Display Small and Material labels — with Arabic script as the brand's soul.

Figma Styles — Beard-Justice Typography
Beard JusticeDisplay L · HelvNeue 57/64 · −0.25
Oil CollectionsDisplay M · HelvNeue 45/52 · 0
Arabic spiritDisplay S · Roboto 36/44 · 0
Luxury begins hereHeadline L · HelvNeue 32/40 · 0
Natural ingredientsTitle L · HelvNeue 22/28 · 0
Gently softens and nourishes your beard and skin. Contains the finest black oud — liquid gold.Body L · 16/24 · +0.5
Add to cart — 29.99 €Label L · 14/20 · +0.1
Arabic accent — Amiri
لأنك مميز

Arabic isn't decoration here — it's the brand's heritage. It appears on buttons, labels and collection names.

Collections

Oil. Balm. Shampoo.

Three collections — each formulated for every part of you: beard, moustache, hair and body. Click a collection to jump to the lineup.

Oil collectionCollection 01
زيت

Oil

Arabic Spirit · Classic · Modern

BeardMoustacheHairBody
Balm collectionCollection 02
بلسم

Balm

Sea Spirit · Skylight · Classic · Modern

BeardMoustacheHairBody
Shampoo collectionCollection 03
شامبو

Shampoo

Natural care line

BeardMoustacheHairBody
Product Line

Meet the lineup.

Click any product for the full story — manuals, usage and ingredients included, just like in the app.

In the Real World

Applications & mockups.

Packaging, devices and campaign visuals — click to enlarge.

UX/UI posterCampaign Poster
App on iPhonesApp — iPhone Mockup
Gift setGift Set
Shampoo packagingPackaging
Interactive App Demo

Don't watch it.
Use it.

The Beard Justice shopping app, rebuilt live in code from the Figma design — tap through the real flow: enter, browse, add to cart, check out.

🛍️

Full shopping flow

Splash → catalog → product page → cart → order confirmation. Every step is tappable.

🎨

Material 3, brand-tuned

Built on the exact token scheme from the Figma file — teal primary, sage containers, foam surfaces.

🧔

Real products

The actual product photography from the brand, in the actual UI.

9:30▾▴▮
For you because you are unique
Design by A.A.Habash
☰Search🔍
Beard products
Arabic Spirit
Classic
Skylight
Oil Collections
☰Search🔍
Oud
Oil 29.99€59.99€
Natural ingredients
★★★★★5/5
📋
What you'll need

📋

📋
INGREDIENTS

☰Cart
Cart overview
Sub total0.00€
✓

Order confirmed

تم تأكيد طلبك

Thank you for choosing Beard Justice.
For you, because you are unique.

▲ Tap inside the phone — it works
Copied
← Habash Design