University of Birmingham Homepage: Authors

University Of Birmingham
Homepage
Authors
Group 6
Dong Hou Dong Hou dxh315@bham.ac.uk

Gavriil Gavriilidis Gavriil Gavriilidis gxg353@bham.ac.uk‎
Manxin Yang Manxin Yang mxy306@bham.ac.uk
Yaqiang Huang Yaqiang Huang yxh384@bham.ac.uk
Zeng Chen Zeng Chen zxc334@bham.ac.uk
Abstract
The basic purpose of this report is to present three low and one high fidelity
prototype of the homepage of the University of Birmingham and after evaluating
them to draw conclusions about whether and why a corresponding real webpage
would be feasible based on the second generation prototype.
University Of Birmingham Homepage
Contents
Authors ...................................................................................................................................... 0
Abstract ..................................................................................................................................... 0
Introduction ............................................................................................................................... 4
Definition of problem addressed .............................................................................................. 4
Review of related work ............................................................................................................. 6
Imperial college London ........................................................................................................ 7
General approach ............................................................................................................ 7
Strengths ........................................................................................................................... 8
Weaknesses ....................................................................................................................... 8
Coventry University ............................................................................................................... 9
Gerneral approach............................................................................................................. 9
Strengths ........................................................................................................................... 9
Weaknesses ..................................................................................................................... 10
Stanford University .............................................................................................................. 10
Strengths ......................................................................................................................... 11
Weaknesses ..................................................................................................................... 11
National Technical University of Athens ............................................................................. 12
Strengths ......................................................................................................................... 13
Weaknesses ..................................................................................................................... 14
The University of MIT .......................................................................................................... 14
General approach ......................................................................................................... 14
Strengths ......................................................................................................................... 15
Weaknesses ..................................................................................................................... 15
The University of Toronto ................................................................................................... 16
Strengths ......................................................................................................................... 17
Weaknesses ..................................................................................................................... 18
The University of Melbourne .............................................................................................. 18
Strengths ......................................................................................................................... 19
Weaknesses ..................................................................................................................... 19
1
Birmingham City University ................................................................................................. 20

Strengths ......................................................................................................................... 21
Weaknesses ..................................................................................................................... 21
The University of Birmingham ............................................................................................. 21
Gerenal approach ............................................................................................................ 21
Strengths ......................................................................................................................... 22
Weaknesses ..................................................................................................................... 23
Peking University ................................................................................................................. 23
Gerenal approach ............................................................................................................ 23
Strengths ......................................................................................................................... 24
Weaknesses ..................................................................................................................... 25
Principle Techniques of Web Design ................................................................................... 25
Conclusions.......................................................................................................................... 28
Analysis of users’ requirements .............................................................................................. 29
Conclusion ........................................................................................................................... 32
First generation prototypes..................................................................................................... 33
Overview.............................................................................................................................. 33
Prototype 1 .......................................................................................................................... 33
Rationale.......................................................................................................................... 33
Functional Description..................................................................................................... 34
Strength ........................................................................................................................... 35
Weaknesses ..................................................................................................................... 36
Evaluation of prototype 1 ................................................................................................ 36
Conclusion ....................................................................................................................... 39
Prototype 2 .......................................................................................................................... 39
Rationale.......................................................................................................................... 39
Strengths ......................................................................................................................... 41
Weaknesses ..................................................................................................................... 42
Conclusion ....................................................................................................................... 45
Prototype 3 .......................................................................................................................... 46
Rational............................................................................................................................ 46
2
Strengths ......................................................................................................................... 47
Weaknesses ..................................................................................................................... 48
Evaluation and conclusion for the first generation prototype ........................................ 52
Second generation prototype ................................................................................................. 52
Evaluation of tools ............................................................................................................... 52
Description of the prototype ............................................................................................... 53
Rationale.......................................................................................................................... 53
Page 1-Home page .......................................................................................................... 53
Page 2-Application:.......................................................................................................... 56
Page 3-Portal ................................................................................................................... 57
Page 4-Library: ................................................................................................................. 58
Page 5-transportation: .................................................................................................... 59
Page 6-Course:................................................................................................................. 60
Page 7-School: ................................................................................................................. 61
Page 8- Jobs: .................................................................................................................... 62
Page 9-academic staff: .................................................................................................... 63
Page 10-City life: .............................................................................................................. 64
A Plan for the Evaluation ..................................................................................................... 66
Description and Rationale ............................................................................................... 66
Against heuristics............................................................................................................. 66
Against personas ............................................................................................................. 70
With users........................................................................................................................ 72
Results and Conclusion for the second prototype .............................................................. 74
Summary.................................................................................................................................. 75
Recommendations................................................................................................................... 76
References ........................................................................................................................... 77
Appendix.................................................................................................................................. 78
3
Introduction
The websites of contemporary higher educational institutions play a crucial role in
many domains of the corresponding universities. Therefore, they need to be well
designed from many different perspectives in order to meet the requirements of the
various stakeholders. Meeting these requirements implies a number of benefits for
the universities, deriving from the stakeholders. Judging by our own experience, we
found that the homepage of the University of Birmingham does not fulfil its students’
requirements and we decided to prototype our own approach as an improvement of
the existing website with regard to the perspective of students.
Definition of problem addressed

We have discovered the particular problems that we met in the homepage of the
University of Birmingham in a big number of other prestigious university homepages.
What we found is that a big number of university homepages fail to attract potential
students, funders or job applicants and are also unable to offer the current students
and staff the desired navigation facilities they need, due to bad design.
More specifically, the problem has to be examined from every stakeholder

perspective so that an ideal university homepage can be designed. After examining a
number of different homepages, the obstacles we have listed for a big portion of
those pages regarding potential students are:
 An easily distinguishable link the intended applicants can click does not exist.
This link should be prominent and should allow them to be transferred to a
page where they will be able to choose whether they are interested in
Postgraduate or undergraduate studies.
 The reputation and the strengths of the corresponding institution are not
easily discerned or in some cases are inexistent. Highlighting this aspect is
immensely important in order to catch the attention of the potential
students and attract them to apply.
 A link leading to the research of the institution, which might be of interest to
prospective students, especially the ones who are considering pursuing a
research based degree, is absent or hard to notice in many cases.
 The opportunities for sport and other forms of leisure activities the university
offers are hidden in most pages or totally absent in others.
 Failure to emphasize the vibrant city life (if it exists) or places in the city that
are of particular interest to students.
 Funding opportunities for students are not highlighted.
4
From the parents’ of potential students perspective apart from the aforementioned
problems, there is the lingual difficulty that is hardly ever addressed. For instance a
couple from a foreign country might be interested in giving their child, which might
be quite young at the moment and may not yet be familiar with the English language,
the opportunity to study in a UK university. If this couple is unable to read text in
English it will be impossible for them to navigate the webpage of a university that
does not offer translation options. Therefore, an institution that addresses this issue
would have a huge advantage against one that does not offer translating options, in
this category of stakeholders.
From current teachers’ perspective the problems differ. In a number of cases we

have noticed that:
 The layout is too messy and it is too difficult to find the link directly to the
modules webpages. It should be highlighted enable teachers to upload slides
more conveniently.
 The course finder is too poor that it takes too much time to find the desired
module. There are not categories of modules that can be used for classifying
the modules based on different departments.
 There is no booking system enabling the teachers to book lecture rooms, car
parks, even books in the library.
 Information about potential project funders (especially the ones that have
been collaborating with the particular university) cannot be found directly in
the homepage.
From current students’ perspective we have encountered the following issues quite
often:
 An unfriendly Layout design. Some webpage links which may provide

important information for current students such as sports, library and
departments are not obvious and at the bottom of the home page. It was a
big challenge for us to locate these links.
 Few useful links provided for current students and poor search engine .For
example, students wishing to enter the website of their departments might
be unable to find the links and also the search engines for colleges and
schools are poor and non-functional. This means there are not many search
facilities to improve the efficiency.
 Some descriptions of these links may be misleading. For example, the
information current students need might be in a link which has a very general
description not exactly including the user’s target result, so the user might
only be able to find the information he seeks by luck.
Potential job applicants would face the following problems in many cases:
5
 Navigation problems. There is no specific link properly named for this

category of stakeholders.
From potential funders’ perspective there are also many difficulties encountered:
 The sponsor cannot find the project he/she wishes to fund directly from the
homepage.
 There is not a specific category set in the home website for funders.
 The funding option is usually hard to discern as it is a small subcategory of
another bigger category, although it is of high importance to the universities.
After taking into consideration all the problems the homepages of various
universities face, with regard to the varying perspectives of the different
stakeholders involved, we will design a new homepage for the University of
Birmingham. However, we are solely interested in the category of students.
Therefore, we will focus only on this perspective and we will ignore the other
stakeholders involved.
Review of related work
In order to settle the problem and design a good homepage for a university, our
group made a decision to do the research in some different domains. Our target is to
find out the problem or the drawback existing on the university home page as many
as possible. We decided to compare some different homepages of university all
around the world. The main topics we considered at the beginning of project are
homepage contents, key parts of university, famous universities and so on.
After having a meeting with our supervisor Bob, we had some ideas originally. We
considered about description of models, background of teachers, materials of model,
speed of example and something like useful information for prospective students. At
the same time, we interviewed some friends whoever in the University of
Birmingham or other universities so that we can get the accurate requirements from
all the potential users.
In addition, we worked together at the first two weeks to browse universities

whichever from UK or other countries, and we had our allocation of work. Each of us
choose one British University and one famous university from other country, for
example, China, Greece, the US and Australia. Besides, we got the good examples of
the groups last year from Bob, so we had read them to prepare our project.
Finally, we used other university website as different identifies like current students,
international students, staffs, parents and social people. The universities, the
homepages of which we have chosen to examine are Imperial College, Coventry
University, Stanford University, National Technical University of Athens, University of
Birmingham, Peking University, MIT, University of Toronto, The University of
6
Melbourne and Birmingham City University. We analysed their advantages and

disadvantages mainly based on the ease that students can find information about
departments and schools, academic staff, admissions, modules, the reputation of
the university, library and sport facilities, entertainment, shopping, night life and
transportation. And after that we worked out the result of these ten different
universities which are shown as below.
Imperial college London
Link: http://www3.imperial.ac.uk/
General approach
There are some useful quick links at the top of the homepage, which users can find it
easily. The homepage also provides distinct and clear classification links for students,
staff or others. The layout is compatible with the real life, and the page has covered
nearly all of the useful information. In a word, the website is very suitable for the
users’requirements. However, there are some disadvantages about the website
shown below.
7
Strengths
 Firstly, prospective students, current students, staff and alumni all can find
the obvious button related to them at the top of the home website easily.
 For prospective students, after clicking the link and enter the page, you can
choose undergraduate or postgraduate. The most important is that all
relevant degree courses are provided with more details including course
structure, course requirements and lecturers.
 “Student profiles” provide a lot of current students and graduates’

information and week plan about university life which can let prospective
students see what a week in a students’ life is like in the university.
 “Admission” provides nearly all of the necessary information and links for
new students to register.
 All the people enter the website can use the library source, but only sign in
can full access to articles and databases. The division may be more
reasonable.
 The operating speed of the website is fast and going well.
 The website provides more ways to interact including YouTube, twitter and
iTunes U which gives more information for students.
 People search engine is an amazing design. It can help us find contact

information about lectures, professors and other students.
Weaknesses
 In the home page we can’t find any links for library, sport, eating and drinking
which may be important for students. And you have to enter “student”, small
links locate at the bottom of this website.
 A lot of videos about the university are posted on the YouTube aiming to help
international students know more about the university. But in some countries
like china, YouTube is blocked.
 No language choices may be not convenient for foreign parents of students to

seek university information for their children.
8
Coventry University
Link: www.coventry.ac.uk/‎
Gerneral approach
The best of the homepage may be the small dropdownlists about Map, Portals, Jobs
at the top, which help users to get access to the frequently necessitates. And it also
provides a lot of links with the relevant pictures, which makes this page more
ornamental. The drawbacks of the homepage are as follows: the interface may be
not coordinate, putting some useful links in the end of the page which may waste
time to search for users.
Strengths
 In the top of the home webpage, “Campus Map” can be used directly in the
website.
 “Portals” also can be directly log in from the home website which is more
convenient for current students.
 “Social media Directory” is a good choice for students to seek information and
interact with each other.
 Hovering links-“EXPLORE THE SITE” and “NEWS” are convenient for students to
choose the website what they want anywhere.
 There is a special column for parents to search information including nearly all of
the necessary data.
9
 For course finder, there is a multi-conditions search engine which may be more
efficient.
Weaknesses
 I can’t find any links for library and sports, it’s really hard to find these useful
links.
 The website of “student” has a lot of reduplicates with the home page.
 No courses catalogue is provided, students have to input the name of the
course and find the information.
 There are no relevant links on tuition fee, entry requirements for
prospective students.
Stanford University
Link: www.stanford.edu/
General approach
The layout of this page is compatible with what users are most familiar with. It
includes a distict search bar on the top right and the emblem of the university on the
top left. In the centre there is a prominent news feed with tabs above it displaying
different categories of the website. The homepage looks very professional and
mostly covers its users needs. However, there are some drawbacks as well which are
mentioned below.
10
Strengths
 There is a distinct “About” link that leads to a wide range of information with
regard to the reputation and the history of the university, the attractions, life
on campus, transportation and maps. Shopping, dining and sports options
can also be found quite easily either by clicking the “Campus Life” or the
“About” link.
 There is a prominent “Admissions” link in the homepage which makes it
convenient for students to find how to make an application.
 It is relatively easy to find the academics (professors, lecturers, researchers
etc) of each department by clicking the “Academics” link and then choosing
the desired department.
 Students can have access to the modules through the “Departments”
category located near the end of the page.
 Most of the module content is freely available.
 The page was available every time it was accessed and loaded at a good
speed.
Weaknesses
 Although the “Campus Life” and “About” links contain a lot of useful and
practical information for students and while both of them can be easily
11
discerned in the homepage, they lack a significant piece of information when

they are clicked; night life choices like bars and clubs.
 There is no direct link in the home page for the sports facilities. The students
have to click in campus life first.
 The link for the library is too small and hidden in the bottom of the page
within the category called “Research”.
National Technical University of Athens
Link: http://www.ntua.gr/index_en.html
General approach
In general, the design of this homepage is very simple. This helps the user navigate
easily and avoid confusion. There are almost no hidden information, apart from the
search bar, and most links are clear and distinct. A very nice background has been
chosen emphasizing the history of the city. In addition, on the top right there is a
language selection option. On the top left side, which is the most prominent area in
websites, an excellent choice has been made showing the symbol of the university.
However, this homepage lacks important information to students such as the life in
Athens. This could be a great point of advertisement of the university, as life in
Athens is pretty vibrant and offers a lot of choices.
12
Strengths
 Simple homepage design helps the students to avoid confusion and

navigate easily in the page allowing them to find their desired links in less
time.
 Excellent background picture selection showing the university which has
been built according to the style of the ancient Greek buildings.
 The history and the reputation of the university are highlighted in the first
link that has the name of the institution “NTUA”.
 Transportation details are available after clicking the aforementioned
“NTUA” link.
 There is also very detailed and helpful information with regard to the
transportation in the city centre and live description of the weather.
These can be found in the link called “Links” (exists only in the Greek
version).
 Access to the pages of the departments and schools can be achieved
without any obstacles, as there is a prominent link called “Academic info”
and when this is clicked the option “Schools” appears amongst others.
 Visitors can have easy access to the modules of each department and to
the topics of these modules.
 Information for the academic staff who teach certain modules can be
13
found in the corresponding module pages.

 The library is easily accessible through the link “services”.
Weaknesses
 The design of the homepage is so simple that it might give the impression
of it being an amateur webpage (lacks professionalism).
 There is no example material of the modules that are taught, freely
available to the visitors. Only the general topics of the modules can be
found.
 There is no information about night life, shopping, touristic attractions
and dining options that the city of Athens offers which would be of huge
interest to potential (and even current) students.
 The links that lead to postgraduate studies are broken in the English
version of the page and work only in the Greek version.
 The link “Links” mentioned in the advantages does not exist in the English
version of the page.
 No information concerning sport activities can be found.
 The search bar has been placed in a spot unfamiliar to most users
and seems hidden. In general most pages have their search bar on
the top right.
 The page has no loading problems but some links are only available in the
Greek version and certain links in the English version are broken.
The University of MIT
Link: http://web.mit.edu/
General approach
The Massachusetts Institute of Technology(MIT) is a private research university in
Cambridge, Massachusetts known traditionally for research and education in the
physical sciences and engineering, and more recently in biology,
economics,linguisticsm and management as well. MIT also has a strong
entrepreneurial culture. the aggregated revenues of companies founded by MIT
alumni would rank as the eleventh-largest economy in the world. in homepage, the
features of a university can be found. it seems the homepage connect with each
other subpages via hyperlink, the homepage of MIT is simple and clearning. the
search engineering in homepage is powerful, it can search people, office and google
mit. Moreover, the image will be changed everyday, and the colour always match
the whole homepage.
14
Strengths
 Group for department, and student move the mouse to the schools,
student can the color of department included in this school turns to be
red.
 The libraries webpage included a lot of useful information, and easy to
search literature
 Also in libraries webpage can find the course reserves
 Student can find the names of the teachers and the modules they teach
from the link of department, but there are no background information
about teachers, only email and phone, nothing else.
 For applicants, it is quite easy to find the link for admissions directly from
the homepage.
 Student can find the details about describe course, and provided the PDF
file to download and print
 Provide some information for parents, as resource, family weekend, and
also parent’s connectors.
 Click the home webpage image, it can directly jump to the Youtube
website page that can introduce the story and research about this image.
Weaknesses
 There is no way to find modules, we are assuming that we want to find
15
the description of modules from home page, Including what we can learn
from it, and what the context of it, about the assessment.
 For potential students, it is hard to find the place there are course
described.
 The scale cannot be change according the different size of computer
screen. For example, in the laptop screen, the website scale is suitable,
but change the big computer screen, the webpage scale just located in
the center not magnify, other place just put blank area.
 The style and format of subpage in MIT is different from the home page,
the student feel jump out of the MIT website.
 A part webpage has multi-language choice, not all of them can be change
others language.
The University of Toronto
Link: www.utoronto.ca/‎
General approach
The university of Toronto is a public research university in Toronto, Ontario,Canada,

situated on the grounds that surround Queen’s Park. it was founded by royal charter
in 1827 as King’s College, the first institution of higher learning in Upper Canada,
Originally controlled by the church of England, the university assumed the present
name in 1850 upon becoming a secular institution. As a collegiate university, it
comprises tewlve colleges that differ in character and history, each retaining
substantial autonomy on financial and institutional affairs. first of all the home
webpage has a webmail system, and show it in a highlight position, and also supply
the portal function for the current students. secondly, the layout of homepage is
very nice, the whole webpage can be divide by a table. it seems a form. Thirdly, the
University of toronto provide information about parents and family in its homepage,
it is very rare in other university.
16
Strengths
 The home webpage has webmail option. For the current students, they
can directly check their email box and login the portal form university
webpage via UTORid/JOINid and password.
 The website provides a lot of information about Visitor, partners and
Alumni. In website can get the online delegation request form, contact
with Visitors’ center and check the list of current memoranda of
understanding and list of student exchange partners.
 The Admissions Tab control provides many program details for different
student. Such as continuing studies and international studies.
 The model research tool can very easy find the model provided from
university of Toronto.
 The libraries provide some tool is very convenience, such as find a
computer, hours and renew. It can be directly found from the libraries
webpage.
 The library search can easy find a lot of foreign article, I use the key word
“hci” to search literature find a lot of foreign article such as Korea,
Japanese and Chinese.
17
Weaknesses
 University of Toronto has a mess homepage, the webpage including a lot

of information, such as admissions, programs and areas, Research,
Campuses, libraries and UOFT news, but the layout is not clearly.
 The Weblogin webpage not forget password option, the webpage of
Weblogin just has log in button, not the choice about forgotten password
button, if current student forgot their password; it is not convenience to
find the password again.
 The student cannot directly find the tuition fee from webpage. The
webpage must open the PDF file, if some browser or some environment
cannot support the PDF file, then they cannot check the tuition fee, and
the tuition fee table is not very clearly to show how many dollars the
international students should pay for.
 The student is very hard to find the model course detail, the tutor, and
the requirements.
The University of Melbourne
Link: www.unimelb.edu.au/
General approach
Generally speaking, the homepage of the University of Melbourne is successful. It
provides most neccessary information on the home page, including the reputation of
university, academic introduction in vedio from the link of Youtube, engage of
university and visitor guidance. It looks perfect when the users browsing. However,
there is no link for loging in, sports and library facilities. It just needs a little more
things to be better.
18
Strengths
 There are five parts shown on the homepage which are ‘Welcome’,
‘Study’, ‘Research’, ‘Engage’ and ‘Visit’. It is very considerate for the users
because it introduces some necessary details on the homepage.
 Using videos to show superiorities of university is a very good idea. There
is a video posted in some parts.
 All the most useful relevant contents for all users including current
students, potential students, staffs and parents are designed on the
homepage. It is easy to find out the needed information because the
users do not need to find the button which may be hided under an
inconspicuous or an irrelevant label.
 It is a very important to tell everyone where the university is. The
University of Melbourne has its location guidance in a map provided to
visitors.
 Finally, some other useful links are shown together in the corner of ‘Study’
part. Everyone can use it easily.
Weaknesses
 The search box is on the top right corner, which is inconspicuous and hard
to find.
 Too many videos may make the speed of loading become slower. Because
the videos need large virtual space.
19
 Too much content on the homepage which looks littery. No useful frame
to make the layout of homepage more beautiful.
 Generally speaking, as for students who would like to apply PhD degree in
the University, they need to spend more time to find the PhD information
because there is no relevant links on the homepage.
 Latest news and some important events of university are not highlighted,
which may be ignored by the staff and students.
 Transportations to campus are not available on the map.
Birmingham City University
Link: https://www.bcu.ac.uk/‎
General approach
To be honest, the homepage of Birmingham City University is not good enough to
the users. Although it provides some useful information, some of them are repetitive
and confused. In addition, there are ‘Job Hunter’ and ‘Library’ links on the home
page without sports. Finally, the graphical user interface is too simple and unclear
actually.
20
Strengths
 There are two conspicuous search boxes provided. One is for all users to
search the information they need, another is for potential students to
find the courses there are interested in.
 Several outstanding students who are studying at or graduated from the
Birmingham City University are introduced with their photos. It can have
a good encouragement for current students.
 ‘Forthcoming events’ tells the students and the staffs what events will
happen soon.
 The Course Category is useful for the potential students to find the
courses they want.
 Label ‘Saved courses’ is convenient for students who are applying coursed
in the university, they can go into the course description directly except
searching.
 International students can use the ‘International’ link to find the
necessary information.
Weaknesses
 There are two similar labels which are ‘prospective students’ and ‘make a
application’ shown separately. It is undefined.
 Poor webpage layout: It is obviously to see the ‘Youtube’ logo is covered
by the ‘Contact us’ label.
 The information for current students is indistinctive, namely that it is very
hard to find useful details.
 Same guidance appears twice or more on the homepage which is
unacceptable. For example, I can get into the ‘Open days’ via three
different buttons on the homepage.
 Less useful information on the homepage.
 Littery layout makes users confused and impatient.
 Tuition fees link for local home students and European students is not
available to get on the homepage.
The University of Birmingham
Link: www.birmingham.ac.uk/
Gerenal approach
The website of the university of birmingham provides visitors various information
about the university, under the catagory of undergraduate ,visitors can find the link
of course finder,entry requirement ,students support and so on, accordingly under
the catagory of postgraduate provide the same inforamtion of how to apply the
university.Apart from it, the website about has the link of campus map, library, gym
provided for visiitors to look at. Overall,the homepage contains most of the
21
information users would need, but a great amount of information is hidden.

Therefore, users either need to spend a lot of time reading every part of the page or
they are not able to find what they want at all.
Strengths
 In the right corner, we can find several methods of contacting with school
like Facebook, twitter, you tube.
 It is a pretty good design that a gallery of images is involved in the
homepage. Imaging two cases, one of the websites is texted-based and
another one is full of colorful images, which one will you stay longer?
Image- based website enable us demonstrate more information like latest
news happened in the campus, some events and interesting lectures you
can take part in in a few days, also to some extents, image-based link is
an attractive way for designers when they are trying to larger the
probability of visitors exploring the whole website.
22
Weaknesses
 The reputation of school should be highlighted in homepage that can

provide potential students enough information of the university they
want to apply, other the hand, this might be significantly important for
the university to catch more attention of potential students and attract
them to apply.
 A button should be created for changing the language of the homepage
as some of the parents of international students may not understand
English, also want help their to choose an excellent one.
 It is so difficult for us to find link to some specific department, and also
canvas, even if through search engine. We need to remember the link we
need and type in every time when try to login in the system.
 The category of navigator is a bad design that we cannot find the links to
check the information of facilities we need like gym and library.
 There is no button leading us to admission when we trying to find
something like finical aid.
 The search should have categories of what you would like to search, for
example people, curriculums.
Peking University
Link: www.pku.edu.cn/‎
Gerenal approach
The website uses a typical chinese web site layout, which is compactness and put
all the primary information within one page. This may feel convinent for visitors
from china,but not from overseas,cause the western layout is kind of loose.In
order to solve this question, as an international university, it especially build an
English version for English speaking visitors which has western layout.
23
Strengths
 The search should have categories of what you would like to search, for e
xample people, curriculums.
 There is no button leading us to admission when we trying to find someth
ing like finical aid.
 The admission of university is highlighted in the navigator. This would be
very useful for us when we trying to find some services like finical aid.
 It is so nice to have a language switch button leading us to an English versi
on website. In English website the layout is totally different from Chinese
one. This might be a good choice cause in western design, normally; the l
ayout looks in-compact.
 There is an announcement module that shows the latest news and evens
happened in the campus.
 There is an announcement module that shows the latest news and evens
happened in the campus.
 In English version, we can see several pics for potential students to see th
e environment of campus.
24
Weaknesses
 The whole layout is too tight for us to read, adding more pictures should
be highly suggested to make the homepage attractive.
 There should be a link in homepage that provides us a description of
modules that enable us to have a clear understand of what will we learn
in this module and the professor who will teach this module. Other than
that, the background of professor, like which field he interested, the way
to contact him, is also important both for potential students and current
students.
 I failed to find some materials for modules like previous examination
papers, slides or hand out used during module.
 There is no information provided for potential students to know the
reputation of the university.
Principle Techniques of Web Design
Designing an effective web site requires more than just gathering relevant
information and posting it on the web. Like a good paper or research presentation, a
quality web project demands as much attention to the selection, organization, and
presentation of material as to the underlying research itself. Above all, both clarity
and engagement in every aspect of site design should be pursued. Without the first,
the audience is quickly lost. Without the second, their attention is never caught in
the first place.(Umich.edu, 2014)
Below are some concrete suggestions for making a winner website:
Before the beginning of design:

 The audience and the goals of the website have to be considered. There
should be a clear sense of who will be using the site (mostly college
undergraduates) and what kind of experience is aimed to be provided.
What exactly is the accomplishment trying to be achieved here? Why is
this important?
 The site should be planned on paper first. A "family tree" of pages can be
drawn with arrows indicating links. Or a hierarchical outline can be made.
Either way, it is essential that the information, layout the architecture of
your site are organized before an attempt of the vision implementation is
made.
Site Layout:
 Consistency should be strived for. The project has to have an identity, so
all the pages in the project should have a common feel: there should be
consistency among backgrounds, color schemes, navigational tools, and
25
tone of voice. This is especially important if the site's pages are divided up
among several team members. Otherwise, the project will seem like two
or three separate projects lumped together, rather than a single, unified
whole.
 A rich set of links should be provided withing the site. Ideally, there
should be multiple ways for the user to navigate the pages. A good
consideration is to include a prominent 'home' link or icon on each page,
a menu or table of contents, and highlighted links within textual material
to related information elsewhere on the site. Of course, also links to
other pages within the website or elsewhere on the web can be provided.
 Important information should not be hidden. Users don't like to click too
many times to find the information they want -- if information is
particularly important, it should be made accessible up front. On any
given page, as with a newspaper, the top left corner is the most
prominent. The National Geographic Website is a good example.
The web medium:

 Opportunities for interaction should be provided. How is the site any
different from a traditional print document? How can the reader be
involved in ways that non-digitized texts usually cannot? Interactivity can
be a compelling, innovative means of engaging the reader and creating
experiences that cannot be replicated in other media. Good examples are
the "Make Your Way as an 18th-Century Woman" site on ECE and the
site for the Louvre Museum in Paris
 Text-only pages should be avoided. Ideally, a user should never encounter
an entire screen full of uninterrupted text in browsing your site. Again,
the web medium should be taken advantage of!
 Elegance shouldn’t be sacrificed for pizzazz. Just because images can be
made to fly across the screen does not mean they necessarily should.
Every design element of the site (colors, images, animation) ought to
correspond thematically with the content and goals of the project. The
Enigma site is a representative example.
 A link for every URL that is mentioned in the site should be provided. If
the bibliography or notes include a citation for another website, the URL
should be listedin full, but it should be made 'clickable' as well so that the
user can go directly to the site in question.
The front door:

 Give the site a descriptive title. The title should convey the content of the
site in a concise but engaging manner.The title is how the site will be
identified. Ideally, it should pique the curiosity of users and prompt them
to explore the project pages.
 A brief introduction should be included. This should be part of the site's
home page, and should explain the scope and purpose of the site. Once
users have noticed the title and followed a link to the site, they will
expect quickly to find a further elaboration of the title, a brief paragraph
or two describing what the site is all about and what makes it interesting.
26
The user's eye has been caought with the title; the introduction is the
chance to heighten their interest and persuade them to actually stick
around and explore.
 The site's home page should be made as useful a starting point as
possible. The viewer should be able to see at a glance what the site is
about, how it is laid out, and what kinds of resources and features it
includes. Ideally, all of this information (along with the site title and
introduction) should be visible on a single fast-loading screen that
requires a minimum of scrolling.
Accessibility:
 It is of high importance that the text is legible. The size, color, and font of
all text within the site should be checked to confirm that it can be easily
read. Special attention should be paid to dark or fancy backgrounds that
make text hard to read.
 The platform independence of the site should be ensured. The site should
be viewable on both Mac and Windows machines using either of the
most commonly available browsers, Netscape and Explorer.
 The needs of the viewers should be considered. The bandwidth the site
will require should be thought of. It should be kept in mind that not all
users will have the luxury of an ethernet connection. The memory
requirements of the site should be minimized by compressing images and
other large files. And it is important that all the images have ALT-TEXT
behind them. This makes the site accessible both to low-vision users and
users with slow modems who have turned the images off.
The end game:
 The site should be thoroughly tested. Friends can be called to sit down
and explore the site. They can be asked to think out loud, and they can be
watched as they navigate the site. Do they get lost? Do they have trouble
finding links? Do they have trouble understanding the labels? Do they
understand the prose? Ideally, feedback should be elicited and
incorporated about the site in the course of it being developed as well as
when its nearing completion. The site should be tested both of the most
commonly used browsers, Netscape and Internet Explorer.
 A high level of professionalism should be maintained. Spelling and
grammatical errors should be checked carefully for before posting the
written materials to the web.
Below are some other sources we have also used as advice:

 KNC Guide to Evaluating Websites - a helpful collection of additional
design resources developed especially for this project
 Yale Style Manual - a definitive, comprehensive reference guide to web
style
 Web Design Principles - a very helpful short overview of essential points
to keep in mind in designing a site (CSU Sacramento)
 Bitwalla's Web Design Principles - nine key principles in a nutshell from a
company specializing in web design
27
 Web Design with Style, Ease, and CSS - a helpful primer on webpage
design considerations emphasizing CSS, layouts, and typography
 Angelfire's HTML Library - provides several template-like layout
suggestions for websites
Conclusions
To summary the review of related work we did before designing, we analysed all the
benefits and drawbacks from these ten universities and integrated them onto the
new model which would get rid of the disadvantages. The general problem we found
was that many universities does not have a clear and understandable home page
which may make a confusions to the users. Also, there are some repetitive parts
designed on the home pages. Namely that these universities may fail to attract
potential students, funders and jobs applicants, in addition, they may not supply a
well-designed and expected home page to current students and staffs. So we would
work together and make some improvements based on the problems which are
mentioned above. We also tried to implement some useful and helpful ideas from
the university analysis report. More research work we did, more possible we can
design a great project.
28
Analysis of users’ requirements

Kenny Lindsay “I want to search for some information and materials about my
courses more conveniently and easily”
Description
Kenny Lindsay, 26 years old, is a full time student with a

part-time job, studying BSc economics at University of
Birmingham. He is originally from Scotland and came to
Birmingham in September 2013.
Background He is an undergraduate student who represents the university

table tennis team. So he likes playing table tennis, paying more
Age: 26 attention to the information about sport on the website.
Country: Scotland, UK Also he is a hard-working man, and it’s the first time for him to
get into the University of Birmingham for his undergraduate
Occupation: full-time student, BSc
study, the first time he used the university website was to find
Economics,
out information about the campus of economics. Secondly, he
University of Birmingham with a part-time used the website to register for different courses. Recently, his
job. mainly use of the website is to download PDF and slides from his
modules to review the info and also to prepare for classes in
Technology: Comfortable with advance.
technology:
Scenarios
Office applications, surfing the web,
purchasing online, and email. - When Kenny wants to login the email of university to get
important information about the courses on the laptop,
Main points firstly he has to login in the portal website of the university,
which has wasted time for him. He is a race against time,
- Is an independent person, and earn doing some part-time job.
his own living, so he wants to get - Kenny is a hard-working man, but he also does a part-time
more part-job information on the
job. He needs his tutors’ office time to arrange his schedule
website.
- Is also a sports man, and represent in advance; it is hard for him to search the exact time of his
table tennis teamof the university. So tutors on the website, so he has to give up some chances to
he hope to save time on searching ask questions and go to do his part time job.
timetable and activities of the sport - -Due to doing his job late sometime, Kenny like to surf the
- Is a hard-working person and likes website late at night for study. However, the maintenance
asking questions, wants an easy way of website may case him not to access the website without
to get the available time of the tutor.
any notifications or emails.
Goals
Pain points
- Log in email more conveniently
- Provide an website about the update
- For email, have to login twice is annoying.
timetable of tutors every day.
- Not enough information about tutors’ available timetable
- Put important information button in
leads to a mess of my study.
the obvious position of the home
- No notification for the maintenance on the website is
page.
frustrating and wastes a lot of time.
- Students should have their own blogs
on the website to communicate with
each other.
29
Gavriil Gavriilidis “I want to find what I need easily and fast”
Description
After acquiring his Bachelor’s degree in Chemistry, Gavriil fulfilled

the compulsory military service for his country and is now ready to
apply for postgraduate studies abroad. He is interested in a
Master’s degree in Computer Science and he believes that
education in the UK is more prestigious than in other countries. He
wants to find a university that confirms this reputation and which
also allows him to see the corresponding degrees offered along
with their structure and their respective fees.
Background
As Gavriil comes from Greece, he is used to a vibrant night life and
Age: 24 is interested to learn the respective night life opportunities that the
cities, where each university is located, offer. Apart from that he is
Country: GreeceOccupation: BSc in
extremely keen on sports and especially weight-lifting. Therefore he
Chemistry. Recently fulfilled his
would reject a university that does not provide information about
military obligation
its sport facilities. Accommodation is another essential matter and
Technology: Comfortable with existing he wants to be able to find relevant information the fastest possible.
technology and adaptable to new Furthermore he is highly interested in the employment perspectives
emerging technologies. after graduating from a particular university, as he would like to
apply for jobs in the UK. One last part for which he desires instant
University Homepage Usage: Visits access is the transportation and map information as he has never
university homepages with great been to the UK before.
frequency as he wants to find the most
suitable program for him and apply as A university homepage that would be able to provide all this
soon as possible. information accumulated, but at the same time easily
distinguishable and well organized would attract his interest and
Main points would give the corresponding university a big advantage of
receiving an application.
- Is interested in finding
employment abroad, therefore Scenarios
the reputation of the university
and its graduates’ employability - Gavriil is at home on his PC looking at job posts regarding IT
rates are two key points for him. and he notes down the main requirements of these positions.
- Wants to be able to continue his He wants to be able to access university websites and find fast
sports activities while studying. the content of the MSc degrees related to Computer Science
- Likes cities with vibrant night life. so that he can compare it with the demands of the employers.
- Doesn’t like wasting time - For Gavriil sports constitute a significant part of his life. He
navigating through complex and wants to be able to find fast directly from the homepage,
unhelpful university pages. information about sport facilities that every university offers.
Goals - Gavriil is seriously considering working in the UK after finishing
his studies. Therefore, it is of primary importance to him to be
- Find Master’s programs related to able to find easily information about the reputation of the
CS, see their structure and the university and the rate of employment of its graduates.
employability rates of their Pain points
graduates fast without any
obstacles. - Having to waste too much time in order to find the information
- Easily find information about the that he wants.
sports facilities offered by the - Too complicated homepages overloaded with excessive
universities and the nightlife of unnecessary information to him make his navigation even
the city. harder.
- Be able to find the location of the - In some cases even after spending a significant amount of time
university on the map and he cannot find what he needs.
transportation information - Sport and accommodation links are usually hidden at the
instantly. bottom of the page and as a result he is not always able to
notice them.
30
Manxin Yang
Description
Manxin is a 24-year old undergraduate girl who plans to apply the

computer science of university of Birmingham. She believes that studying
aboard is a good opportunity to improve herself, especially English
language and cultures, while also studying at a prestigious university will
greatly improve her prospects.
She is currently in the first year of her studies for master degree of
computer science.
Before she came to the United Kingdom, she knows nothing about the
Background life in British. She frequently check the website and email from the
University of Birmingham when she waiting her application results, but
Age: 24 she cannot got the information to help her how to adapt the UK life.
Country: China
Occupation: MSc Student in CS Scenarios

University: University of
Birmingham - Manxin is trying to apply a university in UK, she wants to find a
simply way to know the reputation of the university.
Technology: Comfortable with - Secondly, as an international student from china, she needs some
existing technology and documents like CAS and offer from university to help her apply visa.
adaptable to new emerging The whole process needs at least 2 months to complete and she
technologies. needs to be able to track her application process.
- Thirdly, she eagerly wants to find more information about the life on
Main points
campus and the facilities such as gym, library the university can
provide. And also, she is interested to know a lot of information
-Cannot know the reputation of
about local life, like local weather and local temperature.
university from the homepage
- Trace process is difficulty
-want to easy way to know how

to adapt the UK life
Pain points
Goals
-There is no information about the life on campus provided.
-the application should efficiency
-There is no button leading students to application system from home
page
-website should have system to
trace the application process
-She can find the module description, and also the material of the
previous semester.
-the website should provide more
information about life in UK
“I just want to know more about

the life in Birmingham”
31
Conclusion
Initially, we just do brainstorming and make a draft of users’ requirements. New students
apply for the university from UK, China and EU who have the different problems in the
application. Moreover, undergraduate and postgraduate students studied the different
majors may also have varieties of questions in their university life. And also the disabled
students should be considered specially and provided with more complicated help.
Furthermore, students may have different interest, some like playing basketball but others
prefer to swim. The factor should be concerned in our design. Finally, more and more
students intend to travel around EU countries, so the visa information has been a heated
topic among most students.
We based on our analysis of user requirements on the user group we have defined. We
classified the different users into three parts, as follows:
International Students
EU Students
Local Students
Among these students, we also chose both undergraduates and postgraduates. The interest
for us is to seek for the full-time students in academic field. We have tried our best to
select users that can represent most users of our system. Finally, we did our best to work
out the differences during the three user group.
The first category of user would be local students who are quite familiar with the
environment of the university and city life. But they need more information about the
courses, sports and university life. They can get useful information about university through
many ways not just the website. What they want to know online may be where is gym, how
to register and how to seek for a part-time job and so on.
The second category of user would be individuals from European country whose native
language may be English, which reduces a lot of trouble for them. But before they arrive at
the college, the website may be the first choice for them to get some information about the
university and the city.
What they are more concerned about may be student registration, accommodation and the
location of the college. We just want to interview the EU students and know what service
they want in their opinion.
The third category of user is the international students who have a lot of problems such as
language, city life, and accommodation. They has not much experience about studying
abroad. And before coming to the university, they have few ways to get and search
information for solving their problems. What they want may be the main part of the design
of the website. Comparing with the above two groups, they need more help and more
information in the home page of the university.
With these broad categories outlined three user personas that each matched one of the
above categories were drawn up and documented.
32
First generation prototypes
Overview
First prototypes are an essential means of identifying and evaluating potential designs in an
efficient and affordable way. Their fidelity should be sufficiently high to convey the spirit of
the mechanisms through which features will be operated, without requiring the
development of time consuming minutiae.
Three prototypes are presented in this section, each of which has been described and
analyzed. Through our personas, we have three clearly developed use cases, with different
requirements. Therefore, the approach taken was to develop prototypes that were
especially suited to solving the needs of a particular user group. However, those features
that prove especially apt or unsuitable for the other personas will also be identified. Where
appropriate, if the same feature appears across multiple prototypes, numerous potential
designs will be created, so as to maximize the range of options to integrate into future
iterations.
Nielson’s ten usability heuristics will be used to determine the efficacy of the prototypes in
relation to commonly accepted evaluation criteria. Mankoff et al (2002) argue heuristics are
effective because of their “potential to provide quick, inexpensive feedback about the
possible issues”. However, they caution that, without further empirical analysis, heuristics
analysis “does not help to identify which of these issues are real problems and will have a
measurable impact upon usability”. Yet, of the seven inspection methods identified by
Nielson (1994), heuristics are the most suitable for first generation prototypes due to their
ease.
In addition to evaluating the prototypes according to Nielsen’s heuristics, any usability

issues identified will be assigned a severity rating in order to give an idea of which are the
most pressing problems at this stage. Nielsen (1995) writes that severity ratings are crucial
in solving usability problems as they give a definite value which can be used to prioritise
problems and thus simplify decisions about where to allocate resources. They will be used
here; both to identify the features that should be removed and those that should be carried
forward.
Prototype 1
Tool used: mockup
Primary target group: home students
Rationale
We classify the students in the university into three groups including international students,
EU students and Local students. The purpose of the prototype is to develop the system and
33
satisfy their basic needs as far as possible. According to their special requirements, some
functional components and specific design would be added into the website. In a word, the
prototype is aimed to finish the simple design through the scenario.
Functional Description
At the top of the website, you will see the current date and Notification which will show you
alert such as the maintenance of website or some importance information of the university.
On the right, the language button can satisfy your need to choose certain languages.
The logo of the university is located in the left. In the middle, there are four links – Visitors,
jobs, Current Students and staff which are convenient for all people visiting the website.
Then there is a search engine for you to look for all the information on the website.
Under the logo, there are some drop-down lists including study, Research, Department,
News and Events. After clicking the lists, there will be a lot of important links for you. For
study, it is for all students to search information including undergraduate, postgraduate,
international students, students’ life, careers and study, work abroad. “Research” is
designed to show you the achievement of university’s research and also for PhD to find
useful information. Then “Department” shows you the five major categories, students can
select the category to find your major and your college.
The News on the menu bar spreads latest news, university briefs and podcasts to the public.
Also, highlight news is posted under the column and users can find the news every year
(latest 10 year) from the subtitle ‘News Archive’. The button ‘Events’ is next to the ‘News’, it
shows all the university events online. For example, users can get some information from it
about the public lecture, exhibition, sport and performance events. Besides, users can easily
see the important events from the subtitle ‘Highlight’. On the right hand side of webpage
are Library and Sports Centre links which lead to the library and sports webpage directly.
34
Strength
 We have current time on the top of the website which can help visitors to know about
the date every time and everywhere.
 Users can change their language preference at the top right corner.
 Notification help people know about when will be the maintenance of the website and
in time to get the important message from university.
 There are a row of quick links locating in the website for social visitors, current students
and staff.
 For “Study”, ”Research”, ”Department”, ”news”, ”events ”, we set them as a drop-down

list which can provide a lot of useful links for students and staff.
 The library and sports parts are very marked because some students focus on library
and sports facilities.
 The most important part is the Rolling News and Events in the middle of homepage
which can attract people to read.
 Searching engine is provided conveniently to search all the available courses in the
university.
 The five buttons on the menu bar are very clear, everyone can find out their target
35
source easily.
Weaknesses
1. The content of the homepage are insufficient and it can’t provide enough information
for students and staff.
2. Not providing locations and transport information.
3. The interface is not beautiful enough to browse. The users may feel tired when using
the university website.
4. Alumnus cannot get useful information they need from the homepage.
5. Not providing history and achievement introduction of university.
6. The sponsors and supporters are not shown on the homepage.
7. The contact information of university is not provided.
Evaluation of prototype 1
Evaluate using heuristics

Severity ratings conformed to the following key:
0 - don’t agree that this is a usability problem
1 - cosmetic problem
2 - minor usability problem
3 - major usability problem; important to fix
4 - usability catastrophe; imperative to fix
Heuristic Rating Comment
Visibility of System Status 1 No Status provided in the homepage, but it may

be not essential for the system.
Match between System and 1 Users can find what they want easily, and most
Real World components of the system can match the real
world.
36
User Control and Freedom 2 Users has certain freedom to control the process
of browsing but not much, which may make users
confused during surfing the website.
Consistency and standards 0 Homepage provide some main buttons at the top
which include a lot of quick links to the subpage.
It can make the browsing process more
consistency.
Error Prevention 2 No error prevention, such as the search engine.

When users input null into the field, system
should alert users.
Recognition rather than 0 The interface and most components of the

recall homepage are clear to users.
Flexibility and efficiency to 2 Some quick links which is easy to understand are
use provided in the system. And it is an efficiency
component design for users. But the flexibility of
the homepage is not taken into consideration.
Aesthetic and minimalistic 1 The homepage reflect the style of simplicity but it
design may not have a high appreciation. But, this
doesn’t affect users to find the information and
use the system.
Help error recovery 2 Respective functionalities have to be employed

to make sure that no search results or form input
gets lost when the user hits the back button of
the browser.
Help &Documentation 4 No help functions are offered but there are some
descriptions about the GUI.
Evaluate from the perspective of personas

Whenever possible, analysis has been made in relation to a particular persona. Following
this, an evaluation as to how the prototype solves the scenarios for each persona will be
made, before an identification of key recommendations for future iterations.
1 = does not provide a solution to the problem presented in the scenario
37
10 = fully solves the problem presented in the scenario
N/A = not applicable
Suri yang Gavriil Gavriilidis Kenny Lindsay
>Target group An international student An EU student A local student
Scenario 1: Find out about the Find contents of Direct connection to

reputation of university courses fast his email
Rating: 1 4 9
Reason: No reputation of Gavriil cannot find all He often uses email on

University provided to the courses directly. the university website,
the user. Manxin may But he can search and he is able to log in
not know it from courses he wants. It his account including
university website. provides related email without double
course to him after his login. “Current
searching. students” button is
designed above the
menu.
Scenario 2: Track the visa Directly access the Be informed about

application process sports pages teachers’ availability
and office hours fast
7 10 6
Rating:
Reason: She is able to check her Now, he is able to find Kenny is now able to
visa application process all the available sports check tutors’ timetable
through the facilities easily. He can in their homepage
“international students” go to the Sports through the staff
link on the drop down subpage directly by subpage.
list. clicking the sports
button.
38
Scenario 3: Information about Information of University website

campus life and facilities University reputation maintenance
in the university and rate of graduate notification
employment.
Rating: 4 1 10
Reason: It is quite hard for her to He cannot find these Notification is provided
find this kind of kinds of information on the homepage. So
information. She may on the University Kenny can find the
not know which home page website maintenance
subpage it should be in. unfortunately. information
conveniently.
Conclusion
Overall, we work out a first prototype homepage of university which satisfies most
requirements indicated and make the evaluation to improve it. As the consequence of our
work, we implement the library and the sports links obviously on the homepage.
Furthermore, the users can also log in their account and use email directly. After analyzing
the personas and the scenarios carefully, we have list most of the problems and
requirements about how a university homepage should perform. We do some researches
about the evaluation and the heuristics, so that we can classify all the problems and get the
summary more accurately. We declare the severity ratings of scenario conformed to the key
between 1 and 10, it means the problem is solved better along with the number increasing
and ‘N/A’ represents not applicable. In addition, we use a different standard to define the
heuristics from ‘0’ to ‘4’, which ‘0’ represents the excellent work we have done, and ‘4’
means the worst problem has been done in contrast. However, the reputation of university
and the rate of graduate employment are not implemented, we plan to improve them in the
next generation.
Prototype 2
Tool used: mockup
Primary target group: international students
Rationale
As exemplified by Manxin Yang, an international student requires, the university should
highlight their reputation to attract students who do not clearly understand what the
situation of university is. That can make them to know the university and decide which
39
university they will apply. Because the distance, time difference or other reasons the
application process is a long time. The international students are interesting in the
application process. Also if the university can provide some local information or tips to
help student to adapt the local life, it also will promote the favorable impression to the
potential students.
This is a first prototype of the home page of university of Birmingham, the picture in front of
you showing the environment on campus, Through this picture, there is a link leading us to
visit the whole campus, here preparing a campus map for you to find everything you are
interested in about the campus, what facilities have been provided for the students, and is
the information, location, opening time of museums, galleries, gyms. Also the history of the
university of Birmingham is introduced here.
Those buttons listed in the left of webpage are admissions, education, research, community,
campus life respectively.
Firstly, the button of admissions is designed for potential students who want to apply, By
simply clicking any one button under it, a page for admission will show up for you to
discover the information you may need when you list the university of Birmingham as one of
the universities you’d like to choose, the entry requirement is here, the application form is
here, also the reputation of school is also here.
From the second button education we can see all the departments and programs in
university, and when you are trying to access the description of modules, the previous exam
papers or the detail of the teacher interested in, you can always click this button.
The button research here enables students access all the research topics on campus, the
information for each topic covers labs, centres and programs.
Behind the button community, providing diverse community comprising students, faculty,
staff, alumni, parents and more — work together on more than research and education.
Outside of the classroom, student clubs, staff organizations and religious life groups are just
some of the ways community comes together at the Institute.
Life at the Institute is more than just classes and homework — community members pride
themselves on their curricular and extracurricular work in the arts, athletics and more. You
can find the information behind the button of life on campus.
40
Strengths
 The homepage organization is well, including Admissions, education, research, and
community and campus life.
 It is very easy to find the admission information for potential students.
 the homepage is very simple, but the information are structure are very clear, each part
including a big title is the main part that student want to find, each big part also have
some list to link the details information.
 The homepage including a search tool. The search tool can search the intranet and
internet information about the University of Birmingham.
 The search tool default the search engineering is Google; it is very convenience for
student and staff to search some things that they need.
 The webpage has a part is about today’s campus news; it is a kind of campus life for
students and staff. Those news including the staff research result and achievements ,
students life and campus history
 The bottom of webpage including some information about campus such as jobs, facts,
contact information, privacy, legal and cookies policy information.
 The website page has a link that is website feedback, it can help website administrator
to rebuild webpage or improve the webpage.
41
Weaknesses
1. There is no way to find modules from homepage.
2. For potential students, it is not easy to find the place there are course described.
3. The website picture is not very clearly.
4. The color of link bar is the same of background picture, it is not very clearly to look at
what are the link bar write.
5. The webpage have a poor background image. It is just one picture.
6. The top of university website has some blank space, it looks like ugly.
7. In the left part, the todays’ campus news occupy a big part of webpage, it is looks not
balance with right sides.

Visibility of System Status 2 The system status depends on the browser that is
used to load the webpage.
Match between System and 2 The contexts are easy to find and access. The
Real World disadvantage is some of the information hasn’t
been provided.
User Control and Freedom 2 The user has only very limited abilities to take
control of the process. But the good thing is all
elements are modelled onto their own box or
panel, which minimizes the risk of navigating to
42
the wrong area.
Consistency and standards 1 The website does not employ any uncommon
design elements. Experienced internet users
should be familiar with the layout and the design

elements.
Error Prevention - There is no error prevention, as the system does

not check the user input.
Recognition rather than - There are clear distinct buttons that the user can
recall read easily and there is no need for memorising.
Flexibility and efficiency to 2 The website gives only very limited assistance.
use
Aesthetic and minimalistic - The page is very simple and does not contain
design excessive buttons and links.
Help error recovery 1 Depends on the browser of the user: If the user
did an error, he can click the ‘back’ button. But,
of the browser did not cache the forms, the input
is lost.
Help &Documentation 2 No help or documentation link provided.

43
>Target group International students EU students Home student
Scenario 1: Find out about the Easily be able to find Direct connection to
reputation of university about the reputation his email
of the university and
about employability
rates of its graduates.
Rating: 9 7 3
Reason: She is able to know the There are have a The homepage has a
reputation of school minor usability link is go to the student
from the homepage as problem, in account location in
in the right side and top homepage, it cannot Community part, under
of page; a field is added be found about the Students link, but it
to provide background employability is still not conveniently,
of university. information, but in if the fresh student do
the bottom, there are not know the
have a link about job, construction of
in the job webpage, website, they can find
we can found some the place to login their
information about student account.
employability.

10 10 5
Rating:
Reason: Under the category of The clearly The home webpage

admissions, the button information can be cannot directly to show
of application allows gained from the left of the timetable of each
students to trace homepage, under the tutor, but that
44
process of application. campus life, there are information is location

have a link about in tutor information
sports, under this link, link, under the
the student or education label, and it
university member is very clearly to find
can book the court, the way to entrance.
find the open time of
sports centre of
university.
Scenario 3: Find information about Likes cities with Get part-time

facilities on campus, city vibrant nightlife. information form
life and weather webpage
conditions
Rating: 10 1 8
Reason: Some of information The homepage cannot There are have a

like sports, jobs, find the information directly way to find
accommodations are about cities life; just those information from
provided through the give some tips and the bottom of home
link campus life, but advice with local lift, webpage, but the
there still a problem such as the weather location easy be
that a dynamic video of and temperature to ignored.
campus life is needed to help students adapt
give potential students the local life, but not
a clearly understand of very strong
the life they are going to information about
experience. local city’s
information such as
transportation, night
life and shopping
centre.
Conclusion
Overall, the prototype is a practical work for students, it including many function that
pointed by persona of each member such as the reputation of university, to trace
application process, to adapt the local life, to find the sport facility and get the information
of part-time job. However, there are has a lot of problem about layout and cosmetic, the
colour of background is conflict with the menu of link, it lead to some link can be found
easily. Moreover, the layout of functional link are mess work, a few function link are mess
and duplication. All of disadvantage should be fix in next generation prototype.
45
Prototype 3
Tool used: mockup
Primary target group: EU students
Rational
This prototype is primarily scenario-driven and tries to fulfil the user requirements that are
derived from our personas. Our main concern regarding the third prototype was to make it
as simple as possible so that the user would find it easy to navigate. We knew that in the
second generation prototype more features would be added so it was of high importance
that this one would be the simplest possible. We wanted the user to be able to achieve
his/her goals directly from the homepage without having to waste too much time trying to
decode a complex site.
This is a first generation prototype representing the homepage of the University Of
Birmingham. The background of the page is covered by a big picture showing the southern
side of the university and the clock tower. The buttons can be easily identified on the top
and left of the page and there is also a link in the top right side that logs an existing user in
the system and opens a new page that contains the user’s email account, course, marks etc
if he/she is a student. Finally there is a search engine on the right side which the user can
use to search the entire site.
By clicking the sport button the user is redirected to a page showing all the sport facilities,
activities, teams etc offered by the university. Also the reputation of the university and its
performance in sports compared to different UK institutions can be seen from that page.
The admissions button opens a new page with links that the user can click depending on
whether he/she is a postgraduate, undergraduate, international or EU/ home applicant.
After clicking the desired link the program he/she wishes to apply for can be chosen.
The reputation and employability button opens a new page showing the strengths of the
university and provides links to websites that compare the reputation of universities of
Britain and across the world. There are also links providing stats of employability of
graduates depending on their program.
The academic staff button redirects the user to a page where all the academics are listed
based on their corresponding department.
The courses button lists all the available courses in a new page categorized by
undergraduate/postgraduate programs and departments/schools.
The library button redirects the user to the library webpage.
46
The city life button shows a new page with all the opportunities that the city offers for food,
shopping, cinemas, sport, night life, museums and more.
The map info button opens a new page showing the location of the university on the map,
information about transportation in the city, to the university, to nearby airports, bus and
train stations.
Strengths
 Very simple layout with distinct buttons. In this way confusion is avoided.
 Students can login directly from the homepage to their university account/email.
 At the moment a user visits the homepage he/she can form an opinion about the
quality of the university by clicking the Reputation and Employability button.
 Employability statistics based on different disciplines can be found from the
corresponding button.
 Information about the academic staff can be accessed easily.
 Information about the modules and their content can be found instantly by clicking
the Courses button.
47
 All the information about sport on campus can be found by clicking the Sport button
 The Library button is clearly discernible.
 Distinct application button in the homepage simplifies the application overhead
 City life information easily accessible.
 All the transportation concerns that a user might have are solved by clicking the Map
Info Button.
 The location of the university can be found instantly from the Map Info link.
Weaknesses
 No research information can be found.
 The homepage is designed from the perspective of students addressing only their
requirements.
 Excessively simple layout makes the homepage look “non professional”.
 Bad colour choices for the University Of Birmingham title of the page and for the
buttons. The layout is a little dull.
 The sport button is placed above the courses button in a prominent position.
Information about courses though is usually more important to students than
information about sport.
 The “log in” link is coloured blue and is hard to discern from the background.
 Students who are interested in working part-time during their studies cannot find
relevant information.
 No information about accommodation.
 No latest news from the university can be found.

48
Visibility of System Status - The system status depends on the browser that is
Match between System and - The homepage is quite simple containing easily
Real World comprehensible words and it includes a
representative picture of the university
the wrong area.
Consistency and standards 3 There might be a confusion to the user between

the log in link and the admissions button when
he/she tries to access his/her application form.
Apart from that, there are no other
inconsistencies.
Error Prevention - There is no specific mechanism to prevent errors,

but the simple and clear design acts as a shield
against errors.
Recognition rather than - There are clear distinct buttons that the user can
recall read easily and there is no need for memorising.
Flexibility and efficiency to 4 There is no significant separation between

use experienced and novice users. Even if someone is
experienced in using the homepage he is unlikely
to benefit much and accelerate the process.
Aesthetic and minimalistic - The page is very simple and does not contain
design excessive buttons and links.
Help error recovery - When a user has made a wrong choice it is visible
in a natural way, by showing a different page
than the one he/she wanted.
Help &Documentation 2 No help or documentation link provided.
49

>Target group An International An EU student A home student

student
Scenario 1: Find out about the Find contents of Direct connection to

reputation of university courses fast his email
Rating: 10 8 10
Reason: She can find out about By clicking the courses This is feasible through
the reputation of the button Gavriil is the Log In link in the
university very easily redirected to a new top right of the
and fast by clicking the page where after homepage. There is no
corresponding button. making some choices extra need to try to
he can be led to a new find additional pages
page with the before being able to
contents of his log in to his email
desired course can be account.
found.

6 10 7
50
Rating:
Reason: There are two options There is a distinct Can be done via the
which she could believe button called Sport button “Academic
that could lead her to leading to the Staff”. However, he
the tracking of the corresponding needs to open
application process, webpage. additional pages before
namely Admissions and he can access the
Log In. Therefore, it is a information he wants,
point of confusion for as he first have to click
her. the department and
school where the
academic he wants
belong to and then he
is able to find what he
needs. Therefore, this
rating is due to the fact
that time here is the
key factor.
Scenario 3: Find information about Easily be able to find Access the website late
facilities on campus, city about the reputation at night in order to
life and weather of the university and study
conditions about employability
Rating: 7 10 N/A
Reason: There are distinct Can be done directly This cannot be rated
buttons called sports, from the homepage from the prototype in
library and city life. by clicking the question, as it is solely
However there is no corresponding button. a matter of
information about maintainability of the
weather conditions. website.
Conclusion
After evaluating this prototype, we found that it was fulfilling its basic user requirements
and it could constitute the main core of our second generation prototype. Obviously, its
layout and design are too simple and give the impression of an “amateur” page but this is
totally acceptable as it is just a low fidelity prototype and these aspects will be improved in
the high fidelity one. As far as its functionality is concerned, the most important issues that
51
should be taken into account are that more functionality should be added and the conflict of
the user knowing how to track the visa application process should be resolved.
Evaluation and conclusion for the first generation prototype
We built the three different styles of homepage about The University of Birmingham.
According to the existing systems that address the general problems and our own personas
and scenarios, the three homepage we designed, those are including all those requires that
our points out. However, there are also has many problems in each homepage, in the
Prototype 1, we implement the library and the sports links obviously on the homepage, but
that lead to the layout of whole homepage look like mess. In the Portotype2, we build the
homepage meet all the requirements we points out, but the cosmetic and the background is
its Achilles’ heel. In the Prototype3, it was fulfilling its basic user requirements. Obviously, its
design of the home webpage is too simple. After the evaluation those prototype, those
home pages could constitute the main core of our second generation prototype, and all the
drawbacks should be fix in the second generation prototype.
Second generation prototype
Evaluation of tools
Process
We created all the first and second generation prototypes using Balsamiq Mockups. After
creating the first generation prototypes we were based on their evaluation to build the high
fidelity second generation prototype. We included pictures that were downloaded from the
web and used Balsamic Mockups to instantiate the prototype. Finally, we used Microsoft
PowerPoint to unite the homepage with the subpages and to initiate interaction with real
users.
Evaluation of Balsamic Mockups

We concluded that this was the ideal tool to use as it combined creation speed, ease of use
and adequately good quality. Our primary point of agreement was that we wanted to avoid
wasting time in order to learn how to use a program and at the same time be able to
52
produce a high fidelity prototype of satisfactory quality. This software was the one fulfilling
these essential requirements that we had, therefore we chose to use it.
Possible alternatives
One alternative we could have used instead of Balsamic mockups is Adobe Photoshop. This
choice would produce a very high quality prototype. However, we rejected it mainly due to
its steep learning curve in order to be used effectively. This would consume a significant
amount of time and apart from that this great level of quality would be unnecessary for our
purposes.
A second option that we could have implemented is Microsoft Paint. This alternative would
be an easy and fast solution to our problem. However, it was not able to provide us with the
functionality and quality that we needed, so we rejected this option quickly.
There was also the option of MockupBuilder whose interface is very similar to the one
Balsamic Mockups has. However, it produces lower quality prototypes and obviously when
we had to decide between the two we chose the second.
Evaluation of Microsoft PowerPoint

PowerPoint was selected as the tool that would be used to present our prototype to the
users and add interaction to it. There were two main reasons why we chose to use this
program. First of all, all the team members were familiar with it and secondly high level of
functionality was not required. We only wanted to be able to transfer the user to different
pages when certain buttons or links were clicked.
Possible alternatives
Adobe Flash would be a good alternative but unfortunately, not all our team members were
familiar with it. Moreover it would be more complex and it had the capability of adding
extra functionality that we did not need.
A second choice could be LibreOffice Impress. When having the ability to use Microsoft
PowerPoint we found it pointless to use LibreOffice Impress. As far as speed and ease of use
are concerned they would be relatively similar but PowerPoint is more powerful and
provided us with more capabilities. Plus, most of our team members were as familiar with it
as with PowerPoint.
Description of the prototype

Rationale
Although they constitute a very small proportion of total users, those who as a potential student,
current students or graduate students. Therefore, the aim of this prototype was to develop ideas to
make the system as accessible as possible. An emphasis was placed upon making the interface both
as simple and as visual.
Page 1-Home page
53
An assumption was made that for more complex home page. As under the catalogue of admissions,
the button “Application” is designed for potential students to trace the process of application, the
information provided including the profile of students and the status of their application. Also, the
button upon the right side “portal” allows students login in the student system, email account they
have directly, no need to remember all kinds of complex links. What’s more, a link for library is
designed to bring more convenient to students who would like to access the information of library.
It was mentioned before, for potential students, when they are trying to choose the right university
for themselves, they would like to find the reputation of school, the employability after they
graduate from university, the transportation of the whole city and also learn a bit campus life before
coming, all these things can be found from the home page. There are two places related to the
reputation, one of them can be found on the top of the web page,” University of the Year
2013-2014-The times and Sunday times”. The others are at the left part of the web page as ”The
computer science is the first place in UK”. If trying to click it, it will pop up some detail of the
reputation the school has.
As an important part of school life, a link is added to the left part, under the main category of
campus life, the buttons sports, jobs, and accommodations are designed for putting the information
we need in daily life together. Through the button of sports, there always providing some
information on the different sports club, various performance centers on campus. While behind the
button of jobs, here provide a search engine, where the students can search the job they prefer
based on company vacancies, position and salary scale. Also the window set at the down of the
page can provide the local life weather ad temperature for outside students, it can help student to
know the local information, if student want know more information, they can follow the university in
popularly social network.
Apart from that there are three buttons:
 Facts: Facts is a pocket-sized compendium of essential facts about the university of Birmingham.
 Office and services: Through this link, a search engine is provided to quickly get to the right
department and the detail of professor visitor wants.
 Research: Behind the button of research, the information of labs and centers on campus is
provided.
54
The
background
will change
every day to
suitable the This is to highlight the The entrance of portal
campus’s This text box show the
current data, let student reputation of university, for current student, it
news or also including university is very easy to find
staff’s easy to find the special
data such as many kind news and research and login, and easy to
research results and campus set different language
result of deadlines
events
This is the main function Those text and links are This button is for
in university homepage. help students to know the transportation function,
That function can be quick contact information of the students or potential
entrance by those links, university and this website students can easy find the
the part provided many policy about to remember city public transports, and
link is student usually the user cookies and campus building location,
used. Such as sports privacy, also if user has and if click it students also
centre, job, some feedback about can search the place where
accommodation, libraries, university can hand in by students want to go.
course, academic staff and the quick link.
course.
55
Page 2-Application:
This webpage is for the students who are making application of the university of Birmingham. After
logging in from the webpage, the students can found the status now, like in progress, con-offer, or
offer. The students who haven’t own an account also can create one here by clicking the button in
the middle. For the accounts of staff and admissions, the login in button is on the right of the page.
Apart from that there are three buttons:
 Home: This button allows us to reach the home page again.

 Forgotten your password: Visitors are able to reset the password through this link.
 Search engine: Similar functionality to the search engine on the home page.
This is login window for

students who have an This is login window for
account. It is a convenient stuffs who has authorities
way for them to track their to edit the status of
application. potential students.
56
Page 3-Portal
This is a link after clicking the portal from the home page. The password management is added here
to help user to find a solution when they met difficulty like cannot login or forget the password.
Apart from that there are two buttons:
 Problem logging: If user has others problems logging in, they can find this link to report and
research what happen they take.
 Password management: Those quick links are help user to manage password, if student and staff
forget their password, security questions and want change their password, and they can quick
find those function in the left of page.
That notice is help user to

login; only the member of This part is username and
university of Birmingham password in the centre.
can login by user name The basic function of login
and password. contained button and
textbox
If user has others Those quick links are help

problems logging in, they user to manage password,
can find this link to report if student and staff forget
and research what happen their password, security
they take. questions and want
change their password,
and they can quick find
those function in the left of
page
57
Page 4-Library:
In order to help user find the function they want directly, a list in the left is added. Here is more
convenient to access such information like the previous exam papers, special collections. Also two
search engines on the page largely help user find the book they want or the information they need
respectively.
That is the library main This layout is to show the

function in the left of news of library, the
webpage; students can This search function is for
student can quick find the
quick and easy find many search other information
news of library such as
usually use function. Like not including books, it can
some special book is free
the information of library, help student search books,
borrow in a short time. Or
subject information, and meanwhile, they can find
library adds more new
special collections, and other link information
books. And library open
policy. about books, library, and
time during holiday and
literature
usual time.
This part is special for the This is the basic function Those part design for to
current student to design; of library; the search can help student how to using
they can find the exam search many materials the library, when the fresh
papers and answers, the such as e-book, book, student entrance the
account of print in lib, newspaper and magazines. library , they can by this
learning zone, book a The student can easy guide to step by step to
room to discuss, and search those things just by learn how to use and find
portal or webmail. the one search. many information
provided by library.
58
Page 5-transportation:
The page of transportation mainly provide the information of the city that the university belongs to,
imagine when you were trying to apply a university, the location of the city, if it has good
transportation cannot be ignored. A map here provides basic information of what we need on daily
life.
This part provided the
city transportation on
search and campus
search result and the
The part is help student to
map legend, including
use map, and provided
the rout they searched,
some quick links such as
this function like google
visitor information,
map, if the map has
parking and
problems, the user can
transportation
contact the staff to fix
information and other
those problems by email
maps
or link.
This map default is

campus map, it list the
building of campus, the
map can leader student to
find some places they
usually to go and list the
main public traffic points
in the city, give the short
route and nearly bus
station or train station
advices
59
Page 6-Course:
This is the course subpage including some quick links in the left and the efficiency search engine in
the middle of the page. The list of the courses consists of course name, details and UCAS code.
This is the course finder

which helps users to
find their courses. Just
input the course name
and click the “search”
This are some quick button. There are two
links for users to search radio buttons which
some useful information represent
about courses which undergraduate and
they are interested in. postgraduate courses.
Users can just click it to And clicking on the
jump into the subpage “show all course” button
and get information can show all the courses
in the page.
This is the list of

courses. The default one
is all the courses, which
including course name,
details and UCAS code.
When you want to know
more about the course,
you can click the course
name to jump into the
course subpage.
60
Page 7-School:
This is the department subpage including some quick links in the left and the department is divided
into four parts including Colleges, Academic, Support service and university partnership, which help
users to find what they want accurately and conveniently.
The quick links which

includes Academic,
research department,
support services trading
companies, university
partnerships and A to Z
listing are provided in
the left for users.
In the middle, main

department groups with
some details are provided. This provides all of the
Users can search the groups in the university
department which they are which is sorted
interested in according to alphabetically.
the description of these
groups. These details can
help user to find the sort of
the department and then it
will be efficient to get the
information what they
want. 61
Page 8- Jobs:
The jobs subpage has jobs search engine which supplying to the user to search jobs by some special
conditions like job type, hours and title. In addition, some popular concerns are list on the menu bar
in order to classify different kinds of job. The user can find the suitable job for themselves
conveniently and quickly.
Search engine provides

job searching in some Some popular concerns
special conditions to the list on the menu bar in
users, which makes order to classify
more effective. different jobs.
Text field to list all the

available jobs currently
62
Page 9-academic staff:
Academic staff subpage provides all the current academic staffs in the university. It is sorted into
three different parts. Firstly, the user can search the academic staff by the initial of their name.
Secondly, the user is able to see the academic staffs in every different department. Finally, the user
is able to search flexibly by groups on the bottom of page.
Menu bar lists some

important schools and
“others” dropdown list
The users can search the
to list school academic
academic staffs in
staff.
alphabetical order
alphabetical order
directly.
directly.
Academic staffs are list If someone does not

here and users can click know which department
their name to enter their or what is the name of
personal homepage, or tutor, he/she can search
the user can click email here by groups.
to send their email alphabetical order
directly alphabetical directly.
order directly.
63
Page 10-City life:
This subpage is trying to present the vibrant life of the city of Birmingham that would be quite
appealing to potential students. It contains a brief preface at the top with a link leading to a series of
videos of current students talking about their experiences in the city of Birmingham. Apart from that
there are eight buttons:
 Night Clubs: Opens a new window that displays link of the most popular night clubs of the
city
 Bars: Similar functionality to the night clubs button
 Pubs: Similar functionality to the night clubs button
 Sports: A new window is opened, in which details about the top sports events of the city are
displayed, as well as information about the most popular local teams and areas where
people can participate in sports, like gyms, football fields etc.
 Restaurants: A new window opens displaying links with the best restaurants of the city,
which are split in categories, like for example Mexican, Italian, Chinese etc.
 Museums: A list of the local museums appears in a new window. The user can click on
each museum and be redirected to their homepages.
 Cinemas: Shows a list of the most popular cinemas of the city.
 Shopping: A new page opens in which there are lists of the biggest stores split according to
different shopping categories. Below each link there is a map that shows where the store is
located. When the user clicks on a link he/she is redirected to the store’s homepage.
64
A list of the local museums

appears in a new window. The
user can click on each museum
and be redirected to their
homepages.
A new window is opened, in

which details about the top Shopping: A new page opens
sports events of the city are in which there are lists of the
displayed, as well as information biggest stores split according
about the most popular local to different shopping
teams and areas where people categories. Below each link
can participate in sports, like
there is a map that shows
gyms, football fields
etc.alphabetical order directly. where the store is located.
When the user clicks on a link
he/she is redirected to the
store’s homepage.
65
A Plan for the Evaluation
Description and Rationale
We are going to evaluate our second‎generation‎prototype‎based‎on‎Nielsen’s‎Heuristics,‎

against the scenarios derived from the personas and finally against real users. By including
those three different evaluators more credibility is added to the evaluation of our prototype,
compared to using just one method. First we isolated each scenario from every persona and
then used it to assess how well our prototype could solve the problem presented in this scenario
by‎using‎a‎scale‎from‎1‎to‎10.‎Then‎we‎used‎Nielsen’s‎Heuristics‎and‎finally‎we asked real
users to evaluate our work. We designed very simple questionnaires asking the users to
mention all the good points, bad points and improvements that could be made in our prototype.
Below every method of evaluation is explained in detail.
Against heuristics
Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability

engineering method for finding the usability problems in a user interface design so that
they can be attended to as part of an iterative design process. Heuristic evaluation
involves having a small set of evaluators examine the interface and judge its compliance
with recognized usability principles (the "heuristics").
In general, heuristic evaluation is difficult for a single individual to do because one

person will never be able to find all the usability problems in an interface. Luckily,
experience from many different projects has shown that different people find different
usability problems. Therefore, it is possible to improve the effectiveness of the method
significantly by involving multiple evaluators. best number of evaluators). What follows
is an evaluation of the key elements of the prototype, guided by Nielson’s ten usability
heuristics. Each team member inspected each of the prototypes using Nielson's
Heuristic criteria (Nielson, 1994b). The results were collated and summarized below.
Severity ratings for each problem were discussed within the team and provided in bold
next to each problem.
Also the meaning of the heuristic as following:
Visibility of system status
The system should always keep users informed about what is going on, through appropriate
feedback within reasonable time.
66
Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user,
rather than system-oriented terms. Follow real-world conventions, making information appear in a
natural and logical order.
User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to
leave the unwanted state without having to go through an extended dialogue. Support undo and
redo.
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same
thing. Follow platform conventions.
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring
in the first place. Either eliminate error-prone conditions or check for them and present users with a
confirmation option before they commit to the action.
Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should
not have to remember information from one part of the dialogue to another. Instructions for use of
the system should be visible or easily retrievable whenever appropriate.
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user
such that the system can cater to both inexperienced and experienced users. Allow users to tailor
frequent actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of
information in a dialogue competes with the relevant units of information and diminishes their
relative visibility.
67
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem,
and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to
provide help and documentation. Any such information should be easy to search, focused on the
user's task, list concrete steps to be carried out, and not be too large.
Whenever possible, analysis has been made in relation to a particular persona. Following this, an
evaluation as to how the prototype solves the scenarios for each persona will be made, before an
identification of key recommendations for future iterations.

Visibility of System Status - The system status depends on the browser that is
Match between System and - The homepage does not contain any hard or
incomprehensible words and also brings the user
68
Real World closer to the university and the city of

Birmingham by providing a picture of campus in
the background and one of the New Street
station on the right.
the wrong area.
Consistency and standards 3 There might be a confusion to the user between

the portal link and the admissions button when
he/she tries to access his/her application form.
This problem still remains despite changing the
name of the Log In link to Portal. Apart from that,
there are no other inconsistencies.
Error Prevention 1 There is no specific mechanism to prevent errors.

This is being achieved by the clear and simple
design. However there might still be some small
confusions.
Recognition rather than recall - There are clear distinct buttons that the user can
read easily and there is no need for memorising.
Flexibility and efficiency to use - There is no substantial separation between

experienced and novice users. However, when a
user acquires experience in using the website
then he can navigate much faster as he will
remember where every button is located.
Minimalistic design 1 The page is quite simple and tries to capture all
the functionality needed without adding extra
buttons or links. However, so
Help error recovery - When a user has made a wrong choice it is visible
in a natural way, by showing a different page
than the one he/she wanted.
Help &Documentation - There is contact information at the bottom of the

page.
69
Against personas
>Target group An International An EU student A home student

student
Scenario 1: Find out about the Easily be able to find Direct connection to
reputation of university about the reputation his email
of the university and
about employability
Rating: 6 4 10
Reason: She is able to know the There is a news feed This is feasible through
reputation of school on the right that the Portal link in the
from the homepage provides some top right of the
from the news feed on information like for homepage. There is no
the right and also from example about the extra need to try to
the browser’s title. school of CS that was find additional pages
However there is no ranked first and also before being able to
distinct button she can the title in the log in to his email
click to redirect her browser’s window account.
there. displaying that UOB is
university of the year
2013-14. However,
these might be hard
to notice from the
first look and also
there is no other clear
button or link showing
information about the
reputation of the
university or its
employability rates.
70

Rating: 8 7 6
Reason: Under the category of There is a link leading Can be done via the
admissions, the button to the sports page but button “Academic
of application allows her it is under the Staff” under the
to trace the process of category of campus education category.
her application. life and takes some However, first he need
time to be noticed. to locate the link
“academic staff” and
then he needs to open
additional pages before
he can access the
information he wants,
as he first have to click
the department and
school where the
academic he wants
belong to and then he
is able to find what he
needs. Therefore, this
rating is due to the fact
that time here is the
key factor.
Scenario 3: Find information about Find contents of Access the website late
facilities on campus, city courses fast at night in order to
life and weather study
conditions
Rating: 9 8 N/A
Reason: Information like sports, By clicking the courses This cannot be rated
jobs, accommodation is link under the from the prototype in
listed under the Education category he question, as it is solely
category campus life. It is redirected to a new a matter of
might be even more page where after maintainability of the
attractive to students if making some choices website.
there was a dynamic he can be led to a new
video of campus life. page with the
contents of his
desired course can be
found.
71
With users
Experience from several different projects suggests that single individual evaluators achieve poor
results. Therefore, we found the need to add real user evaluation to our project. Each evaluation
was conducted individually in order to produce unbiased results.
We developed a questionnaire asking users to tell us the good points, bad points and improvements
that could be made in our prototype. Then we gave them the questionnaire and the PowerPoint file
of our prototype. They had the convenience to experiment with the prototype in their free time and
they emailed us their evaluation when they had completed it. All the users chosen were students, as
this is the focus group of our work. Below are the results we received:
User 1
Name: Mohammed Ahmed
Age:23
User type: Home student
Good points:
 The inclusion of different campus images showing the different facilities like the library for
example and also the inclusion of social media buttons, which allows users to have easier
access to information on social media news.
 The map which allows users to discover areas of interest within the university.
 The nightlife page enable students to get information about the culture of the city.
 Found the language translator an excellent choice, as in his opinion it makes the page more
accessible to prospective international students whose first language isn’t English.
Bad points
 Too much empty and unused space in the Home page.

 Every page has a different layout. Inconsistency in the different pages may cause visitors
to wonder about being in a different website.
 Excessive use of text in the pages
Improvements
 It will be better if it has the university name, search bar, language options, social media
links, key links appearing on every single page to maintain a basic framework that will
be familiar to the users.
 More images can be incorporated to condense information. Users can select the image
to reveal further information.
 Actions need to be taken to occupy the empty space in the home page. For example
have a slider going through latest news of the university rather than the small box.
72
User 2
Name: Larsson Kabukoba
Age:23
User type: International student
Good points:
 Good layout, easy to understand, not cluttered.

 Nice user of photography for backgrounds. It shows off Birmingham
 Social media links
Bad points:
 Listing child categories could be an issue if we decide to add more later.

 Showing current time and date on a website is of not use for a user that is on a desktop.
 No accessibility option for people with poor sight.
 Page layout not consistent
 No photos of students
Improvements
 Make headers easier to read by choosing a different background maybe for example.
 Increase consistency in the layout of the different pages. Some of them have full screen
photo backgrounds, others use banner photos and others have no backgrounds.
 Increase consistency in displaying content. Some pages display contents using tabs for
example, while in others all the content is listed.
 More photos of campus is needed.
User 3
Name: Alexander Winpe Teha
Age:23
User type: Home student
Good points:
 The home webpage including many nice pictures of the university, it gives an impression to
the user of what is the university like.
 There are has many immediate links to transport and Birmingham life pages.
 The home webpage ability to choose a different language for viewing the page.
 There are a lot of scrolling will have to be done to view all the courses.
73
Bad points:
 There is having a security issues that to see password management options without logging
in.
 Not have a directly application process from the courses
 The library page maybe too cluttered for including a lot of information to read.
 The users who cannot speak English, they might not know what it should lead to would be
the login page.
 The subpages fell detached from each other - can’t get to another section from one section
without going through the home page, may be more navigation than is needed.
Improvements:
 It would be nice to have the course arranged in tabs to arrange the courses better, if it cans
less scrolling.
 Maybe have a bar across the bottom that links to the other sections of admission, education
etc.
Results and Conclusion for the second prototype
More functionalities have been added in order to solve the problem from the perspective of
personas. It is very important to present sufficient information on a webpage and not to hide
everything on subpages. But, this should not exceed a certain limit, a balance is very important. It
must be avoided that an inappropriate amount of clicks is required for using basic functionalities.
In this second generation prototype a big part of our personas requirements was covered sufficiently
enough, while the layout remained as uncomplicated as possible. Certain personas demands could
not be resolved due to the complexity being added to the homepage.
Another major problem that was highlighted by our testers involved inconsistency among the
different pages.
After having created and evaluated the second generation prototype against our personas, heuristics
and real users, we concluded that it was not appropriate for using it in order to develop a real
website and that further improvements and refinements need to be made. Therefore, a second high
fidelity prototype would be needed, but due to time constrains it was not possible to be completed.
74
Summary
Our source of inspiration for this project was the bad design of the University of Birmingham
homepage which made it difficult for the students to navigate and find what they want, judging from
our personal experience as well. Our main goal was to create a homepage that would be different
from the existing one, much simpler with distinct buttons and user – friendly for the students.
Therefore even though we defined the requirements from many different stakeholder perspectives,
we ignored the rest of the stakeholders and focused on students.
After creating the personas and scenarios we used them in order to create our three first generation
prototypes. Then we evaluated them against Nielsen's heuristics and against the scenarios derived
from the personas. As general conclusions from these prototypes we can state that overall they
managed to fulfil the basic functionality we desired to a satisfactory level. However, more
improvements should definitely have to be made in the second generation prototype. Apart from
the functionality aspect, there were more significant problems regarding the layout and the design
of these prototypes with part of them being cosmetic issues. This should also have to be taken into
account in our second generation prototype. Nevertheless, we wanted to keep the homepage as
simple as possible and not complicate it to an undesirable degree.
Our initial consideration before proceeding to the high fidelity piece of work was to evaluate the
tools that we could use for that purpose and make the best choice for all of our team members. We
decided to use Balsamiq Mockups due to its simplicity and the adequate functionality that it could
provide us with. We rejected other software like Photoshop mainly as a result of the unfamiliarity of
our team members with its operation and its steep learning curve in order for someone to be able to
use it effectively. Different programs like Microsoft Paint were considered unsuitable for our
purposes as they could not supply enough quality to our work. As far as the software that would link
the homepage and all the subpages is concerned, we decided to use Microsoft PowerPoint, for the
reason why we all had previous experience using it and high functionality was not required apart
from linking the subpages and homepage to certain links and buttons in order to achieve user
interaction. Alternatives such as Flash were rejected as more time would be required in order to
learn how to use it and the additional functionality that it could provide us with was not needed.
Other simple choices like LibreOffice Impress were declined because they gave us slightly less
capabilities, while at the same time we would also have to become used to their operation.
Eventually, after completing the project we all agreed that the combination of Balsamic Mockups
and PowerPoint was a correct choice for the high fidelity part. However, after looking back, we have
some objections of using it as a tool in the low fidelity versions of our work, mainly due to the fact
that not so much detail was needed in this part and we could have implemented a simpler approach
that would require less time, like hand drawings for example. In this way we would be able to devote
more time in the second generation prototype in which much more detail is required.
After having concluded to the tools that we would use, we proceeded to creating our second
generation prototype. Our design was driven by the conclusions drawn from our first three low
fidelity prototypes. Our aim was to avoid the mistakes we did initially and at the same time to
include the positive aspects. Moreover, we wanted to maintain a minimalistic, uncomplicated, user
friendly design.
75
While designing the high fidelity prototype the main problem we encountered was the balance that
we had to keep between adding functionality to the homepage and keeping it simple. We wanted to
be able to satisfy the needs stemmed from the personas and at the same time not to add a high
number of links and buttons. Additionally, we set a goal of avoiding to hide information like most of
the websites we had reviewed did.
We managed to fulfil a big part of our personas demands in the home page, while at the same time
keeping a relatively simple layout. However, some requirements could not be fulfilled, as this would
add extra complexity to the homepage or redundancy related to other subpages that contained this
information. Apart from that, the different pages lacked consistency, as some of our users who
tested our work pointed out. This problem mainly has its root in the fact that the subpages were
created by different team members. Afterwards, we tried to alter them in a unified form but this
would make them lose some of their functionality, so we preferred to keep them as they initially
were and sacrifice consistency in the layout instead of functionality.
As a final conclusion we decided that our second generation prototype was inappropriate to be used
in order to create a real website. This stems from our combined evaluation using the personas,
Nielsen’s Heuristics and real user. Therefore, refinements will be needed and another second
generation prototype will be required. However, within this limited time frame this is not feasible.
Recommendations
Throughout the duration of this project we have made various mistakes that we are able to identify
now in the end by looking back. For example, we devoted too much time in the construction of the
three first generation prototypes and some of them were designed in too much detail that was not
needed, as the purpose of the low fidelity prototypes is to produce a quick draft. Moreover, by
working independently when designing the different subpages of the system, a great deal of
inconsistency was produced. This was immediately identified by our testers. However, we could not
identify that from the other evaluators such as the Heuristics and the evaluation against the
scenarios. This illustrates the importance of having real users to test the system and we will
definitely incorporate this technique in future projects. Another drawback that was draining
precious time from us was the fact that we had a big amount of separate files in the google drive
which we used to share our work. In future projects a better organization of the shared files will be
required and distinct categories should be created. On the positive side, we found the combination
of Balsamiq Mockups and PowerPoint a very effective one and we would use them again in future
work that requires similar depth and functionality. In addition, as this project was fairly big, a lot of
coordination, teamwork and good communication was required. We are all glad to be able to state
that after the completion of this work we have improved these key skills.
76
References
Human - Computer Interaction third edition. Alan Dix, Janet Finlay, Gregory Abowd, Russel Beale
Bcu.ac.uk. 2014. Birmingham City University. [online] Available at: https://www.bcu.ac.uk/

[Accessed: 13 Mar 2014].
Birmingham.ac.uk. 2014. University of Birmingham – University of the Year 2013-14 – The Times and
The Sunday Times. [online] Available at: http://www.birmingham.ac.uk/index.aspx [Accessed: 13
Mar 2014].
Communications, S. 2014. Stanford University. [online] Available at: http://www.stanford.edu/

Coventry.ac.uk. 2014. Coventry University | Modern University of the Year 2014. [online] Available
at: http://www.coventry.ac.uk/ [Accessed: 13 Mar 2014].
http://www.ntua.gr/index_en.html [Accessed: 13 Mar 2014].
Pku.edu.cn. 2014. 北京大学-Peking University. [online] Available at: http://www.pku.edu.cn/

Unimelb.edu.au. 2014. The University of Melbourne, Australia - Australia's best university and one of
the world's finest.. [online] Available at: http://www.unimelb.edu.au/ [Accessed: 13 Mar 2014].
University of Toronto. 2014. University of Toronto. [online] Available at: http://www.utoronto.ca/

Web.mit.edu. 2014. The Massachusetts Institute of Technology (MIT). [online] Available at:
http://web.mit.edu/ [Accessed: 13 Mar 2014].
Www3.imperial.ac.uk. 2014. Imperial College London. [online] Available at:

http://www3.imperial.ac.uk/ [Accessed: 13 Mar 2014].
^ Pearl, Judea (1983). Heuristics: Intelligent Search Strategies for Computer Problem Solving. New
York, Addison-Wesley, p. vii.ISBN 978-0-201-05594-8
Nngroup.com. 2014. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. [online]
Available at: http://www.nngroup.com/articles/ten-usability-heuristics/ [Accessed: 13 Mar 2014].
Umich.edu. 2014. Basic Web Design Principles. [online] Available at:

http://www.umich.edu/~ece/resources/design.html [Accessed: 15 Mar 2014].
77
Appendix
Questionnaire
Person information
First Name: Gender:
Age: Nationality:
Observations:
Good points
Bad points
Improvements
78

University of Birmingham Homepage: Authors

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

University of Birmingham Homepage: Authors

Uploaded by

Copyright:

Available Formats

University Of Birmingham

Dong Hou Dong Hou dxh315@bham.ac.uk

Birmingham City University ................................................................................................. 20

Definition of problem addressed

More specifically, the problem has to be examined from every stakeholder

From current teachers’ perspective the problems differ. In a number of cases we

 An unfriendly Layout design. Some webpage links which may provide

 Navigation problems. There is no specific link properly named for this

Review of related work

In addition, we worked together at the first two weeks to browse universities

Melbourne and Birmingham City University. We analysed their advantages and

Imperial college London

 “Student profiles” provide a lot of current students and graduates’

 The operating speed of the website is fast and going well.

 People search engine is an amazing design. It can help us find contact

 No language choices may be not convenient for foreign parents of students to

discerned in the homepage, they lack a significant piece of information when

National Technical University of Athens

 Simple homepage design helps the students to avoid confusion and

found in the corresponding module pages.

The University of MIT

 There is no way to find modules, we are assuming that we want to find

The University of Toronto

The university of Toronto is a public research university in Toronto, Ontario,Canada,

 University of Toronto has a mess homepage, the webpage including a lot

The University of Melbourne

Birmingham City University

The University of Birmingham

information users would need, but a great amount of information is hidden.

 The reputation of school should be highlighted in homepage that can

Principle Techniques of Web Design

Below are some concrete suggestions for making a winner website:

Before the beginning of design:

The web medium:

The front door:

Below are some other sources we have also used as advice:

Analysis of users’ requirements

Kenny Lindsay, 26 years old, is a full time student with a

Background He is an undergraduate student who represents the university

Gavriil Gavriilidis “I want to find what I need easily and fast”

After acquiring his Bachelor’s degree in Chemistry, Gavriil fulfilled

Manxin is a 24-year old undergraduate girl who plans to apply the

Occupation: MSc Student in CS Scenarios

- Trace process is difficulty

-want to easy way to know how

“I just want to know more about

First generation prototypes

In addition to evaluating the prototypes according to Nielsen’s heuristics, any usability

Primary target group: home students

 For “Study”, ”Research”, ”Department”, ”news”, ”events ”, we set them as a drop-down

2. Not providing locations and transport information.

5. Not providing history and achievement introduction of university.

6. The sponsors and supporters are not shown on the homepage.

7. The contact information of university is not provided.

Evaluate using heuristics

0 - don’t agree that this is a usability problem

2 - minor usability problem

3 - major usability problem; important to fix

4 - usability catastrophe; imperative to fix

Heuristic Rating Comment

Visibility of System Status 1 No Status provided in the homepage, but it may

Error Prevention 2 No error prevention, such as the search engine.