Web travel platform redesign

Web travel platform redesign

A client platform for corporate clients that consolidates an online travel management tool.

A client platform for corporate clients that consolidates an online travel management tool.

Project overview

Project overview

MY-WCP is a platform targeted at corporate employers and business travelers. After several months of using the MY-WCP platform at my previous work, and discussing its usability with other users, I decided to revamp this online travel platform to address its accessibility and usability challenges.

MY-WCP is a platform targeted at corporate employers and business travelers. After several months of using the MY-WCP platform at my previous work, and discussing its usability with other users, I decided to revamp this online travel platform to address its accessibility and usability challenges.

Client

Concept work

Date

March 2025

Tools used

Problem statement

Problem statement

Based on user interviews and my observations, I have identified the following issues:


Navigation and header issues - A hidden menu bar makes it difficult to move around the site

Unclear navigation - It’s not clear how users can navigate back to previous steps or access other parts of the app


Visual design issues – Inconsistent spacing and allingment, poor use of space, cluttered search history section, lack of clear visual hierarchy in headings and subheadings


Accessibility and usability issues – Unclear input fields, inconsistent date format, ambiguous labels, poor button visibility, low contrast (some text and button colors may fail WCAG standards)

Based on user interviews and my observations, I have identified the following issues:


Navigation and header issues - A hidden menu bar makes it difficult to move around the site


Unclear navigation - It’s not clear how users can navigate back to previous steps or access other parts of the app


Visual design issues – Inconsistent spacing and allingment, poor use of space, cluttered search history section, lack of clear visual hierarchy in headings and subheadings


Accessibility and usability issues – Unclear input fields, inconsistent date format, ambiguous labels, poor button visibility, low contrast (some text and button colors may fail WCAG standards)

Research process and analysis

Research process and analysis

Market research - I researched industry trends, and customer expectations


User interviews - I conducted in-depth interviews with 10 users


User research - I identified common pain points, and usability issues

Market research - I researched industry trends, and customer expectations


User interviews - I conducted in-depth interviews with 10 users


User research - I identified common pain points, and usability issues

Project goals

Project goals

Simplify the interface by balanced layout and increased visual hierarchy


Improving accessibility by providing adequate contrast


Improving readability by updating input field labels and unifying date formats.

Simplify the interface by balanced layout and increased visual hierarchy


Improving accessibility by providing adequate contrast


Improving readability by updating input field labels and unifying date formats.

Solution

Solution

I increased visual hierarchy through contrast, font weights, and sizes.

I improved field labels and interactions for better usability.

The layout was balanced, by adding more space to the design.

I enhanced accessibility with better color contrast and focus states.

I provided clear CTAs.

Time selection was changed with more clear options.

Design process

Design process

Research & Discovery 🔎

Market research: Studying competitors designs for inspiration and industry standards

Conducted in-depth interviews with 10 users

Strategy & Planning📝

Defining goals and problems solutions

Brainstorming & Sketching – Generating ideas based on research findings and defined problems

Wireframing 📋

Low-fidelity wireframes: Sketched early wireframes to establish layout and structure

Early usability testing - Validated navigation and workflows before high-fidelity design

UI Design 🚀

High-fidelity mockups: Creating detailed screens that align with the branding and UI components

Design system: Establishing colors, typography, icons and accessibility

Prototype and testing 🕹

Creating clickable prototype with basic interactions to test navigation flows

Implementing transitions and interactive elements

Prototype usability testing

Before and after

Before and after

Before

Before

After

After

Before

Before

After

After

Before

Before

After

After

Design attempts

Design attempts

What I have learned?

What I have learned?

I paid particular attention to improving accessibility and visual hierarchy. I realized how even small changes (e.g., contrast, font size, labels) can significantly impact the user experience for different types of users. Working on this project showed me how important it is to test and make improvements at every stage – from wireframes to the final interface.

I paid particular attention to improving accessibility and visual hierarchy. I realized how even small changes (e.g., contrast, font size, labels) can significantly impact the user experience for different types of users. Working on this project showed me how important it is to test and make improvements at every stage – from wireframes to the final interface.

All rights reserved © Marta Kuba 2025

All rights reserved © Marta Kuba 2025

All rights reserved © Marta Kuba 2025