Crazy 8

  1. rearrange the proportion of the booking panel and the content
  2. select the other service while booking
  3. see the ticket info while paying the order
  4. seat-select
  5. when you enter the search info, it can show the time table you can select
  6. including the map
  7. use yellow as a sign of progress
  8. booking panel

Information Architecture

I used card sorting to establish the term and locate where they belong. now I can combine crazy 8 and IA into the a website proposal.

User Story Board

I use story board to set up a scenario which a man/woman in Taipei is trying to book a train ticket online on desktop, to meet his/her friend in Hualien. I based on this scenario to create a prototype to conduct the further test with the real user.

Let's book a Ticket

I use Axure to build a fake website in order to test my idea with real users, here are my thoughts the site can be.

go to Axshare to check the prototype

Make a prototype

Booking process

Once you have entered the information on the booking panel, it shows the one hour timetable and one last train before the time you select.

This page you can select the seat and meal both are optional. it streamline the service TRA provide

Check again the details of your ticket, then you are going to pay the order next.

Fill out your personal details, and choose your payment. And the layout of ticket on the screen is inspired by the ticket in real life.

After booking , users can choose to send the detail info to their mail box that can link to user's calendar..

Before vs. After

I use few screen shot to compare the difference between before and after, redesigned the layout not only means make things prettier, but also make content easier to read and know where you can find the information.