SlideShare a Scribd company logo
1 of 41
Download to read offline
Bus Eireann
Redesigning and testing the new design




Eva Daly
Rianne Links
Hilary O’ Shaughnessy
0. Contents
1. Introduction									          3
2. Expert Evaluation								      4
3. Scenarios									             9
4. Redesign requirements 						   21
5. Preparation of prototypes						23
6. Empirical evaluation							    32
7. Overview of results							     36
8. Lessons learned								39
9. Conclusion									            41




                                       2
1. Introduction
The Bus Eireann website “www.buseireann.ie” was first up and running in 2007. Today, despite being Irelands
leading bus and coach travel service, the site receives much criticism from users and travellers alike. A com-
pany’s website is its most important calling card for communicating with existing customers and attracting new
ones. A website with bad features creates a negative image. Our goal with this project is to create a redesign
of the website and to make it more streamlined and user friendly.




                                                                                                                 3
2. Expert
evaluation
To get a better insight of the usability of the website, we used the 10 heuristics of Jakob Nielsen.




                                                                                                       4
1. Visibility of system status
The website has tabs that inform you of what step of the ticket buying process you are at but it does not cor-
respond with the actual steps being followed. The tabs are not easily viewed as other tabs are more visible
when you do the task. As you can see in the screenshot below, the red indicate ticket types and are very vis-
ible but above are the stages tabs which are less prominent. This is visually confusing. The stages buttons do
not allow you to option to return to a stage once selected. If you wish to do this you will need to start all over
again at the homepage.




2. Match between system and the real world
The system uses language that is of the real world, mostly. However, at times it uses language that seems to
official. For example “Every care has been taken to ensure accuracy in the compilation of this timetable. It is
recommended that this timetable is used in conjunction with the Journey Planner.” could be said more clearly
and in less formal language.


3. User control and freedom
As mentioned, when you want to go backwards in a process, you will not be able to and will have to begin
again. When one makes errors in the system, the language used is clear but the number error in the pop up
screen is somewhat alarming and unnecessary, as shown in the screenshot. Most people will not understand
this. So undo and redo are in turns unavailable and confusing.




                                                                                                                     5
4. Consistency and standards
There are multiple ways to reach the same Journey Planner from the homepage. The Journey Planner is
sometimes called ‘Journey Planner’, sometimes ‘Plan your Journey’ and sometimes ‘Search Journey Planner’.




1. Journey Planner -> Journey planner in main menu
When you do this, you will go to Journey Planner screen, as you can see below.


2. Timetables -> Journey Planner -> Search Journey Planner
When you do this, you will go to an in between page some text about how the journey planenr works and a
link to the real Journey Planner.


3. The ‘Plan your Journey’ widget on the homepage of the website
This widget is a simplified version of the Journey Planner and can be also be used to plan a journey. When
you click ‘Plan your Journey’, you will go to the real Journey Planner’.




5. Error prevention
When you start the Journey Planner, you have to fill in the place where you want to depart from and the place
where you want to go in the ‘From’ and ‘To’ fields.


When you start typing your departure city, it will give list of suggestions of all the bus stations in this city. When
you are not familiar with the location you want to take the bus from, you might just want to depart from the
main bus station. In this dropdown menu of suggestions, it is not possible to see which bus station is the main
bus station, they are arranged in alphabetical order.




                                                                                                                    6
When you are choosing your destination, it also gives a list of suggestions when you start typing your destina-
tion city. However, these suggestions don’t take the ‘from’ location into account. Even if there is no bus con-
nection available between the departure location and a bus station, it will still be shown in the suggestion box.
This is the result:




6. Recognition rather than recall
When you visit the Bus Eireann website for the first time, some of the functions are not clear enough to imme-
diately know what it means. For example, what is the difference between ‘Quick ticket’ and ‘Plan your journey’
in the main menu?


7. Flexibility and efficiency of use
When you are on the Bus Eireann homepage and you want to buy a ticket, local knowledge is needed as
you cannot enter specific locations in the text box and have to choose from a dropdown menu of only town
names. Cities and bus stations are not supplied in the drop down menu. Novice users to the the site may not
have the specific information need.




                                                                                                                  7
Also, on the homepage, you are given the option to ‘Plan your Journey’. When you enter your details here
you are brought to a page that shows you possible times and connections for your journey. However if you
wish to buy a ticket of your selected journey there is no link to “buy”, to buy your ticket you must return to the
homepage but in doing this all your information that you entered is lost the website does not remember previ-
ous or frequent actions.




8. Aesthetic and Minimal Design
Initially when you look at the homepage it appears quite cluttered. The most important features “Plan your
Journey” and “Buy your Ticket” are not as prominent as the advertising and information links which take up
nearly 60% of the page. This diminishes the visibility of the websites’ most important links.




9. Help users recognise, diagnose, and recover from errors
As we have mentioned before, the error messages are not very clear. It is a standard browser pop-up and they
contain an IP address, which might confuse users.




10. Help and documentation
There is a lot of documentation available on the website, for example about how Whens my Bus? works, but
also what the different items in the main menu mean. This can be helpful when you are searching for
something specific. In the case of the Bus Eireann, there is so much information available that it is sometimes
in the way of reaching your goal. For example on the Whens my Bus page: there is so much documentation
available that it is hard to see where to click to actually go to Whens my Bus.




                                                                                                                     8
3. Scenarios




               9
Student - Travelling to University
Claire is a student of the University of Limerick who travels from Raheen, on the other side of the city, to the
University by car. Recently her car has been in the garage and has decided to take the bus to college. She
decides to check the buseireann.ie website for available times and stops.


On the home page she sees two boxes to enter information the red box says “Buy your ticket” and the yellow
box below says ‘plan your journey’. Firstly she enters the information into red box as it appears first at the the
top of the page, but her stops do not appear. She then tries entering her information into the yellow ‘plan your
journey’ box and here her stops become available.




                                                                                                                   10
As she is familiar with the route she enters the details the details ‘Raheen - Opposite Raheen Church’ going to
‘University of Limerick Stables’. Here a list of times become available for the morning commute.




The bus she wants to get is at 7.55.


As Claire now knows the route she has to take she then decides to check the timetables for her evening bus
to look at schedule and and stops that are available. She returns to the home page and goes to ‘Timetable’
and selects city town services.




                                                                                                             11
Claire selects her route and is presented with a PDF timetable for her route.




However on the timetable the bus time appears different to the Journey Planner. On the timetable it states
that her bus will leave at 7.27, at a different stop ‘The Hospital’ whereas on the Journey Planner it states her
bus will leave at 7.55 ‘Across from Raheen church. Claire is left confused as to which bus to take.




                                                                                                                   12
The Ryan Family: Family day out
The Ryan family is planning a weekend in Cork. They live in Dublin and have three children.
They log onto www.buseireann.ie to plan their journey and buy tickets. They would like to leave early on Satur-
day morning and leave Cork on Sunday evening.


Mrs Ryan looks at the homepage and sees the option “Journey Planner.” She hovers over the Journey Plan-
ner icon. A drop-down menu is revealed. This has an option for journey planner, which she clicks. This reveals
a page with empty boxes for destinations.


She inputs the dates one month from now, and chooses times, specifically 08.30 for the outgoing journey and
19:00 for the return journey. She chooses the departure option for both.
She also inputs where she will leave from, Busaras and where they will arrive, Cork Bus Station.




                                                                                                             13
She clicks “plan your journey” underneath. She sees that her outward journey will take 3.5 hours and leaves at
8 AM. The return journey will take 5 hours and leaves a half an hour before they hoped to depart, at 18.35.




She uses the “i” icon to see the reason for the longer journey, and it tells her that she has to take two buses,
one to limerick first and then change after a 20 m wait.


She decides this is ok, and chooses the “buy your ticket option icon above the list.
This takes her to the ticket buying page where she has to input how many adults or children are travelling.
Then she has to find out how much it costs, she chooses 2 adults and three children and sees it cost is
€87.86.
She notices that there is an option for family return tickets, so she chooses that to see if she can get a deal.
The family ticket is €43.70.


She decides to add the ticket to her basket. Then she has to click “step 2” to buy the ticket, she is issued with
warnings about only getting on and off at selected stops.


She is asked to input the family name, Ryan, and is told she must give a full name and then she chooses
proceed to payment and has to input her details. Up to this point the process has taken 13 steps.




                                                                                                                   14
Mattias: A foreigner who comes to Ireland
Mattias from Germany has a week off from work and has decided to go visit his friend in Galway, Ireland. He
is going to fly to Dublin and is planning to take the bus from Dublin to Galway. He wants to know which bus he
can take, if this bus leaves from the airport and at what time he will arrive in Galway.


He decides to visit the buseireann.ie website. On the home page of the website he sees ‘Journey planner’ in
the main menu.




This is exactly what he needs and he decides to click on it. He enters ‘Dublin Airport’ in the ‘from’ field and a lot
of suggestions appear.




                                                                                                                  15
He chooses the first one ’Dublin Airport (Atrium Road)’. In the ‘to’ field he types ‘Galway’ and again a lot of dif-
ferent suggestions appear. The first one is called ‘Galway Bus station’. He thinks this is the main bus station so
he decides to choose this one. but is not sure so he decides to check out the map. He fills in the date using the
calendar and types the time of departure from the airport. He clicks ‘Plan your Journey’.


He goes to the next screen where he can see different bus routes on different times and with different durations
and bus changes.




                                                                                                                   16
He wants some more information about the first route, so he clicks the blue ‘i’ icon. More information about this
route appears and he can now also see where he has to change buses and how long he has to change be-
tween busses. He decides to choose this route and wants to buy a ticket. He figures it will be easier to buy his
ticket online instead of at the bus station when he will probably be in a hurry. He can’t find an option to buy the
ticket in the Journey Planner. After some looking around on the website, he finds the ‘Quick ticket’ option and
decides to go there. This is indeed where he can buy his ticket. He has to fill in his departure and arrival sta-
tion again, because it didn’t save it in the Journey Planner. In the ‘from’ field, he can now only choose ‘Dublin
Airport Direct’, but he thinks this might be the same station as the one he used in the Journey Planner: ’Dublin
Airport (Atrium Road)’. In the ‘to’ field, he can only choose the city Galway and not the individual stops, so he
decides to do that. He wants to buy a single ticket because he doesn’t know when he will go back to Germany
yet, but this seems impossible.




                                                                                                                    17
Mark works at a webdesign company and is going on a business trip to London for a couple of days. He is fly-
ing from Shannon Airport and is planning to take the bus there, so he can leave his car at home. he decides to
visit the BusEirrean website to see which bus he has to take and at what time.


On the home page of the website, he sees a banner with the option to take a bus to and from different airports
in Ireland.




                                                                                                            18
He decides to click here. He now sees a list of all the airports in Ireland and he clicks Shannon Airport. He now
is on a page with a lot of text. At the end of the page, there are several busses that stop at Shannon Airport.
Since he lives in Limerick, he chooses bus 343 from Limerick to Shannon. A PDF file opens with the
timetable of the bus. This is very useful, but he his not sure how up-to-date this timetable is, because it looks
a little outdated.




                                                                                                                    19
4. Redesign
requirements
Based on the scenarios, we isolated a few major issues with the site that we think we should address in a
re-design.




                                                                                                            20
Conflicting Information
In most of the scenarios, passengers were offered conflicting information regarding price and travel options
that were very confusing. This problem was impossible for the user to resolve within the site.




Outdated information
The site has information that is outdated or seems outdated. Sometimes you are led to PDFs with timetables
that are dated, others are dated three years ago. There is no assurance that these timetables are up to date
and the design is radically different to the rest of the interface and can lead users to believe there is an error.




Problems with the assumption of local knowledge
The site assumes that the passengers have extraordinary amounts of local information for every route and
bus-stop in the country. Without this knowledge one has to guess which stop to go to, or use resources out-
side of the site to find out what stop to go to. The site also gives repeated warnings to the user that any errors
are not fixable so this makes the choices more important.




Interrupted Flow
Regardless of which scenario you follow, the flow or the user experience pathway is never straightforward.
Many times links are dead or a user cannot reverse out of a decision. In order to see all the options available,
the user has to jump around the site and follow varying pathways. For example, looking at journeys does not
reveal price and means returning to the homepage to check prices through another option. The icons indicat-
ing progression through a task are poorly located and not obvious.




                                                                                                                      21
5. Preparation
of prototypes
Once we finished our expert evaluation, we set about doing a co-operative evaluation, which would involve
creating prototypes and getting real world users of the site involved in the process.




                                                                                                            22
Sketches & flowchart
To prepare, we made rough sketches and outlined what we thought needed to be changed. We also made an
overview of the menu structure of the current website. As you can see in the flowchart shown below, there is a
lot of overlap between different menu items. In the improved flowchart on the next page, you can see how the
navigation structure is going to change.


Current structure of menu




                                                                                                            23
New structure of menu




                        24
Changes implemented in prototypes
Using the conclusions from the heuristic evaluation, we made a lot of changes to the Bus Eireann website.
Here, we will eleborate more about the most important ones.


Feedback system
We made the feedback system clearer by changing the size and placement of the notices for the user to
indicate what step of the process of buying a ticket he is now, using large boxes that appeared coloured to
indicate what step the user is now. During the process of buying a ticket, we made important information more
visible and at the top of the page. For example, the journey the user has chosen is now visible during the
whole process.


Journey planner & Buy your ticket in one
In the current website, the Journey planner and the option to buy a ticket are two different functions where you
have to start all over again when you’ve planned your journey and you want to buy this. In the prototype, the
Journey planner and the option to buy a ticket are one process. A user is able to plan his Journey and then im-
mediately buy this journey. This improves the flow of the website.


‘Basket’ function
In the prototype we have added the basket function. Journeys can be added to this basket and can then be
bought. This has a couple of advantages: you can add a journey to the basket and then buy it later. You can
add a first journey to the basket and then look up another journey and add this to the basket too. You can also
see an overview of all the journeys that you want to buy, where it is also possible to delete the journeys that
you don’t want anymore.


Improved map function
We fixed the map function to allow users to locate their stop, as it was not functional before. We also highlight-
ed the choice that user had chosen in a different colour for ease of visibility.


Different ticket types
We replaced the special ticket options into the ticket options page. They were formerly large headings that
said “student” or “family” and led you to another page. We integrated them into the buying process. We also
adapted the information button beside them where you can hover over for more information about that specific
ticket type.


Whens my Bus?
We made the “Whensmybus” function more visible on the website, as this is a unique selling point of Bus
Eireann that deserves to get more attention. It now has a personalizable widget on the homepage and has its
own item in the main menu.




                                                                                                                  25
Paper Prototyping
We then made to paper prototype with all the new features included. Some visuals of this prototype:




 Watch a video of the full paper prototype on https://vimeo.com/54306590


                                                                                                      26
Our Reasons for Paper Prototyping:
1. Allowed us to visually map the user flow.
2. Facilitated further discussion on the design and the problems we found.
3. Allowed us to make errors and show to others before we progressed to a medium fidelity prototype.
4. Helped us to decide how to address the issues we experienced when doing the heuristic evaluations.




                                                                                                        27
Medium fidelity prototype
Our medium fidelity prototype is browser based, created in HTML, CSS and Javascript. This, and the fact that
we used the look & feel of Bus Eireann made it that people really experienced it as the Bus Eireann website.
We made all the pages that were necessary for the user tests. These pages were: the homepage, the com-
plete Online Ticket Desk, the timetables and the ‘Whens my Bus?’ page.




    Take a look at our prototype on http://linksr.richie.idc.ul.ie/prototype/




Printscreens




The Home page with the Buy your ticket box and the Whens my Bus? box




                                                                                                               28
The first page of the Online Ticket Desk where the suggestions with the main bus station are shown
  when you start typing in the field.




When you click the ‘map’ icon, the map appears on top of the page. Search for a location and the map
tells you the closest bus stops.


                                                                                                       29
The second page of the Online Ticket Desk. Look at the journeys that applied to your search. Click the ‘i’
icon for more information about a journey.




The third page of the Online Ticket Desk. Select your ticket type. See more information about a certain type
by hovering over the ‘i’ icon.



                                                                                                               30
6. Empirical
Evaluations
An overview of the user tests. How did we prepare the user tests? What were the results?




                                                                                           31
The test
During the empirical evaluation we did the user test with 5 participants. A test took approximately 45 minutes
per user. We arranged every participants in the week before the test, using time slots. This way we were able
to take our time per participant and the participants didn’t have to wait for us to be done with the previous
tester.




Results tasks

Task 1: Look up the times for a bus closest to 7:30 AM from Dublin Busaras to Limerick
For this task, we wanted the users to use the timetable function. All of our 5 testers used the Online Ticket
Desk and filled in that they want to buy a ticket from Dublin (Busaras) to Limerick.


This shows us that people usually use the journey planner to see what time the bus leaves. They seem
unaware of the timetable function or they prefer not to use this function.


Task 2: You want to take a bus from Limerick. Find the bus stop closest to you. You are in William
Street.
Most of the testers were confused with the phrasing of the question. When they tried to complete the task,
they used the Whens my Bus or the Online Ticket Desk functions. We were hoping that they would find the
map function on the first step of the Online Ticket Desk. Eventually, 2 of our testers found the map. The map
icon was not clear enough. The testers didn’t recognize the icon.


Task 3: Buy a ticket from Dublin to Limerick around 11:30 on the 26/12/12 and a return ticket for the
following day. You are a student and you are travelling with an adult.
Every tester was able to complete this task, with a couple of problems along the way:
- When they used the Buy your ticket function on the home page, they were directed to the first page of the
Online Ticket Desk, where they had to fill in their information again. Some of them were annoyed by that.
- The Return Journey button was not immediately recognized by all the testers.
- For 2 of the testers it was not clear what ‘departure’ and ‘arrival’ meant in the first step of the Online Ticket
Desk.


Task 4: Buy a ticket for 2 adults and 2 children on 26/12/12 from Dublin to Limerick.
For this task, we wanted the testers to use the family ticket. For 2 children and 2 adults it is cheaper to buy a
family ticket instead of a separate ticket for each person. Only one of our five testers found the family ticket.
Every other tester just selected 2 adults and 2 children. This shows us that the family ticket is not visible
enough for people to notice this option.




                                                                                                                      32
Task 5: Find out the arrival times of your next bus. Your bus route is 304 and your stop is Bus Station
in
Limerick
For this task we wanted the testers to use the Whens my Bus function to find the real time bus information. It
was not clear enough what the difference between the timetable and the Whens my Bus function is. Testers
were not aware that Whens my Bus contains real time bus information.


Task 6: Buy a single tickets for 2 separate journeys on different days.
- From Dublin to Limerick (main station) on the 26/12/12 at 8:00.
- From Limerick to Dublin (main station) on the 26/12/12 at 12:00.
For this task we wanted the testers to book 2 separate tickets in one transaction using the ‘Plan another jour-
ney’ button. 4 out of 5 testers did not find this button and booked one journey and then went back to the start
to book the other journey. The ‘Plan another Journey’ button appears when you add the first journey to the
basket. This button was small and could only be seen when you scroll down the page.




Results questions

Before the test


How often do you travel with Bus Eireann?
All of the testers have travelled with Bus Eireann before. Two of them travel with Bus Eireann once or twice a
week and the other 3 testers travel with Bus Eireann a couple of times per year.


Have you ever used the Bus Eireann website before?
All of the testers have used the Bus Eireann website before.


Have you had any difficulties with the Bus Eireann website before?
Some of the testers had problems with the Bus Eireann website before. Mentioned problems were:
- Have to open a PDF file to see the timetables
- Having to enter too many details for a booking
- Missing real time bus information
- It’s hard to navigate


After the test


What did you like about this website?
- Testers found the website easy to navigate. Testers found the menu very clear. On participant mentioned:
“The website is well laid out and very straight forward. A real improvement!”




                                                                                                                  33
- A new function that they liked was the option to print a journey. They were pleased with the Whens my Bus
function which was already an existing function but we made it more visible.


- One tester commented on the different returns and single ticket that you can choose. He was very happy
with that.


- The testers were happy with the layout of the Online Ticket Desk because of the use of clear buttons, big text
and different coloured text for important information.


Did you have any problems during the test?
- In the process of buying a ticket, testers had to fill in certain information twice. This took time and some of the
testers were frustrated by that. Buying a ticket took longer that they wished it would take.


- Some testers commented on the fact that you sometimes have to scroll down to find important information.
This makes it hard to find. Important functions should be more visible and higher up on the page.


Would you like to add any other comments?
- One tester suggested a mobile friendly app with real time GPS information.
- One other tester suggested to add more payment methods, for example PayPal.




                                                                                                                  34
7. Overview of
results




                 35
Positive feedback
The participants were very positive about some parts of the prototype:


- Testers commented that the Main Menu was clear and easy to use.
- When testers used the map function, they were able to find the locations searched for. They were very posi-
tive about this tool.
- The steps of the process were clear and visible. Testers commented that it was clear where they were in the
process and how long it would take before they bought the tickets. Testers commented that the site was “clear”
and uncluttered.
- The steps of the process were clear and visible. Testers commented that it was clear where they were in the
process and how long it would take before they bought the tickets. Testers commented that the site was “clear”
and uncluttered.




Room for improvement
There were also a couple of features on the prototype that could be improved, according to our test results.


Disruption of the flow
When you fill in the ‘Buy your Ticket’ function on the homepage, you go to the first step of the Journey Planner,
where you have to fill in the same information again. This disrupts the flow.


       Possible solution
       The “buy your ticket” widget on the homepage should save your information and immediately show you
       the possible bus journeys (the second step of the journey planner).


Information
Some of the functions were insufficiently marked. For example, the “Plan another Journey” was not visible
enough and users had to scroll down to find the option. This led them to miss it and return to the homepage to
book another journey, making their process twice as long.


       Possible solution
       The Plan Your Journey option will be more visible and prominent. All the vital information will be acces-
       sible without scrolling.


Inconsistency (1)
The “i” information icons operated differently on different pages. In the ticket buying options list, the icon
showed ticket information (eg. what a family ticket is) when you hovered over the icon. In the ‘journey over-
view” page, the “i” had to be clicked to reveal information. This was confusing for some testers.




                                                                                                                 36
Possible solution
      To solve the information icon confusion, we can make two “I’ icons that do not look too alike. (There is
      too much information to have the hover function work for both “i” icons).
      The detailed information bus icon will now be a “see every bus” icon and the “i” on the ticket function will
      remain a classic “i” icon and have a hover function.


Inconsistency (2)
When filling in the date of your journey on the homepage, you have to choose your date from different drop-
down boxes. When you do this in the Journey planner, you can choose your date in a calendar widget. This
should be consistent.


      Possible solution
      The calendar widget will function for all date choice options, because it is quicker to use and you can
      see which day is on which date.


Inconsistency (3)
It was not clear enough what the meaning of some of the functions were. People confused “When’s my Bus”
with timetabling information. “Whensmybus” offers real time information. This was often not recognised by the
testers.


      Possible solution
      Timetables will remain timetables and the “Whensmybus” feature will become “Real Time Busses”.


Inconsistency (4)
Although people were happy that the timetables were included in the website instead of PDFs, they were dif-
ficult to understand.


      Possible solution
      The timetables could be redesigned to be read like the old PDFs but on the webpage, as people are
      used to this format.




                                                                                                                 37
8. Lessons
learned




             38
Heuristic evaluation
Scenarios are really helpful at mapping the user flow. Simply numbering the stages that the family went
through for example, gave valuable information as to the complexity and timing of a task without any errors.
Using the 10 heuristic was useful to recognize problems on the website as it is difficult to ensure that you
cover all areas. It also allowed us to group our problems and to see where redesigning one function may over-
lap and solve problems in other areas. It is a quick way to begin discussions about the design and requires no
advance planning.


Disadvantages:
This method doesn’t involve the real users! Moreover, some problems occurring when the system is used in
the real work practice and context cannot be highlighted by expert evaluators.




Paper prototype
The paper prototype was a quick and easy way to visualise our redesign. The use of paper meant that we
could quickly sketch and modify any changes that needed to be made. It enabled us to visually have a bet-
ter understanding of user flow. Having a physical prototype opened up further discussion of the design and
problems we encountered. The paper prototype allowed room for error before progressing on to the medium
fidelity prototype. It helped us improve our approach in addressing the issues users experienced whilst using
the site.




Medium fidelity prototype
Our medium fidelity prototype was very useful during the evaluations because it had the look & feel of the Bus
Eireann website. The users really experienced it as the real website. This is something to look out for too: be-
cause they experienced it as the real website, they forgot that this is a prototype and that not all the functions
are working.
This prototype gave us a good view of the flow of the website. How is the flow of using the Journey Planner
and buying it ticket? Could we improve it even more? This prototype helped us answer those questions.




Evaluation
Before testing the prototype, we had arranged for people to come meet us at specific times to do the test, this
was helpful in the sense that our time was efficiently spent.
Common errors that occurred during the tests were to due to people thinking that the prototype was a
functioning website. In the future we would clarify that it is only a prototype.
During this process we gathered a lot of information through note taking, audio and screen capturing, all of this
documentation let us look back at the tests and have an accurate account of each one. Questions and
feedback were also very helpful giving us a better insight into the users experience.




                                                                                                                 39
9. Conclusion




                40
What we set out to do
When we looked at the website www.buseireann.ie, we decided that the basic functions of buying tickets, plan-
ning where to go and when were somewhat difficult to achieve.


So, we attempted to redesigned elements of the site, we focused the process of planning the journey, buy-
ing a ticket and searching timetables. Overall we wanted the users of the site to experience a clear and easy
pathway to getting to where they wanted to go and to get the information they needed.




What we did
We started our research of the Bus Eireann website with a heuristic evaluation, where we did an expert review
of the website. After that, we wrote several scenarios of different kinds of people with different goals using the
website. With the conclusions of this research, we developed the paper prototype. After that we developed our
medium fidelity prototype, which we used for our user tests.




How it turned out
The project was rich in information making it a valuable learning experience. Our medium fidelity prototype
gave us an excellent insight into potential usability problems can be detected at an early stage before
development is complete. We have understanding of the users’ expectations and impressions of the system.
Through documentation and observation of tasks being performed we gained a better insight into formative
evaluation.


What we learned
Apart from the specific design issues highlighted in the report, we learnt a few key lessons in the process.
During testing it was obvious that what is clear for the designer is not always clear for the user and the user
testing is really helpful to identify blind spots.
The stages of prototyping really helped clarify what needed to be changed as we had many discussions about
what language to use, what makes a good icon, and what the user needs to know at each stage of the pro-
cess. We learnt that users can vary with feedback and methods of achieving tasks so using a few different
types of users can be useful for drawing hasty conclusions.


What is the next step
The next step we would be addressing our feedback and common errors that occurred in the test and resolve
the issues. We would then implement the solutions that we came up with. Once improvements have been
made, we would evaluate the new version of the website in a second medium fidelity prototype.




                                                                                                                  41

More Related Content

Similar to Redesign of the Bus Eireann website

Apps for good entry
Apps for good entryApps for good entry
Apps for good entry
jlew1588
 
Designing for Multi-touchpoint Experiences
Designing for Multi-touchpoint ExperiencesDesigning for Multi-touchpoint Experiences
Designing for Multi-touchpoint Experiences
Jamin Hegeman
 
HCI - Individual Report for Metrolink App
HCI - Individual Report for Metrolink AppHCI - Individual Report for Metrolink App
HCI - Individual Report for Metrolink App
Darran Mottershead
 
Fall 11\' Mstrs Clss Prj 02
Fall 11\' Mstrs Clss Prj 02Fall 11\' Mstrs Clss Prj 02
Fall 11\' Mstrs Clss Prj 02
Damian_Rakowsky
 

Similar to Redesign of the Bus Eireann website (20)

IRCTC Reservations UX
IRCTC Reservations UXIRCTC Reservations UX
IRCTC Reservations UX
 
Bus Time Tracker (Bee App)
Bus Time Tracker (Bee App)Bus Time Tracker (Bee App)
Bus Time Tracker (Bee App)
 
5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey
 
Whatiwishiknew
WhatiwishiknewWhatiwishiknew
Whatiwishiknew
 
Ticketing Application
Ticketing ApplicationTicketing Application
Ticketing Application
 
ABSA Banking App Peer Review.pptx
ABSA Banking App Peer Review.pptxABSA Banking App Peer Review.pptx
ABSA Banking App Peer Review.pptx
 
The Features and Use of Google Maps
The Features and Use of Google MapsThe Features and Use of Google Maps
The Features and Use of Google Maps
 
Kausar Jahan - My Profile & Portfolio
Kausar Jahan - My Profile & PortfolioKausar Jahan - My Profile & Portfolio
Kausar Jahan - My Profile & Portfolio
 
Apps for good entry
Apps for good entryApps for good entry
Apps for good entry
 
Apps for good entry
Apps for good entryApps for good entry
Apps for good entry
 
Web pub paper 2 (UX)
Web pub paper 2 (UX)Web pub paper 2 (UX)
Web pub paper 2 (UX)
 
Designing for Multi-touchpoint Experiences
Designing for Multi-touchpoint ExperiencesDesigning for Multi-touchpoint Experiences
Designing for Multi-touchpoint Experiences
 
Mobile first 2-27_14-slidesonly
Mobile first 2-27_14-slidesonlyMobile first 2-27_14-slidesonly
Mobile first 2-27_14-slidesonly
 
Sheffield 'Better by Digital' website improvement project update - 29 October...
Sheffield 'Better by Digital' website improvement project update - 29 October...Sheffield 'Better by Digital' website improvement project update - 29 October...
Sheffield 'Better by Digital' website improvement project update - 29 October...
 
Student Process Book
Student Process BookStudent Process Book
Student Process Book
 
Indian Railways Circular Journey Ticket Booking App
Indian Railways Circular Journey Ticket Booking AppIndian Railways Circular Journey Ticket Booking App
Indian Railways Circular Journey Ticket Booking App
 
PFCU.org UX Review by BloomCU
PFCU.org UX Review by BloomCUPFCU.org UX Review by BloomCU
PFCU.org UX Review by BloomCU
 
Asre 5
Asre 5Asre 5
Asre 5
 
HCI - Individual Report for Metrolink App
HCI - Individual Report for Metrolink AppHCI - Individual Report for Metrolink App
HCI - Individual Report for Metrolink App
 
Fall 11\' Mstrs Clss Prj 02
Fall 11\' Mstrs Clss Prj 02Fall 11\' Mstrs Clss Prj 02
Fall 11\' Mstrs Clss Prj 02
 

Recently uploaded

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 

Recently uploaded (20)

Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 

Redesign of the Bus Eireann website

  • 1. Bus Eireann Redesigning and testing the new design Eva Daly Rianne Links Hilary O’ Shaughnessy
  • 2. 0. Contents 1. Introduction 3 2. Expert Evaluation 4 3. Scenarios 9 4. Redesign requirements 21 5. Preparation of prototypes 23 6. Empirical evaluation 32 7. Overview of results 36 8. Lessons learned 39 9. Conclusion 41 2
  • 3. 1. Introduction The Bus Eireann website “www.buseireann.ie” was first up and running in 2007. Today, despite being Irelands leading bus and coach travel service, the site receives much criticism from users and travellers alike. A com- pany’s website is its most important calling card for communicating with existing customers and attracting new ones. A website with bad features creates a negative image. Our goal with this project is to create a redesign of the website and to make it more streamlined and user friendly. 3
  • 4. 2. Expert evaluation To get a better insight of the usability of the website, we used the 10 heuristics of Jakob Nielsen. 4
  • 5. 1. Visibility of system status The website has tabs that inform you of what step of the ticket buying process you are at but it does not cor- respond with the actual steps being followed. The tabs are not easily viewed as other tabs are more visible when you do the task. As you can see in the screenshot below, the red indicate ticket types and are very vis- ible but above are the stages tabs which are less prominent. This is visually confusing. The stages buttons do not allow you to option to return to a stage once selected. If you wish to do this you will need to start all over again at the homepage. 2. Match between system and the real world The system uses language that is of the real world, mostly. However, at times it uses language that seems to official. For example “Every care has been taken to ensure accuracy in the compilation of this timetable. It is recommended that this timetable is used in conjunction with the Journey Planner.” could be said more clearly and in less formal language. 3. User control and freedom As mentioned, when you want to go backwards in a process, you will not be able to and will have to begin again. When one makes errors in the system, the language used is clear but the number error in the pop up screen is somewhat alarming and unnecessary, as shown in the screenshot. Most people will not understand this. So undo and redo are in turns unavailable and confusing. 5
  • 6. 4. Consistency and standards There are multiple ways to reach the same Journey Planner from the homepage. The Journey Planner is sometimes called ‘Journey Planner’, sometimes ‘Plan your Journey’ and sometimes ‘Search Journey Planner’. 1. Journey Planner -> Journey planner in main menu When you do this, you will go to Journey Planner screen, as you can see below. 2. Timetables -> Journey Planner -> Search Journey Planner When you do this, you will go to an in between page some text about how the journey planenr works and a link to the real Journey Planner. 3. The ‘Plan your Journey’ widget on the homepage of the website This widget is a simplified version of the Journey Planner and can be also be used to plan a journey. When you click ‘Plan your Journey’, you will go to the real Journey Planner’. 5. Error prevention When you start the Journey Planner, you have to fill in the place where you want to depart from and the place where you want to go in the ‘From’ and ‘To’ fields. When you start typing your departure city, it will give list of suggestions of all the bus stations in this city. When you are not familiar with the location you want to take the bus from, you might just want to depart from the main bus station. In this dropdown menu of suggestions, it is not possible to see which bus station is the main bus station, they are arranged in alphabetical order. 6
  • 7. When you are choosing your destination, it also gives a list of suggestions when you start typing your destina- tion city. However, these suggestions don’t take the ‘from’ location into account. Even if there is no bus con- nection available between the departure location and a bus station, it will still be shown in the suggestion box. This is the result: 6. Recognition rather than recall When you visit the Bus Eireann website for the first time, some of the functions are not clear enough to imme- diately know what it means. For example, what is the difference between ‘Quick ticket’ and ‘Plan your journey’ in the main menu? 7. Flexibility and efficiency of use When you are on the Bus Eireann homepage and you want to buy a ticket, local knowledge is needed as you cannot enter specific locations in the text box and have to choose from a dropdown menu of only town names. Cities and bus stations are not supplied in the drop down menu. Novice users to the the site may not have the specific information need. 7
  • 8. Also, on the homepage, you are given the option to ‘Plan your Journey’. When you enter your details here you are brought to a page that shows you possible times and connections for your journey. However if you wish to buy a ticket of your selected journey there is no link to “buy”, to buy your ticket you must return to the homepage but in doing this all your information that you entered is lost the website does not remember previ- ous or frequent actions. 8. Aesthetic and Minimal Design Initially when you look at the homepage it appears quite cluttered. The most important features “Plan your Journey” and “Buy your Ticket” are not as prominent as the advertising and information links which take up nearly 60% of the page. This diminishes the visibility of the websites’ most important links. 9. Help users recognise, diagnose, and recover from errors As we have mentioned before, the error messages are not very clear. It is a standard browser pop-up and they contain an IP address, which might confuse users. 10. Help and documentation There is a lot of documentation available on the website, for example about how Whens my Bus? works, but also what the different items in the main menu mean. This can be helpful when you are searching for something specific. In the case of the Bus Eireann, there is so much information available that it is sometimes in the way of reaching your goal. For example on the Whens my Bus page: there is so much documentation available that it is hard to see where to click to actually go to Whens my Bus. 8
  • 10. Student - Travelling to University Claire is a student of the University of Limerick who travels from Raheen, on the other side of the city, to the University by car. Recently her car has been in the garage and has decided to take the bus to college. She decides to check the buseireann.ie website for available times and stops. On the home page she sees two boxes to enter information the red box says “Buy your ticket” and the yellow box below says ‘plan your journey’. Firstly she enters the information into red box as it appears first at the the top of the page, but her stops do not appear. She then tries entering her information into the yellow ‘plan your journey’ box and here her stops become available. 10
  • 11. As she is familiar with the route she enters the details the details ‘Raheen - Opposite Raheen Church’ going to ‘University of Limerick Stables’. Here a list of times become available for the morning commute. The bus she wants to get is at 7.55. As Claire now knows the route she has to take she then decides to check the timetables for her evening bus to look at schedule and and stops that are available. She returns to the home page and goes to ‘Timetable’ and selects city town services. 11
  • 12. Claire selects her route and is presented with a PDF timetable for her route. However on the timetable the bus time appears different to the Journey Planner. On the timetable it states that her bus will leave at 7.27, at a different stop ‘The Hospital’ whereas on the Journey Planner it states her bus will leave at 7.55 ‘Across from Raheen church. Claire is left confused as to which bus to take. 12
  • 13. The Ryan Family: Family day out The Ryan family is planning a weekend in Cork. They live in Dublin and have three children. They log onto www.buseireann.ie to plan their journey and buy tickets. They would like to leave early on Satur- day morning and leave Cork on Sunday evening. Mrs Ryan looks at the homepage and sees the option “Journey Planner.” She hovers over the Journey Plan- ner icon. A drop-down menu is revealed. This has an option for journey planner, which she clicks. This reveals a page with empty boxes for destinations. She inputs the dates one month from now, and chooses times, specifically 08.30 for the outgoing journey and 19:00 for the return journey. She chooses the departure option for both. She also inputs where she will leave from, Busaras and where they will arrive, Cork Bus Station. 13
  • 14. She clicks “plan your journey” underneath. She sees that her outward journey will take 3.5 hours and leaves at 8 AM. The return journey will take 5 hours and leaves a half an hour before they hoped to depart, at 18.35. She uses the “i” icon to see the reason for the longer journey, and it tells her that she has to take two buses, one to limerick first and then change after a 20 m wait. She decides this is ok, and chooses the “buy your ticket option icon above the list. This takes her to the ticket buying page where she has to input how many adults or children are travelling. Then she has to find out how much it costs, she chooses 2 adults and three children and sees it cost is €87.86. She notices that there is an option for family return tickets, so she chooses that to see if she can get a deal. The family ticket is €43.70. She decides to add the ticket to her basket. Then she has to click “step 2” to buy the ticket, she is issued with warnings about only getting on and off at selected stops. She is asked to input the family name, Ryan, and is told she must give a full name and then she chooses proceed to payment and has to input her details. Up to this point the process has taken 13 steps. 14
  • 15. Mattias: A foreigner who comes to Ireland Mattias from Germany has a week off from work and has decided to go visit his friend in Galway, Ireland. He is going to fly to Dublin and is planning to take the bus from Dublin to Galway. He wants to know which bus he can take, if this bus leaves from the airport and at what time he will arrive in Galway. He decides to visit the buseireann.ie website. On the home page of the website he sees ‘Journey planner’ in the main menu. This is exactly what he needs and he decides to click on it. He enters ‘Dublin Airport’ in the ‘from’ field and a lot of suggestions appear. 15
  • 16. He chooses the first one ’Dublin Airport (Atrium Road)’. In the ‘to’ field he types ‘Galway’ and again a lot of dif- ferent suggestions appear. The first one is called ‘Galway Bus station’. He thinks this is the main bus station so he decides to choose this one. but is not sure so he decides to check out the map. He fills in the date using the calendar and types the time of departure from the airport. He clicks ‘Plan your Journey’. He goes to the next screen where he can see different bus routes on different times and with different durations and bus changes. 16
  • 17. He wants some more information about the first route, so he clicks the blue ‘i’ icon. More information about this route appears and he can now also see where he has to change buses and how long he has to change be- tween busses. He decides to choose this route and wants to buy a ticket. He figures it will be easier to buy his ticket online instead of at the bus station when he will probably be in a hurry. He can’t find an option to buy the ticket in the Journey Planner. After some looking around on the website, he finds the ‘Quick ticket’ option and decides to go there. This is indeed where he can buy his ticket. He has to fill in his departure and arrival sta- tion again, because it didn’t save it in the Journey Planner. In the ‘from’ field, he can now only choose ‘Dublin Airport Direct’, but he thinks this might be the same station as the one he used in the Journey Planner: ’Dublin Airport (Atrium Road)’. In the ‘to’ field, he can only choose the city Galway and not the individual stops, so he decides to do that. He wants to buy a single ticket because he doesn’t know when he will go back to Germany yet, but this seems impossible. 17
  • 18. Mark works at a webdesign company and is going on a business trip to London for a couple of days. He is fly- ing from Shannon Airport and is planning to take the bus there, so he can leave his car at home. he decides to visit the BusEirrean website to see which bus he has to take and at what time. On the home page of the website, he sees a banner with the option to take a bus to and from different airports in Ireland. 18
  • 19. He decides to click here. He now sees a list of all the airports in Ireland and he clicks Shannon Airport. He now is on a page with a lot of text. At the end of the page, there are several busses that stop at Shannon Airport. Since he lives in Limerick, he chooses bus 343 from Limerick to Shannon. A PDF file opens with the timetable of the bus. This is very useful, but he his not sure how up-to-date this timetable is, because it looks a little outdated. 19
  • 20. 4. Redesign requirements Based on the scenarios, we isolated a few major issues with the site that we think we should address in a re-design. 20
  • 21. Conflicting Information In most of the scenarios, passengers were offered conflicting information regarding price and travel options that were very confusing. This problem was impossible for the user to resolve within the site. Outdated information The site has information that is outdated or seems outdated. Sometimes you are led to PDFs with timetables that are dated, others are dated three years ago. There is no assurance that these timetables are up to date and the design is radically different to the rest of the interface and can lead users to believe there is an error. Problems with the assumption of local knowledge The site assumes that the passengers have extraordinary amounts of local information for every route and bus-stop in the country. Without this knowledge one has to guess which stop to go to, or use resources out- side of the site to find out what stop to go to. The site also gives repeated warnings to the user that any errors are not fixable so this makes the choices more important. Interrupted Flow Regardless of which scenario you follow, the flow or the user experience pathway is never straightforward. Many times links are dead or a user cannot reverse out of a decision. In order to see all the options available, the user has to jump around the site and follow varying pathways. For example, looking at journeys does not reveal price and means returning to the homepage to check prices through another option. The icons indicat- ing progression through a task are poorly located and not obvious. 21
  • 22. 5. Preparation of prototypes Once we finished our expert evaluation, we set about doing a co-operative evaluation, which would involve creating prototypes and getting real world users of the site involved in the process. 22
  • 23. Sketches & flowchart To prepare, we made rough sketches and outlined what we thought needed to be changed. We also made an overview of the menu structure of the current website. As you can see in the flowchart shown below, there is a lot of overlap between different menu items. In the improved flowchart on the next page, you can see how the navigation structure is going to change. Current structure of menu 23
  • 24. New structure of menu 24
  • 25. Changes implemented in prototypes Using the conclusions from the heuristic evaluation, we made a lot of changes to the Bus Eireann website. Here, we will eleborate more about the most important ones. Feedback system We made the feedback system clearer by changing the size and placement of the notices for the user to indicate what step of the process of buying a ticket he is now, using large boxes that appeared coloured to indicate what step the user is now. During the process of buying a ticket, we made important information more visible and at the top of the page. For example, the journey the user has chosen is now visible during the whole process. Journey planner & Buy your ticket in one In the current website, the Journey planner and the option to buy a ticket are two different functions where you have to start all over again when you’ve planned your journey and you want to buy this. In the prototype, the Journey planner and the option to buy a ticket are one process. A user is able to plan his Journey and then im- mediately buy this journey. This improves the flow of the website. ‘Basket’ function In the prototype we have added the basket function. Journeys can be added to this basket and can then be bought. This has a couple of advantages: you can add a journey to the basket and then buy it later. You can add a first journey to the basket and then look up another journey and add this to the basket too. You can also see an overview of all the journeys that you want to buy, where it is also possible to delete the journeys that you don’t want anymore. Improved map function We fixed the map function to allow users to locate their stop, as it was not functional before. We also highlight- ed the choice that user had chosen in a different colour for ease of visibility. Different ticket types We replaced the special ticket options into the ticket options page. They were formerly large headings that said “student” or “family” and led you to another page. We integrated them into the buying process. We also adapted the information button beside them where you can hover over for more information about that specific ticket type. Whens my Bus? We made the “Whensmybus” function more visible on the website, as this is a unique selling point of Bus Eireann that deserves to get more attention. It now has a personalizable widget on the homepage and has its own item in the main menu. 25
  • 26. Paper Prototyping We then made to paper prototype with all the new features included. Some visuals of this prototype: Watch a video of the full paper prototype on https://vimeo.com/54306590 26
  • 27. Our Reasons for Paper Prototyping: 1. Allowed us to visually map the user flow. 2. Facilitated further discussion on the design and the problems we found. 3. Allowed us to make errors and show to others before we progressed to a medium fidelity prototype. 4. Helped us to decide how to address the issues we experienced when doing the heuristic evaluations. 27
  • 28. Medium fidelity prototype Our medium fidelity prototype is browser based, created in HTML, CSS and Javascript. This, and the fact that we used the look & feel of Bus Eireann made it that people really experienced it as the Bus Eireann website. We made all the pages that were necessary for the user tests. These pages were: the homepage, the com- plete Online Ticket Desk, the timetables and the ‘Whens my Bus?’ page. Take a look at our prototype on http://linksr.richie.idc.ul.ie/prototype/ Printscreens The Home page with the Buy your ticket box and the Whens my Bus? box 28
  • 29. The first page of the Online Ticket Desk where the suggestions with the main bus station are shown when you start typing in the field. When you click the ‘map’ icon, the map appears on top of the page. Search for a location and the map tells you the closest bus stops. 29
  • 30. The second page of the Online Ticket Desk. Look at the journeys that applied to your search. Click the ‘i’ icon for more information about a journey. The third page of the Online Ticket Desk. Select your ticket type. See more information about a certain type by hovering over the ‘i’ icon. 30
  • 31. 6. Empirical Evaluations An overview of the user tests. How did we prepare the user tests? What were the results? 31
  • 32. The test During the empirical evaluation we did the user test with 5 participants. A test took approximately 45 minutes per user. We arranged every participants in the week before the test, using time slots. This way we were able to take our time per participant and the participants didn’t have to wait for us to be done with the previous tester. Results tasks Task 1: Look up the times for a bus closest to 7:30 AM from Dublin Busaras to Limerick For this task, we wanted the users to use the timetable function. All of our 5 testers used the Online Ticket Desk and filled in that they want to buy a ticket from Dublin (Busaras) to Limerick. This shows us that people usually use the journey planner to see what time the bus leaves. They seem unaware of the timetable function or they prefer not to use this function. Task 2: You want to take a bus from Limerick. Find the bus stop closest to you. You are in William Street. Most of the testers were confused with the phrasing of the question. When they tried to complete the task, they used the Whens my Bus or the Online Ticket Desk functions. We were hoping that they would find the map function on the first step of the Online Ticket Desk. Eventually, 2 of our testers found the map. The map icon was not clear enough. The testers didn’t recognize the icon. Task 3: Buy a ticket from Dublin to Limerick around 11:30 on the 26/12/12 and a return ticket for the following day. You are a student and you are travelling with an adult. Every tester was able to complete this task, with a couple of problems along the way: - When they used the Buy your ticket function on the home page, they were directed to the first page of the Online Ticket Desk, where they had to fill in their information again. Some of them were annoyed by that. - The Return Journey button was not immediately recognized by all the testers. - For 2 of the testers it was not clear what ‘departure’ and ‘arrival’ meant in the first step of the Online Ticket Desk. Task 4: Buy a ticket for 2 adults and 2 children on 26/12/12 from Dublin to Limerick. For this task, we wanted the testers to use the family ticket. For 2 children and 2 adults it is cheaper to buy a family ticket instead of a separate ticket for each person. Only one of our five testers found the family ticket. Every other tester just selected 2 adults and 2 children. This shows us that the family ticket is not visible enough for people to notice this option. 32
  • 33. Task 5: Find out the arrival times of your next bus. Your bus route is 304 and your stop is Bus Station in Limerick For this task we wanted the testers to use the Whens my Bus function to find the real time bus information. It was not clear enough what the difference between the timetable and the Whens my Bus function is. Testers were not aware that Whens my Bus contains real time bus information. Task 6: Buy a single tickets for 2 separate journeys on different days. - From Dublin to Limerick (main station) on the 26/12/12 at 8:00. - From Limerick to Dublin (main station) on the 26/12/12 at 12:00. For this task we wanted the testers to book 2 separate tickets in one transaction using the ‘Plan another jour- ney’ button. 4 out of 5 testers did not find this button and booked one journey and then went back to the start to book the other journey. The ‘Plan another Journey’ button appears when you add the first journey to the basket. This button was small and could only be seen when you scroll down the page. Results questions Before the test How often do you travel with Bus Eireann? All of the testers have travelled with Bus Eireann before. Two of them travel with Bus Eireann once or twice a week and the other 3 testers travel with Bus Eireann a couple of times per year. Have you ever used the Bus Eireann website before? All of the testers have used the Bus Eireann website before. Have you had any difficulties with the Bus Eireann website before? Some of the testers had problems with the Bus Eireann website before. Mentioned problems were: - Have to open a PDF file to see the timetables - Having to enter too many details for a booking - Missing real time bus information - It’s hard to navigate After the test What did you like about this website? - Testers found the website easy to navigate. Testers found the menu very clear. On participant mentioned: “The website is well laid out and very straight forward. A real improvement!” 33
  • 34. - A new function that they liked was the option to print a journey. They were pleased with the Whens my Bus function which was already an existing function but we made it more visible. - One tester commented on the different returns and single ticket that you can choose. He was very happy with that. - The testers were happy with the layout of the Online Ticket Desk because of the use of clear buttons, big text and different coloured text for important information. Did you have any problems during the test? - In the process of buying a ticket, testers had to fill in certain information twice. This took time and some of the testers were frustrated by that. Buying a ticket took longer that they wished it would take. - Some testers commented on the fact that you sometimes have to scroll down to find important information. This makes it hard to find. Important functions should be more visible and higher up on the page. Would you like to add any other comments? - One tester suggested a mobile friendly app with real time GPS information. - One other tester suggested to add more payment methods, for example PayPal. 34
  • 36. Positive feedback The participants were very positive about some parts of the prototype: - Testers commented that the Main Menu was clear and easy to use. - When testers used the map function, they were able to find the locations searched for. They were very posi- tive about this tool. - The steps of the process were clear and visible. Testers commented that it was clear where they were in the process and how long it would take before they bought the tickets. Testers commented that the site was “clear” and uncluttered. - The steps of the process were clear and visible. Testers commented that it was clear where they were in the process and how long it would take before they bought the tickets. Testers commented that the site was “clear” and uncluttered. Room for improvement There were also a couple of features on the prototype that could be improved, according to our test results. Disruption of the flow When you fill in the ‘Buy your Ticket’ function on the homepage, you go to the first step of the Journey Planner, where you have to fill in the same information again. This disrupts the flow. Possible solution The “buy your ticket” widget on the homepage should save your information and immediately show you the possible bus journeys (the second step of the journey planner). Information Some of the functions were insufficiently marked. For example, the “Plan another Journey” was not visible enough and users had to scroll down to find the option. This led them to miss it and return to the homepage to book another journey, making their process twice as long. Possible solution The Plan Your Journey option will be more visible and prominent. All the vital information will be acces- sible without scrolling. Inconsistency (1) The “i” information icons operated differently on different pages. In the ticket buying options list, the icon showed ticket information (eg. what a family ticket is) when you hovered over the icon. In the ‘journey over- view” page, the “i” had to be clicked to reveal information. This was confusing for some testers. 36
  • 37. Possible solution To solve the information icon confusion, we can make two “I’ icons that do not look too alike. (There is too much information to have the hover function work for both “i” icons). The detailed information bus icon will now be a “see every bus” icon and the “i” on the ticket function will remain a classic “i” icon and have a hover function. Inconsistency (2) When filling in the date of your journey on the homepage, you have to choose your date from different drop- down boxes. When you do this in the Journey planner, you can choose your date in a calendar widget. This should be consistent. Possible solution The calendar widget will function for all date choice options, because it is quicker to use and you can see which day is on which date. Inconsistency (3) It was not clear enough what the meaning of some of the functions were. People confused “When’s my Bus” with timetabling information. “Whensmybus” offers real time information. This was often not recognised by the testers. Possible solution Timetables will remain timetables and the “Whensmybus” feature will become “Real Time Busses”. Inconsistency (4) Although people were happy that the timetables were included in the website instead of PDFs, they were dif- ficult to understand. Possible solution The timetables could be redesigned to be read like the old PDFs but on the webpage, as people are used to this format. 37
  • 39. Heuristic evaluation Scenarios are really helpful at mapping the user flow. Simply numbering the stages that the family went through for example, gave valuable information as to the complexity and timing of a task without any errors. Using the 10 heuristic was useful to recognize problems on the website as it is difficult to ensure that you cover all areas. It also allowed us to group our problems and to see where redesigning one function may over- lap and solve problems in other areas. It is a quick way to begin discussions about the design and requires no advance planning. Disadvantages: This method doesn’t involve the real users! Moreover, some problems occurring when the system is used in the real work practice and context cannot be highlighted by expert evaluators. Paper prototype The paper prototype was a quick and easy way to visualise our redesign. The use of paper meant that we could quickly sketch and modify any changes that needed to be made. It enabled us to visually have a bet- ter understanding of user flow. Having a physical prototype opened up further discussion of the design and problems we encountered. The paper prototype allowed room for error before progressing on to the medium fidelity prototype. It helped us improve our approach in addressing the issues users experienced whilst using the site. Medium fidelity prototype Our medium fidelity prototype was very useful during the evaluations because it had the look & feel of the Bus Eireann website. The users really experienced it as the real website. This is something to look out for too: be- cause they experienced it as the real website, they forgot that this is a prototype and that not all the functions are working. This prototype gave us a good view of the flow of the website. How is the flow of using the Journey Planner and buying it ticket? Could we improve it even more? This prototype helped us answer those questions. Evaluation Before testing the prototype, we had arranged for people to come meet us at specific times to do the test, this was helpful in the sense that our time was efficiently spent. Common errors that occurred during the tests were to due to people thinking that the prototype was a functioning website. In the future we would clarify that it is only a prototype. During this process we gathered a lot of information through note taking, audio and screen capturing, all of this documentation let us look back at the tests and have an accurate account of each one. Questions and feedback were also very helpful giving us a better insight into the users experience. 39
  • 41. What we set out to do When we looked at the website www.buseireann.ie, we decided that the basic functions of buying tickets, plan- ning where to go and when were somewhat difficult to achieve. So, we attempted to redesigned elements of the site, we focused the process of planning the journey, buy- ing a ticket and searching timetables. Overall we wanted the users of the site to experience a clear and easy pathway to getting to where they wanted to go and to get the information they needed. What we did We started our research of the Bus Eireann website with a heuristic evaluation, where we did an expert review of the website. After that, we wrote several scenarios of different kinds of people with different goals using the website. With the conclusions of this research, we developed the paper prototype. After that we developed our medium fidelity prototype, which we used for our user tests. How it turned out The project was rich in information making it a valuable learning experience. Our medium fidelity prototype gave us an excellent insight into potential usability problems can be detected at an early stage before development is complete. We have understanding of the users’ expectations and impressions of the system. Through documentation and observation of tasks being performed we gained a better insight into formative evaluation. What we learned Apart from the specific design issues highlighted in the report, we learnt a few key lessons in the process. During testing it was obvious that what is clear for the designer is not always clear for the user and the user testing is really helpful to identify blind spots. The stages of prototyping really helped clarify what needed to be changed as we had many discussions about what language to use, what makes a good icon, and what the user needs to know at each stage of the pro- cess. We learnt that users can vary with feedback and methods of achieving tasks so using a few different types of users can be useful for drawing hasty conclusions. What is the next step The next step we would be addressing our feedback and common errors that occurred in the test and resolve the issues. We would then implement the solutions that we came up with. Once improvements have been made, we would evaluate the new version of the website in a second medium fidelity prototype. 41