Onboarding Hub Page Design
PROBLEM IDENTIFICATION
Where are my onboarding resources?
Joining the Meta Business Group (MBG) requires a smooth onboarding process to get up to speed with your position and role quickly. However, MBG faced a challenge: crucial information was scattered across various channels like the internal wiki, e-learning platform, and Workplace pages, often with outdated resources and links, and unclear contact points.
CRAFTING A PROBLEM-SOLVING QUESTION
How can I streamline and simplify access to up-to-date onboarding resources for every team and level, ensuring new hires quickly get up to speed?
TASK OPTIMIZATION AND PROBLEM RESOLUTION
I established a Strategic Approach for the Onboarding Hub
Designed an Enhanced UI/UX
Created an intuitive and user-friendly interface that made it easy for team members to navigate and find the information they needed.
Boosted Productivity
Streamlined the onboarding process, allowing team members to get up to speed quickly and efficiently.
Centralized Resources
Consolidated all onboarding materials, including learning courses and essential information, into a single, accessible hub.
Enhanced Efficiency
Helped the team achieve greater success by reducing onboarding time and minimizing confusion about where to find necessary information.
Improved Accessibility
Ensured that all critical resources were up-to-date and easy to access, reducing time and effort for new team members.
MY DESIGN CONCLUSION POST-RESEARCH
Each standalone web page focuses on a specific subject, uses unique color palettes for differentiation, and is a comprehensive resource for diverse user scenarios.
RESEARCH
Centralizing and Streamlining Onboarding Materials
1.Consult
Discuss with team leads to identify and gather the specific resources they consider essential for onboarding.
2.Collect
After consultations, gather input from team leads to arrange and prioritize the resources in a clear, logical order.
3.Tailor
Adapt resources to fit UX standards and ensure suitability for the onboarding hub and website.
DESIGN PHASE: WIREFRAME
Designing a Centralized, User-Friendly Onboarding Hub
Site Workflow & Architecture
Wireframe Samples
0.0. Homepage
Header:
Navigation Menu
Banner Section:
Hero Image
Title
Main Section:
Introduction Section
Quick Links to Key Resources
Footer:
Contact Information
Logo
1.0.1. Onboarding Programs
Header:
Navigation Menu
Main Section:
Course Information
Resources
Types of Training
Training Dates
Links and Additional Resources
Footer:
Contact Information
Logo
DESIGN PHASE: DESIGN SYSTEM
Designing a Centralized, User-Friendly Onboarding Hub
Elevated UX/UI with Distinctive Color Palettes
Each page boasts its unique color spectrum, enhancing user experience through differentiation while preserving a unified and cohesive visual style across the entire onboarding hub.
Navigating Inclusivity: Ensuring WCAG Compliance
Incorporating Web Content Accessibility Guidelines (WCAG) ensures that our design is visually appealing and accessible to all users, regardless of their abilities.
Typography
Inter
Inter was selected for its clean and modern design, which enhances legibility and readability across various screen sizes and resolutions. Its balanced proportions and clear letterforms make it an excellent choice for conveying information effectively in digital environments.
Logo Creation
1st Revamp
For the initial revamp, the aim was to maintain the rocketship element to signify progress and evolution while infusing bright and colorful hues to evoke a sense of fun and excitement around learning.
2nd Revamp
Following the name change, the challenge was to develop a new logo while preserving the original colors and shape for brand consistency. By adding shadows to the rocketship, the aim was to enhance visual depth and ensure that the familiar color palette remained intact.
Grid System
A grid system for layout ensures consistency and alignment, reflecting the organized and visually cohesive presentation of design elements, as detailed in the information above.
DESIGN PHASE: MOCKUP
Collaborative Mockup Design for Developers and SMEs
Using mockups facilitates collaboration between developers and Subject Matter Experts (SMEs), ensuring that design concepts align with technical requirements and domain expertise, resulting in a cohesive and functional end product.
0.0 Homepage
1.0 Overview
1.0.1 Onboarding Programs
1.0.2 The Onboarding Tool
2.0 Onboarding Experiences
3.0 Hiring Manager Corner
4.0 Support Team Corner
DESIGN PHASE: MOCKUP
Impact: Driving Efficiency Through Enhanced User Experience
Through the user interface and experience enhancements I designed, team members experienced streamlined navigation and efficient access to critical resources. This resulted in significant time and effort savings, boosting overall productivity and efficiency across the team. As a result, our business endeavors saw increased success and effectiveness.