Internet booking (IBE) VNA
1. Project Overview
We showed VNA a design idea that matches well with their current design.
Our goal is to create a whole design system that includes standard colors, as specific font and spacing, rounded corners, and clear guidelines for icons that all match branding.
We also want to update the way we design form input elements so they are similar to what other airlines are using.
2. Problem Statement
Color: Change the colors, make it simpler, and increase the contrast.
Icon: The icon's proportions are inconsistent and unbalanced.
Typeface: There are three different typefaces being used.
Spacing: The spacing does not follow standard guidelines
3 .Challenges
All the other pages must use the same color.
Using consistent font.
Adjust the space between elements on the site.
Make the input form look better.
Ensure that all the icons are the same size, and improve their appearance while still using the same style as the icons on the VNA website and keeping the same design look.
1
Review Design
1. Icon:
The icon's proportions are inconsistent and unbalanced.
2. Spacing:
The spacing does not follow standard guidelines
3. Typeface:
Currently using 3 different typefaces:
Diavlo: Typeface from VNA
Bebas: Not included in the brand guidelines.
Montserrat: Typeface on
tactical guidelines.
4. Corner:
The rounded corners on the site are not consistent: Right angles and rounded.
www.lufthansa.com
www.klm.us
5/ Form input: Update single-line text field: UI design trends of airlines globally
2
Solution
1/ Component
2/ High Fidelity Screens
Before
After
3
Refletion
My team designed more
150
Page
(desktop, tablet and mobile)
We made around
90
Component
I learned that learning a lot about something before you start making it is really important.
That way, you can make something great! Even if there's a lot of information, you can take it step by step and stay calm.
I had a great team who helped me a lot and we communicated well.
We faced some challenges, but we worked together and found solutions.
The client was also helpful in answering questions. We made sure to keep everything in place and we all learned from each other.