Overview
This section analyses two contrasting commercial concert booking websites similar to the proposed web application. A discussion on the positive and negative aspects of each of the website based on the functionality provided by each website and the design of each website is presented. The design and the frameworks used to develop each of the websites will help to arrive at a recommendation on whether the design is “mobile first” or not.
In order to do this analysis two websites must be selected. The two websites are;
Eventbrite
Eventbrite is an event booking web application that is used by a lot of event organizers and event attendees all over the world. For event organizers, Eventbrite provides a platform that they can use to create an event and make it available so that people who are interested in attending the event can book the event using Eventbrite. Eventbrite allows event organizers to create free events i.e. events which do not require any entrance fee at the gate or paid for events that requires to pay an attendance fee. It enables the interested persons to purchase tickets through the application and still make payments through the application.
Evaluation of the website is done based on two aspects;
The functionality of Eventbrite can be evaluated from two point of views; event organizers and the audience targeted by the event. For event organizers Eventbrite provides a platform where the event organizers can build, manage and grow their events. The first step for a first time event organizer is to register and create an account with Eventbrite. The event organizer chooses from three different packages; essentials, professional and premium package. The event organizer can then proceed to create an event within the system and it will be available to any audience who visit the website or search for it using their search feature.
For audience, Eventbrite provides a platform where they can search for events and buy tickets. Perhaps one of the most distinguishing feature with Eventbrite is that since it is used all over the world, when a user opens the website, a list of events near the customer are shown. This happens automatically as the web application automatically determines the location of the user and filters events based on that location. Users can also search for events by category, name, location and date of the event. The search feature enables users to quickly find the event they are looking for without having to go through all the other events. The figure below shows the search feature of the website.
Event audience can also create an account with Eventbrite. Registration is simple and easy as it only requires the user to provide an email address, first name and last name and the password they want to use to login. Registration has been made easier by use of password strength meter that shows the strength of the password as the user is filling the password field. For users who have registered an account with Eventbrite, they can be able to add free events to calendars or purchase tickets for paid events. A ticket is purchased using the normal check out method. Eventbrite has incorporated common payment merchants like PayPal, Visa, MasterCard, Discover and American Express.
When the user identifies and selects an event the application holds a reservation for the user meaning that the user is guaranteed the ticket for the eight minutes after viewing an event.
The design of the website is evaluated against the following principles of effective web design;
The navigation responds and adapts to a mobile device view thus making it easier to use for the user. The search bar has also responded and is different with the desktop version.
However some of the pages are not mobile friendly. For example for some event page, the design does not respond to a change from one display device to another. The screenshot below shows a page which is not user friendly
According to figure 5 above this page of the website is not mobile friendly thus the user would experience a hard time accessing that page on a small screen device.
A lot of frameworks have been used to develop Eventbrite web application. These frameworks are;
A combination of these frameworks have been used to design and develop Eventbrite web application and the overall design achieves a high degree of mobile friendliness.
Ticketsource is an event booking website that provides a platform to both event organizers and its intended audience. Event organizers can use the website to create events and the audience can use the website to purchase tickets to the event. The evaluation of the website can be done based on two aspects;
For target audience Ticketsource enables users to search for events based on the event name, city, location and the date of the event. The website does not offer automatic quick suggestions to the user based on the current location. However, the search feature is easy to use and users can search for an event very easily by filling the form.
To buy a ticket, the user is not required to have an account. Buying involves a checkout process where the user provides their email address and physical address and then proceeds to payment. Ticketsource has integrated third party payment services like PayPal, Visa and MasterCard so it’s very easy to make payment. Ticketsource reserves the ticket for the user for 20 minutes thus the user is assured that the ticket is available as they he or she is performing the checkout process
The design of the website is evaluated against the following core principles of good website design;
The navigation menu of a website is a crucial part of the design. The navigation menu for Ticketsource is efficient and usable. However some parts of the web application do not have a good navigation system. For example when checking out the user users a series of next and previous links without any other menu thus the user has no access to the main navigation menu or a quick links section thus going back to the last page before booking requires the user to navigate using the previous button.
According to figure 9 above, elements making up the page have been arranged to mobile view because the website is responsive.
The following frameworks have been used to design and develop Tickersource;
By using a combination of these frameworks, the design achieved for the website is mobile friendly and meets its purpose.
This section presents the documentation the of the music venue booking company called Evented. To help document the design wire-frame models, site-maps and UML models are used and from these models a high fidelity prototype is designed to illustrate the working of the web application.
The mobile-first design principle is a content and design strategy that involves designing a website or web application for mobile devices first and then moving on to larger screen devices like desktops, laptops and tablets (Coyle, 2014). The design process from mobile devices to large screen devices like desktops should be done in a progressive fashion. The reason for starting with mobile devices first is because most browsers ran by mobile devices are not as capable as desktop computer browsers.
By following the mobile-first progressive enhancement principle, the design process involves the following stages (Korkishko, 2017);
Based on the analysis done on the case study for the proposed web application, various UML models can be used to model the design of the web application. These UML models are;
Use case diagram
Use case diagram is a behavioral diagram that is used to show the relationship between the user or actor and the system (Lucidchart, n.d.). The use case diagram shows the interactions of the user with the system and shows the boundary of interaction. For the proposed event booking web application the system comprises of the Evented system and a user who is the actor (Nishadha, 2015). The user is anyone who using the application to view events or to book tickets. The following diagram shows the interaction of the user with the Evented system;
According to the use case diagram shown in figure 10 above, the user or member interaction with the evented system is limited to the use cases defined on the figure. These use cases are;
Activity diagram
Activity diagram is a UML diagram that is used to describe the dynamic nature of a system. Activity diagram shows the dynamic aspects of a system and the flow of the activities within a system. For the evented web application, activities of a user within the system can be denoted using the activity diagram shown on the figure below;
Figure: Activity diagram
Sequence diagram
Sequence diagrams are UML diagrams that are used to show interactions between different classes making up the system. The interactions are in form of messages which are sent from one class to another or within a class. Sequence diagrams are also commonly referred to as event diagrams.
Sequence diagrams are used to show the flow of logic for a certain process. For the proposed web application, the process of searching for an event has been modelled using a sequence diagram. This process has been selected because it is a crucial process and will be used frequently by many users.
A sitemap a diagram showing the list of pages making up a website. The diagram shows from where each page can be accessed from by showing root pages and subsequent children pages.
Design of a website or web application at the structural level is done using wire framing. Wire frames are commonly used to lay out the functionality of a page and its contents depending on the user needs and requirements (experienceux, 2018). For the Evented event booking application, the core principle to be followed is mobile-first progressive enhancement thus the wireframes designed show the design of the application for mobile. These wireframes can then be progressively designed for other devices like desktops and laptops.
The proposed web application will consist of the following pages;
This is the first page that the user will see when they open the web application. The figure below shows the wireframe of Evented landing page.
The registration page will be used by the user to register by filling a form. The diagram below shows the wire frame of the registration page.
The member login page will be used to login. The diagram below shows the wireframe of the evented login page.
The event booking page is used to book and is accessed when an event is viewed. The following diagram shows the event booking wireframe.
This page shows personal details of a user together with a history of their previous bookings for different events. The diagram shows the wireframe for the profile page.
A high fidelity prototype can be designed from the wireframe modelled in section 3.2 above. The prototype is designed using the mobile first progressive approach where by the web application is designed for mobile devices and then progressively designed for large screen devices like laptops and desktops. Based on the wireframes, the following are the pages designed for mobile version of the proposed web application;
The Design of the landing page should be very eye catching for every visitor because it is the first page that the user will see when they visit the website. The design of this page should give a good impression to the user and make them want to view the website. Thus this proposed design includes use of images as backgrounds to make the page more attractive and use of a consistent color throughout the page thus creating a theme to be used all over the website. The following diagram shows the mobile version of the landing page.
This page can be progressively developed for the mobile version. Both designs should have consistency to create a seamless transition when using the web application from one device to another. The following prototype shows the desktop version of the design of the landing page.
In both designs, the user can search for an event by use of the search form at the top of the page. The results are displayed on the search results page if any events were found. The search results page also has a search form to enable the user to search for more events. The following diagrams shows the mobile version of the search results page.
The same search results page is progressively designed for desktop or laptop devices. The design achieved in the design is consistent with the mobile version as shown in the figure below.
Figure: Search results page prototype (Desktop version)
The registration page is used for registration. The design of the registration form should be simple and easy to use to make it easier for the user. Registration should be straight forward and should not require too many details as shown in the mobile version of this page.
The same page is progressively designed for the desktop version and achieves consistency with the mobile version as shown in the figure below.
Figure: Registration page prototype (Desktop version)
The login page is used by users who have an account in the system to login into their accounts. The login form is simple and requires the user to fill an email field and password filed which are verified before the user is granted a session.
The login page is progressively developed as the desktop version resulting to the following design.
Figure: Login page prototype (Desktop version)
The event booking page shows the full details of an event and provides the user with a booking form to book seated or standing tickets. The booking form is simply designed to make the process of booking a ticket easy for the user. Once the confirm booking is pressed the system first checks whether the user is logged in or not and then proceeds to complete the booking. The diagram below the design of the page for mobile devices.
The same page is designed progressively for desktop devices while still maintaining consistency in the design with the mobile version.
The profile page contains the personal information of the user. The profile page allows the user to update their personal information and to view the history of events that they have previously booked. The figure below shows the mobile version of the profile page.
The same page is progressively designed for the desktop version resulting to the following design.
Figure : Profile page prototype (Desktop version)
The overall design of the application achieved for both the mobile version and the desktop version has followed all the principles of good design.
Overview
This section describes the frameworks to be used to design and develop the event booking web application.
Web Frameworks
To design and develop the evented web application different frameworks or technologies have to be used interchangeably so as to achieve the best design and functionality of the application for both the mobile and the desktop version of the proposed web application. To define the frameworks or technologies, there is need to define the architecture of the proposed application. The proposed web application will consist of two sides;
The client side of the application will run on the user’s browser. This is part of the web application that the user will see and interact with to achieve various user goals. The design of the client side has to use the mobile-first progressive design principle thus the frameworks or technologies to be selected should be able to work with this principle.
The following frameworks or technologies will be used for the client side;
Bootstrap
Bootstrap is a mobile-first, responsive front-end framework which is developed using HTML, JavaScript and CSS. Twitter was built by a developer from Twitter as a Twitter Blueprint before it became open source. Bootstrap found a lot of usages after becoming open-source due the vast amount of resources available for it. For the proposed Evented event management web application Bootstrap is ideal because of the following reasons;
With the current growth in use of mobile devices to view and open websites it’s a requirement that every website should be responsive enough to be viewed and accessed from mobile devices. Bootstrap has a fluid grid layout that amends properly to the device’s screen resolution thus a website designed using Bootstrap is always mobile ready. Thus bootstrap is the most ideal framework for use to design the proposed web application because the main principle to be followed is mobile-first progressive design. Thus by using Bootstrap the proposed web application will be mobile ready and this will not require design for both the mobile version and desktop version as the website will be mobile ready from the go.
Bootstrap increases the speed of development because of its existing building locks that come with the framework. Instead of starting from scratch, the design team can use existing coding blocks to design the proposed web application. This will reduce the amount of time that would have been used in coding the whole design from scratch if Bootstrap was not used. The existing building blocks can be used with existing designs thus making it easy to integrate into the design of the web application.
Bootstrap is highly customizable and can be customized to suit the design of the proposed web application thus not all features that comes with the framework has to be utilized. The design team can decide on which features of Bootstrap are necessary for the project and which features are not needed and these features are excluded during the download of the framework. This will leave the design team with a custom Bootstrap framework suited for their project.
Bootstrap provides consistency in the design of the website thus the end user will be able to get a consistency in the design when using the proposed web application in either the mobile version or the desktop version of the web application.
Bootstrap is easy to integrate with other frameworks and platforms thus it will be suitable for this project because other frameworks have been proposed for use.
There are other frameworks which can be used in place of Bootstrap like Skeleton and Foundation. However Bootstrap is the most suited framework for this web application because Bootstrap is the best as it treats all type of devices equally thus developing using Bootstrap does not require the design team to design two different versions of the same website. Bootstrap also has a lot of free templates which can be customized thus making it easy for the design team.
JQuery is a JavaScript library invented to make front-end development easy. JQuery simplifies things like Ajax operations, animations, event handling and DOM manipulation just to mention a few (LearningJQuery, 2018). For developers it helps them fewer lines of code within a short period while still doing a lot. JQuery is considered to be very fast, flexible and concise as compared to using JavaScript. There are various reasons for using JQuery for the proposed event booking web application. These reasons are;
There are other JavaScript like vanilla JS but JQuery is the best suited for use for the design of the proposed web application because of its ease in use and availability of plugins and resources that will make the development of the front end easy for the design team (Olawale, 2017).
JQuery is a curated set of user interface effects, interactions, themes and widgets that are built on top of the JQuery library. JQuery UI makes design of websites and web applications by giving front end developers a quick and easy way to add various components of a design for example a date picker to a form control. The reason for using this library is because JQuery will be used for the proposed web application thus using this library on top of JQuery will help improve the design of the web application and make it very easy for the development team to develop the front-end of the proposed web application.
Font awesome is a icon and font toolkit based on LESS and CSS. Its currently incorporated into Bootstrap thus it will be used together with bootstrap in the design of the front-end part of the proposed web application. Font awesome will provide icons and fonts to the development team thus making it easy to design elements like buttons and links thus improving the overall design of the proposed web application.
Modernzir is a JavaScript library which is used to detect CSS3 and HTML5 features in different browsers. It helps JavaScript to avoid use of unimplemented features. Although most features have already been implemented in most browsers some features are missing in some browsers especially the older versions of the browsers. Modernzir help determines whether the browser being used by a user has implemented a certain feature. The main reason for using this library is to provide the same functionality for all type of users regardless of whether they are using modern browsers or old browsers by providing feature detection and allowing older browsers to run HTML5.
The back-end part of the proposed web application will be used to process the data that users send using the client side. There are two technologies that will be used for the back end development. These technologies are PHP and MySQL. PHP will be used for server side scripting while MySQL will run the database of the proposed web application.
PHP is a server side scripting languages. This is the most suitable language for use for developing the back-end part of the proposed web application because of the following reasons;
There are other languages for example ASP.NET which can be used for the development of the server side but do not qualify for the proposed application. ASP.NET does not qualify mainly because it is not open source thus will add an extra cost to the development of the proposed web application.
Figure: Entity relationship diagram
The ERD shown on the figure below shows the entities and their attributes and relationships existing between them. The entity relationship diagram has been modelled using Crow’s Foot Notation. Each entity represents a possible table and its attributes. Each entity is in Third Normal Form (3NF). The following steps were followed to achieve 3NF in every table;
At 3NF, the relations can be turned into tables for implementation to form a MySQL database.
Overview
This section discusses the accessibility of the proposed web application across different devices to enable access by a variety of users using different type of devices. The section discusses the core technology or framework that will be used to develop the front end to facilitate cross-platform operability.
Discussion
Accessibility is a core and very important principle for every web application. The proposed event booking web application is a public web application meaning that it is expected to be used by the public thus the design team has to take a lot of time when designing the application to make sure that any user out there can open the web application and perform any of the user defined goals within the application.
According to www.statista.com in 2018 alone, 52.2 percent of all website traffic was generated through mobile devices all over the world. This statistic shows that many users are using mobile devices to access websites thus in this day and age every website should be mobile ready or cross-platform meaning that it can be open and used using both mobile devices and desktop devices. Websites which are not cross platform cannot be conveniently from mobile devices thus limiting their accessibility and usability when it comes to devices. This eliminates a class of users who are using mobile devices to access the website leaving only those that are accessing it using desktop devices.
To achieve mobile friendly website, the deign team has to select the right frameworks that will make it easy to develop the front end part of the website otherwise the development team will have to develop two versions of the web application; desktop version and mobile version to for accessibility for both mobile and desktop devices.
For the proposed web application a number of frameworks have been selected to develop the front end part of the web application. These frameworks are;
By using these frameworks interchangeably to develop the front end part of the web application the end design achieved by the design team will be guaranteed a high level of mobile friendliness and accessibility will be assured across a range of many devices.
The prototype shown in section B above shows the expected design that will be achieved by using the frameworks discussed above. Every page will be accessible both on mobile devices and desktop devices. The design will use images as background pictures to create an appealing design to the users. For example for the landing page the header section of the website has a background image on which all the contents of the header sit on. The header section is the same for both mobile devices and desktop devices with the grid system used to design the web application restructuring the elements differently as shown between the two interfaces in section b above.
After completion of the front end part of the web application, the design will be evaluated against the following principles;
The best level of accessibility for the website will be achieved by using a combination of all the frameworks specified and ensuring that the front end development team follows all the design principles. Testing of the end design should also be done thoroughly to ensure the final product is accessible.
This section discusses how the data generated by the web application will be processed and where the processing will be done.
Data processing
Data processing of the proposed web application will take place in two places;
Client side
The client side of the application is the part of the application that the end user will interact with while using the application. This side of the application will run purely on the user’s browsers. A part of data processing will be done on the client side of the application. This type of data processing will be done for data that does not require reference to the server. For example when the user is booking a ticket and he or she selects two tickets, the system will calculate the cost of the two tickets and display the results to the user before the user presses the confirm booking button. This will happen instantaneously after the user selects the number of tickets without the application making any reference to the server. Other data processing will be done for example during client side form validation, the application will not make any reference to the server but will process the data on the client side. When all the necessary processing at the client side is completed data will then be sent to the server side using Ajax and this will be made easier by use of JQuery.
The server side part of the application will run on the web server on which the application will be deployed. The server side will include two types of processing; processing of data using a server side scripting language which is PHP and processing of data by the database management system through use of MySQL queries.
When the user fills a form in the client side, data will be sent from the client side to the server side for processing. For example when the user wants to search for an event, the user will fill the search form and the data filled on the search form will be sent to the server side. The server side part of the application will filter all the events based on the search criteria and then return the results to the client side. The client side will then be updated with the relevant search results. The sequence diagram below better illustrates this process.
Validation of all user inputs will be done at different levels of processing the data as discussed in section F above. These levels are;
On the server side part of the application data validation will be done using existing methods and plugins available in JQuery to make sure that the right type of data is submitted from a form. For example a form consisting a field with required attributes will not allow the user to submit the data unless the field is filled with something. The same case on the data type specified for every field. If the data type is email, the form will not submit the data unless the data is in the correct email format, or for a number the form will not submit the data unless a number is entered. Other form of validation will be done on the client side since data will be asynchronously using an Ajax JQuery plugin.
On the server side, extra validation on top of the validation done on the client side will have to be performed to make sure data is correct. Validation measures like removing HTML special characters to prevent SQL injection will be done. Validation on the server side will be the type of validation that is not possible on the client side or is need both on the client and server side. On the server side, validation will be very crucial to make sure malicious users cannot launch attacks on the server by use of scripts in the data.
Conclusion
The evented web application can be a success if the development team follows all the laid out principles and use the combination of frameworks specified.
References
Alex (2015). 10 Best Reasons to Use Bootstrap for Amazing Web Designs. [online] devsaran. Available at: https://www.devsaran.com/blog/10-best-reasons-use-bootstrap-amazing-web-designs [Accessed 12 Jul. 2018].
Bradley, A. (2017). Why Use PHP?. [online] Though Co. Available at: https://www.thoughtco.com/why-use-php-2694006 [Accessed 12 Jul. 2018].
Coyle, J. (2014). How Does Progressive Enhancement Relate to Mobile-First Strategy?. [online] Medialoot. Available at: https://medialoot.com/blog/progressive-enhancement-web-design/ [Accessed 12 Jul. 2018].
Experienceux (n.d). What is wireframing?. [online] experienceux. Available at: https://www.experienceux.co.uk/faqs/what-is-wireframing/ [Accessed 12 Jul. 2018].
Korkishko, I. (2017). Mobile app development timeline and stages. [online] syndicode. Available at: https://syndicode.com/2017/10/25/mobile-app-development-timeline-and-stages/ [Accessed 12 Jul. 2018].
Langer, A.M., 2007. Analysis and Design of Information Systems Third Edition., New York: Springer.
LearningJQuery (2018). 5 Reasons to Use jQuery. [online] Learning JQuery. Available at: https://www.learningjquery.com/2015/02/5-reasons-to-use-jquery [Accessed 12 Jul. 2018].
Lucidchart (n.d.). UML Use Case Diagram Tutoria. [online] lucidchard. Available at: https://www.lucidchart.com/pages/uml-use-case-diagram [Accessed 12 Jul. 2018].
Nishadha, 2015. Use Case Diagram Tutorial ( Guide with Examples ). Creately. Available at: https://creately.com/blog/diagrams/use-case-diagram-tutorial/ [Accessed 12 Jul. 2018].
Olawale (2017). jQuery vs Vanilla JavaScript – Deciding on What to Use. [online] Codementor community. Available at: https://www.codementor.io/brainyfarm/jquery-vs-vanilla-javascript-deciding-on-what-to-use-6b79xdmrv [Accessed 12 Jul. 2018].
We provide professional writing services to help you score straight A’s by submitting custom written assignments that mirror your guidelines.
Get result-oriented writing and never worry about grades anymore. We follow the highest quality standards to make sure that you get perfect assignments.
Our writers have experience in dealing with papers of every educational level. You can surely rely on the expertise of our qualified professionals.
Your deadline is our threshold for success and we take it very seriously. We make sure you receive your papers before your predefined time.
Someone from our customer support team is always here to respond to your questions. So, hit us up if you have got any ambiguity or concern.
Sit back and relax while we help you out with writing your papers. We have an ultimate policy for keeping your personal and order-related details a secret.
We assure you that your document will be thoroughly checked for plagiarism and grammatical errors as we use highly authentic and licit sources.
Still reluctant about placing an order? Our 100% Moneyback Guarantee backs you up on rare occasions where you aren’t satisfied with the writing.
You don’t have to wait for an update for hours; you can track the progress of your order any time you want. We share the status after each step.
Although you can leverage our expertise for any writing task, we have a knack for creating flawless papers for the following document types.
Although you can leverage our expertise for any writing task, we have a knack for creating flawless papers for the following document types.
From brainstorming your paper's outline to perfecting its grammar, we perform every step carefully to make your paper worthy of A grade.
Hire your preferred writer anytime. Simply specify if you want your preferred expert to write your paper and we’ll make that happen.
Get an elaborate and authentic grammar check report with your work to have the grammar goodness sealed in your document.
You can purchase this feature if you want our writers to sum up your paper in the form of a concise and well-articulated summary.
You don’t have to worry about plagiarism anymore. Get a plagiarism report to certify the uniqueness of your work.
Join us for the best experience while seeking writing assistance in your college life. A good grade is all you need to boost up your academic excellence and we are all about it.
We create perfect papers according to the guidelines.
We seamlessly edit out errors from your papers.
We thoroughly read your final draft to identify errors.
Work with ultimate peace of mind because we ensure that your academic work is our responsibility and your grades are a top concern for us!
Dedication. Quality. Commitment. Punctuality
Here is what we have achieved so far. These numbers are evidence that we go the extra mile to make your college journey successful.
We have the most intuitive and minimalistic process so that you can easily place an order. Just follow a few steps to unlock success.
We understand your guidelines first before delivering any writing service. You can discuss your writing needs and we will have them evaluated by our dedicated team.
We write your papers in a standardized way. We complete your work in such a way that it turns out to be a perfect description of your guidelines.
We promise you excellent grades and academic excellence that you always longed for. Our writers stay in touch with you via email.