Back to projects
Manufacturing · Corporate site + E-commerce

PHC — Jordan's prime quadruple-factory brand leader.

A complete website & e-commerce experience for Jordan's largest home-appliance manufacturer — from information architecture to a full design system and high-fidelity screens.

Client
PHC Jordan
Role
UX/UI Designer
Year
2024
Scope
Full Website + Store
PHC website across desktop, laptop and mobile
Overview

The brief.

About the client

PHC (Prime Home Care) owns modern factories established in 2004 in Al Mowaqar, Jordan, manufacturing the full range of home appliances with 215 employees — 15 engineers, 30 technicians, a 21-person management team and 149 skilled labour.

The challenge

PHC needed a complete digital presence — a corporate site showcasing their factories, brands and story, plus a full e-commerce store for direct-to-consumer sales.

My role

Led the entire UX/UI process — from research and information architecture through to the final design system and high-fidelity mockups.

2004
Established
4
Modern factories
215
Employees
11+
Templates designed

Collaborators

Amman Dynamics
Company
Osama Turki
UX/UI Lead
Sereen Abualrous
UX/UI Designer
Information Architecture

One company, two journeys.

A corporate site that tells the manufacturing story, and a full store for direct-to-consumer sales — mapped as a single, clear hierarchy.

Root
PHC.jo

Main website

  • Home

    • Nav Bar
    • Hero Section
    • Brands
    • About Us
    • Benefits
    • Contact Us
    • Footer

  • About Us

    • Nav Bar
    • Company Story
    • Mission & Vision
    • Milestones · Since 2004
    • Leadership
    • Footer

  • Factories

    • Nav Bar
    • Overview
    • Production Lines
    • Capacity Stats
    • Gallery
    • Footer

  • Brands

    • Nav Bar
    • Brand Grid
    • Brand Detail
    • Product Categories
    • Footer

  • Contact Us

    • Nav Bar
    • Contact Form
    • Company Info
    • Location Map
    • Working Hours
    • Footer

Store

  • Store Home

    • Nav Bar
    • Filters
    • Search
    • Brands
    • Best Sellers
    • Special Offers

  • Products

    • Nav Bar
    • Filters
    • Search
    • Product Grid
    • Pagination

  • Product Details

    • Image Gallery
    • Brand · Category
    • Description
    • Reviews
    • Add to Cart

  • Cart

    • View Cart
    • Cart Summary
    • Proceed to Checkout

  • Checkout

    • Shipping
    • Billing
    • Payment
    • Order Review
    • Confirmation

  • My Account

    • Account Info
    • Order History
    • Wishlist
Foundations

Typography

The typographic system defines text styles as design tokens and explains how titles and body text should be applied.

TypefaceVariable · 400–800
Inter
Character set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ # % ( )
Regular400
Medium500
Semi Bold600
Bold700
Text styles
  • Heading
  • Desktop
  • Mobile
  • Text
  • Large
  • Normal
  • Small
  • XSmall
  • XXSmall
  • Uppercase
  • Label
  • Large
  • Normal
  • Small
  • XSmall
Headings · Desktop
Heading H1Font size: 40px | Line height: 60 | Letter spacing: -3%
Heading H1
Heading H2Font size: 34px | Line height: 48 | Letter spacing: -2%
Heading H2
Heading H3Font size: 32px | Line height: 40 | Letter spacing: -1%
Heading H3
Heading H4Font size: 30px | Line height: 32 | Letter spacing: -1%
Heading H4
Heading H5Font size: 22px | Line height: 32 | Letter spacing: -1%
Heading H5
Heading H6Font size: 20px | Line height: 24 | Letter spacing: -1%
Heading H6
Foundations

Color system

A flexible palette of semantic and functional colors that keeps interfaces consistent, clear, and expressive across the entire product.

  • Mono
    14 colors
  • Brand
    11 colors
  • Error
    11 colors
  • Success
    11 colors
  • Warning
    11 colors
  • Orange
    11 colors
  • Mint
    11 colors
  • Teal
    11 colors
  • Cyan
    11 colors
Key Screens

Eleven high-fidelity templates.

Main website

  • phc.jo/
    Home page

    Home

    Hero, brands, about preview, benefits

  • phc.jo/about
    About Us page

    About Us

    Company story, mission, leadership

  • phc.jo/factories
    Factories page

    Factories

    Factory lines, capacity, gallery

  • phc.jo/brands
    Brands page

    Brands

    Brand grid + detail cards

  • phc.jo/contact
    Contact Us page

    Contact Us

    Form, company info, map, hours

  • phc.jo/404
    404 Error page

    404 Error

    Not-found page with back-to-home

Store · e-commerce

  • phc.jo/store
    Store Home page

    Store Home

    Best sellers, top picks, brands

  • phc.jo/store/search
    Products Listing page

    Products Listing

    Results list with active filters

  • phc.jo/store/product
    Product Details page

    Product Details

    Gallery, specs, add to cart

  • phc.jo/store/cart
    Cart page

    Cart

    Items, order summary, checkout CTA

  • phc.jo/store/checkout
    Checkout page

    Checkout

    Contact, shipping, payment, order summary

  • phc.jo/store/account
    My Account page

    My Account

    Orders, addresses, account info

Process

From research to shipped UI.

  1. Research

    Stakeholder interviews, competitor analysis, and mapping real user needs.

  2. Information Architecture

    Site mapping, user flows, and content hierarchy across site and store.

  3. Wireframing

    Low-fidelity layouts for every key page, main site and e-commerce.

  4. Design System

    Typography, colour architecture, and a reusable component library.

  5. UI Design

    High-fidelity mockups for all eleven templates, fully responsive.

  6. Prototyping & Testing

    Interactive prototypes and usability testing to validate the flows.

Results & Scope

What was delivered.

  • 11+
    Unique page templates designed
  • 7
    Colour families in the system
  • 3
    Breakpoints — desktop, tablet, mobile
  • 100%
    End-to-end e-commerce flow
← Previous
ASM
Cybersecurity · Web
Next →
Amman Dynamics
IT services · Web
← Back to all projects