top of page
INTRODUCTION & CONTEXT
Context
LearningMates is an EdTech company providing digital learning solutions to educational institutions worldwide. Despite offering cutting-edge products to clients, their internal portal remained functional but outdated—leading to inefficiencies and a disjointed experience.
As the UX/UI Designer, I led the complete redesign of the intraportal, applying the Double Diamond design process to understand employee needs and create a modern, scalable system that unified brand consistency while improving daily workflows for all internal stakeholders.
Problem Statement
"How might we transform LearningMates' outdated intraportal into an intuitive, modern platform that streamlines employee workflows, improves communication, and creates a cohesive brand experience?"
Discover
Understanding employee needs through contextual research and usability audits
DOUBLE DIAMOND PROCESS
Secondary Research
Analysis of the existing intraportal revealed critical pain points in employee workflows and navigation:
Scattered Information
Employees struggled to locate resources across multiple disconnected pages with unclear navigation.
Inconsistent Design
Visual inconsistencies and lack of brand alignment created a disjointed user experience.
Redundant Workflows
Manual processes and duplicate systems slowed down communication and project tracking.
Primary Research
Contextual interviews and employee surveys uncovered essential user needs across different roles:
Quick Access
Employees needed faster access to frequently used tools and information.
Task Visibility
Project managers required clear visibility into team tasks and project status.
Centralized Data
HR teams wanted centralized employee information and streamlined onboarding.
Clear Hierarchy
Users needed intuitive information architecture to reduce cognitive load.
Role-Based Views
Different user groups needed personalized dashboards based on their roles.
Notifications
Employees wanted proactive alerts for deadlines and important updates.
Universal Search
A powerful search function was essential for quickly finding resources.
Define
Synthesizing research into user personas, journeys, and actionable insights
DOUBLE DIAMOND PROCESS
Ideation & Prioritization
Through collaborative workshops with stakeholders across departments, we generated and prioritized portal features based on user impact and technical feasibility.
Personalized Dashboard
Role-based home screens with quick actions and relevant widgets
IMPACT
High
EFFORT
Medium
Universal Search
Smart search across all portal content and resources
IMPACT
High
EFFORT
Medium
Simplified Navigation
Intuitive menu structure with clear hierarchy
IMPACT
High
EFFORT
Low
Quick Actions
Frequently used tasks accessible in one click
IMPACT
Medium
EFFORT
Low
Notification Center
Centralized alerts for deadlines and updates
IMPACT
High
EFFORT
Medium
Team Directory
Enhanced employee profiles with skills and availability
IMPACT
Medium
EFFORT
Medium
Prioritization Framework
High Priority
High impact, Low-Medium effort
Medium Priority
Medium impact/effort balance
Low Priority
Lower impact or high effort
Problem Framing
Pain Points
Poor navigation, scattered information, inconsistent design, redundant workflows
Opportunities
Streamlined navigation, personalized dashboards, unified design, efficient workflows
Proposed Features
Role-based dashboards, universal search, quick actions, notification center
TO-BE Journey Map
Envisioned Experience
Continuous Use
ACTIONS
Returns to portal regularly as go-to resource
THOUGHTS
"This actually makes my job easier"
Engaged and productive
IMPROVEMENTS
Positive experience, habitual usage
Efficient Tasks
ACTIONS
Completes tasks with quick action buttons
THOUGHTS
"I can focus on my actual work"
Empowered
IMPROVEMENTS
Streamlined workflows, fewer clicks
Quick Navigation
ACTIONS
Uses intuitive menu or search to find resources
THOUGHTS
"This is so much easier now"
Satisfied
IMPROVEMENTS
Clear hierarchy, universal search
Instant Access
ACTIONS
Opens portal, greeted by personalized dashboard
THOUGHTS
"Everything I need is right here!"
Confident → Pleased
IMPROVEMENTS
Role-based customization, modern design
How Might We...
...transform LearningMates' outdated intraportal into an intuitive, modern platform that streamlines workflows, improves communication, and creates a unified brand experience for all employees?
Employee Personas & Empathy Maps
AS-IS Journey Map
Exit
ACTIONS
Completes task and leaves portal with relief
THOUGHTS
"Finally done, I'll avoid this until I have to"
Relief but avoidance
PAIN POINTS
Negative association with internal tools
Task Completion
ACTIONS
Clicks through multiple pages to complete simple task
THOUGHTS
"This should be easier"
Annoyed
PAIN POINTS
Redundant workflows, too many steps
Navigation
ACTIONS
Searches for needed resource through confusing menu
THOUGHTS
"Where did they hide this again?"
Frustrated
PAIN POINTS
Poor information architecture, hidden features
Login
ACTIONS
Opens browser, navigates to outdated portal URL
THOUGHTS
"This looks dated... hope it loads quickly"
Neutral → Skeptical
PAIN POINTS
Slow load times, unclear landing page
Develop
Creating low and mid-fidelity prototypes to streamline portal navigation
DOUBLE DIAMOND PROCESS
Core Portal Features
Personalized Dashboard
Role-based home screens with customizable widgets and quick access
Intuitive Navigation
Simplified menu structure with clear hierarchy and visual consistency
Project Tracking
Visual project status, task management, and team collaboration tools
Resource Library
Centralized document management with advanced search and filtering
Notification Center
Smart alerts for deadlines, updates, and important announcements
Quick Actions
Frequently used tasks accessible with minimal clicks
Visual Mood Boarding
Deliver
Finalizing intraportal designs through testing and validation
DOUBLE DIAMOND PROCESS
High-Fidelity Portal Designs
Personalized Dashboard
Role-based home screen displaying relevant widgets, quick actions, and personalized content for each employee
HR’s Dashboard
PM’s Dashboard
Regular Employee
Onboarding
Streamlined onboarding flow with interactive tutorials and a comprehensive knowledge base for quick learning
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Project Management Hub
Centralized project tracking with task assignments, progress visualization, and team collaboration features
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Utilisation Visualisation
Visual representation of employee time allocation across projects, tasks, and non-project activities for efficient resource management
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Training Calendar
Training calendar with yearly, monthly, and weekly views to track upcoming sessions
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Leave Application
Apply for time off, view leave balances, and track application statuses all in one place
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Career Management
One-click access to career management tools, exit interviews, and feedback forms, optimising HR workflows
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Outsourcing Application
A streamlined process for requesting external vendor support and managing project outsourcing
High-Fidelity Portal Design
Low-Fidelity Wireframe
Old Portal View
Usability Testing Insights
Areas for Improvement
Some power users wanted more advanced customization options
Initial learning curve for employees used to old system
Mobile experience needed additional optimization
What Worked
Employees found the new navigation intuitive and easy to learn
Portal adoption increased by 75% within the first month
Task completion time reduced significantly with quick actions
Positive feedback on modern design and brand consistency
92%
Task Success Rate
20
Employees Tested
75%
Increase in Portal Adoption
DESIGN SYSTEM
Brand Guidelines
A comprehensive design system for LearningMates with calm, editorial aesthetics
UI Components
Cards
Card Title
Card content with minimal styling and clear hierarchy.
Tinted Card
Alternative card style with subtle background tint.
Buttons
Icon System
Analytics
Settings
Dashboard
Notifications
Icons from Lucide React library · 24px base size · Consistent 2px stroke width · Rounded caps
Typography Hierarchy
H1
The quick brown fox
Regalis
·
3rem (48px)
·
Weight 500
·
Page titles
H2
The quick brown fox
Regalis
·
2rem (32px)
·
Weight 500
·
Section headings
H3
The quick brown fox
Regalis
·
1.5rem (24px)
·
Weight 500
·
Subsection headings
Body Large
The quick brown fox
Raleway
·
1.25rem (20px)
·
Weight 400
·
Intro paragraphs
Body
The quick brown fox
Raleway
·
1rem (16px)
·
Weight 400
·
General body text
Caption
The quick brown fox
Raleway
·
0.875rem (14px)
·
Weight 400
·
Labels & captions
Color Palette
Light Sky Blue
#D2E5FF
Primary brand color, accents
Soft Powder Blue
#E5F0FF
Secondary accents, backgrounds
Navy Blue
#002961
Primary text, CTAs
Graphite
#1E293B
Primary headings & text
Slate
#334155
Secondary headings
Steel
#64748B
Body text & icons
Silver
#94A3B8
Muted text & accents
Cloud
#CBD5E1
Borders & dividers
Mist
#E2E8F0
Backgrounds & cards
Frost
#F1F5F9
Light backgrounds
Snow
#F8FAFC
Page backgrounds
White
#FFFFFF
Pure white accents
CONCLUSION
Thank you for exploring this case study
Interested in seeing more of my work in EdTech and internal tool design? Let's connect and discuss how UX/UI design can transform your organization's digital experience.
Explore More Case Studies
UX/UI Designer · LearningMates · October 2025
Key Learnings
Internal Tools Deserve Great Design
Employee-facing tools are often neglected, but investing in their design improves productivity, satisfaction, and ultimately the company culture. Great internal tools signal that the company values its employees.
Scalable Design Systems Are Essential
Building a comprehensive design system with reusable components, clear typography, and consistent colors ensures the portal can evolve with the company's needs while maintaining brand integrity.
Stakeholder Collaboration Drives Success
Involving employees from different departments early in the design process ensured the portal addressed real needs. Their feedback was invaluable in creating personalized experiences for each user role.
Project Impact
60%
Reduction in Onboarding Time
8
Core Portal Modules Designed
75%
Increase in Portal Adoption
From Outdated to Outstanding
The LearningMates Intraportal redesign demonstrates how thoughtful UX/UI design can transform internal tools into valuable assets. By applying the Double Diamond process and creating a cohesive design system, we empowered employees with an intuitive, modern platform that streamlined daily workflows.
This project showcased the importance of user-centered design in EdTech environments—balancing functionality with visual appeal to create a portal that employees actually want to use, rather than one they avoid.
bottom of page