Intranet Website Redesign
- [Deliverables]
- Intranet Website + Internal Learning Hub
- [Stack]
- Google Sites, HTML/CSS/JS, Figma, Google Drive
- [Role]
- Front-End Developer
- [Service]
- UX Audit + IA + Accessibility-led Redesign
[Overview]
A cluttered intranet and separate learning resources were unified into one simple, accessible internal platform designed for cross-department staff, including older team members.
Designed for Cross-department staff, including older and non-technical users. Built around Simple navigation, clearer onboarding, and lower support dependency. Delivered with Google Sites, HTML/CSS/JS, Figma, Google Drive.
[The Challenges]
#1
"Intranet content was scattered across duplicate pages, outdated files, and inconsistent link structures, making routine task lookup slow and frustrating."
#2
"A large part of the intranet audience was older staff, so dense layouts, small text, and deep navigation trees caused avoidable confusion and support dependency."
#3
"The internal learning resources were disconnected from the intranet, which fragmented onboarding and made it harder for teams to follow one consistent training path."
[Discovery Phase]
Discovery started with a practical audit of Intranet website + integrated internal learning system, mapping how people were actually using the system before any redesign or implementation decisions were made.
I mapped core user groups (Cross-department staff, including older and non-technical users) and traced their task paths. The initial scope focused on Simple navigation, clearer onboarding, and lower support dependency. Intranet content was scattered across duplicate pages, outdated files, and inconsistent link structures, making routine task lookup slow and frustrating.
Design System Map
Patterns, states, and tokens working as one kit.
Component
Intranet redesign
Primary surface for high-priority actions
Interaction
Shared States
Default, active, warning, and empty states
Token
Learning system
Spacing, type scale, and alignment rhythm
Built By Design
Shared rules keep new screens aligned.
System
UX Audit + IA + Accessibility-led Redesign
Consistent rules applied across modules
Scale
Reusable Patterns
Built for iterative expansion without rework
[Design System]
For Intranet website + integrated internal learning system, I defined a reusable design system that aligned layout, component behavior, and content hierarchy across every major user flow.
Patterns were shaped around real user groups (Cross-department staff, including older and non-technical users) so screens stayed consistent while still supporting different operational tasks.
Using Google Sites, HTML/CSS/JS, Figma, Google Drive, I created modular UI building blocks and predictable state rules, so new pages could be launched faster without introducing visual drift.
[01] Problem and Constraints
Problem and Constraints
- Google Sites platform constraints limited how far layout and interaction patterns could go.
- Content sprawl from duplicate links and outdated documents.
- The user base included many older staff, so readability and ease of use were non-negotiable.
- Adoption risk required training and documentation alongside launch.
[02] Design Strategy for Older and Non-Technical Users
Design Strategy for Older and Non-Technical Users
- Simplified information architecture to reduce decision fatigue and click depth.
- Larger typography, stronger visual hierarchy, and higher contrast for easier scanning.
- Plain-language labels and descriptive navigation names instead of internal jargon.
- Clear task grouping (forms, reports, policies, onboarding) with consistent page templates.
- Accessibility checks for keyboard navigation, readable spacing, and predictable interaction patterns.
[03] Integrated Internal Learning System
Integrated Internal Learning System
Single learning entry point
Training materials moved into one structured path from the intranet.
Role-based module grouping
New hires, managers, and content owners follow clearer tracks.
Drive-native maintenance
Content owners update training resources without engineering support.
Onboarding consistency
Teams get one reliable source for SOPs, videos, and reference docs.
[04] Before and After
Before and After
Before
- Fragmented intranet and learning resources
- Deep navigation and inconsistent naming
- Harder usability for older staff
- High support requests for routine tasks
After
- One intranet hub for tasks and training
- Task-first routes with simplified labels
- Accessible, readable interface patterns
- Lower support load via self-serve usage
[05] Delivery and Rollout
Delivery and Rollout
Plan
Content inventory, IA cleanup, and stakeholder walkthroughs.
Build
Responsive HTML/CSS/JS components embedded in Google Sites.
Enable
Training, quick guides, and update ownership for continuity.
Development Operations System (Dev ERP)
