Embed Size (px)
Citation preview
NextIn
Find your next event in Manchester!
Tanmaya Madan
Supervisor: Dr. Caroline Jay
Draft: 3rd May 2016
A report submitted in part fulfilment of the degree of
BSc (Joint Hons) in Computer Science and Mathematics
Abstract In this digital era where technology is advancing at an ever-increasing pace, web users want to stay
up to date with what's happening around them with minimal effort. To satisfy this need within our
virtual society, a website is built that allows users to view, add, edit or promote events happening in
the area under purview, which is Manchester in this project.
The aim of the project, in simple terms, is to create a website which acts as a platform for users to
stay abreast of the latest events happening in Manchester and at the same time, allows event
organisers to use it as a platform to promote their events reaching out to a greater number of
audience.
Some highlights that the website encompasses vary from a simplistic user interface to a search
engine with multiple filters facility, from star rating events to an event recommendation engine and
beyond. Accomplishment of such demanding targets has been greatly satisfying.
Successful completion of the functionalities of the website enabled testing of the features, followed
by user evaluation. The feedback received from the users encouraged in making useful additions. .
The report contains an in-depth approach of creating the targeted website and its various stages of
development, which are discussed in detail in the respective chapters.
Acknowledgement I sincerely thank my supervisor, Caroline Jay, for her valuable guidance, unstinted support and deep
insight in helping me to improve different facets of the project throughout the year. It is because of
her encouragement and confidence in me that helped meeting tough challenges in the entire
process of project development. I consider it fortunate to have her as my project supervisor and I
express profound reverence for her faculties and precious feedback that steered me to take forward
the project work in the right direction.
I would also like to thank my fellow colleague, Raghav Bansal with whom I have integrated my part
of the website to make it fully functional website with several high-end functionalities. He has been
of great help and understanding, whenever the need be.
Finally, I would like to thank my friends and family who have been there to provide technical input
and moral support. Similarly, I convey my sincere thanks to all who contributed in the process of
product development through their user evaluations, valuable feedback, suggestions and more.
Table of Contents
1 Introduction .......................................................................................................................... 6
1.1 Motivation ................................................................................................................... 6
1.2 Aims and objectives ..................................................................................................... 7
2 Development ........................................................................................................................ 8
2.1 Design.......................................................................................................................... 8
2.1.1 Requirements Gathering .................................................................................. 8
2.2 Website Architecture ................................................................................................... 9
2.3 User Experience ......................................................................................................... 11
2.3.1 Web Design .................................................................................................... 11
2.4 Methodology ............................................................................................................. 12
2.5 Tools and techniques ................................................................................................. 13
2.6 Implementation ......................................................................................................... 15
2.6.1 Landing Page .................................................................................................. 15
2.6.2 Search ............................................................................................................ 18
2.6.3 Recommendation Engine ............................................................................... 20
3 Testing and Evaluation ........................................................................................................ 22
3.1 User Experience ................................................................................................ 22
3.2 Performance ..................................................................................................... 23
3.3 Unit Testing....................................................................................................... 25
4 Reflection and Conclusion ................................................................................................... 26
4.1 Reflection .................................................................................................................. 26
4.2 Conclusion ................................................................................................................. 26
References ................................................................................................................................ 28
Appendix ................................................................................................................................... 31
List of Figures
1. Architecture of NextIn ....................................................................................................... 9
2. Browsers trends for the past year .................................................................................... 10
3. Multi-tier Architecture Model ......................................................................................... 10
4. Iterative Development Process ........................................................................................ 12
5. First Draft of nextIn ......................................................................................................... 15
6. ‘Our Event’ space of the First Draft .................................................................................. 16
7. Final Landing Page ........................................................................................................... 17
8. Search Engine Basic Query............................................................................................... 18
9. Santization of user input.................................................................................................. 18
10. Search Algorithm ............................................................................................................. 19
11. Search Engine of the Website .......................................................................................... 19
12. An example of an event and its suggestions .................................................................... 20
13. Interactor methods to track user data ............................................................................. 21
14. Retrieving IP Address of the user ..................................................................................... 21
15. Chrome DevTools evaluation of NextIn............................................................................ 24
16. Selenium test results ....................................................................................................... 24
17. Formatted Code .............................................................................................................. 25
18. Minified Code .................................................................................................................. 25
List of Tables
1. Prioritisation of Requirements ........................................................................................... 9
2. User Feedback on First Draft of Landing Page .................................................................. 17
3. User Feedback on the Final Website ................................................................................ 23
1 Introduction
In the modern day of computing, firms are significantly dependent upon technology. It has become a
core part of their businesses. Similarly, in the events industry, new technologies are being used
increasingly to improve business efficiency. “On Facebook, 1,484,000 event invites are posted every
20 minutes” [1], which is the testimony of potential and magnitude of this upcoming industry.
This report documents creation of an interactive website, which aims at offering the users
information about the events happening in the city of Manchester. This report features an
understanding of the core functionalities of the website, named as 'NextIn'. The name of the
website comes from the idea of keeping the users updated with new events coming up in the area.
This chapter outlines the motivation, aims and objectives of the project and overview of the
application that has been attempted. The web application makes use of a number of modern web
technologies that are different from the traditional web development practices, which will be
discussed in detail.
1.1 Motivation As a student living in Manchester, it became a sort of challenge to find out occurrence and features
of events of one’s interest in and around the city of Manchester. A possible reason behind this could
be that student events were given less importance by the current players in the events industry, as
much as these deserved. This, therefore, seeded an idea of seizing the opportunity to construct the
website, NextIn. The website is a purported events listing platform, which presents happening of the
events targeted at students in Manchester. Its primary objective is to enable and enhance users’
experience whilst they are browsing for events by providing a simplistic user interface. There exist
well-established websites who provide such services around the world, but none exist for
Manchester in specific especially focusing on student societies. Therefore, the existence of NextIn
will help bridge the gap between student society events and Manchester’s student population.
Next, as a student, accepting this challenge in the form of a project was intended to accomplish
certain personal learning goals, besides achieving the project related objectives. The main
influencing factor behind this project was an urge to learn different languages like HTML5, CSS3,
LESS, PHP, MySQL, JS, AJAX and jQuery at a somewhat higher level. An advanced knowledge of these
languages and the techniques involved would upgrade one’s faculties and strengthen one’s profile to
take up assignments of higher level in Web Development arena.
Further, acquiring the ability to use third party application and implement the same to another
application has been the other objective behind taking up of the project. This was somewhat
reassuring as it involved code readability technique and its application. With regards to non-
technical goals, enhancing the project management skills was an important ambition, which involved
a thorough planning, organised structure and efficient time management.
1.2 Aims and objectives Prior to commencing the development of NextIn, there were plethora of pre-conceived ideas about
the project features, which could be embedded for the website. This was followed by enlisting of
new concepts and programming languages that required to be self-learnt, to successfully implement
the overall plan. The aims and objectives of the project are briefly stated below:
1. To develop a web application by making use of key web technologies and modern
frameworks like jQuery [2], Google Analytics [3], Bootstrap [4] etc.
2. To implement a scalable search engine, allowing users to search for a specific event. Also,
provide the ability to add filters to the search in further development.
3. To build a recommendation engine that tracks the users’ session activity to predict users’
preferred events.
4. Make use of the cryptographic security measures in user authentication processes. One way
to do this is sanitising algorithms to prevent SQL Injections.
5. Mine data from sources to test the functionalities implemented with big data.
The objectives mentioned above were placed in the order of priority. High priority was accorded to
the aspects like the importance of the functionality, required time investment, implementation
constraint and finally its feasibility.
The main objective of the application is for the users to be able to effortlessly navigate through the
website to either find their specific event via the search functionality and/or have a good experience
browsing events through different categories/tags/recommended events. At the end of the day,
NextIn aims to enrich or users’ experiences whilst they look forward to finding out the events
happening around them.
2 Development
This part of the report outlines various steps taken in different phases of development whilst
shedding light on the technical aspects of each iteration. The section also covers the challenges
faced in the process of development and how they were addressed.
2.1 Design One of the first steps in the process of development of an application is collecting both functional
and non-functional requirements. Identifying them at an early stage of development facilitates the
developer with a broad outline to blueprint the objectives appropriately. Although, following the
principle of Agile [5] methodology, these requirements get updated after each iteration;
nevertheless, it was considered vital to collect sufficient amount of information before giving a start
to the development phase. Gathering requirements upfront helped perceiving the users’
expectations, which could be used to build a system that meets the users’ needs. The design focuses
on constructing a website, which has functionalities a user would like to use.
2.1.1 Requirements Gathering
Functional requirements specify what the application should be providing to the user as a basic
necessity. The requirements in Table 1 are ranked using the MoSCoW [6] prioritisation method. It is a
technique used to sort features of an application in an order of priority. This helps the developers to
understand and differentiate the users’ view of what is essential for the website and what is not.
Successful completion of such features allows developers to work on the non-functional
functionalities, which are not part of the basic requirements but add value to the overall website.
.
Other than the basic functional requirements of the website, there are requirements that define
how a system is supposed to be. These are the non-functional requirements which are divided in 5
sub-categories known as the FURPS [7] model.
1. Functionality – What does the user want?
- User requirements-which are over and above what is required in a basic system. In this
context, an example to cite is the high-end security needs to ensure confidentiality when
storing data at any third-party destination.
2. Usability – How effective is the website from a user’s point of view?
- The website must be aesthetically acceptable at an appropriate level of understanding
for the user. In simple terms, the website should have a simplistic user interface with
straightforward navigation and a good look and feel.
3. Reliability – What are the possibilities of a system failure and what measures are taken for
its recovery?
- The website must have the ability to recover from system failure e.g. Inactive webpages
must be dealt with by being redirected to a generic error page.
4. Performance – What is the response time of the website?
- Response time acts as an important factor in a user’s experience. This can be improved
with the help of different methods e.g. use of cookies, using transitions to minimise
visual loading time, etc.
5. Supportability – Is it adaptive to new environments?
- Website should be supported in multiple platforms being used around the technological
world-be it small-screen smartphones or large-screen desktop computers.
In addition to FURPS, there is an advanced version known as the FURPS+ [8] model. The added plus
includes factors like Implementation, Interface, Operations, Packaging, Legal and more. Attempting
to incorporate these requirements would result in a high-end website with superior functionalities.
2.2 Website Architecture The website follows the basic principles of a Model View Controller [9] (MVC) architecture. The
primary idea of using this model was the separation of contents; the presentation, application and
business logic of the website. This model avoids Spaghetti code [10] consequences making the code
readable and reusable without modification. Figure 1 shows a visual representation of the model.
Figure 1: Architecture of NextIn [11]
The MVC model holds the logical structure of all data. In this case, the view consists of ASP pages
containing HTML and references to CSS files, separating the designing from the display. The
controller, being the user, connects the view and the model, whilst holding the business layer if
needed for any task completion. For example, if there is a search request, which involves data
retrieval from the database, a function with input parameters is referenced, instead of SQL code
directly being applied within the business layer at the time. This also allows the code to be
maintainable for the use of future developers.
Although the website and its applications are compatible with most browsers, Google Chrome is the
primary web browser supported for the web applications. The choice of this browser was a
straightforward decision as Google Chrome is the most used web browser with a near monopoly
dominance of over 56% share in the global market [12]. A visual of the main browsers and their
market share is represented in Figure 2.
Figure 2: Browsers trends for the past year [13]
An alternative architecture technique that was considered is the simple Multi-tier Architecture
Model [14]. This is a traditional technique heavily used in the early days. Both models work in similar
ways with one key difference; the Multitier model restricts each layer to interact with its immediate
next/ previous layers; whereas, MVC allows each layer to access any layer in the model which is an
important feature to have. For example, in a scenario of a user rating an event, data can be swiftly
updated in the database and fed back with the new rating instantaneously onto the website. A
graphical representation is shown with Figure 3.
Figure 3: Multi-tier Architecture Model [15]
0
10
20
30
40
50
60
Most used browsers around the world
Chrome IE Firefox Safari Opera
2.3 User Experience This section focuses on ensuring that the interface has elements that are easy to access, understand
and use. In order to implement this, it is essential to know what a user wants from a website of this
type. With this information, the development process can be adapted according to the users’ needs.
It can be challenging for a developer to build an application and get positive feedback without this
information.
2.3.1 Web Design A leading objective of any website is to gain new visitors every day, whilst hoping to retain the
existing visitors. A well-structured design is key to create a user-friendly environment. A website
needs to be interactive, responsive and aesthetic to gain the trust of the users.
“To create resources that can be used by the widest spectrum of potential visitors rather than an
idealized “average,” web designers should apply universal design principles. This requires that they
consider the needs of individuals with a wide range of disabilities, ages, and native languages”. [16]
Keeping this in mind, the Universal Design [17] framework was studied and applied while designing
the user interface of NextIn. This framework involved the following:
1. Equitable Usage – The design is set up to be of use for the people with a variety of different
abilities. Each user has the ability to impartially access and make use of the website. For
instance, the website has a high contrast colour scheme helping different types of users e.g.
users with weak vision or simply a screen with low backlight.
2. Flexibility in usage – Design is put together to accommodate a wide range of preferences of
the users. For example, the website has the ability to dynamically readjust its components if
the user resizes the page using the browser’s tools. Any change will not disintegrate the
appearance of the website.
3. Simple and Intuitive Use – The design is built to be easy to understand irrespective of the
knowledge, language or concentration level of the user. For example, the navigation of the
website is consistent throughout with global buttons and navigation bars at fixed positions.
4. Perceptible Information – The design communicates necessary information effectively to
the user regardless of the user environments with the help of information organisation,
engaging graphics and appealing animations. For example, readable text, bullet points & lists
to make content accessible quicker, graphics to help visual users, scroll/hover animations to
keep the user interested, etc.
5. Error tolerance – The design is aimed at minimising unintended actions. Some functionalities
have prompts to confirm/inform of the action taking place. For example, after an event has
been rated by a user, the user is informed of the same and is updated with the new rating.
6. Little Physical Effort – The design is built in such a way that it requires only slight efforts by
the user. User actions are grouped in certain parts of the webpage to minimise movement,
which is certainly beneficial for large screen desktops. Furthermore, all services of the
website are open to all, which means no user is required to fill out forms to be a member to
get additional facilities.
7. Usable Approach – Appropriate sizes and spacing have been taken into consideration for the
website’s approach and practise regardless of the user’s posture or environment. For
example, appropriate sizes and positioning were considered when building action targets so
that they can be found and selected comfortably in a small mobile device.
In terms of responsiveness, the website is made available to all platforms from large-screen
desktops to small-screen smartphones as mentioned above briefly. IDC's figures suggest that 2015
has seen the biggest slump of PC sales with a decline of approximately 10.6% on a year-on-year
basis. [18] Given the trend, the decline is projected to continue as portable devices like tablets and
smartphones are becoming affordable to the everyday user. Keeping such facts in mind, Bootstrap,
an open-source web design framework, was used to help expand the website to all available
platforms.
2.4 Methodology A major development concern with the website was to build it within the designated time and have
the ability to add more functionalities later, without facing many glitches. Besides, working in
collaboration with the other counterpart, it was important that the chosen technique suited the
development style of the team as a whole. With the advantage of having worked in teams during
university and internships, agile methodology had been a tried and tested approach, which satisfied
all needs.
The Agile Manifesto [19] suggests 4 ways which are considered better for development:
1. Individuals and Interactions over processes and tools
2. Working software over comprehensive documentation
3. Customer collaboration over contract negotiations
4. Responding to change over following a plan
The initiation phase was spent on getting a concrete structure of the idea in mind, gathering user
requirements and understanding the different tasks in hand. By November 2015, the
implementation phase commenced with an aim to create a broad skeleton of the website at first.
This was followed by heavy code writing sessions in the month of December that involved value
addition work on the website by building its fundamental applications.
The key to agile development is to consistently get user feedback after each iteration. The process of
getting user feedback was similar to the requirements gathering method stated in sub-section 2.2.1
of the report. Usability testing was the key method to collect the user feedback and the same is
discussed in more detail under the Evaluation section. The data collected helps evaluate the website
along the process to avoid substantial workload at the post development stage. In other words, the
reason behind adopting this methodology with iterative development was to have a functional
application at all times and evaluate the website for improvements concurrently at regular intervals.
A visual summary of this development methodology is represented in Figure 4.
Figure 4: Iterative Development Process [20]
2.5 Tools and techniques A web application has great scope of expansion if exploited with a variety of functionalities through
different programming languages and frameworks. Notwithstanding of the basic knowledge of the
fundamental languages from First Year Team Project, great amount of research and self-learning was
required and accordingly put in to successfully implement the features of such complexity. Some
vital languages used in the building process of this application are given below:
1. JavaScript
JavaScript is one of the 3 essentials of the World Wide Web acting as a core part of the project
functionalities. One fundamental use of JS was to create the responsive interface of NextIn to
improve user experience and provide dynamic functionalities. From hover animations to search
engine, from star rating system to the recommendation engine, all made use of JS extensively. JS
also had a role to play in implementing third party APIs like Interactor [21] and Google Analytics
for user activity tracking, as both are built in JS themselves.
jQuery is a popular JS library which was practiced for some features of the website. jQuery
promotes simplicity as it is intuitive and interesting to learn. One of the observable features of
jQuery is the backstretch of the landing page. This backstretch is a slideshow of moving images
overlaid by a translucent shade of changing colour schemes. All happens smoothly behind the
webpage content due to the ability to function without reloading the page when integrated with
AJAX [22]. Another reason behind choosing this technology was that it handles cross-browser
issue. Some JS files have issues with previous versions of browsers but jQuery eliminates this
issue. This avoids the developer writing more code for different browsers.
Alternative methods taken into consideration were the likes of AngularJS [23], EmberJS [24] or JS
on its own. AngularJS is a framework which has pre-coded modules which minimises the
knowledge gained for the developer. This would not be helpful to the student in achieving the
personal objective of gathering additional knowledge. EmberJS and JS on their own would have
turned out to be a great learning exercise for the student but given the time and resources, it did
not seem feasible to develop responsive functionalities without much upfront learning.
2. LESS
LESS [25] is an extension of CSS which allows variables, mixins, functions and other techniques
that allows CSS to be more readable, maintainable and extendable. For example, there exists a
folder containing functions of all icons. Similarly, there are folders, which contain code for all
colours, tables, buttons and other components that hold a reference to the file containing
variables for icons. This allows consistency throughout the styling code base. Similarly, LESS is
the source of all icons of NextIn as it is vital to keep this consistent throughout the website. In
return, this promotes consistency in navigation, which is a key to a good user interface.
SASS [26] is also a CSS pre-processor tool similar to LESS with the same goal. However, the lack of
detailed documentation of SASS meant that understanding this tool would require further time
investment. Moreover, SASS code virtually duplicates CSS code through a ruby compiler. This
results in less productive use of resources and possibly leading to a slower response time of the
website.
3. PHP
It is a server side scripting language embedded with HTML to make static webpages interactive.
Built components of the website like header, footer, navigation bar, body content etc. and
added them to appropriate sub-pages dynamically using the .php extension. Furthermore, PHP
was widely used to write database-enabled web pages. It supports a range of databases, and
makes code writing simple if used with the right extensions, e.g. MySQL. Therefore, all database
related queries were handled by the same. For example, tasks like establishing a connection,
getting user activity data, adding new user data, updating data on the webpage, etc. PHP is the
primary language which enables the applications of the website, hence a major chunk of the
code was written in the same.
4. AJAX
It is a technique for creating a dynamic websites and is used in the process of exchanging data
with the server. With AJAX, the website can send and retrieve data from the server in the
background and update parts of the web page without having to reload the whole page. For
example, the star rating feature of each event updates the rating of the event instantaneously
with the help of this technique.
2.6 Implementation This subsection outlines the implementation of the website and its applications, with primary focus
on its interesting and challenging areas. It involves the practices applied and their usefulness. In
addition, the challenges faced by the developer during the development process and their potential
solutions are discussed.
2.6.1 Landing Page
One of the aims of this website was to enrich people's experiences when searching for events. This
required an exceptional design to catch the eye of the user. Thus, a few days were spent on
experimenting new ideas and analysing the existing players’ work available in the public domain.
After undertaking extensive research on the user preferences and evaluating the data captured
during the user requirements process, the conclusion arrived was that users prefer direct snappy
information with a simplistic user interface.
The first draft of a fully functional landing page is shown in Figure 5. Basic technologies like HTML,
CSS, JS and Bootstrap were involved in the building of this page.
Figure 5: First Draft of nextIn
An interesting feature of this draft was the ‘Our Events’ button which allowed user to access
different categories of events provided by the website. Implemented in jQuery, this feature was a
part of the landing page as it does not require the user leaving the page. Figure 6 shows a view of
how the ‘Our Events’ space looked when accessed.
Figure 6: ‘Our Event’ space of the First Draft
On the completion of the first iteration, a review was undertaken by getting user feedback on the
first draft. The feedback received had mixed reviews. Some of them are presented in Table 2.
After evaluating the feedback, there were a few changes made to the website. Navigation options
were added in the form of a categories panel. This panel includes 5 most common categories and a
search facility. Each event category redirects the user to its respective space of events whereas the
search button leads the user to the search engine. Below the panel, there is a space to showcase 3
specific events. These can potentially be ‘Sponsored Events’ which can prove to be beneficial from a
business point of view. This is visualised in Figure 7.
An interesting part of the landing page is the slideshow backstretch. This feature changes the
background image at small intervals maintaining the user’s attention. This feature can be used to
highlight an event by having event-specific background images.
The process of building the landing page was a front-end development task. Therefore, the technical
challenges in this case were related to the User Experience. Some of the challenges faced were:
1. Accessibility – Accessible for people with different backgrounds and abilities.
2. Compatibility – Compatible with different browsers, operating systems and monitor
resolutions.
3. Navigability – Navigation should be consistent and straightforward.
4. Readability – Information should be clear and readable.
5. Usability – No restriction to any basic functions that reduces the usability.
6. Look and feel – The experience of the user when they interact with the web page. This is
determined by the overall styling, fonts, icons, images, layout, colour scheme, animations,
response-time etc.
The approaches taken to face the UX challenges are discussed in detail under the User Experience
section in the Design chapter. The look and feel of the landing page should instantly convey a
positive vibe before the user starts looking at the content. Hence, it was considered useful to invest
some time and resources in addressing this aspect.
Figure 7: Final Landing Page
Developing this part of the project involved refreshing up of the previous knowledge in respect of
basic technologies like HTML5, CSS3 and JS. Further, ab initio learning of jQuery, a new library of
JavaScript, proved to be a discerning experience as it was the first new language that the student
was exposed to at the commencement of the project.
To conclude, after analysing and evaluating the websites of other players in the market, it was learnt
that there is a trade-off between the amount of information a website provides and its user
interface attraction. Thus, aiming to minimise this trade-off, the student believes to have achieved
the set target to a great extent.
2.6.2 Search
The search engine of a website is a vital function which defines the website’s strength in depth.
There are several open source frameworks and APIs available to support the implementation of a
search engine. However, it was considered appropriate to build a search engine from scratch using
open source technologies like PHP and MySQL to learn the processes of a full-fledged indexed search
engine.
Thus, the process started with researching which algorithm to adopt to implement the search. As it
was an iterative process, the primary objective was to build a basic search engine, which indexed the
database to find the respective keyword. The detailed process of building the same is discussed
below.
Starting the procedure with the basics, i.e. creating a table and form was followed by establishing a
connection with the database. The next step was writing the code to search the database by
applying the chosen algorithm. At this point of time, a basic version of search would run a simple
query with a piece of code shown with Figure 8. The query simply indexes through the specified
columns from the given table to match the term entered by the user and return it the output.
Figure 8: Search Engine Basic Query
The query is fairly self-explanatory, as it simply selects the table where all the events data exist and
searches for the ‘term’ entered by the user in 4 different columns. The searched term may not
necessarily be the ‘Title’ of the event as it can be a part of the event description etc. that is why it
was important to include more than one column of the table.
An interesting aspect to watch out for is the security measures taken at this stage of development.
SQL Injection is a technique where users can inject SQL commands into a statement via any input
e.g. Search input. Some of these commands can compromise the security of the web application. To
prevent this from happening, data sanitization methods were embraced, as shown in Figure 9.
Figure 9: Santization of user input
The method ‘real_escape_string’ escapes special characters, taking into account the current
character set of the connection so that it is safe to place it in a query. In simple terms, it acts as a
filter, which makes sure that any code in the data is not interpreted as code. Similarly, if a string is
embedded within HTML mark-up, then it is escaped with the ‘htmlspecialchars’ function.
Finally, with the completion of the basic version of the search, the next step was to improve the
algorithm to make the search scalable and compatible with filters. After doing in-depth research,
Faceted Search seemed like an interesting idea to be analysed further.
Faceted [27] search uses the idea of a dynamic cluster of items to enable users to browse by choosing
a pre-determined set of filters. This allows the user to search their query and refine their search by
filtering their results. Taking inspiration from this algorithm, the student wrote a search algorithm to
achieve similar results by setting up multiple indexes and table references.
Figure 10: Search Algorithm
The process of this search is performed in several parts. It starts off with indexing each entity in the
database and adding tags to specify a value for each facet. For each search, the function returns a
count of the number of matching entities tagged with the query. When the query has been
submitted, the database returns the respective output on the web page as search results, along with
the data tagged with it. The main difference between this search and the Faceted search is that this
algorithm does not return the matching entities tagged within each facet. In other words, it returns
the total number of results rather than returning the number of results in each category.
Faceted search is used by many e-commerce firms including Amazon, which shows that it is a useful
functionality, if one has the appropriate amount of variety of products/categories. Aiming to start off
as a small-medium sized organisation, investing in a powerful search engine with a heavy software
stack like J2EE [28] or .Net [29] did not appear to be feasible. Therefore, having the ability to easily add
this feature at a later stage seemed like the ideal decision at the time of development.
Although there is a huge variety of search engines available on the web, the student prioritised the
learning experience gained from developing a search engine from scratch over using e.g. A Google
custom search engine [30]. As a result, the student was able to develop this functionality and learn a
new technology fulfilling a technical and a personal objective at the same time. A graphical view as
to what the search engine looks like can be seen at Figure 11.
Figure 11: Search Engine of the Website
2.6.3 Recommendation Engine
A recommendation engine is a tool that seeks to predict the preference a user might accord in the
list of events. This tool acts as an alternative to a search engine, as it is another way for the user to
discover new events, without explicitly searching for them.
The building process started by creating a basic skeleton which acts as the platform for the
recommendation engine. In this basic version, the suggested events given by the website depend on
the tags of the event rather than the user. For example, looking at Figure 12, if the user is viewing a
Social event, the related events will be presented depending on the tags of the event being viewed.
In this case, the tag is #fooddrink and all the related events consist of the same tag. This is simply the
result of a short query just like the search, where instead of searching for a specific event in the
‘event_name’ column, the database returns events from the ‘category’ or ‘topic’ columns.
Figure 12: An example of an event and its suggestions
The basic idea behind developing a recommendation engine is to suggest events to the user on the
basis of their activity on the website. This involves tracking user’s actions whilst they browse through
the website. Developing such an application is challenging, as it involves learning a set of new tools
and techniques. Therefore, the use of frameworks available on the web was made for the purpose of
the present exercise.
Google Analytics and Interactor are the 2 main frameworks used in the creation of this engine.
Figure 13: Interactor methods to track user data Figure 14: Retrieving IP Address of the user
Figure 13 shows a couple of methods called to retrieve the user’s activity on the website. This
information is recorded in the database in the ‘user_activity’ table. This data provides key
information of the users’ most visited pages. This can then be used to determine the type of events
the user prefers to apply to the current recommendation engine.
A major challenge faced while building this engine was the ability to recognise recurring users. This
was important as it would enable the framework to remember the preferences of the user, which
can be taken into account every time the user visits the website. A solution to this issue was to
detect and record the IP address of the user alongside their tracking data. Google Analytics came in
handy when trying to acquire such information of the user.
This functionality was one of the most challenging parts of the projects. Although there is ample
room for improvement in this feature, however, considering the available time and previous
knowledge of the student in this area, constructing an elementary recommendation system was a
satisfying achievement.
3 Testing and Evaluation
This section outlines the different types of testing and evaluation techniques performed on the
website. The testing data confirms whether the website and its functionalities perform their primary
job. On the other hand, the evaluation data depicts the user feedback and their satisfaction on using
the website. The significance of these techniques along with their limitations is discussed in the
following section.
3.1 User Experience
“User experience refers to a collection of methods, skills and tools utilized to uncover how a person
perceives a system before, during and after interacting with it.”[31]
Usability Testing
Guerrilla usability testing is a technique which involves asking a person, who may or may not be an
expert in web development, to perform a certain task in an application without any guidance. Some
tasks are listed below.
1. Go to any of your preferred category and open a specific event.
2. Search for a specific event using the search engine.
3. Find a Music Concert event without using the search engine.
4. Rate a specific event of your choice.
5. Access the Facebook page of an organiser through the website.
6. Compare the prices of 2 different events.
All participants were students from a variety of backgrounds and the tasks were consistent for all of
them to keep the data unbiased. The results of the task-feedback were fairly impressive as all the
participants were able to complete the given tasks smoothly. No task as such caused any problem
worth mentioning. Further, some explicit UX assessment methods like the ‘Thinking Aloud Protocol’
were also carried out. This technique simply involves the users verbalising their thoughts, as they are
moving through the user interface. It is proved to an effective way of assessing the user’s cognitive
process and their emotions whilst they are using the website.
To conclude the process, the participants were asked to complete a user experience questionnaire,
which gives an overview of the user’s experience. The results of this questionnaire reflected that
majority of the participants were content with the website and would happily visit again. The
questionnaire can be found in the Appendix. The gist of the feedback received in this context is
presented below in Table 3.
It is further stated that usability testing is primarily a qualitative method. It requires certain amount
of commitment by the users, which some of them are not willing to provide resulting in a small
sample of participants. However, "Elaborate usability tests are, at times, a waste of resources. Useful
results can come from testing no more than five users and running as many small tests as you can
afford". [32] Therefore, a sample size of 5 was chosen for each task being performed, but the
participants came from a wide range of fields.
User Tracking
Tracking the user’s behaviour is an important part of the evaluation as it gives the opportunity to
connect with the user and uncover useful insights. Some tools used in this process were the likes of
Google Analytics and Interactor. Being a new concept, efforts were put in to examine the same and
it came on the fore that these tools help in assessing that how effective and successful the online
existence is by presenting all the traffic information one needs. Such data can help determine which
pages are encouraging users to stay on the website and which are moving them away.
Although, the tools mentioned in the foregoing para are useful tools for tracking user data on a live
website but they have their own limitations. For example, such tools use ‘Page Tagging Technology’.
In simple terms, this means that these tools can only function on browsers that execute JavaScript at
all times. Moreover, at this day and age, it is fairly easy for a user to opt out of being included in the
tracking process by simply installing an Add-on. This defeats the purpose of implementing the API to
start with, which is why multiple APIs were included, which track user data and record it.
3.2 Performance
The performance of a website is a key measure of how efficiently it has been developed. Research
shows that “57% of people abandon a website that takes more than 3 seconds to load” [33]. The
modern generation demands the web to be on their fingertips. Hence, various techniques were
carried out to maximise the performance of this website. This sub-section looks at how effectively
the website reaches its performance goals.
Chrome DevTools [34] are a set of web authoring and debugging tools used to iterate, debug and
profile any website. The network panel of this tool gives an insight on the requested and
downloaded resources which can be used to optimize the load performance of a webpage.
Analysing the data shown in Figure 15, it can be seen that large sized images play a big part in
slowing down the website. For obvious reasons, the heavier the image, greater the time required for
them to be downloaded, thus worsening the response time. Therefore, after realising the existence
of this issue, all images being used by the website were compressed using an online compressor.
Although this can be done for the images which will always be a part of the website user interface,
however, new events will consist of uncompressed large sized images. Therefore, there are couple of
approaches which can be taken. One way could be to write an algorithm which compresses the
image when uploaded by the event organiser. Another way could be to set a size limit for the image
to be uploaded which takes care of the issue itself.
Figure 15: Chrome DevTools evaluation of NextIn
Selenium IDE [35] is a third party software which is also used for testing the performance and
supportability of a web application. It primarily allows recording, editing and debugging tests. These
tests, when performed on NextIn, received a 100% success rate as shown in Figure 16.
Figure 16: Selenium test results
Additionally, majority of the user interactions that require server intervention are handled
asynchronously. In other words, the website responds to the user request immediately whilst
handling the server request in the background. As the user navigates within the website, there is a
feature which fades the current page instantaneously whilst the new page is being processed by the
server in the background. This minimises the ‘visible’ time taken for the page to load because the
new page is loaded by the time the transition completes itself. Although, the network speed of the
user does have a major impact on the response time of the website, however, in most cases, the
loading time tends to be negligible.
Minification of Code
Minification is the process of removing any redundant data without affecting the final output of the
code – for example removing code comments, unused code, extra formatting like spaces/tabs/lines
etc. In return, this reduces the file size allowing the file to be downloaded in a shorter amount of
time improving the response time of the website. YUI Minifier [35] is a tool used to compress some of
the CSS3 and JS files. Although, this process improves the speed of the website but from a
developer’s point of view, it also reduces code readability. It can be fairly challenging to understand
minified code that is why it must be formatted/un-minified to be read. To prevent this issue, all the
code were written in advance to be minified at the end to make most of this feature.
Figure 17: Formatted Code
Figure 18: Minified Code
3.3 Unit Testing
Unit testing was conducted on the website in the form of manual tests. Each module within the web
application had a number of manual tests to perform when a change was made.
In hindsight, a Test Driven Development approach could have been a more suitable for the website.
This first step is to write a code that fails. Next, this code is tested to ensure that it, in fact, fails. Then
the code is updated to make it pass the new test. After running the tests again, if it fails then the
code needs to be updated and tested again, else if passed, then the process is restarted
An advantage of this practice is that it enables the developer to take small steps when writing code.
This is a comparatively efficient practice than writing code in large steps. Writing code and fixing it in
large chunks of code can be challenging at times. This technique avoids the occurrence of such a
situation.
4 Reflection and Conclusion
The objectives of the project are analysed in this chapter along with areas of personal development
and a brief summary of the report.
4.1 Reflection The primary aims and objectives set for the project appear to have been met to a good standard. All
the functional and non-functional requirements were taken into account while building the website
and most of the functionalities were included.
Getting exposed to the world of web development by creating a powerful system with a
combination of unfamiliar tools and techniques is considered as an achievement. In terms of the
drawl of learnings, it can be said that the project enabled acquiring insight and knowledge about
new technologies in the process of building this website. Technologies like JS i.e. jQuery, Less, AJAX
have proven to be extensively useful in the creation of the core web applications. Although there is a
steep learning curve in using such technologies without any prior experience, nevertheless, the
benefits drawn, after gaining an understanding of the same, are worthy. Further, the use of agile
methodology proved to be a good decision and the intent is to replicate in future projects, if given
the chance and deemed appropriate. Use of tools like Git, Bootstrap, Trello, Gantt charts and APIs
has been helpful in applying agile practices. Apart from the technical side of project, soft skills gained
in the process were qualities like time management skills, project management skills, self-learning of
new tools and techniques, problem-solving attitude towards unforeseen challenges and much more.
It is important to also focus on the possible improvement areas, which can be gained from this
project. One would be a misjudgement made in dedicating ample time in the planning of the design
of the website. This was done to discover a user interface which would be attractive enough for the
user to admire the website. This was a less judicious decision as the user interface can only add
value to the website if it serves its basic functional needs fully. The key factor was to invest major
part of the time in developing the core applications of the website. Providing such features would
make the website useful to the user as it has more applications to help the user find an event other
than just providing a nice look and feel to it. Therefore, for future projects, investing the right
amount of time in the right functionalities is considered vital.
4.2 Conclusion There is always room for improvement in a project of this scale. Some areas of the website which
could be considered for expansion in the future, if given the time and resources, are as follows.
1. Personalised reminders – All registered users must get some sort of an incentive in being a
part of NextIn community. One way this can be done is by sending regular e-mail reminders
about the upcoming events preferred by the member. It is a feature that would make
members feel connected with the website, which is always a positive attribute.
2. Ability to sell tickets – One of the ‘Won’t’ features, which can be implemented in the future.
This is a feature which should be added, if felt that the website is doing well, and the
incoming traffic can be exploited for commercial purposes, including sale of tickets etc.
3. Automated removal of past events – A basic feature, which could have been added at the
current stage but wasn’t given a high priority. However, event data must be kept up-to-date
throughout to provide accurate information to the users.
4. Data mining – Retrieving big data to test the functionalities is imperative and was planned
but not done due to the time restrictions.
To conclude, the end product built through this project has all the planned functional and most of
the non-functional functionalities. The website supports all platforms including the small-screen
devices like smartphones to large-screen devices like desktop PCs. Moreover, it is supported by the
most used browsers with all the features functioning fully. Unlike many other events websites,
including e-commerce, NextIn focuses on the user experience and the performance of its
functionalities, equally, and tries to maintain a fine balance. These are some of the objectives, which
were set for NextIn to fulfil if developed successfully. All in all, being the only events platform to
promote student society events in Manchester, it has been a satisfying achievement accomplished
through carrying out this project. Such a website is expected to be not only beneficial to the
University of Manchester and its Student’s Union, but also it has a great business potential for the
events industry and could prove to be commercially valuable in the near future.
References
[1] Bullas, J. (2011). 50 Fascinating Facebook Facts And Figures - Jeffbullas's Blog. [online] Jeffbullas's
Blog. Available at: http://www.jeffbullas.com/2011/04/28/50-fascinating-facebook-facts-and-
figures/ [Accessed 3 May 2016].
[2] jquery.org, j. (2016). jQuery. [online] Jquery.com. Available at: https://jquery.com/ [Accessed 3
May 2016].
[3] Google Developers. (2016). Google Analytics | Google Developers. [online] Available at:
https://developers.google.com/analytics/ [Accessed 3 May 2016].
[4] Mark Otto, a. (2016). Bootstrap · The world's most popular mobile-first and responsive front-end
framework.. [online] Getbootstrap.com. Available at: http://getbootstrap.com/ [Accessed 3 May
2016].
[5] Agilemethodology.org. (2016). The Agile Movement. [online] Available at:
http://agilemethodology.org/ [Accessed 3 May 2016].
[6] Allaboutagile.com. (2016). Prioritization using MoSCoW | All About Agile. [online] Available at:
http://www.allaboutagile.com/prioritization-using-moscow/ [Accessed 3 May 2016].
[7] Agileinaflash.blogspot.co.uk. (2016). Agile in a Flash: FURPS+. [online] Available at:
http://agileinaflash.blogspot.co.uk/2009/04/furps.html [Accessed 3 May 2016].
[8] Agileinaflash.blogspot.co.uk. (2016). Agile in a Flash: FURPS+. [online] Available at:
http://agileinaflash.blogspot.co.uk/2009/04/furps.html [Accessed 3 May 2016].
[9] The Official Microsoft ASP.NET Site. (2016). MVC. [online] Available at: http://www.asp.net/mvc
[Accessed 3 May 2016].
[10] Sourcemaking.com. (2016). Design Patterns and Refactoring. [online] Available at:
https://sourcemaking.com/antipatterns/spaghetti-code [Accessed 3 May 2016].
[11] Smist08.files.wordpress.com. (2016). [online] Available at:
https://smist08.files.wordpress.com/2013/11/mvc3.png [Accessed 3 May 2016].
[12] Gs.statcounter.com. (2016). StatCounter Global Stats - Browser, OS, Search Engine including
Mobile Usage Share. [online] Available at: http://gs.statcounter.com/#browser-ww-monthly-
201503-201603 [Accessed 3 May 2016].
[13] Gs.statcounter.com. (2016). StatCounter Global Stats - Browser, OS, Search Engine including
Mobile Usage Share. [online] Available at: http://gs.statcounter.com/#browser-ww-monthly-
201503-201603 [Accessed 3 May 2016].
[14] Wikipedia. (2016). Multitier architecture. [online] Available at:
https://en.wikipedia.org/wiki/Multitier_architecture [Accessed 3 May 2016].
[15] Tutorials.jenkov.com. (2016). [online] Available at:
http://tutorials.jenkov.com/images/software-architecture/n-tier-architecture-1.png [Accessed 3
May 2016].
[16] Washington.edu. (2016). World Wide Access: Accessible Web Design | DO-IT. [online] Available
at: http://www.washington.edu/doit/world-wide-access-accessible-web-design [Accessed 3 May
2016].
[17] Wikipedia. (2016). Universal design. [online] Available at:
https://en.wikipedia.org/wiki/Universal_design [Accessed 3 May 2016].
[18] www.idc.com. (2016). PC Market Finishes 2015 As Expected, Hopefully Setting the Stage for a
More Stable Future, According to IDC. [online] Available at:
http://www.idc.com/getdoc.jsp?containerId=prUS40909316 [Accessed 3 May 2016].
[19] Agilemanifesto.org. (2016). Manifesto for Agile Software Development. [online] Available at:
http://agilemanifesto.org/ [Accessed 3 May 2016].
[20] Screenmedia.co.uk. (2016). [online] Available at:
http://www.screenmedia.co.uk/media/135946/agile-methodolody_695x260.jpg [Accessed 3 May
2016].
[21] GitHub. (2016). collectiveidea/interactor. [online] Available at:
https://github.com/collectiveidea/interactor [Accessed 3 May 2016].
[22] Pimentel, V. and Nickerson, B. (2012). Communicating and Displaying Real-Time Data with
WebSocket. IEEE Internet Computing, 16(4), pp.45-53.
[23] Angularjs.org. (2016). AngularJS — Superheroic JavaScript MVW Framework. [online] Available
at: https://angularjs.org/ [Accessed 3 May 2016].
[24] Emberjs.com. (2016). Ember.js: A framework for creating ambitious web applications.. [online]
Available at: http://emberjs.com/ [Accessed 3 May 2016].
[25] Team, T. (2016). Getting started | Less.js. [online] Lesscss.org. Available at: http://lesscss.org/
[Accessed 3 May 2016].
[26] Sass-lang.com. (2016). Sass: Syntactically Awesome Style Sheets. [online] Available at:
http://sass-lang.com/ [Accessed 3 May 2016].
[27] Tunkelang, D. (2009). Faceted Search. Synthesis Lectures on Information Concepts, Retrieval,
and Services, 1(1), pp.1-80.
[28] Oracle.com. (2016). Java Platform, Enterprise Edition (Java EE) | Oracle Technology Network |
Oracle. [online] Available at: http://www.oracle.com/technetwork/java/javaee/overview/index.html
[Accessed 3 May 2016].
[29] Wikipedia. (2016). .NET Framework. [online] Available at:
https://en.wikipedia.org/wiki/.NET_Framework [Accessed 3 May 2016].
[30] Google Developers. (2016). Custom Search | Google Developers. [online] Available at:
https://developers.google.com/custom-search/ [Accessed 3 May 2016].
[31] Workspace.idesg.org. (2016). [online] Available at:
https://workspace.idesg.org/kws/public/download/58/User-Experience-Guidelines-Metrics.docx
[Accessed 3 May 2016].
[32] Nngroup.com. (2016). Why You Only Need to Test with 5 Users. [online] Available at:
https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ [Accessed 3 May
2016].
[33] Econsultancy. (2016). Site speed: case studies, tips and tools for improving your conversion rate.
[online] Available at: https://econsultancy.com/blog/10936-site-speed-case-studies-tips-and-tools-
for-improving-your-conversion-rate/ [Accessed 3 May 2016].
[34] Seleniumhq.org. (2016). Selenium - Web Browser Automation. [online] Available at:
http://www.seleniumhq.org/ [Accessed 3 May 2016].
[35] Chrome DevTools | Web Tools - Google Developers. (2016). Chrome DevTools | Web Tools -
Google Developers. [online] Available at: https://developers.google.com/web/tools/chrome-
devtools/?hl=en [Accessed 3 May 2016].
[36] Yui.github.io. (2016). YUI Compressor. [online] Available at: http://yui.github.io/yuicompressor/
[Accessed 3 May 2016].
Appendix
Database Structure
Table - nextin_events
Consists of all events data submitted through the website.
Table - nextin_users
Consists of all user data submitted through the website.
Table - nextin_activity
Consists of basic user activity submitted through the website.
Trello A tool used for delegating different task to each member of the team.
GitLab A tool used for repository management within the team, plus code reviews, issue tracking and more.
Gantt Chart A tool used to improve project management as it involves setting deadlines for tasks planned. Also
keeps the team updated of the pace of their work if required to be amended.
Feedback Questionnaire
