E-commerce website

Introduction

This document consists of a project designed to construct an E-Commerce website for a mobile phone store. Using different methodologies this report will explain in depth how the website was constructed and whether this project was a success. The website allows users shop online for mobile phones and mobile phone accessories. The website consists of many features, which aid the users in locating their desired item i.e. powerful search engine, language translator and easy to use guided navigation menu. These features facilitate users in pin pointing the exact product they are looking for.

The website is based around a mobile phone store located in Victoria Greater London. The store is called E Cell Mobile and is a small PLC, which sells mobile phones and accessories. This website has been constructed for the sole purpose of helping the company expand their business to a vast range of customers and to increase company revenue. In order to achieve this goal there were a couple meetings that were held between the developer (me) and the storeowner. During these meetings it was decided that one of the most efficient ways to accomplish this goal, was to create a website to reach out to customers. This should help increase company revenue as well as, being cost efficient given that it is not very costly to run a website, if compared to opening another store.

An administrator account has been created, which is to be used by the storeowner. This account was created to allow simple and efficient maintenance of the website. With the use of this account the administrator has access to the whole website and can easily edit data with use of a simple GUI, no PHP knowledge is needed. This would be a great benefit to the storeowner since he can very easily maintain the site. This account allows the admin to add more products using the CSV Import Function, add/edit/delete customers and/or product data and much more.

The payment aspect of the website is dealt by PayPal. Once a user selects an item they wish to buy they are redirected to PayPal’s SSL page. It is made clear to the user that they do not need a PayPal account in order to purchase an item on the website. Once the user is redirected to PayPal’s secure payment page, they can select the option to pay by direct debit or credit card. If there are any discrepancies with payment then E Cell cannot be held responsible and the case shall go to PayPal’s accounts department.

Analysis

During the stage at which the PID was constructed there were a few aspects, which were overlooked. Throughout the analysis phase of this report there will be a few stages from the PID that will be extended, rearranged and added.

This project is based around a mobile phone company that does not have an online system. All transactions, customer details and product information are stored on a database that is located on the shop floor. The system that is used to interact with day-to-day customers is pretty slow and lags most of the time. The system that is currently being used is called “Metasys”. This particular software is a database system, which stores customer and product information. When the store gets a new customer, a staff member inputs the customer’s details manually into the database. All products are added to the database through a Point of Sale System (POS).

Now after doing a bit of research it was discovered that this company (Metasys) was no longer in business and as a result no upgrades are available for this software. To get an idea of how bad the current system was, a few surveys were designed and given out to staff members on the shop floor (these can be seen in Appendix B). Judging by the results received from this assessment it was clear to see that a new system needed to be put in place. Below is a list that has been devised to show the problems with the current system:

• System often freezes when taking down customer information
• The database can be very slow at times when accessing large amounts of data
• Does not have the latest security updates due to the company no longer being in business
• Opening and closing the database sometimes leads to corruption of data.
• The system can be slow to respond to common tasks such as “View Customer Info”

A secondary issue that needs to be discussed is that this particular company (E Cell Mobile) would like to expand their business and reach out to a larger customer base and therefore increasing the businesses revenue. The company does not wish to open a new store since this would require a large sum of money, which the organization cannot afford.

This project proposes to replace this old system with a new a modern way of doing business. The new system needs to be faster, easy to maintain and a lot more reliable. Although the current database running on the shop floor has a lot of disadvantages there is one positive aspect that allows new mobile phones that arrive for delivery to be added to the database quickly and easily. This is the POS (Point of Sale) system currently used by the employees at E Cell.

When a bunch of mobile phones arrive for delivery, a staff member uses an electronic laser to scan the bar codes; these are displayed on the packaging of all the mobile phones. After a particular product has been scanned it will automatically be added to the company’s database. E Cell also receives an electronic spreadsheet from their supplier, which consists of all the items that have been delivered to them on that specific date.

The point of sale system is a great method for populating information into database. It is fast, simple and requires minimal effort. In order for this project to be a success it is important that this particular method for adding information to the company’s database is either improved upon or kept the same. If for any reason the POS system is removed and another system is put into place, then this new system must be able to perform tasks, which are faster and much simpler then the point of sale system.

Aims & Objectives

Every project consists of a number of goals, which need to be achieved. These goals decipher whether the project will be a success or a failure. A successful project would have met and accomplished each target. The main aim of this project is to create a product, which resolves the problems that are encountered by the current system.

Below is a list of aims and objectives for this particular project. Some of these aims and objectives that were looked at during the project initiation stage have been changed and modified. There has been an addition of some new goals to the list. The list below has been based around, how appalling the current system is and if a new system was to be created what would it need in order to be successful.

Aims:

• The system should be easy to navigate around
• Buying an item should be fast and efficient
• The system must be user friendly
• The system must be faster and more reliable than the old system
• The admin should be able to add/delete/edit customer and product information

Objectives:

• To provide a mobile system that allows users to purchase mobile phones and accessories.
• Allow users to create their own customer account online.
• To provide an interface usable by less literate computer users.
• Allow users to save any transactions that have been made
• Provide users with tracking info so they can track their purchase

As mentioned in the project initiation document this project will take the DSDM approach. DSDM states that in order to achieve maximum business benefit and a fully working system that is fit for purpose; one must outline the user/business requirements and aim to accomplish them all. DSDM uses an excellent prioritisation method called “MoSCoW”. This prioritisation method outlines the crucial requirements that need to be achieved in order to get a system fit for purpose. All requirements shown in the “Must Have” section below have to be completed in order for this project to be successful.

MoSCoW Prioritization

Must Have

• Users must be able to buy a mobile phone online (M1)
• System must contain search parameters to allow ease of use (M2)
• Site should be user friendly (M3)
• Admin should be able to add/delete/edit product and customer information (M4)
• POS system needs to be improved upon or left as it is (M5)

Should Have

• The user is contacted via email once they have made a purchase (S1)
• The user can email a staff member if they have a question (S2)

Could Have

• Google Maps to display location of shop (C1)
• An online chat client to answer user queries (C2)

Won’t Have

• Selling mobile tariffs (All mobile phones will be pay-as-you-go and not on contract) (W1)

All of the requirements of the Moscow prioritization have been tagged e.g. M1, M2, S1, W1 etc. The reason they have been tagged is because they will be referred to as “M1, M2, S1” etc during the implementation phase of this report.

Requirements

There are certain sets of requirements that need to be achieved when creating this new system. These requirements are split into two sections, “Functional” and “Non-Functional”. These are outlined below.

Functional requirements

• Multiple transactions can be made at the same time
• Customers can add items to a shopping basket
• Customers can view, edit and remove items from shopping basket
• Customer is notified via email when purchase is complete

Non-Functional

• Guided navigation menu makes browsing easy for the user
• Transactions can be completed using multiply currencies
• Availability – System will be up 24/7 with minimum down time
• Accessibility – The system can be viewed in other languages other than English

Requirements Table

A central list of requirements was constructed by the client, these have been listed below. Each of these requirements need to be met otherwise this project will be a failure since the final product will not be fit for purpose. The client gave a larger list of requirements (shown in Appendix D) however the requirements listed in table below is what the client has said to be mandatory prerequisites and thus need to be completed.

Feasibility Study

In the feasibility study the following areas will be looked at, project risk analysis, cost benefit analysis and stakeholder analysis.

Project Risk Analysis

Cost Benefit Analysis

Since this is a student project there won’t be a huge budget. The software that will be used to create this product will either be freeware or already available to the developer. As a result cost will be kept to a minimal. In terms of hardware, a pc/laptop is already available since the University provides this and electrical fees/bills will also be covered by the University. If the system is to be hosted online then these fees will be paid by E Cell Mobile although a free hosting provider will be the first priority.

Stakeholder Analysis

Managing stakeholders is an important factor in order for this project to be successful. Below is a list of all the stakeholders involved in this project i.e. people that are affected by the work that is done, who influence or have power over it or have an interest in its successful or unsuccessful conclusion.

Vishal Verma (Project Manager/Developer)

• The developer’s role will be to manage the project, make sure all milestones are met and that the final product is produced within the set deadline.
• Jim Johnston (Client/General Manager)
• Jim will be the first point of contact. He manages most of the staff and deals with all sales related aspects.
• Dean Forster (Store Manager/Company Owner)
• Dean is the owner of the store and will be the second point of contact.

Project Method & Approach

There is one main objective, which needs to be fulfilled in order for this project to be a success. The new E Cell Mobile system needs to be fit for purpose. A system that is fit for purpose will ideally meet all user/business requirements of this project. Below is a quote from Harvey and Green (1993) that explains what fit for purpose actually is.

“Quality is thus judged in terms of the extent to which the product or service fits its purpose. This notion is quite remote from the idea of quality as something special, distinctive, elitist, conferring status, or difficult to attain. It is a functional definition of quality rather than an exceptional one. If something does the job it is designed for then it is a quality product or service.” (p.16)

“Every product and service has the potential to fit its purpose and thus be a quality product or service. Fitness for purpose has emerged as the fashionable way to harness the drive for perfection. The ultimate measure of perfection, ‘zero defects’, may be excellent as a definition of quality but runs the fatal risk of being perfectly useless. If the product does not fit its purpose then its perfection is irrelevant. ” (p.17)

This specific project will be using the DSDM approach, this is because by using the DSDM approach the project itself will be carefully planned e.g. MoSCoW, timeboxing, facilitated workshops etc. At times it can be very easy for a project manager to become unorganized especially if the project has not been planned and as result, the final results may be below satisfactory.

Due to this reason MoSCoW prioritisation has been discussed earlier on in this report so that the project manager/developer and the client know what exactly the final product will contain.

In conjunction to the management of this project, DSDM Atern will be the main forefront. This technique mainly focuses on Time, Cost and Quality.

Figure 1 below (Atern Approach) states that Time, Cost, Quality is fixed and will not be changed throughout the project’s life cycle, whereas features can be manipulated since it is a variable. The traditional approach to this is the complete opposite and will be avoided since quality should never be compromised.

Facilitated Workshops

Facilitated workshops are part of the DSDM Atern development approach. Since this project uses the Atern management method it was vital to incorporate the facilitated workshop technique into this project.

By using an interactive environment, effective group dynamics and visual aids, facilitated workshops are designed to extract high quality of information in a compressed time frame in order to meet the predetermined set of deliverables.

By constructing these workshops it will make it easier to achieve the targets that have been set from the beginning. The project manager will act as the facilitator and arrange these meetings. Information that maybe be discussed in the workshops is as follows:

• Who is the target audience?
• How can the business reach out to customers?
• Advertising
• Sponsorship

The list is just a small number of topics that maybe be discussed during the workshops. It is vital that all the project stakeholders attend these meetings. Facilitated workshops will give the project manager an overview of what needs to be done and the time everything needs to be completed in.

Design

During the design phase of this project there were a number of solutions that came to mind. The new system that is to be created must overcome the problems faced by the old outdated/system. Below is a list of solutions that could be implemented to solve the problems discussed during the analysis phase.

• Rebuild the system on the shop floor. Install new database software and get faster and more reliable hardware to cater for the new database.
• Build a website to cater for customers, this will also have an online database
• Open a new branch in order expand the business

Two of the solutions shown above (Rebuilding the system and opening a new branch) just do not seem feasibly. Opening a new branch would just to be too costly and would require a lot more man power, effort and time which the company does not have. In terms of rebuilding the new system, the cost of installing a new database and installing new hardware was just too high and above the company’s budget. The only measurable idea was to create a website; this would be cost efficient and require minimal effort.

The final solution was to create an E-Commerce website. This website will be online 24/7, and as a result can be accessed by staff members anytime of the day/night. Employees will no longer need to go to the shop floor to access the database. The website will contain an administrator account that will only be able to be accessed by staff members. This account will give access to the company’s database, which will include access to product details, customer information and any transactions that have taken place.

Users will be able to go onto this website buy a mobile phone (or any mobile accessories), add the item to a basket and then pay for it. PayPal will handle the payment system so the business will have the peace of mind that their money is safe and secure and so will the customers.

The way the payment system will work is once the user has added an item to their shopping basket they will have the option to checkout. The checkout page will give the user a brief description (preliminary invoice) of the transaction, this will include; item description and total price. On this page it will be made clear to the user that they will be paying via PayPal and that a PayPal account is not necessary need in order to make a payment. Once the user accepts these conditions they will be redirected to PayPal’s payment page, this is where account details such as bank account number, sort code are entered. PayPal will verify this information and send out two emails. The first email will be sent to the customer verifying payment and the second email will be sent to the administrator of the site which will contain an invoice of that particular transaction. Once payment has been confirmed by PayPal the administrator can deliver the item to the customer’s address.

Tracking of all delivered items will be provided to all customers. There will be a “Tracking” section on the website which will give a detailed explanation on how customers can track their purchased products. The way the tracking system will work is once the payment has been confirmed by PayPal the administrator will post the item via Royal Mail/DHL to the customers address. Royal Mail/DHL will then provide the administrator with a tracking number. This particular number will be posted to the customer via email. The customer can then visit Royal Mail’s/DHL’s website (the link for this is provided in the email) and enter the transaction number to get a rough idea of when their purchased item will be arriving.

Organisational Benefits

By creating an E-Commerce website it will tackle all the problems the company is currently facing and also, it will be very cheap to run and maintain. Below is a list outlining the benefits of opening an E-Commerce store for E Cell Mobile.

• Expand business
• Interact with a larger customer base
• Increase company revenue
• Faster and more reliable system
• Easy to maintain
• Secure

Software Tools

To develop the website the following languages/tools/software will be used:

PHP/PHP Editor

This will be used as the server side code. PHP will be used to communicate with the MySQL database.

AJAX

AJAX will be helpful since you can update part of a webpage without refreshing the whole content. So in this case the user can enter a search query and instead of refreshing the whole page the results for the search are shown instantly

• Jscript/jQuery
• Guided navigation menu
• MySQL

All customer/product data will be stored on a MySQL database.

• Adobe Flash Flash player will be used on the home page in order attract the audience to the website.
• Swish This program will be used to create a flash video. Although this program is not freeware it is still possible to use the 30 day trial period.
• phpMyAdmin By using the easy to use GUI provided by phpMyAdmin it will make it a lot easier to manage the MySQL database.
• CSS/HTML/XML Designing the website (Aesthetics)
• Adobe Photoshop Constructing the company logo
• Quick ‘n Easy FTP Uploading files to the server
• Apache v2.5 To enable local host a web server needs to be initialised ergo Apache will be utilised.

Prototyping

Since this project will use an agile approach it was important to build a horizontal prototype. This allows the developer to construct the product in an iterative cycle and therefore achieving better functionality.

The horizontal prototype is the man-machine interface (MMI). At first a quick sketch is drawn on a piece of paper in order to get an idea of what is to be done. To make a prototype for the E Cell Mobile system, the website www.gomockingbird.com was utilised. These prototype models can be seen on page 15 (Figure 4, 4.1, 4.2 etc)

During the horizontal prototyping “surface interface” software functionalities were not working but by creating a sketch (using the go mockingbird website) it allowed the developer to achieve a perception test. This helped to evaluate how easily other users could understand the interface. During the perception test users were just shown a bunch of windows and buttons, on a piece of paper. The users were then asked to explain what they understand from the information displayed before them. The results for the perceptions test can be seen in Appendix C

Horizontal prototyping allows the developer to check the behavior of the interface and decipher the vital points, where usability inconsistencies are likely to appear.

After completing the horizontal prototype, and in order to get a full analysis of the user interface, another set of tests was done. These tests are known as “Vertical Prototyping”. This helped to implement a consistent set of functionalities in order to allow the user to achieve a typical scenario of usability. These tests were only done after the GUI was 90% complete. At this stage the prototyping consisted of a series of “user tests” during, which the vital points raised throughout the horizontal prototyping phase are evaluated.

Usability Test

This specific test allows identifying of usability problems and analysing their cause with the users. The user is given the system and allowed to beta test it in any way they like. Solutions are elaborated and implemented during this stage of the prototype and as a result may change the final look and feel of the system. The results for this particular test can be seen in Appendix E.

This test was constructed after the website was completed. If any discrepancies were found during these tests then website was modified accordingly.

GUI Design

Before the implementation phase a few screen designs were constructed. This gave a rough idea of how the website should be built. These screen designs were shown to a random bunch of users in order to assess the usability of the interface (Perception testing – Appendix C)

1. The customer must enter their user name password into these fields in order to login.
2. By using the “Forgot Password?” link the user can input their email address which they used to register with the website, and a new password will be sent to this email address.
3. By checking the “Remember Me?” check box a cookie will be added to the user’s internet explorer folder. This means the user will no longer need to type in their user name and password every time they visit this page.

Product Details

1. These are images of the product
2. Breadcrumb trail; the user can use these links to go back and forth.
3. This section of the page displays information regarding the product.
4. The user can use this link to tell a friend about a product listed on this page.

1. Necessary information such as friends name, email etc must be filled out
2. The information in the “Captcha” must be entered to verify that you are human and not a bot.
3. A message can be written regarding the contents of this email.

1. A short description of the company such as when it started and who is involved in the organisation. Contact information will also be shown in this section e.g. address, email telephone etc.
2. Using the Google Maps API, E Cell Mobile’s location will be shown on this interactive map.

UML Case Diagram

Below is a case diagram for the system that is to be built. It displays two “Actors”, the “User” and the “Administrator”. In the middle is the system where all calculations and processes are made. The user (customer) is able to perform a number of functions, such as searching for an item they wish to buy, adding that specific item to a basket, emailing the site owner etc. The Administrator is able to perform high priority decisions such as viewing all customer transactions, removing or adding customer and product information etc.

The ERM diagram shown in figure 6 displays the different types of tables that will be used in order to create the database. Each table has a different number of attributes and each attribute has its own data type. Each table has its own primary key; this is a unique identifier for every table and is not repeated. Some tables include foreign keys; this is a referential constraint between two tables. The entity relationships between each table can clearly be seen by the bold and dotted lines. Certain tables have a one to one relationship whereas some may have a one to zero relationship.

This ERM model was constructed using MySQL Workbench. This is a freeware program provided by MySQL. Information is taken from a phpMyAdmin database and then converted into an ERM model automatically.

Below is a brief description of each table in the database.

Admin Users:

This table holds details for all the administrators. Administrators are split into two categories; “Super User” and “User”. An administrator classed as a “super user” will have full control over the website and an administrator classed as “user” will be able to control certain aspects of the website.

Search:

This table holds details for all search related queries posed by the user. If a user searches for “Apple iPhone” then this particular search request will be recorded in to this table. This is mainly for the administrator to view and analyse what the most popular search requests are. As a result the admin can cater for the user’s needs. For example, a large number of users search for the same mobile phone however, there is no such phone is listed in the database. The administrator can view this particular search query and cater for the user’s needs by adding that specific handset model to the database and thus increasing sales.

Brands:

This table will hold details for all the different types of brands of mobile phones and their related images.

Order Summary:

Once the user has bought a product, the details of that particular transaction will accumulate in this table. This table will hold information such as customer details, product details and the total price of that particular sale. Towards the finalization of a transaction the customer is shown a summary page, this consists of details regarding their purchase. This information is taken from the “Oder Summary” table.

Inventory:

This table holds details of all the products in the database; this will include attributes such as price, description, name etc.

Order Inventory:

All transactions that are made will be stored in this table.

Customer:

This table holds customer details such address, phone number, postcode etc.

Activity Diagram

The Activity diagram (Figure 7), displays how the new system will work. The current system works in a similar way however orders are not shipped to the customer, since the customer is already in store when making the purchase. The new system will be online and therefore when a customer makes a purchase their item will be delivered to their specified destination. An invoice will also be sent to the customer via email.

The invoice will be sent to the users registered email address. Once payment has been made through PayPal, they administrator will be notified by PayPal, via an email outlining the transaction details and confirmation of payment.

Dataflow Diagram (New/Improved User Interface)

The dataflow diagram below shows a brief outline of how the user interface will look like for the new E Cell Mobile system. The diagram explains some user interactions such as, the user can search or browse for a product, items can be added to a shopping basket etc. From the flowchart we can clearly see that it is not obligatory for the user to login in order to search or browse the site however, in order to purchase an item it is mandatory that all users register and login.

Hosting

When building a website it is crucial to setup a web server. This can either be hosted on your own personal computer or hosting can be bought. There are a number of advantages/disadvantages for hosting online and from your pc.

As the developer of this project it is important to choose the correct hosting method so that it does not affect the development of the system. Below is a list of two hosting methods that can be used, each method has its pros and cons.

Localhost

Localhost means “this computer” and is donated by an IP address of 127.0.0.1. It can be used to host content to the World Wide Web. There is no charge for this since content is hosted from you own computer. In order for localhost to wor,k a web server needs to be installed. Since this website will be using a large database, MySQL and PHP also need to be installed.

The two main web servers out there today are Apache and IIS. As the developer of this project it is important to decipher which one of these is the best web server to use for this project. After doing a bit of research the following results were obtained.

IIS and Apache operate very differently and thus have a variety of advantages of disadvantages. IIS is designed and available to work only within the Windows environment. With IIS 6.0, the only platform currently supported is Windows Server 2003. Although this limits the deployment platforms for IIS-based Web services, it also provides a number of benefits, including greater cooperation with the host operating system and easier management and control through a variety of standard OS tools and utilities.

The Apache web server is very popular due to the fact that is free. This is very advantageous to those who are just trying out web publishing and is still unsure about it. Apache is most commonly included in a totally free web server solution called LAMP (Linux/Apache/MySQL/PHP) which is a collection of open source software that would totally handle all of your web publishing needs from the OS down to the scripting language. Aside from being free, the open source community is also a good source of support for users who have the time and patience to ask for answers.

To get the website online we need to make use of a free service called DynDNS. This allows content from your pc to be published onto the Internet without any charges. DynDNS provides a few host names which you can choose for your website.

Advantages:

• Free to use
• No bandwidth restrictions
• Cheap to run

Disadvantages:

• PC needs to be on at all times, since the content is downloaded from your PC
• Limited choice of domain names provided by DynDNS
• Need to setup Apache/IIS and PHP on your computer

Online Hosting

This is more of a popular choice with a lot of websites. In order to get a website on the Internet one must first buy hosting and a domain name. These can be very costly depending on the type of hosting that is provided and usually there is a yearly subscription.

Advantages:

• Easy to set up
• Unlike localhost your pc does not need to be left turned on at all times

Disadvantages:

• Expensive to setup
• There might be bandwidth restrictions

As the developer of this project it has been decided that during the initial stages of the website build, localhost will be utilised and towards the final stages of the system being completed the website will be hosted online.

Organisation of Source Code

It was important to make sure the source code was kept neat and tidy. This in turn aided the developer to find certain files with ease and debug any errors.

As far as the build directory is concerned an image of this is shown on the left. Every subsystem has a folder. For example all code related to the administrators account is stored in the “admin” folder and CSS related code is stored in the “css” folder etc.

The code is split into several files due to three main reasons. These are listed below:

• Speed up compilation: If all source code is in one file and the developer needs to modify only one line of the code the whole file has to be recompiled. This wastes a lot of time and can be avoided.
• Organisation: Splitting code along logical lines allows the developer to find functions, variables, classes and methods easily.
• Facilitating code reuse: If the code is carefully split into sections and operates independently this will allow the developer to re-use the code for another project.

Implementation

Before the implementation phase began the MoSCoW prioritizations were analyzed one more time especially M1, M2, M3, M4 and M5. This is mainly because without meeting these requirements the project will not be successful and the final product will not be fit for purpose. All of the requirements discussed in the analysis and design sections were evaluated in order to make sure know requirements were missed out.

The first step in the implementation phase was to construct a design. The design of the site must cater to all of the MoSCoW requirements. The website design was mainly constructed using CSS and XHTML. The prototypes that were created during the design phase were used as building blocks to create the final design. The website design will be based on the functions and requirements highlighted by the client. These requirements given by the client are vital ingredients since the developer must incorporate all of the functions into the site in order to cater for the client needs.

After getting hold of these requirements it made sense to construct the design of the website first rather than implementing login pages, search bars and logos etc. The reason for this is because by building the user interface first the developer is able to pin point exactly where certain objects are located, (search box, drop down menu(s) etc) these can then be shown to the client and if the client is not happy with a certain aspect of the design, it can easily be modified. This is also specified in the protocols stated by DSDM. This is a great idea because you are showing progress to your client and getting consistent feedback from them. This allows the developer to make changes to the system until the client is satisfied (iterative development).

The developer of this project has taken an iterative approach when coding the site. During each iteration, pages were redesigned, functionality reprioritised, and testing done on the classes/methods was modified.

Once the website design was completed and the user was happy with everything that had been implemented, it was time to move on to the next step, which was adding functionality to the site. This included adding the following:

• Login page for customers
• Login page for the administrator
• Search Bar
• Guided navigation menu
• Adding items to a basket
• Payment system to be controlled by PayPal

This is a just short list however a longer list with a lot more detail can be found in Appendix F. Once the site was fully functional, the system went through beta testing. There were a couple of tests that were conducted, these are included below:

• Websites Ergonomics (Appendix C)
• Usability Tests (Appendix E)

Setting up PHP, MySQL and Apache

When starting the actual build for the site instead of buying hosting it made sense to run the site from localhost first, so that some tests could be performed. Also it was crucial to set up a web server from home so that it was possible to work from the university. The research that was conducted during the design phase of this report regarding the two web servers (Apache and IIS) played a big part when installing a web server on the developer’s computer.

Since the developer will be using an Apple Macbook to build the website it was impossible to use IIS as a web server in view of the fact that IIS is only part of the Microsoft Windows environment. In that case Apache would be the best choice for a web server.

Below is a brief outline of how PHP, MySQL and Apache were setup on Apple OS X.

PHP

One of the best features for web developers in Mac OSX is the inclusion of PHP and Apache. By default both are inactive and require you to get them ready for business.

Most of the files that needed to be used in order to set up PHP, Apache were actually hidden from Finder (file browser). By using a free text editor called “Coda” you can choose to have hidden files “shown”. Below is a screen shot of “Coda”. It’s as easy as clicking on “View” and then clicking “Show Invisible Files”.

Apache

Apple Mac OSX comes with the Apache 2.2.6 already installed. It’s just a matter of enabling it from settings. This was done by going to the “Sharing” preference pane in System preferences and enabling “Web Sharing”.

Testing Apache/PHP

Now that Apache and PHP have been setup, we need to check if they are both working. This was done by going to the “Sharing Preference Pane in System Preferences and clicking on URL/IP Address”. A page was displayed with the following text “Test Page for Apache Installation”. This meant Apache had been installed correctly. To test for PHP, a new text file was created with the following code:

MySQL

Sadly MySQL was not included with the Apple Operating System therefore a MySQL installation file had to be grabbed from the MySQL website. Along with the MySQL installation file. MySQL GUI tools were also installed to allow ease of use when using the database.

There is also a Preference Pane that needed to be installed that allows MySQL to be stopped and started from System Preferences. After the preference pane was installed MySQL was started by going to System Preferences.

Installing FTP Server

By installing an FTP server it made it easier to work from University. FTP access included Luxuries such editing, deleting and uploading files to the server from anywhere as long as there was an Internet connection present. In order to setup an FTP server an account had to be created at DynDNS. This is a free website which allows you to link an IP address to an Apache server. Also you are provided with a free web address, this is a URL which is used to access your server.

The image above displays the configuration controls in order to setup the server. Due to security reasons a password was applied to restrict access to unauthorized personal. The path displays the folder which needs to be accessed; in this case it’s the “web server” folder which holds all the PHP and HTML files. All permissions were given ergo allowing full control over the server.

Constructing the User Interface

When coding the user interface, firstly a simple outline was made. This consisted of a few links e.g. login, register and view basket. Then two drop down menus were added these included “currency” and “language”. By using CSS code e.g. “div’s” and “position: absolute” these links were rearranged and moved to the top right and corner of the page. By using the tag “<b>” text was turned to bold. For now these hyperlinks are linked to blank pages. The following HTML code was used to link text to different pages.

Latest Products

One of the requirements for this project (Requirement R3) was to include a page on the website which gave information to users regarding any latest products. To meet this requirement a table was created with two rows and three columns. This made a total of six grids. Each grid was populated with an image, two buttons and a concise outline about the product. This can be seen below.
Each grid has been populated with an image of a mobile phone and each mobile phone has a short description. The user can either buy that particular phone or view it for more information. The “view” and “buy” buttons were created using Adobe Photoshop. The images for the mobile phones were taken from Google, and it was made sure that these pictures are not copyrighted so that they can be used on this website.

Website Logo

The owner of E Cell Mobile provided me with a sketch of how he wants the company logo to look like. Using Adobe Photoshop the sketch was imitated and added to the top left hand corner of the website. As shown in the prototype section. Below is a screenshot of the company logo.

Search (Phone Finder)

Requirement M2 (R1) listed in the MoSCoW prioritisation states that there should be a feature which displays a bunch of search parameters allowing the user to search for items listed in the E Cell Mobile store. Below is a screenshot showing the search feature that has been implemented on the website.

Search by Text

This part of the search allows the user to type in exactly what they are looking for. If any results are found they are shown below the search parameters. Using a bit of AJAX and JavaScript another feature was implemented “Search as You Type” and added to the search parameters.

The way this works is the user starts to type in a string, (like shown below in the screenshot) and if that particular string matches any of the products listed in the MySQL database all of those results are shown in a drop down list.

HTML code was used to create the layout of the search box. This part of the code also has an event handler, onkeyup, that calls the doSearch() method. It then creates an image that has the onclick method set to the same action. It returns false here so that the form’s action is not called.

Another way the user can search for a partiular mobile phone is to use the check boxes that have been implemented. Say for example a user would like to buy a mobile phone which is Touchscreen. In that case he/she can tick the “Touchscreen” check box and all the mobile phones which are Touchscreen will show up in the results. This can bee seen in the screenshot below.

This works exactly the same for the other check boxes. If more than one check box is ticked e.g. Bluetooth, MMS and Wi-Fi then all mobile handsets with those specific features will be shown in the results. From the results the user can see the price of the mobile handsets and a small thumbnail. By clicking the “view” button the user is taken to another page which gives a bit more detail on that particular handset, along with some screenshots.

This works in a similar way to the previous search method (Search as You Type). Each product in the database is given a certain attribute e.g. Bluetooth, MMS, Wi-Fi etc. When a certain check box is ticked all mobile handsets with that particular attribute are shown in the results.
4.6.3 Search by Drop Down Menu

Finally the user can use the six different drop down menus to narrow down their search. Below is a brief description of what each drop down menu is for.

Manufacture:

Search by a specific manufacturer. E.g. If one is looking to buy an iPhone then you should search for Apple.

Model:

If there is a particular model one is interested in then you can search for that

Colour:

If the user is looking to get a mobile phone that is of a specific colour, then this drop down menu can be utilised.

Style:

Mobile phones come in different styles; this can vary from slide mobiles to flip phones.

Camera Type:

Due to the increase in technology over the past few years mobile handsets now come with built in cameras. These range from 2megapixel to 8megapixel.

Band:

Not all mobile phones work abroad, this depends on what band a particular a hand set is on. A phone which is quad-band will work in more countries compared to a phone, which is tri-band.

When a user decides they wish to buy a phone or find out more information regarding a particular mobile phone they are taken to a page similar to the one shown below. This page varies depending on what mobile phone the user is looking at.

On the top left hand corner of this page there is a breadcrumb trail allowing the user to navigate back and forth. As you can see from the screenshot above the user is currently on the “Nokia” page however if the user wishes to go back a page then he/she can click on the “Mobile Phones” hyperlink and they will be taken back a step.

An image is shown of the mobile phone and a description is given so that the user knows exactly what they are buying. Most importantly the user is shown a price tag so they know how much they will be paying for this particular handset. Also there is a small link called “Tell a Friend”, if the user chooses to share the information on this page with a friend, then they can click this link and send an email. More information regarding this is given later on in this document.

Under “Product Options” we can find more info regarding this handset. As an addition to the description of the handset there are a total of 7 images located towards the bottom left hand corner of this page. These images denote whether this handset has the following features Bluetooth, Speakerphone, MMS, Windows Mobile, Touchscreen, Wi-Fi and FM Radio.

The “product code” is just for information purposes only, the user can use this product code to add more items to the basket, this will become more evident later on in the document.

Towards the end of the page the user is shown info on how many of these handsets are available in store “Stock Count”. There is an input box to allow the user to choose the number of handsets they wish to buy “Quantity”. Finally there is a button “Add to Basket” which is a semi-confirmation that the user wishes to buy this handset (Requirement R2). If the stock count is zero then this button is not visible.

Shopping Basket

This is an outline view of the customers transaction. On the top right hand corner there is a drop down menu called “Currency”. The user is given the option to choose from three different currencies. E.g. if the user clicks on “US Dollars” then the “Subtotal” and “Basket Total” will be converted to US Dollars.

The product code shown on pafe 43 can now be used on this page by the customer to add more products to the basket.

There are other usefell links on this page such as “Empty Backet, “Previous Page” and “Homepage” which the user can use to his/her disposal.

Payment System

Below is a screenshot of the payment section of the website. The user has two options to pay for their purchase. They can use a Postal Order Form; this contains the companies account number and sort code. The user can then transfer the money using BACS (Bankers Automated Clearing Services). Also the customer can put down their debit/credit card details and post it off to the company. Another more effect option is to use PayPal. It is made clear to the user that they do not need a PayPal account in order make a payment.

If the user decides to pay via PayPal then they will be shown the following page shown below. This is PayPal’s secure SSL payment page. A unique ID has been given to this transaction (Cart Order No) and the total price is shown towards the top right hand corner. If the user has a PayPal account they can log in using their existing credentials. If the user does not have a PayPal account then they can use the link provided at the bottom left of the page to enter their debit card details.

Once payment has been confirmed by PayPal, the user will be sent a confirmation email; this will include an invoice for this transaction. The administrator of the website will also be sent an email in order to verify payment so that the necessary product(s) can be shipped off to the customer. Once the product has been shipped the admin will send tracking information to the customer via email.

The reCAPTCHA php libraries were used, since this is a simple way to place a CAPTCHA on a website helping to avoid bots abusing the site.

1. The user loads the web page with the reCAPTCHA challenge JavaScript embedded.
2. The user’s browser requests a challenge from reCAPTCHA. This gives the user a challenge and a token that identifies the challenge.
3. The user fills out the web page form, and submits the result to the application server, along with the challenge token.
4. reCAPTCHA checks the user’s answer, and gives it back a response.
5. If true, this will allow the user to send an email and contact their friend

The customer has a total of four options to choose from. These include the following:

• Personal Info – This is information about the customer e.g. Name, Address, Telephone number etc. This data can be edited by the customer at any point
• Order History – This shows all pending/complete transactions
• Change Password – Allows the user to change their password as long as they know their current password
• Newsletter – If user wishes to receive monthly newsletters from the store then they can enable this option from here.

Administrators Account

Since the client of this project is not computer literate, an administrator account was made so he could maintain the website once the project was completed. The administrator account has been created in a way that it is very easy to use and no PHP/MySQL knowledge is required to edit/add or delete customer and product data (Requirement R6).

As mentioned in the analysis phase the current system uses a POS system to upload products to the database. To improve on this system a CSV upload function has been implemented. When new delivery arrives, the store manager is proved with a electronic spreadsheet with all the products that have delivered on that specific day. By using the admin account this spreadsheet can be uploaded to the website, and all the contents in that spreadsheet are added to the database automatically, thus making it a lot more affective then the current POS system.

Login Script

It was important to create a login script to allow each registered user to view their personal details on the website such as their shipping address and any pending/successful orders they have placed. To get things started off a simple database was constructed using MySQL.

A new file was created called “login.php”. This will allow the user to login and take advantage of the “Remember Me” feature. What this feature does it once a user has logged in, their credentials is saved on to their PC (cookies). Next time the user visits the site he/she will not need to login again.

Project Review & Conclusion

The primary goal of this project was to construct a new mobile phone system in order to aid E Cell Mobile in expanding their business and increasing revenue. Due to the tight budget, the only plausible solution was to create a website which sold mobile phones that were provided by E Cell Mobile. As discussed during the analysis/design stage of this report, there are a number of benefits to selling merchandise online. These advantages were reviewed by the developer and the client in order to achieve maximum business benefit. For instance an E-Commerce store helps reduce delivery time, labour cost and the cost incurred in areas such as, data entry, document preparation and supervision expenses as compared to having a high street store. Ergo the final solution was to build an online website.

Management

As project manager and developer it was vitally important to challenge the scope and plan of this project. By challenging the scope and plan of the project one is entertaining the methods that should be used in order to approach set targets. By ascertaining these methods one is able to discover flaws inhibiting a successful outcome.

The Gantt chart created, outlined the deadlines/milestones for the project thus making it easier to stay within budget and within the timescale provided by the client. Any risks that were associated with the project were contained within the Risk Analysis section. Here, the risks associated with the project were addressed and solutions were given in order to combat any predicaments.

One of the risks outlined in this project was associated with the management of the website by the client (administrator). Since the client is not computer literate, managing the website may come as a challenge. In order to overcome this risk an administrator account was created. This included a simple to use graphical user interface, which the client can make use of.

After reviewing the project initiation document and the final results of the project, it can clearly be said that the final system that has been accomplished, is fit for purpose. All the requirements that were provided by the client have been met, alongside other additional features that have implemented.

If one were to compare the PID against the final results of the project we can see that the project has been completed within the timescale provided. All milestones and deadlines have been achieved and the project has stayed within the set budget. The overall management of the project was based around what the client required (prerequisites) and how these requirements can be met within the time frame provided. DSDM was used as the main method for managing the project this is because it states to use the agile development technique thus making sure quality is never compromise. More information on this can be found in figure 1 (3.1).

Aims & Objectives

Now in order to validate if the aims and objectives of this project have been accomplished, we need to analyse Appendix G. This Appendix contains a survey, given to users that beta tested the site. It was merely constructed in order to verify if the aims and objectives of the project have been met. By looking at the results from these surveys, it can clearly be said the all the aims and objectives have been achieved. A vast majority of the users that filled out the survey found the site to be very easy to use and straightforward to navigate. The well distinguished headings are clear to follow. The options provided in the search parameters allow the user to find distinct items incompliance with the user’s criteria.

Albeit a small minority of users that filled out the survey experienced some difficulties when browsing the site especially when making a payment. Users were confused by one of the payment options provided. Questions were raised to why the “Postal Order Form” payment was listed as an option since it was unnecessary. The PayPal method was available and could also be used by those who did not have an account affiliated with PayPal. The “Postal Order Form” payment method has been outlined by users to be time consuming. Ancillary, there are security issues surrounding this form of payment since it can be daunting for a customer to put down their debit/credit card details which are then posted off to the company. If the details get in the wrong hands they can be misused or the “Post Order From” can get lost and therefore cause incontinence to the customer (such as the customer may not receive the phone). This invaluable feedback attained from these surveys stresses that this particular payment method should not have been used. In future projects more thought will be given to the construction of a payment method so that the sensitive data provided by the customer is well protected.

Ultimately all aims and objectives stated during the project initiation document have been met. The client requirements stated in Appendix E have all been achieved; this is evident in the implementation stage of the report.

Ergonomics

The research that was conducted prior to the construction of the website, showed that a lot of mobile phone websites such as “Phones4u” and “Carphone Warehouse” spewed out a vast amount of information to their customers, and not necessarily being direct and meeting the user’s needs. Due to this overflow of information it was difficult to navigate around the site and locate exactly what you want. This information was taken very strongly ergo the E Cell mobile website was built so that only the appropriate information is given to the customer, allowing quick but yet simple navigation around the site.

The guided navigation menu was built to allow ease of use for the customer, allowing the user to choose a mobile phone they are looking for, rather than having to browse the whole database line by line. The colour(s), structure and placement of the menu was carefully planned so that the information can easily be read/accessed by the customer.

The search feature was split into three different fragments; giving the user the option to search as they type, search via drop down menus and check boxes. Again the font, structure, placement and colour of the search features were carefully and astutely designed making sure the ergonomics of the website best suit the customer.

The perception test(s) shown in Appendix C confirm that the ergonomics work well and in favour of both the user and the business.

Failures and Success

It is a given that “projects [will] fail too often because the project scope was not fully appreciated and [the] users needs [were] not fully understood.” This project was started with Field’s quote in mind. This guiding quote was helpful in that user needs were fully established allowing the project to be successful. The customer does not only want a great product but also wants easy access the product and a healthy customer to business relationship. This not only ensures that the product will be bought there and then but also ensures future sales.

This project has many successful aspects. One successful component is that the website looks professional, it creates a welcoming atmosphere with the customer and the user is helpfully guided to the product s/he wishes to purchase. For a project to be considered as a success it must be completed within budget, on time and meet the clients expectations. Judging by the feedback received from the customers (Appendix D and G) and the client (Appendix H) one can say that this project was a success.

The only downside to the project is that the use of JavaScript can inevitably increase the time taken for certain web pages to load. In turn users that have little time may stop using the site and seek alternative websites, which load quicker and therefore causing loss to the business.

The lesson learnt from this is to employ other means of expressing data to the customer. For example flash could be used albeit flash also has its downsides such as the user may need to download a certain plug-in before the content can be viewed.

Further Improvements

This website like many others is not perfect and in order to improve it, one must take into account what it lacks.

One thing it lacks which could be as a crucial tool used to draw in customers is that it doesn’t post news from the technological world every day. This technique could be employed to our advantage, since gadget fanatics (who may not wish to purchase anything) will visit the site and may stumble across a technological ‘must have’ or may recommend the site to others who wish to buy.

Another addition to the website could be an added review section, where mobile handsets are assessed by critics. This would greatly aid those users who do not hold large amounts of knowledge about phones. This review section may also stop customers from buying a mobile phone that they think they may want and it shall direct them to a better buy.

Conclusion

This project effectively expands the E Cell mobile business. The project was a challenging one if we take all the aims into account. It required determination and a good plan to meet all set targets. One may believe without a doubt that this project is a success. It promises a good business at present but it also guarantees E Cell Mobile a healthy future.

Bibliography

• Field, Tom. (1997). “When bad things happen to good projects”, CIO magazine, Oct 15, 1997, Vol. 11, 2; pg. 54, 6 pgs.
• Carolyn Snyder.(2003). “Paper Prototyping”, Morgan Kaufmann, 12 May, 2003, Vol. 1; pg 28
• Harvey & Green. Fit For Purpose. [Internet]. Edition. Harvey & Green. <http://www.qualityresearchinternational.com/glossary/fitnessforpurpose.htmf> [Accessed 18th January 2009]
• Library Services, Citing References – Harvard Style. [Internet]. Edition. Science Faculty Team. <http://www.kingston.ac.uk/centreforGIS/ptp/Harvard_referencing_handout.pdf> [Accessed 24th October 2009]
• Bruce Timberlake. Building a LAMP Server. [Internet]. Edition. Bruce Timberlake. http://www.lamphowto.com [Accessed 2th February 2009]
• Saikat Chakrabarti. Go Mocking Bird. [Internet]. Edition. Go Mocking Bird. <http://gomockingbird.com> [Accessed 8th January 2009]
• Martin C Brown. IIS vs. Apache, Looking Beyond the Rhetoric. [Internet]. Edition. Martin C Brown. http://gomockingbird.com [Accessed 2th January 2009]