kiu system

Airline e-commerce platform

Product Designer & UI Developer

About Kiu System E-Commerce

Kiu E-Commerce offers B2B software solutions for airlines, streamlining the reservation, check-in, and ticket purchasing processes.

Objective

The primary objective was to redesign and improve the accessibility of Kiu E-Commerce, focusing on creating a more user-friendly and accessible platform for booking and purchasing airline tickets.

Role

As a Product Designer and UI Developer, I was responsible for identifying pain points in the user interface and improving the overall user experience, ensuring the technical implementation of the design updates was seamless and effective.

Reasons for Conducting the Redesign Process

  • The site looked outdated.
  • New branding needed to be implemented.
  • The site wasn't optimized for mobile or responsive behavior.
  • The user experience was confusing at some points of the user flow.
  • Analytics showed that users had trouble completing tasks and didn’t stay on the site.
  • There were poor user reviews on app stores and review platforms.

Redesign Process

1. Discovery & Research
2. Define
3. Ideate
4. UI Design
5. Validation
6. Handoff
7. Monitoring

1. Discovery & Research

Evaluate current design

The initial step involved analyzing the existing web design to identify its strengths and weaknesses. In this case, it was crucial to enhance the website's responsive behavior to ensure proper adaptation across mobile devices and to improve accessibility.

Competitive analysis

I focused on understanding user needs and preferences through interviews and analytics. Analytics played a crucial role in understanding how users interacted with the product. By analyzing the duration of use and the number of screens visited, I identified key pain points. This data really helped shape my suggestions on where we should concentrate our redesign efforts. Additionally, I conducted a competitive analysis to further refine our strategy.

Competitive analysis & New market trends benchmarking examples

2. Define

Set Clear Goals

  • Enhance the booking experience and the purchase of additional services such as extra luggage, sports equipment, and special meal selections.
  • Modernize the user interface to align with the new brand identity.
  • Improve booking times.
  • Additional goals include increasing the conversion rates through user-friendly navigation and ensuring that all features are fully functional on all devices to accommodate mobile users.

3. Ideate

Focus on Information Architecture and User Flow

My primary focus was on deeply understanding the existing information architecture and user flow, as technical constraints prevented any structural changes. This thorough comprehension was crucial for identifying key areas that needed significant attention to optimize usability and effectively meet user needs.

Key Pages to Prioritize

Our analysis pinpointed the 'Search Flights' page and the 'Flight Results' page as critical components driving user engagement and conversion rates. By concentrating our efforts on these pages, we aimed to streamline the booking process, reduce user friction, and ultimately increase the overall efficiency of the platform.

5. UI Design

Key Challenges:

  • Overload of information and numerous icons. This results in a challenging user experience, as it can be difficult to quickly discern the most important elements.
  • There is a clear need to prioritize and hierarchize the information presented to make the interface more user-friendly.
  • Simplifying the layout could enhance clarity and focus, making the page more intuitive and less overwhelming for users.
  • A more minimalist approach would not only improve the aesthetics but also the functionality, ensuring that essential options and data stand out more effectively for users making booking decisions.

Initial web platform

example of initial design of page

The result

Validation

Usability testing

I focused on testing the design solutions to ensure they met user needs and project goals. I created detailed prototypes that closely mirrored the final product, allowing us to conduct usability testing with real users. These prototypes served as a critical tool for gathering feedback and observing how users interacted with the designs in a realistic context. Through this testing process, we identified some areas for improvement. This iterative approach allowed us to make data-driven adjustments.

Handoff

To facilitate the transition of the design assets to the development team, I created clear and detailed documentation within Figma, outlining all necessary design specifications, interactions, and visual guidelines. This documentation serves as a comprehensive guide for developers, ensuring they have all the information needed to implement the designs accurately.

Additionally, I coordinated closely with the development team, arranging meetings as needed to clarify any ambiguities and address questions.

Monitoring

The work doesn't end with the handoff. In the Monitoring phase, we continuously track the product's performance to identify areas for improvement. I work closely with the QA team to ensure that the final implementation remains as true to the original design as possible. This ongoing collaboration involves reviewing the product in its live environment, comparing it against the design specifications, and addressing any discrepancies that arise.

Outcomes

Through usability testing, it was proven that the user experience has significantly improved. This validation through direct user feedback underscores the effectiveness of the redesign.

The redesigned booking page was progressively implemented across all client airlines, enhancing the user experience and interface consistency. This initiative significantly improved the booking process, making it more intuitive and efficient for users. My contributions to the booking page were also integrated into the newly launched design.

This redesign has been a key factor in our ongoing enhancements in the airline industry.