TIANHANG (SKY SOLUTIONS)

Airfare Agency Website Redesign_UX & UI

This project is for a Chinese tech company TianHang (Sky Solutions), an airfare agency website for booking flight tickets, hotels, and othertravel services. 

I worked with a design team (Wendy Di Wang, Cynthia Mao, Shan Shen, Chloe, Chufang, Lvxing, Ricky.)that based at California to redesign the entire TianHang website and mobile application. My responsibility is to research and design the user experience and interface. I built the interfaces for un-log-in “Home” page, B-End "My profile" page and "Join Us" page for the website; promote products and check in pages for our mobile application. 

 

RESPONSIBLE website design

This is my "My profile" page for business members  of the TianHang project in 3 different devices.

the original design

ba7c9048677167.589e5afaef8f6.png

 

Challenge

TianHang was a B2B business model. In China before the advent of online airfare services were popular, thousands of airfare agents existed. People had to go to the agents' office to buy airfare and pay for their bookings in cash at the office. Tianhang was selling airfare to those agents. However, because of the popularity and convenience the Internet, almost everyone began purchasing tickets online, and travel agents became obsolete. 

the original website's Sitemap

problems

  • The structure of the original website is very complex with many scatter type interaction and the use of pages is not efficient. 
  • It lack of cross interaction and full of useless repeated information pages.
  • There are no "recycle paths" for navigating through web pages, of which there were too many. The site is like a maze. 
  • There is no "core flow" for the website, which creates difficulty when browsing.
  • Lack of visual consistency andupsells for major products (only one page mentioned it).

 

the requirements

We have meetings with Tianhang marketing department, product department, technical department and the board every week. We will discuses about the detail of their product definitions, content requirements, UX and UI expectations and technical problems of this product and how we process those information and achieve the goal though our design. This communication is the key that make all the team to speak the same language and deliver the best works.

 

persona and user flowing

Based on the current client's information and marketing research that provided by Tianhang's marketing team, we created multiple personas in different account types and two user flows for each persona to examples paths included sign-up and purchase a membership, searching flight ticket and editing related accounts. 

 

How we make it better

Based on the material from the marketing department and the research we had. We build this site map for our new website to minimizing the user flows for major assignments. I cleaned up 5 major feature lines for all the accounts. As we can see in the new site map below that most of the pages and features of B-End membership, C-End membership, and new users are overlays for their common needs; such as airfare searching and purchase, promote products and customer serves. For the different service that we proved for the different type of membership, we have authority for the website to show or hide the information to then. In this way,  the information that shows to our user is more efficiently and optimized, and the experience of using our serves whatever is purchasing airfares or manage their sale reports are much more easy and clear.

the relationship of two different User account

TianHang decided to open their market to individuals. Therefore, they wanted us to create two different types of accounts, a B-End (for business users) and a C-End (for individual users). The two different account types would show information (airfare price, upsells, account info) differently. One of my concerns was how to make a reasonable and efficient design for two different accounts. Also, the backend engineers had to build them in a short amount of time (three months).Following is our proposal for the relationship with the different type of accounts.

Text Credit : Cynthia Mao

 

the wireframe example

C-End profile, flight searching and purchase, FAQ pages

Visual Style Explorations

From Wireframe to Interface

the interface design result

Interfaces Relationships

 

MOBILE APP DESIGN

the wireframe example

working process

the interface design result

主导航界面并排.png
My Design team: Wendy Di Wang, Cynthia Mao, Shan Shen, Chloe, Chufang, Lvxing, Ricky.
Text Credit : Cynthia Mao