MoD
IT Division
UX/UI Case Study · 2026

Israeli Ministry of Defense
Employee Portal Redesign

A full UX/UI redesign of the internal employee portal homepage — balancing action, updates, and content for 4,280+ government employees.

4,280+
Target Users
12
Components Built
1920px
Desktop Target
WCAG AA
Accessibility
Project Overview

What Was the Challenge?

The existing portal homepage lacked clear information hierarchy and visual prioritization. Employees had to hunt for everyday services across a cluttered, un-structured interface. The redesign needed to serve three distinct user personas simultaneously without compromise.

My Role
End-to-end UX/UI Designer — research, IA, visual design, prototyping, and design spec documentation.
Timeline
~5 days from brief to final delivery including Figma, HTML demo, design spec, and case study.
Deliverables
Figma file · HTML prototype · Design spec (9 sections) · Submission page · Portfolio case study.
Users
4,280+ MoD employees: administrative staff, mid-level managers, and senior executives.
The Problems
What Wasn't Working
  • No visual hierarchy — everything equally important
  • Multiple screens needed to find basic services
  • No personalization or context-aware content
  • Updates buried below the fold
  • No quick access to high-frequency actions
  • Marketing sections competing visually
The Solutions
How I Solved Them
  • Three-layer architecture: Action → Update → Content
  • Central search + 6 Quick Actions above the fold
  • Personalized greeting with department context
  • Persistent scrolling ticker for real-time updates
  • Employee Finder widget — always visible, zero friction
  • Each marketing section gets its own dedicated zone
Design Process

How I Approached It

A structured 5-step UX process from brief analysis to final delivery.

01
Brief Analysis
Identified 3 personas, 4 marketing components, functional requirements
02
Information Architecture
7-layer page hierarchy and 2-column content grid
03
Visual Language
Extracted design tokens from mod.gov.il — navy, cyan, gold
04
Prototyping
HTML/CSS prototype at 1920px with full responsive support
05
Figma + Spec
Full Figma file with components and 9-section design spec
User Research

The Three Personas

Every design decision was evaluated against all three personas — the portal had to work for everyone without forcing trade-offs.

A
The Administrator
Age 28–45 · Daily heavy user
Needs: Payslips, leave, forms
Pain: Long search for services
Solution: Quick Actions + Search hero
M
Mid-level Manager
Age 35–55 · Daily power user
Needs: Updates, news, team management
Pain: Information overload
Solution: Ticker + Updates card + Employee Finder
S
Senior Executive
Age 45+ · Occasional user
Needs: Ministry news, org spotlight
Pain: Cluttered UI, slow to digest
Solution: News grid + Spotlight section
Design Decisions

Key UX Decisions Made

Each decision was grounded in user needs, accessibility requirements, and the institutional context of a government portal.

Employee Finder in Hero
UXPlacement
Finding a colleague is performed 3–5 times daily per employee. Placing the finder in the hero eliminates navigation friction — zero extra clicks.
Persistent Ticker
UXA11y
A scrolling ticker keeps announcements always in view without consuming permanent screen space. Includes pause/play controls for WCAG 2.1 compliance.
Dark Chrome + Light Body
VisualBrand
Full dark = too heavy. Full light = lacks authority. The hybrid approach delivers institutional weight in chrome while maximizing content readability in the body.
Category Search
UXFeature
Employees search for different content types — services, people, forms, procedures. A category selector returns more relevant results and reduces cognitive load.
Featured Card 2:1 Width
VisualHierarchy
Uniform 3-column grids have no editorial hierarchy. A 2:1 featured card clearly signals the lead story, with stats and tags adding rich, scannable context.
#1A3D6E on Light Backgrounds
A11yColor
Cyan #35C0D0 fails WCAG on white. All light-bg text switched to Navy — achieving 7.2:1 contrast (AAA).
Visual Design

Color & Typography

The visual language was extracted from mod.gov.il and adapted with a key rule: cyan only on dark backgrounds.

Color Tokens
Midnight
#071223
Header/Footer
Cyan
#35C0D0
Dark bg only
Navy
#1A3D6E
Links (light bg)
Gold
#B08D57
Seal/Emblem
Red
#D63637
Alerts/New
Page BG
#F4F6F9
Body bg
Typography — Assistant (Google)
Display / H128px · 900
שלום, יוסי
Section Title20px · 800
חדשות המשרד
Card Title15px · 700
שיתוף פעולה עם נאט"ו
Body Text13px · 400
כוחות ישראל השתתפו בתרגיל...
Component Library

12 Components Built

Every component designed with Figma Variants — default, hover, active, disabled states.

Header
Logo, search, actions
Search Box
Hero search + category
Ticker
Scrolling updates
Employee Finder
Search + results
Promo Banner
CTAs + carousel dots
News Card
Regular + Featured
Quick Action
Icon + label grid
Update Item
Icon, title, date
Spotlight Item
Dept, title, thumbnail
Nav Item
Icon + label + states
Button
Primary · Secondary · Ghost
Badge / Tag
5 semantic variants
Accessibility

WCAG 2.1 AA Compliance

Accessibility was a first-class design concern throughout — not an afterthought.

4.5:1 Contrast — all text on dark backgrounds. Cyan on dark: 5.8:1.
7.2:1 on Light — Navy replaces cyan on white cards (WCAG AAA).
Full RTL — Hebrew right-to-left at every component level.
Ticker Pause — per WCAG 2.1 SC 2.2.2 moving content control.
Semantic HTML — H1→H3 hierarchy, aria-labels, focus states.
A11y Bar — font size controls and high-contrast toggle at the top.
Deliverables

What Was Delivered

The brief required a Figma file. Three additional deliverables were produced to demonstrate end-to-end design capability.

01
Figma Design File
Full 1920px homepage with Color Styles, Text Styles, Components with Variants, and Auto Layout throughout.
Open in Figma
02
Interactive HTML Demo
Pixel-perfect HTML/CSS implementation with working ticker, hover states, all 12 components, and responsive breakpoints.
View Live Demo
03
Design Spec Document
9-section specification: UX rationale, personas, content hierarchy, color tokens, typography, components, decisions, and accessibility.
View Spec
Reflections

What I Learned

Three key takeaways from this redesign project.

01
Government ≠ Boring
Institutional design can be modern and beautiful. The constraint of "governmental authority" pushed toward stronger typographic hierarchy and purposeful color — not decoration.
02
Hierarchy Before Aesthetics
The biggest improvement was structural, not visual. Defining three clear page layers solved information overload better than any visual treatment could.
03
Accessibility Improves Design
Switching cyan to navy on light backgrounds wasn't just a compliance fix — it made the UI look more refined. Accessibility constraints consistently pushed design in a better direction.