Overview

TheHub.Travel is an online learning platform created to help hotels, hostels and tourism businesses access specialised marketing knowledge. The goal was to build a responsive, role-based platform where managers and employees could learn practical strategies and improve their digital presence through tailored courses.

As the UI Designer, I collaborated with a multidisciplinary team—full-stack developers, business analysts, founders and a UX designer—to shape a scalable and intuitive digital product from concept to prototype.

Collaboration with Surf the web, a company dedicated to the development of websites and customised Apps for hotels and resorts.

Project Goals

1. Develop a professional e-learning platform tailored to the needs of tourism businesses

2. Create a responsive website and course environment for mobile and desktop

3. Define user roles and permissions for administrators, teachers and students

4. Build a coherent, modern and minimalistic visual system aligned with the brand

5. Improve clarity of content and user orientation across the platform

Brief
and Design

Redesign a minimalist one page, using the corporate colors and shapes, and making it dynamic.

Our first task was to give the website and platform a makeover.

The style of the decorative elements went through several phases.

We have fixed and cleaned up the style.

Design Personas

Manuel Rodriguez

Hotel Manager

A 56-year-old hotel manager in Valencia. After the pandemic, he needed to refine his target audiences and adapt his marketing strategy. He looked for trustworthy, easy-to-follow training that he could apply quickly within his hotel.

a women with curly dark hair and glasses smiling

Maria Perez

Hostel Manager

A hostel manager in Valencia preparing to open a new location. She wants digital visibility, a clear brand identity and tools to position her hostel competitively online.

Both personas shared similar needs:
‍
‍• Flexibility to learn at their own pace.
‍• Practical courses, not generic theory.
‍• Clear and simple UI.
‍• A professional environment they could rely on,

How we start

Step 1. Discover

Competitive analysis and early content review to understand how other platforms structure courses and guide users. Identified opportunities for improving clarity, navigation, and hierarchy.

Step 2. Define

Created user flows and initial requirements. Defined the information architecture, role-based permissions and types of content the platform needed to support.

Step 3. Idea

Sketched initial wireframes to explore different layouts and content structures. Evaluated how users would browse, select and complete courses with minimal friction.

Step 4. Prototype

Developed low-fidelity and mid-fidelity prototypes covering more than 18 screens. These included:
‍• Landing page.
‍• Courses listingCourse detail.
‍• Dashboard and admin pages.
‍• Mobile responsive views.
‍
‍This enabled early validation with the team and fast iterations before moving to visual design.

Sketches & Wireframe

More than 18 screens were created using sketches and, subsequently, wireframes to represent the website and e-learning platform templates, the flow between screens and their functionalities.

UI Design

The visual identity needed to be clean, modern and accessible, using the brand’s colour palette and simple geometric shapes to create a professional and trustworthy appearance.I redesigned the landing page into a minimalist one-page layout, focusing on clarity, strong content sections and smooth navigation. For the platform interface, I built a consistent system of components—cards, modules, buttons and banners—that ensured scalability and coherence across pages.A mobile-first approach guided all design decisions to guarantee readability and usability across devices.

Implementation

Design System & Components

To ensure scalability across the entire platform, I created a modular design system including cards, navigation elements, banners, content modules and responsive grid structures. These components kept the UI consistent as the course library grew.

Design system showing color palettes, checkbox and radio button states, various button sizes and states, card layouts, form input styles, loader animations, and action sheet examples.

WordPress + LMS Integration

The platform was built on a customized WordPress LMS. I adapted the UI into a fully responsive custom theme, ensuring the design translated cleanly into the CMS structure and course templates. This included layouts for lessons, quizzes, progress tracking and the user dashboard.

e-Learning platform - TheHub.Travel Project

Developer Collaboration

I collaborated closely with backend developers throughout the project to ensure the UI translated correctly into the WordPress LMS environment.
‍
We reviewed layouts weekly, identified plugin limitations early, and aligned on achievable interactions, performance constraints and responsive behaviour.

This collaboration helped:
• refine course templates based on backend rules
• adjust components for faster rendering
• ensure the final UI was technically feasible
• keep the design system consistent across custom modules

Working side-by-side with developers strengthened the connection between design and implementation, resulting in a smoother build process and a more maintainable platform.

Constraints & Solutions

Some LMS features came with fixed architectures, which required UX adjustments. For example, I redesigned certain lesson modules to fit plugin limitations while maintaining clarity and usability. This ensured a smooth learning experience despite technical constraints.

Deliverables

‍• Full responsive interface design
‍• WordPress custom theme layout
‍• LMS templates (courses, lessons, quizzes, dashboard)
‍• Design system and reusable components
‍• Developer-ready annotated assets

Outcome & Learnings

Although the project was ultimately cancelled due to external factors, it provided major learning opportunities:
• Gained experience adapting UI design to WordPress-based LMS systems.
• Strengthened my ability to create scalable design systems for content-heavy platforms.
• Learned how to balance business needs, technical limitations and user expectations.

Training or exploration? how to turn learning into an interactive journey at The Hub Travel

Overview

Project Goals

Brief
and Design

Design Personas

How we start

Sketches & Wireframe

UI Design

Implementation

Design System & Components

WordPress + LMS Integration

Developer Collaboration

Constraints & Solutions

Deliverables

Outcome & Learnings

Conclusion

Thanks for scrolling all the way down — you must really like design (or maybe just got lost 👀).
Either way, glad you’re here!

Training or exploration? how to turn learning into an interactive journey at The Hub Travel

Overview

Project Goals

Briefand Design

Design Personas

How we start

Sketches & Wireframe

UI Design

Implementation

Design System & Components

WordPress + LMS Integration

Developer Collaboration

Constraints & Solutions

Deliverables

Outcome & Learnings

Conclusion

Thanks for scrolling all the way down — you must really like design (or maybe just got lost 👀).Either way, glad you’re here!

Brief
and Design

Thanks for scrolling all the way down — you must really like design (or maybe just got lost 👀).
Either way, glad you’re here!