Wednesday, April 13, 2011

Web Development Report -- Design Approve to Maintenace

Design Approve :

The design meeting proposal will send to Management board for approval. If it is not approved, the design team needs to review the design again according to the board's comments and make modification until Management board is satisfy with the final design. It may take 2 to 4 weeks in order to complete.


Web Development :

The web development process will begin once the design is approved. Depending on the design requirements on the multimedia contents, it will take about 100 - 150 hours to complete the first prototype with part of the functions. A team with two programmers from the IT department will conduct the development work.  The development team will correct problems found by the internal test group and continue to work on the remain functions until the final release is coming out. It will take up to 200 - 300 hours to complete on this phrase.


Prototype :

The first prototype will be test by the internal test group in order to find out any bugs or things need to improve. For example, browser compatibility. The findings will feed back to the web development team, the web development team will correct the problem and resend for internal test group to test. The internal test group will continue to test each prototype release until the final release is coming out.


Launching :

When the final release is coming out, the external consultant company will test and review (usability and accessibility) the final release and provide report on it (takes one week). The report will send back to the development team for further enhancement. The development team will modify the design according to the report and resend to the external consultant company for final review. After this, the website will be launch for public use.

Maintenance :

The IT team will taken the main role for website daily administration and maintenance. The update content will be coming from the sales team and will modify into the website by the wed administrator.

Web Development Report -- Inital Design

Initial Design : 

Story boards
  • Mission Statement : EFU website will provide a platform for customers to review and book on special travel package, hotel and flight for a variety of destinations around Hong Kong.

  • The initial Navigation Diagram will be as follow :-















  • The initial Page Layout  for the main page is shown as below

This layout format will be use as the template for other pages, this may make the website looks more consistence.


  • Design meeting has held in order to finalize the initial Navigation, Page layout, colour scheme, multimedia usage and accessibility.
    • Navigation
      • A good navigation system should make the visitors easy to find the content they need (Ralph, 2011). From the initial navigation diagram, the system is very straight forward. Home page contains of sub pages which related to the main tasks. All the tasks are use texts rather than picture which is search engine friendly. The content is not mixed up in different pages and visitor should not have confusion during their navigation.
    • Page Layout
      • The main page layout template which will be use for other sub pages. The top, left-side and bottom bars will quickly direct the visitor to the related page. Common font with various size is used so it will give the visitor a familiar environment for browsing. Buttons will be used in the booking pages for booking confirmation. Tab is consider as the top bar at the very beginning but as we want to make the site looks clear and simple, this idea is give up. Some of the links may add to the top bar after the meeting, they are Comments, Testimonial, Site Map. Those links will have added value for the customer for their navigation and satisfaction.
    • Color Schemes
      • By browsing around the internet, orange is very common for travel agency website. Therefore we will take this "ORANGE" color as the main color for the site. White color will be the background color and it can contrast out other colors more easily. All the button or fonts will be in Blue color which harmonious with the Orange color (buzzle.com, 2010)
    • Multimedia usage
      • Images, animation, audio and video are common media use in website. By considering the file size, implementation cost and loading speed (efficiency) of the site. We have decided mainly rely on images as it can contribute to the  classic, professional look (Ralph, 2011). Video and audio (huge size) will only be use on the Home Page to attract the visitor when they are first visiting our site. Animation may employ in the next project when we want to implement advertisement inside our web. Animation will take too much time to develop and therefore it will prolong the project and increase the cost.
    • Accessibility
      • It is a big concern from the very beginning of the design. The Level 2 (AA) WCAG version 1.0 will be the minimum requirement on this project. It will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these (Wikipedia, 2011). For example, all the links, tabs and buttons can be recognized by the text to speech software so that the people with disabilities can access more easily. Moreover, the font size will not be too small to read.

Tuesday, April 12, 2011

Web Development Report -- Analysis

Analysis :

The What You Say Is What You Get (WYSIWYG) rule is hold for website developing, the more details and discussion at the analysis stage will produce a product which close to the expectation.


  1. The Need :-
    • The purpose of project is to develop a website  for customer to view current special on travel packages as well as current flight and hotel prices for EFC company. In addition, information about a variety of destinations will be provided for customers before they make their booking or visit.
    • As most of the customer will use notebook and desktop to access the site, therefore in this stage we will not take account for the handheld mobile device interface.
    • At this moment, only English version of website will be implement and Chinese version will be add in the future.
  2. The Technology/Standard :-
    • In order to make our website has better accessibility and lower development cost, this project needs to follow strictly on the World Wide Web Consortium's (W3C) web standards and Web Content Accessibility Guidelines (WCAG) (wikipedia, 2011). The XHTML and external CSS  will be used in the development as they are traditional W3C recommended standards which are support by most of the internet browsers (Internet Explorer, Safari, Chrome,etc). The Level 2 (AA) WCAG version 1.0 will be the minimum requirement on this project. By applying the web standards, it will enhance the website popularity by the major search engines (Google,Yahoo).
  3. The Market :-
    • There are a lot of online travel agencies available in the market, by reviewing all those similar sites it is not difficult to figure out the common standards, pros and cons of the industry. By taken account on those findings (layout, contents, color scheme,etc), we can make sure our design are stand out of the crowd.
  4. The Content :-
    • EFC company history and contact information
    • Specials on Packages, Current Flight and Hotel price
    • Destination Information
    • Multimedia elements -- Images, animations, videos and audio commentaries
    • Site Map
    • Customer Comment/Testimonial
  5. The cost :-
    • Domain name cost --> Yearly fee US$10-30
    • Hardware and Maintenance cost --> one addition Windows Web server and data server US5000-7000. Labor cover by existing IT support team. Future content update will be provide by sales team and update on the website by IT support team.
    • Bandwidth cost --> The existing company internet bandwidth can cater for the need, if extra bandwidth is required due to large amount of customers, the cost will be around US100 per month (10M lease line).
    • Development cost (200-300 work hours depend on the amount of pages, multimedia contents)
    • Usability/Accessibility Testing cost -- internal test will be carry out by the IT department 2-3 times on different stages before the final release, final release test will be carry out by a local web consultant company and it will cost about US2000.
    • Advertising cost (10-15% of the company revenue)

Background

Emu Flight Centre (EFC) is an online travel agency based in Hong Kong, its business is mainly provide holiday package, hotel and flight booking for the customers in Hong Kong and nearby area (e.g. Macau, Taiwan, etc.) Due to the high rental cost and low profit for the travel agency business, EFC needs to expand their business online rather than opening more shops. I am the information department manager for EFC and is in charge for this online travel agency website development project.

In this project, we will use the Software Development Life Cycle (SDLC) as a tool for the website development.

There are seven stages for the SDLC Web development (greekinterview, 2008):

  1. Analysis
  2. Initial Design
  3. Design Approval
  4. Web Development
  5. Prototype
  6. Launching
  7. Maintenance.
The What, Why, Who, Where, When and How are the questions I will asked throughout the project.




Introduction

In part C, I am required to product a report outlining the design of a website. I have choose to base my multimedia website on the "Emu Flight Centre" fictional entity.

I need to have a modification for the background of this company as I am an oversea student which have very limit knowledge/exposures for the rural cities in Australia. I will relocate this retail travel agency to Hong Kong and all other situations for this company will be similar to the original assumptions for service customers from all over Hong Kong or nearby areas (Macau, Taiwan).

Sunday, April 10, 2011

Usability Test for travel.com.au

Date :          7 April 2011.
Location :    Software Quality Assurance Lab (an isolated area) -- Palo Alto, US
Facilitator : Lawrence Yuen Lai Wing
Participant : 10 Software Quality Testers


Usability Script  :

Test subjects :-
  1. Navigation of the travel.com.au
  2. Search function usability for the hotel, holiday and flight.
Duration : Total 30 minutes.
  • 15 minutes for user testing on the travel.com.au
  • 15 minutes for questionnaire 
Supplies for each of the participant :
  1. A computer with 2.2 GHz CPU, 4 GB Memory, a 15" LCD and Internet connection
  2. A task list
  3. A questionnaire
Processes :
  1. Facilitator will have a speech with the participants before the test. The speech will make sure the participant understand the purpose of the test -- usability test (2 subjects) for travel.com.au, explanation of the testing procedure -- complete the task list and answer the questionnaire. In addition, the facilitator will give an overview of the testing website before the test start.
  2. Participants use the task list to complete the task.
  3. Participants are filling in the questions for the questionnaire.
  4. Facilitator collect and questionnaires and end of the testing. (eHow, 2011)

The task list is as follow :-
  1. Please complete the following tasks in 30 minutes
  2. Open the browser in your computer and type in the URL http://www.travel.com.au/
  3. Navigate inside this website by your own experience for 5 minutes, try to hit as many as tabs and links possible.
  4. For task 6-7, if you can complete a task within 5 minutes, please go to next task.
  5. Try to search a flight from Sydney to Hong Kong on April 13 and the return flight on April 21 - 5 minutes
  6. Try to search a holiday package for Hong Kong on April - 5 minutes
  7. Try to search a hotel in Kowloon, Hong Kong from April 13 to April 21 - 5 minutes
  8. Complete the questionnaire. - 10 minutes
  9. Test finish. Thanks you for your help.

The questionnaire is as follow :-

1. It is easy to navigate around this website.
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
2. You can always find what you want in this website.
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
3. The loading speed of the web site is good.
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
4. You can search your hotel without problem.
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
5. You can search your holiday without problem
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
6. You can search your flight without problem
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree
7. This is a good online travel agency (OTA) website
    • Totally Agree
    • Agree
    • Neutral
    • Disagree
    • Totally Disagree

This is an unnamed questionnaire and the participant is free to answer the questions.
Question 1-3 and 7 are related to the navigation test subject. Question 4-6 are related to the Search function usability test subject.
The Totally Agree, Agree, Neutral, Disagree and Totally Disagree will carry 5 to 1 points accordingly.


The testing process is completed without any problem, all 10 questionnaires are collected and the result is as follow :-
Question\ParticipantIIIIIIIVVVIVIIVIIIIXXTotal Marks
1 General navigation4454544444   42
2 Content Completeness4344434334   36
3 Loading Speed4443443444   38
4 Hotel Search5544554444   44
5 Holiday Search5544554444      44
6 Flight Search5544554444    44
7 User Satisfaction4444444444   40


The Report :-

From the results of the questionnaire, the test subject for navigation on travel.com.au only get the score of 79% and the search function usability for Hotel, Holiday and Flight get the score of 88%. It is very obvious that participants are very satisfy with the search functionality for this site but not too surprise with the overall navigation of this site.

All the participants are experience computer software testers  and they access Internet frequently and have a lot of experience on online travel agency. It is not surprise that this web site has a fair score on its navigation. The result doesn't indicate the navigation is bad for this site but it does meant that the design is only following a very common design practice.

The Search function usability for Hotel, Holiday and Flight has a high score. This implies the search function in this site for the main tasks are well developed and easy to use. The user can easily find out the required information without any issue.

In conclusion, in order to improve the navigation for this site, the developer should pay more attention on the content and the loading speed. Try to use more clear links and text; use too much pictures and animated advertisement will confuse the user on how to find the necessary information and moreover slow down the web site loading performance. The search function usability is good in the main tasks and if the developer can extend it to have a general search function for the site content, it should make the site become more easy to navigate.

Saturday, April 9, 2011

Reference

Part A

Buzzle.com 2010, Is Your Website's Color Scheme Costing You Customers?, viewed 7 April 2011.
http://www.buzzle.com/articles/is-your-websites-color-scheme-costing-you-customers.html

Mardiros.net 2011, Good Web Site Naviation, viewed 7 April 2011.
http://www.mardiros.net/good-navigation.html

Wikipedia 2011, Web accessibility, viewed 7 April 2011.
http://en.wikipedia.org/wiki/Web_accessibility


Part B

eHow.com 2011, How to Write a Usability Test Script, viewed 1 April 2011.
http://www.ehow.com/how_4968896_write-usability-test-script.html


Part C

Buzzle.com 2010, Is Your Website's Color Scheme Costing You Customers?, viewed 7 April 2011.
http://www.buzzle.com/articles/is-your-websites-color-scheme-costing-you-customers.html

Geekinterview.com 2008, SDLC for Web Development, viewed 7 April 2011.
http://www.learn.geekinterview.com/it/sdlc/sdlc-web-development.html

Ralph F. 2011, 12 Website Design Decisions Your Business or Organization Will Need to Make, viewed 8 April 2011.
http://www.wilsonweb.com/articles/12design.htm

Wikipedia 2011, World Wide Web Consortium, viewed 7 April 2011.
http://en.wikipedia.org/wiki/World_Wide_Web_Consortium#Standards

Evaluation of the Travel.com.au

Travel.com.au is a online travel agency website design for  people to arrange their own leisure travel. It is very easy to find by the search engine (like google), the site name is very easy to remember and reach by Australian.

I will concentrate to evaluate this website on its Navigation, Color Schemes and Web accessibility.

Navigation :-

A good website navigation must be well constructed, easy to use and intuitive (mardiros.net, 2011).

The homepage for the travel.com.au is as follow:-


Travel.com.au use top navigation bar as the primary navigation for the whole site. The top navigation bar consists of task page tabs (with self explanation text), this design give a very clear pathway for the user to have a quick access for the important tasks. Moreover, the user can access any page from different page by pressing all those tabs.

There is one important thing that I don't really like is that there is a little confusion on the flight, holiday and hotel part, the user can select the corresponding task from the Home, Flight, Holiday and Hotel tabs. It looks very convenient at the first run, but after a further investigation; I found that by selecting different tabs for the same task (e.g. Flight on Home and Flights tab), the display page will have different contents as shown on the following diagram.



So the user may have chance to miss some important information by selecting the same task in different ways. Moreover, there is no site map for the web site, therefore it all depends on the experience (guess) of the user for operation.

My suggestion will be if possible, the web site should include a site map and a more consistence content on its task from different links.



Color Schemes :-

Color Schemes are the important component for Web design.

This website use the "BLUE" as its primary color, it can donates confidence, security and reliability feeling for its user (buzzle.com, 2010). In addition, it use orange color (harmonious with blue) to highlight the selection button and important notice.

In most of the case, when you select a tab, button, link, etc, the color of the selected area will change or underlined therefore it give a very clear indication for the user on their choice. Moreover, the font's color is in white therefore it has a very strong contrast for the user to read for the content.

The only thing needs to improve in the site may be the consistence of the colors, in some cases the selection button is using blue (when the background is not blue) rather than orange.




Of course, it can still highlight the different between the background and the button but from my point of view, it is non-harmonious. A consistent color schemes within a site will make user feel more comfortable and more easy to navigate.



Web accessibility :-

A good designed website should give equal access to information and functionality for all users (abilities and disabilities).
I have use a text-to-speech software to test this website and the result is very encouraging. Most of the tabs, buttons and links highlighted can converted into the correct speech. It helps the poor sight or blind people to access the information. But for all those graphic-related advertisement, this site is not doing a great job on them. In addition, if you have a poor sight but don't have the text-to-speech software on hand, it is really difficult to access the information as the fonts are too small because of too much information on the same home page.

The site can improve the accessibility by using sub-title bar so that less information is on the same page, therefore the font can be bigger. Moreover, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, the text-to-speech software can help for all those user with poor sight or blind (wikipedia, 2011).

Moreover, if this site can following  the Web Content Accessibility Guidelines (WCAG) 2.0, then it can making the web content more accessible.

Friday, April 8, 2011

The Choice

First of all, I will select the "Emu Flight Centre" as my assessment item for this subject. After reviewing a lot of websites related to online retail travel agency, I have pick out three sites http://www.travel.com.au/ , http://www.zuji.com.au/ and http://www.holidaywizard.com.au/  for final review.

Finally, I will choose the http://www.travel.com.au/ website to review and critique.

Introduction

In part A, I will choose one of four fictional entities   -- "Emu Flight Centre", "Nubbings Hardware","Dudsville Online Community Newspaper" and "Birdsville Swimming Club". Then I will review and critique a website of my choice.