Manoj VaseekharanINFO 4 CourseworkHannay Investments Website

Candidate Number: 2080Centre Number: 12456

Contents

Section 1: Background & Investigation31.1: Introduction to the Organisation41.2: Description of the Current System and its Environment of Use51.3: Identifying the Client, Users and Audience 101.4: Why the Client Needs a Solution111.5: Investigative Techniques131.6: Client Requirements23

Section 2: Analysis & Deliverables262.1: Scope of the Project262.1.1: Statement of the Scope262.1.2: Internal Constraint262.1.3: External Constraint272.2: Description of the Current System282.3: Inputs, Processes and Outputs of the Proposed System 292.3.1: Proposed IPO Tables302.3.2: IPO Tables taking into account Clients comments 332.4: Users 372.5: Evaluative Criteria 392.5.1: Quantitative Criteria 392.5.2: Qualitative Criteria 40

Section 3: Design & Planning for Implementation413.1: Alternative Design Solutions413.1.1: Different Types of Software413.1.1.1: Adobe Dreamweaver 413.1.1.2: Wordpress 423.1.1.3: Coding From Scratch 433.1.1.4: Conclusion 433.1.2: Different types of Structures for the website443.1.2.1: Design of structure 1453.1.2.2: Design of structure 2463.1.2.3: Design of structure 3473.1.3: Front end Design of the website483.1.3 Design of structure 347

Section 1: Background & Investigation1.1: Introduction to the OrganisationType and Purpose of the OrganisationHannay Investments is a firm of Independent Financial Advisers who provide advice to both corporate and private clients. Over the years they have built a reputation for delivering high standards of service. Their approach involves helping clients identify their financial objectives and assisting them in achieving these goals through the development of a long term relationship. The company provides advice on all aspects of financial planning and aim to provide bespoke and impartial advice with a simple and straightforward approach. The purpose of the organisation is to produce a profit through the services they provide which range from inheritance tax planning to retirement planning and tax tables. Size & Scale of the OrganisationThe company is situated in a small, ground floor flat in Ealing, near the A40. The team is relatively small in size; consisting of around three to four employees, who have extensive knowledge and expertise of financial services, supported by appropriate qualifications. The company currently has around 250 clients and plans to increase this number in the years to come. Their client bank consists of both organisations and individual people; the vast majority of which are based in the inner London area with the minority situated in rural parts of the UK. The geographical spread of clientele shows that the business is small in scale. Hannay Investments rely heavily on repeat business with their current client base. This is done through providing regular investment advice and client servicing. Client servicing involves regular investment reviews and valuations. This methodology has proven to be very effective as many clients have remained on with Hannay Investments for a substantial period of time.ContactMy contact with the organisation is through Vanessa Barnes. Ms Barnes is the head of the organisation.

1.2: Description of the Current System and its Environment of UseThe system which Hannay Investments currently employs is a website which aims to persuade customers to use their services. The website consists of a homepage which links to various pages with details of their services, their history, contact and other information. Some pages have hyperlinks to external websites. There are also links to pages relating to terms of use, accessibility and their privacy policy. A customer would use the website to gather information on the services Hannay Investments provide. From the homepage they can read up on information about their history, their specific services and contact details.The website is built in HTML 4 which is supported by modern web browsers as well as previous iterations of popular web browsers. However, the website does not render correctly under certain circumstances causing difficulties for the user to access their desired information. They will not be able to access any links and therefore the company could potentially lose customers which would be detrimental to the overall business goals. I have modelled these circumstances below.

Fig 1.1: Hannay Investments current website rendered correctly. Fig 1.2: Hannay Investments website with elements missing. Rendering failed due to User Account Control on the School Network.

Fig 1.3: Hannay Investments website on a mobile device. Elements such as the fade between the photo and white background are rendered incorrectly.Their enquiries system is email based. A customer would send an email to Hannay Investments with their contact details and queries. An auto-reply email would be sent back to the customer. An employee would then use an email client to use details from the enquiry to make a follow-up call with the customer. If necessary, the employee would email the customer and use the email client as a medium for maintaining record of correspondence with the customer.

The environment where the system is being used from the organisations point of view would be the small office space they work in. They deal with all enquiries from their office. The environment where the system is being used from the clients point of view would be wherever they access the website; whether it would be at home via a desktop or laptop, or on the move via a mobile device. The user can view details on Hannay Investments services and make an enquiry through the use of a web browser on the device they are using.Site Map of the Current Website: Homepage About Us Our Principles Contact Us Information Useful Links Importance of being Chartered Privacy Policy Terms of Use Accessibility About Us Importance of Being Chartered Information Investments Inheritance Tax Planning Protection Pension Jargon Buster Pension Tracing Service Tax Tables Retirement Planning Useful Links HM Revenue & Customs Financial Services Authority Fund Prices Financial

1

Fig. 1.4: Web Schema of the current website. Illustrates how one would navigate the website.1.3 Identifying the Client, Users and AudienceClientsMy client is Vanessa Beadsworth and Sean Beadsworth. Mrs Beadsworth is the founder and head of the business. She has been an Independent Financial Adviser for 22 years and is a chartered financial planner, the highest and most prestigious level of professional achievement in the industry. UsersUsers of the system range from the employees of the company to the potential customers who browse the website and interact via the enquiries system. Mr Beadsworth manages the content of the website. He uses a What You See Is What You Get HTML editor (Microsoft Publisher) to edit content. Employees of Hannay Investments use their email client to open up enquiries and deal with them accordingly.Customers would use the website to gather information on the services that Hannay Investments provide. If they wish to make an enquiry, they would use the email address provided to send an enquiry to the company which would be sent to and stored on the companys email client. Listed below are specific users of the system with details on how they would operate the system: Employee of Hannay Investments Uses HTML editor to edit content. Read enquiries in the company inbox which were sent by potential customers and possibly clients. Potential Customer Browses webpages to gather information on Hannay Investments services, location etc. To make an enquiry, they would use the enquiries system on the website. They would use their email client to input information on their query which would be sent to Hannay Investments inbox. Current Client of Hannay Investments Browse webpages to gather more information on Hannay Investments other services. To make an enquiry, they would either use the enquiries system or use the information on the Contact Us page.

AudienceThe audience of the system would also be the potential customers who browse the Hannay Investments website. When browsing the website, they are simultaneously observing the system in use as well as using it.

1.4 Why the Client Needs a SolutionWhile interviewing Ms Barnes (refer to Section 1.5), she informed me as to why she needs a solution. She said that her company has reached a natural review point and has decided that the Hannay Investments corporate identity needs to be re-branded. In addition to this, she told me that there are changes in legislation which Hannay Investments must adhere to. All of these reasons have resulted in Ms Barnes deciding to re-brand the company and in the process, re-design the website to look fresh and modern while still appealing to the majority of her client base who are middle-aged to senior citizens.

The solution I intend to build (a re-designed website) aims to provide many benefits to Hannay Investments and stated below are the points why this project is justified:

Customers will understand Hannays services betterThe new redesigned website will aim to inform potential customers on how Hannays investment approach works in a more detailed and visual way. Ms Barnes stated in the interview that she wanted to use a more aggressive approach in gathering customers. She felt that providing more detailed information on subjects such as Code of Ethics, Investment Outlooks and Investment Advice in addition to the existing pages on subjects such as The Importance of being Chartered and Our Principles. She felt that adding these details to the website would help customers understand Hannays approach to providing their service more effectively. Ms Barnes also felt that adding more visual stimuli to the website, such as diagrams describing steps in providing financial advice, would be beneficial as it would illustrate their business more effectively to their potential customers.

The addition of an informal communication channel with clients/potential customers:Ms Barnes stated that she would like a section of the website to be a blog. While researching competitors, she noticed that there is a lack of personal touch with the way independent financial advisers interact with clients. She feels that by having a blog, employees of Hannay can write about the latest news and developments concerning investments and financial matters. Ms Barnes feels that by having a blog on the website, she can have this informal communication channel with her clients which in turn could help secure more customers.

Sending regular emails to clients as a form of a formal communication channel with clients:Ms Barnes also stated that she would like a quarterly newsletter to be sent to clients. This would target all the clients who do not regularly read the blog and would summarise all the latest news and developments in investments and financial matters. This would have the same benefits as the blog however it is a formal communication channel. Re-designed enquiries system:The current enquiries system is quite primitive in nature as it requires the user to use an email client to send an enquiry to Hannay. This could cause difficulty as some users may not have a local email client or use a web based email client. Therefore, through using a design centred on using forms, the enquiry can be typed into the form and sent. All of this would be done via a specific page on the website centred on enquiries. This eliminates the problem of the user having an email client.

1.5 Investigative TechniquesThere are four investigative techniques: Interview, Questionnaire, Surveys and Observation. I have created a table listing the pros and cons of each technique.Investigative TechniqueProsCons

Interview Questions can be open ended. Interviewer can formulate questions in response to an answer given by interviewee. Questions can be open and complex. Interviewee can answer in as much detail as required. Effective when done one-to-one. If done in group, interview could potentially go off track. Time consuming. Can be expensive to set up.

Questionnaire Cheap. Targets more people. Not time consuming. Easy to set up. Fixed number of responses.

Questions are not open ended. They are closed. No chance for person to put their input.

Survey Quick response questions. Always in the hand of the surveyor. Ability to measure and tally results. May not get many responses due to the quick fire nature of the investigative technique. Lack of detail in responses due to lack of time in conducting a single survey with a person.

Observation Being present in the environment of use. Experience live operation of the system. Not relying on participants responses. Purely based on experience of the observer. Could be better or worse than how the experience is supposed to be.

Upon researching these interview techniques, I decided to use an interview and questionnaire to gather information from my client and the end users. InterviewI interviewed my client, Ms Barnes as a way to establish the client requirements. I decided to do an interview as I felt it was the most effective way to gather information regarding what her requirements are for the new website. As it was a one-to-one interview, we were able to go into certain topics in great detail so I could fully understand what she requires from the solution. I was able to expand upon my questions and ask follow up questions based on the responses she provided. Although interviews can be time consuming and expensive to set up, I felt this technique was most appropriate for establishing client requirements as it allowed me to get the most detail out of my client.

Transcript of the Interview:

Q: What new additions would you like to incorporate to the website?

A: I would like a re-designed About Us page. Id like it to have photos and more information on Hannay Investments. I would like a new section on Code of Ethics. We would like our customers to see how Hannay treat our clients with respect. I would also like a fee structure to be added. I want a breakdown of the prices of our services. I need our customers to know about our Investment Approach. You can take the information and images required for this part from our brochure.

Q: How about with the existing pages? Would you like any new elements to be added?A: I would like a Google Map of our location embedded onto our Contact page.

Q: I noticed that your current system for enquiries is quite out-dated. Do you wish to improve this system?A: Yes. I would like a system where the customer would type their response into a box, type their details, and send their query to our enquiries email address. This automatically gets re-directed to my email address.

Q: Why do you need this solution?A: At Hannay, every few years we reach a review point where we evaluate the business and decide what needs to be changed and improved upon. We are currently at a review point. At this point in time, we are required to incorporate forced changes in legislation. I saw this as an opportunity to make a new start completely re-structure and re-brand the company. 20% of financial investors are leaving the industry due to these changes in legislation. I feel that we need to create an impact upon our customers and gain market share.

Q: Do you feel that through a new website, you will gain market share?A: Yes I do. I feel that our approach needs to be more aggressive. I am going to be getting a new logo from my design team and we will put that on every piece of stationery which we will distribute.

Q: Would you like the website to have a colour scheme similar to that of the logo.A: Of course, yes. However I do want it to be conservative. A large part of our client-base is made up of people over 60 years old and I do not want anything flashy to put them off using the website.

Q: Are there any other features you would like to have on the website?A: I think having a blog would be a good idea. I would like our employees to write about financial news and investment banking. It would be a great way to keep our customers interested in us. Also, I feel that a newsletter would be a great idea too. Our clients would be kept up to date with information on a quarterly basis.

QuestionnaireIn addition to the interview, I created a questionnaire which was distributed to around ten clients of Hannay Investments. I wanted to get the users opinion of the current solution. I wanted to see what aspects they liked and what aspects they did not like. I felt a questionnaire is the most appropriate investigative technique to use for this task for many reasons. It is much cheaper and saves time to set up and distribute than organising ten interviews which is very time consuming and could prove to be very expensive. The users would be spread over a wide geographical range. Using a questionnaire would eliminate this as an issue whereas with the other three investigative techniques, this would be a huge problem to deal with. Furthermore, there are a restricted number of questions and responses which means that I can collate the responses and see what the general consensus of the current website is. Even though questionnaires do not allow for extended input from the user, I feel that is not necessary for what I am trying to investigate.

Sample Questionnaire

Questionnaire on the Hannay Investments Website1. Which of the following categories best describes your last experience using the Hannay Investments website? Would you say that your experience was:a. Very pleasant b. Somewhat pleasant c. Neither pleasant nor unpleasant d. Somewhat unpleasant e. Very unpleasant2. What kind of connection are you using to access the internet?a. Broadbandb. 3Gc. Dial-Upd. Dont know3. How easy do you find navigating the Hannay Investments website?a. Very easyb. Somewhat easyc. Somewhat difficultd. Very difficult4. How often do you find yourself accessing the Hannay Investments website?a. Frequently (once a week)b. Often (once a month)c. Rarely (once every six months)d. Never5. Have you ever used the current enquiries system?a. Yesb. No6. If yes, how did you find the experience?a. Very pleasant b. Somewhat pleasant c. Neither pleasant nor unpleasant d. Somewhat unpleasant e. Very unpleasantf. I have never used the current enquiries system7. What device do you use to browse the internet?a. Desktop Computerb. Laptopc. Mobiled. Tablete. Other8. What browser do you use to access the internet?a. Internet Explorerb. Google Chromec. Mozilla Firefoxd. Apple Safarie. Otherf. Dont Know9. How easy can you find what youre looking for on the Hannay Investments website?a. Very Easyb. Somewhat Easyc. Somewhat Difficultd. Very Difficult

Results of the Questionnaire:

The results of the questionnaire have given me the following conclusions. The opinion of the usability of the website is widely spread. Some find it easy, others find it hard. This may be due to different user skill levels. The wide majority use a broadband connection. Users find the current website easy to navigate. Users do not find the need to visit the site often. One even noted they did not even know it existed. Enquiries system has not been used by the majority. A wide range of devices are used to access the internet. Most of them are mobile devices. Users use more than one browser. Internet Explorer is the most popular but there is a wide range between other browsers such as Chrome, Safari and Firefox.

The results from the questionnaire were discussed with Ms Barnes and together we have formulated the client requirements which have been influenced from the findings discovered via the interview and questionnaire.

1.6 Client Requirements

Requirements for the website:

CR 1: The website must be compatible between browsers and devices. The website must render all elements correctly in all circumstances. The current website fails to render under certain circumstances and devices. This must be corrected so the website can be viewed by any user on any device. The languages used to build the website must therefore be JavaScript, CSS2 and HTML 4.

CR 2: The website must have a colour scheme which suits the new logo (which would be supplied at a later date) and appeals to both young and older users. The colour scheme must be conservative and not harsh to the eyes of the users (especially taking into account older users of the solution).

CR 3: The website must have new photos to act as visual stimuli to the user. The current web-site's photo-set contains grainy, pixelated photos which are outdated and bring down the demeanour of the website. The new photo set must be of high-resolution but have a suitable file size so they download quickly onto the users computer/device. From the questionnaire given out to a number of clients, the vast majority use a broadband connection to access the website.

CR 4: The website must have pages dedicated to:

CR 4.1: About Us - Contains information on Hannay Investments. There will be information on the history of the company, the expertise of their employees as well as more on the founders, Vanessa Barnes and Kelly Warden.

CR 4.2: Fee Structure - Contains details on how much their services cost. The structure would be broken down into several categories depending on the service required.

CR 4.3: Code of Ethics - The code of ethics which Hannay Investments follows will be listed here. Customers will learn how Hannay treat their cases and how their data will be treated.

CR 4.4: Investment Advice - A page dedicated to all the different services Hannay provide.

CR 4.5: Newsletter - Clients can sign up for a quarterly newsletter.

CR 4.6: Investment Approach - Details on how customers should approach deciding on whether to invest or not. The page will feature visual stimuli which illustrate the process to the customer.

CR 4.7: Blog - Written by Hannay employees who discuss the up and coming developments in financial planning and investment banking.

CR 4.8: Enquiries - Customers can use the enquiries form to send an enquiry to Hannay. Other mediums of contact would be shown here too.

CR 4.9: Contact - Address and telephone numbers would be shown here. A Google Map applet is required to be on this page. This would allow the user to quickly get directions to Hannay Investments.

CR 5: The website must have the Chartered Firm watermark across the website. This is so that customers are fully aware that Hannay Investments are a Chartered Firm which means they are one of the best financial firms in the country.

CR 6: The website must have a navigation bar of some sort. No preference was made by the client as to whether it should be a vertical or horizontal navigation bar. It should have links to all parts of the website.

CR 7: The website must have some sort of way to send a newsletter to clients email addresses. The user from the company will need to be able to construct a newsletter which can be sent to clients quarterly. This would be a back-end system of some sort programmed in PHP or a similar language.

CR 8: The website will now have a blog where employees of Hannay will write about the latest news and developments in investment banking and financial planning. A back-end system for must be created for employees to use to create blog posts. It would be written in PHP or a similar language.

CR 9: The website will have a new enquiries system. Ms Barnes has requested for a form-based design. The customer will type their query into the form and it would be sent to Hannay Investments email account. This eliminates the need of an email client on the users part which helps maintain simplicity and streamlines the workflow of the user.

Other necessary requirements

CR 10: A user guide must be produced for employees of Hannay so they can learn how to use the system.

CR 11: The whole system must be up and running by April 25th 2012.

CR 12: All users must be fully trained in using the system by April 25th 2012.

Section 2: Analysis & Deliverables

2.1 Scope of the Project

2.1.1: Statement of the ScopeStated in Section 1.6 were the client requirements. I will focus on these as I design and implement the solution for Ms Barnes. From the research I carried out in Section 1, it is clear that there is a substantial problem which must be addressed; I will state the scope of the project here.The current Hannay Investments website is visually unappealing, incompatible with various web browsers, features an out of date enquiries system and has no functionality which would prevent users returning to the website. All of these factors diminish the business goals of Hannay Investments. The solution must aim to rectify these issues.The new website would have a re-designed layout with new images which would be compatible with major web browsers. The new blog/newsletter feature will be implemented in order to help keep clients and potential customers visiting the website regularly, in order to gather news on Hannays services. The blog will contain information on the up-to-date news on financial planning. The newsletter system will enable users to subscribe to a quarterly newsletter.The website would have an attractive yet professional layout. The website will be branded with the companys new logo. It should be appealing so users will be enticed to browse the entire website. The website should also be easily editable and updateable.

2.1.2: Internal ConstraintsThere are a number of internal constraints which need to be considered before proceeding with the building of the solution.Budget:After further consultation with Ms Barnes there is a constraint with regards to the amount of money she can spend on the development of the solution. She would like to invest most of the money in re-branding measures such as new promotional stationery for the company. However, Ms Barnes is prepared to spend a minimal amount of money on what I feel is essential for the website, be it stock photos or transferring the website to a new web-hosting service.Users:After further consultation with Ms Barnes, user skill of her employees appeared to be another internal constraint. She is planning to implement a blog and a newsletter system. One employee appears to be an experienced power-user of Windows and could easily grasp how to use the blog/newsletter system. However another employee appears to be a casual user of Windows and only uses a computer to check and compose email or read the news. This user may have difficulty grasping how to operate the new blog/newsletter system. More details on user skills is shown in Section 2.4 .Browser Compatibility:This is an internal and external constraint. As an internal constraint, browser compatibility could raise several issues. Employees must be able to use the latest web browsers to update the website and use the blog/newsletter system. To further increase compatibility, the website must cater for older web browsers for the scenario when one must make a quick edit outside of the office.

2.1.3: External Constraints:Data Protection Act:In order to comply with legislation with regards to storing data on individuals, the Hannay Investments website must securely store data on people. This is especially important when it comes to dealing with sending newsletters to clients. All the clients email addresses would be stored on a database which would be held on the website. This database must be inaccessible to the public and should only be accessed by authorized personnel such as the employees of Hannay. Browser Compatibility:As well as taking into account the internal constraint of browser compatibility, the browser compatibility of the website for users outside the company is an external constraint. They use a wide range of browsers ranging from Internet Explorer to Mozilla Firefox and Google Chrome. Gathering various statistics on web browser usage has shown me that there is a wide spread of browsers in the marketplace at the moment and the usage of these browsers are distinctly split. Therefore the website must adhere to web standards which support the majority, if not, all of these browsers. I must avoid newer standards such as HTML5 and CSS3 in favour of older standards such as HTML4 and CSS2.

Fig. 2.1: Statistics of browser usage between February 2011 and February 2012. Internet Explorer and Mozilla Firefox usage has decreased whereas Chrome usage and Safari usage have increased. Although these two browsers support the latest web standards, a fair amount of users are still with Internet Explorer who currently do not support the latest web standards.

Fig 2.2: More detailed statistics on what browser version is the most popular. The previous statistic did not take this into account. Internet Explorer 8 is the most popular browser but does not support the latest web browsing standards. Chrome 17 and Firefox 10 support the latest web browsing standards but are marginally less popular than the out of date Internet Explorer 8. 2.2: Description of the Proposed System

The proposed system is a re-designed website with added functionality. The website would have new pages dedicated to new information which Ms Barnes would like displayed on the website. The appearance of the website will be re-designed with a colour scheme to match the new logo and new visual stimuli. The website will have a new blog section where employees of Hannay would write about the up and coming news in financial planning. This will require a backend database to hold usernames and passwords securely. The website will also have a newsletter system where newsletters can be composed and sent to clients. This will also require a database with clients names and email addresses which would be stored securely.

The proposed system will bring many benefits to Hannay. The new pages will potentially bring a new cluster of customers to the business as they will be able to see what services Hannay provide in more detail. The new appearance will help attract new customers, most probably the younger generation as it will look fresh, modern and sleek. The option of changing text size will aim to help increase accessibility to those who have sight problems as most of their client base are of senior citizens. The blog section will help keep clients and potential customers visiting the website as the questionnaire indicated there is a lack of repeat visits to Hannay. It could potentially increase business due to repeat visits to the website which means users could read up on other services Hannay provide. The newsletter system will aim to target those who do not read the blog and keep them interested in Hannays services. Overall, the website aims to increase business by targeting their entire audience (current customers, potential customers, older users, younger users) with these new additions/re-designs. This impacts the organisation in a positive manner by generating more profits which could be invested in providing new services or new equipment for the organisation.

I have discussed with my client and have decided that a number of deliverables will need to be produced. Listed below are details on what is to be expected to be produced: Potential designs of the website. I will need to provide Ms Barnes a number of mockups of the general layout, colour scheme and design of the website. She will decide whether the website matches her requirements of it being sleek and fresh. Set of photos to put on the website. Ms Barnes requires me to browse stock photo websites and pick out several photos which would be used on the website. She will decide whether they are appropriate for the website. She has previously stated she does not want cheesy and amateur looking photos. A web schema of the new website. She will need to decide whether the new structure is more efficient than the old one. Basic website built, with pages linking to each other made in conjunction with the new web schema previously made. This would be given to Ms Barnes to use and see whether the web schema works in practice. Website with all functionality implemented. (Blog, newsletter, enquiries system) This would be given to Ms Barnes and her employees to test and soon thereafter use. User guide Explains how one would update the website, update the blog and use the newsletter system to enable employees of Hannay to use the system effectively. 2.3: Inputs, Processes and Outputs of the Proposed System2.3.1: Proposed IPO Tables

Here listed are the input, processes and outputs of the proposed blog system for the re-designed Hannay Investments website.

TaskInputProcessOutput

Create a new blog entry. Log in using username and password. Blog title. Blog content. Logging in confirms user is authorized to create a blog entry. Creation of a new blog entry, formatted correctly. Message stating creation of blog entry is successful. If title or body is missing entries, message will state creation is unsuccessful and fields must be filled in. Option to view it and edit it.

Edit a blog entry. Log in using username and password. Edit blog title and content. Logging in confirms user is authorized to edit a blog entry. Edits are saved. Message stating editing of blog entry is successful. If title or body is missing entries, message will state creation is unsuccessful and fields must be filled in. Option to view it and edit it.

Delete a blog entry. Log in using username and password. Click delete to remove blog entry. Logging in confirms user is authorized to delete a blog entry. Deletion of blog entry. Message confirming deletion of blog entry.

Here listed are the input, processes and outputs of the proposed newsletter system for the re-designed Hannay Investments website.

TaskInputProcessOutput

Create a newsletter. Log in using username and password. Compose the newsletter: Title Body Logging in confirms user is authorized to create a newsletter. Creation of a newsletter, ready to be sent to client base. Message asking the user to confirm whether they would like to send the newsletter. Option to click yes or no: If yes: newsletter is sent to client base. If no: then newsletter will be deleted. Option to restart.

Add client to client base. Log in using username and password. Add details on new client: Name Email Address Client will be added to database. Message confirming the client has been added to the client base.

Delete client from client base. Log in using username and password. Click delete to remove client. Client will be removed from database. Message confirming client has been deleted from the client base.

Here listed are the input, processes and outputs of the proposed enquiries system for the redesigned Hannay Investments website.

TaskInputProcessOutput

Send an enquiry. Name Email address Details on enquiry. Enquiry is sent as an email to Hannay Investments. If successful, confirmation message saying enquiry has been sent. If unsuccessful (due to empty fields) message appears saying user must fill all fields in.

I have shown a list of deliverables and processes to Ms Barnes. She sent me an email back with several comments and improvements which could be made to the input, processes and outputs.

Transcript: Hi Manoj, After reading through the Input, Processes and Outputs of the new website, I have a few comments. There does not seem to be any mention of validation on a number of data inputs. I think this necessary as I do not want any invalid data held on the website. Also it appears most of your inputs, processes and outputs are from the administrators point of view. Perhaps you could include the inputs, processes and outputs from the users point of view as well. Hope this helps. Vanessa. I have taken into consideration her comments and I have created new Input, Processes Output tables.2.3.2: IPO Tables taking into account Clients commentsHere listed are the input, processes and outputs of the proposed blog system for the re-designed Hannay Investments website from the administrators point of view.

TaskInputProcessOutput

Create a new blog entry. Log in using username and password. Blog title. Blog content. Logging in confirms user is authorized to create a blog entry. Creation of a new blog entry, formatted correctly. Validation (length check) applied to blog title. Message stating creation of blog entry is successful. If title or body is missing entries, message will state creation is unsuccessful and fields must be filled in. Option to view it and edit it.

Edit a blog entry. Log in using username and password. Edit blog title and content. Logging in confirms user is authorized to edit a blog entry. Edits are saved. Validation (length check) applied to blog title. Message stating editing of blog entry is successful. If title or body is missing entries, message will state creation is unsuccessful and fields must be filled in. Option to view it and edit it.

Delete a blog entry. Log in using username and password. Click delete to remove blog entry. Logging in confirms user is authorized to delete a blog entry. Deletion of blog entry. Message confirming deletion of blog entry.

Here listed are the input, processes and outputs of the proposed newsletter system for the re-designed Hannay Investments website from the administrators point of view.TaskInputProcessOutput

Create a newsletter. Log in using username and password. Compose the newsletter: Title Body Logging in confirms user is authorized to create a newsletter. Creation of a newsletter, ready to be sent to client base. Validation applied to newsletter title (length check). Message asking the user to confirm whether they would like to send the newsletter. Option to click yes or no: If yes: newsletter is sent to client base. If no: then newsletter will be deleted. Option to restart.

Add client to client base. Log in using username and password. Add details on new client: Name Email Address Client will be added to database. Validation on name (length check). Validation on email address (format check). Message confirming the client has been added to the client base.

Delete client from client base. Log in using username and password. Click delete to remove client. Client will be removed from database. Message confirming client has been deleted from the client base.

Here listed are the input, processes and outputs of the proposed enquiries system for the redesigned Hannay Investments website from the users point of view. TaskInputProcessOutput

Send an enquiry. Name Email address Details on enquiry. Enquiry is sent as an email to Hannay Investments. Validation on name (length check) Validation on email address (format check) Validation in form of a CAPTCHA to prevent spam. If successful, confirmation message saying enquiry has been sent. If unsuccessful (due to empty fields) message appears saying user must fill all fields in.

Here listed are the input, processes and outputs of the proposed newsletter system for the redesigned Hannay Investments website from the users point of view.

TaskInputProcessOutput

Sign up for newsletter. Name Email Address Validation in form of length check for name. Validation in form of format check for email. Users details will be stored in a database. User is greeted with a confirmation message stating they have been added to the mailing list. User also receives email stating they have joined the mailing list.

I sent this new version for approval to Ms Barnes. Her response is shown below:

Transcript: Hi Manoj, Thank you for sending me the re-designed IPO tables. I am satisfied with what you have produced and I am happy for you to start designing the website. If you need any input from me, please let me know. Kind regards, Vanessa.

2.4: UsersAs stated in Section 2.1, an internal constraint would be the user skills. As previously mentioned one user is a power-user of Windows and would easily grasp how to use the new system. However, another user is a casual user of computers and would need additional guidance in operating the new system. Listed below are the range of users present in Hannay Investments and details on what they will use the system for.

User of the proposed systemWhat they would use the system forSkills currently possessed by userTraining requiredWhat needs to be considered when designing the solution

Vanessa Barnes Checking/Replying to enquiries. Writing blogs. Composing/Sending newsletters. Maintaining the website. Efficient in using Microsoft Office suite. Has taken computer courses in the past. Competent in using email to communicate. Overall, she is competent in grasping how to use ICT systems. Will need training on getting around the GUI of the system. Will need training in editing web pages due to lack of previous experience. Web page editing needs to be simple as Vanessa is not the only user who has limited web experience.

Sean Beadsworth Writing blogs. Maintaining the newsletter database. Maintaining the website. Efficient in web design (designed old system). Has no previous experience of database management. Overall, he is fairly competent, however needs training in order to fulfil his duties with the new system. Will need training in managing a database. Database system needs to be relatively simple and easy to use to compensate for the lack of experience.

Kelly Warden Checking/Replying to enquiries. Writing blogs. Composing/Sending newsletters.

Only uses a computer for sending and checking email, reading news, checking weather. Has experience with word processors (Microsoft Word). However she uses only the basic tools supplied. Overall, despite having experience with word processors, she does not have skills with regards to working in a web-based system/environment. Will need extensive training on getting around the GUI of the system. She will need training on getting used to HTML mark-up. She will need to be able to identify how to solve common web-based problems (Error 404, rendering errors etc.) This user has limited web experience (similar to Vanessa) therefore the experience of blogging needs to be simple, easy to follow and methodical. Enquiries system needs to be visually simple to use (similar to an email client) as Kelly does not have much experience with ICT systems.

Administrative Staff Checking/Replying to enquiries. Two employees are named as administrative staff. Both are fairly competent at sending/receiving emails as well as using the Microsoft Office Suite. Will need training on getting around the GUI of the system.

The enquiries system should resemble an email client to give the administrative staff a sense of familiarity.

2.5: Evaluation Criteria2.5.1: Quantitative CriteriaQuantitative Criteria are objective based and are based on a quantity. I have reviewed my clients requirements and have created a list of the quantitative criteria. Client Requirement: The solution must be compatible between various browsers on various devices. Evaluation Criteria 1: Does the website work between browsers? To maximise the achieving of business goals, the website must be compatible across various different devices and various different web browsers. To cater for this requirement, the website will be written in HTML4 and CSS2 as Internet Explorer 8 still has a large majority of the web browser market. Internet Explorer 8 does not support the new standards in web technology (HTML5 and CSS3). This is referenced and explained in further detail in Section 2.1 as an external constraint. To meet this criterion, sufficient testing must be conducted in the testing phase of the development life cycle in order to ensure the website works across various web browsers and devices. This is discussed in Section 3.4 and demonstrated in Section 4.1. Evaluation Criteria 2: The solution must be compliant with the Data Protection Act. The database for the newsletter system will be holding sensitive information on Hannays clients. The database will hold the clients name and their email address. To meet this criterion, the database must be encrypted and clients must be notified that their details will be held in this database.

2.5.1: Qualitative CriteriaQualitative Criteria are subjectively based and involve opinion. I have reviewed my clients requirements and have created a list of the qualitative criteria. Client Requirement: The website must have a colour scheme which suits the new logo and appeals to both young and older users. Evaluative Criteria 3: Does the websites design reflect the new logo and appeal to young and older users? This requires opinions and input from my client and end-user. I will ask users in the form of a questionnaire whether they think the design reflects the colour scheme and whether it appeals to them. I will be able to gather the results and draw conclusions from that. I can make changes on the design based on the conclusions gathered.

Client Requirement: The website must have new photos to act as visual stimuli to the user. Evaluative Criteria 4: Are the new photos visually appealing to the user? This requires opinions and input from my client and end-user. I will provide the new photoset to my client for her approval. To meet these criteria, I will need to provide design mock-ups to my client. To further ensure this criterion is met, the design could be shown to end users as well. This ensures that all users will agree on what would be the most suitable and effective design. The designs will include an approved photoset. Creating Qualitative and Quantitative criteria are important because it helps to ensure the client has approved that each element of the system is up to their standards. Qualitative criteria helps to ensure the subjective pieces of the solution (for example, design choices) are met successfully. Also, it ensures that the client requirements are met and achieved. I feel this is most important for creating a solution to a problem.

Section 3 Design and Planning for Implementation3.1: Alternative Design SolutionsBy looking at the client requirements, it is clear that the solution to the problem has to be a website. It is impossible to build any other type of solution. However, different pieces of software will need to be evaluated in order to choose the most suitable. Furthermore, different designs of the website need to be considered, both in terms of structure and aesthetics.3.1.1: Different Types of SoftwareI will need to use web-design software in order to construct the new website. The client requirements state that the website must have the following features: Colour scheme similar to the logo. Navigation bar. Newsletter system. Blog. Enquiries System.I have researched the following pieces of software and established the pros and cons of each.3.1.1.1: Adobe DreamweaverAdobe Dreamweaver is a premier web-design package. It has the potential to create very powerful websites and can handle various scripting languages ranging from basic HTML to PHP and Javascript.Dreamweaver can bring me several advantages. I can implement a navigation bar (client requirement 6) via its Graphical User Interface and through the use of Dreamweavers pre-made templates which are expertly designed. Dreamweaver is excellent at creating the layout of the website as it can integrate together with Adobe Photoshop which would enable me to use Photoshop to do graphic design and export it seamlessly into Dreamweaver. Another advantage of this piece of software is the fact that its GUI will automatically generate the HTML code as I manipulate objects and formatting on the screen. This would cut down the development time.The blog, enquiries system and database would require a database of some sort behind the website which could prove to be very difficult to implement and build due to my lack of experience with the software. Implementing a database of users details can also be very difficult to do. Both of these require experience with implementing a MySQL database into a Dreamweaver designed website which can prove to be a very complex task. 3.1.1.2: WordpressWordpress is a content management system. It involves installing it on a server as a MySQL database and using its interface to create pages. There are many advantages. The unique element to Wordpress is its ability to implement plugins which adds additional functionality to the website. Plugins can add functionality ranging from e-commerce and finance simply putting a calendar on your website. I could use these features to easily implement the blog, newsletter and enquiries system all through the use of plugins. This helps fulfil client requirements 7 and 8. This will save me time from having to manually implement or even program these functions from scratch or in Dreamweaver. However, there are several disadvantages. Wordpress uses themes as a way to create layouts. Themes affect the colour scheme and structure of the website (including navigation bar). These are generally coded as a Cascade Style Sheet. CSS dictates the layout, font and colour scheme of a website. I do not have much experience with CSS so this could prove to be a problem. On the contrary, there are programs available which enable a user to design their own theme, generate CSS and implement the custom theme into Wordpress. 3.1.1.3: Coding from ScratchI will need to use an Integrated Development Environment such as Netbeans or Notepad ++ to code the website. I would need to code in PHP and HTML 4 in order to create the features I want in the website. The advantage of this is that I can tailor the features to suit my exact specification. This gives me room for creativity and experimentation. If I used plugins in Wordpress, there is a risk that it may not work to my exact needs as plugins are designed for a broad range of uses and they may not always have customisation options which would enable them to be tailored to my specific needs.Coding from scratch can be very time consuming and I feel that by using this method, I will most likely not have sufficient time to test or implement the solution. One of my client requirements requires the solution to be up and running by April 20th and I feel I will miss this if I pursue this method. Debugging a website can be very difficult as many elements need to be considered ranging from layout to functionality of the new additions to the website (blog, enquiries, and newsletter). In addition, I am not fluent in writing PHP or CSS so I would find difficulty in coding functions for the database and layout of the website. 3.1.1.4: ConclusionAfter evaluating the above software against my client requirements, I have decided to use Wordpress as my software of choice when building the solution. The fact I do not need to code at all and use plugins instead means that I can meet the deadlines and hopefully build a very polished, professional system.Upon further research, I have decided to use the graphic design program: Artisteer to design the layout and aesthetics of the website. Artisteer has a graphical user interface which allows users to design their own Wordpress themes very easily. It exports the layout which can be implemented onto the website very quickly.Wordpress is a free content management system. I do not need to purchase it and therefore no funds from Ms Barnes are required whereas Dreamweaver costs a substantial amount of money.3.1.2: Different types of Structures for the websiteFrom the questionnaire I did back in Section 1.5, users found the old website easy to navigate. However, due to the inclusion of new features and pages, I feel it may be necessary to restructure the website completely so that the navigation process can be simplified. After having several informal discussions via email, Ms Barnes has allowed me to restructure the website in light of the new pages which are to be included as per client requirements.I have visualised these ideas in the form of web schemas. I have created 3 different schemas. The first one is similar to the original. The second and third are modified in order to reduce the number of items on the navigation bar and sort pages into specified categories.

3.1.2.1: Design of Structure 1: Similar to original structure except more pages was added under certain pages. Pages added were ones which my client requested as mentioned in the client requirements.

3.1.2.2: Design of Structure 2: I have created sub-categories in order to simplify the number of items on the menu of the website. Under each section there are pages which my client requested to be in the website as part of the client requirements.

3.1.2.3: Design of Structure 3: Similar to Design of Structure 2 but has less categories and more sub-categories. Again, they all have pages which my client has requested and mentioned in the Client Requirements.3.1.3: Front-End Design of the WebsiteAs stated in the client requirements and the interview I had with her (see section 1.5 and 1.6), Ms Barnes wanted the website design to look fresh and appealing. Also, in the scope of the project (see section 2.1) I wanted the website to entice users into browsing it entirely. I feel this could be done via the visual appearance of the website. This would help increase the achieving of Hannays business goals as more customers will learn about Hannays services and therefore would be more likely to make an enquiry with them.I have used the program Artisteer to design my website. Ms Barnes design team supplied me with this logo:

I have incorporated this logo into several draft designs which I have made. The designs use a conservative colour scheme which Ms Barnes stated was a requirement of the website.

Website Design 1: This design uses the colours of the logo and has a sleek, professional look to it.

Website Design 2: This has a Vertical Menu as well as a Horizontal Menu

Website Design 3: Experimenting with different backgrounds.

Website Design 4: Experimenting with the colour of the navigation bar buttons and keeping the sheet background white and not transparent.

These designs are directly influenced by the client requirements. All 4 designs use a colour scheme similar to the logo. The colours used include shades of blue and white. All of the designs use a navigation bar of some sort, whether it is vertical or horizontal. Ive ensured that the appearance is not overly flashy which could put off senior users. The design is kept to be as conservative as possible.3.2: Final Design of Solution3.2.1: Final Web SchemaI presented the various web schemas I created to Ms Barnes for approval. She sent me her comments via email.

Transcript: Hi Manoj. Just had a look at those web schemers you sent me. I like what you have come up with. I have a few suggestions. I like the third schema the most. However, I would like you to remove the link between the enquiries page and the contact page and make them two seperate pages. I feel that enquiries and contact are two seperate subjects and should be on two seperate pages. But overall, I am happy with what was produced. Looking forward to seeing your designs. Kind regards, Vanessa.I took her comments into account and created a final web schema (see next page). The final web schema fully meets the client requirements as it contains all the pages that Ms Barnes requested to be in the website. I have also presented the various designs of the website aesthetics to Ms Barnes for

Final Web Schema: Enquiries and Contact Us are now separate pages.3.2.2: Final Front-End DesignI submitted my various mock-ups to Ms Barnes. She sent me her comments and amendments needed via email below.

Transcript: Hi Manoj. I have looked through your designs and I have a few comments. I like the background choice and the transparent sheet. I like the colour scheme too. However, I would like to see a mockup of the website with the visual stimuli you wanted to use. Also, for the homepage, I would like you to make it visually appealing. I do not want just static text. Perhaps you could experiment and find a way to make the homepage more appealing to the user. Furthermore, I havent seen the chartered logo anywhere in your designs. It needs to be there. Regards, Vanessa.I took her comments into account and created a final design which is shown overleaf.

Fig. 3.1.1: This is the homepage of the website. I have added a slideshow which changes the image every 4 seconds and uses a zoom-fade effect for the transition between images.

Fig 3.1.2

Fig 3.1.3

Fig.3.1.4

I have also implemented a slide out tab on the left hand side of the screen. When the mouse is rolled over it, it shows information on being chartered and the logo as well. The tab is shown on all pages across the website.

I have shown these to my client and she has sent me an email confirming she is happy with the design of the solution.

Transcript: Hi Manoj. I am very impressed with what you have designed. This fully meets my requirements. When can we get our hands on it to test it? Regards, Vanessa.

3.2.3: How the Design meets the Client RequirementsI am going to go over all the client requirements and fully state why my design meets the requirements (where appropriate). CR 1: The website must be compatible between browsers and devices. Wordpress is fully compliant with HTML 4 and CSS2 which is what this design uses. Wordpress should be compatible with all major web browsers. Testing (see Section 4.1) will establish whether any layout changes may be needed in light of older browsers. CR 2: The website must have a colour scheme which suits the new logo. The colour scheme must be conservative and not harsh to the eyes of the users. The colour scheme uses tones of blue and white. The tones of blue used reflect the use of blue in the logo. The tones of blue used are of calm and light nature. They are not harsh to the eye. However, user testing (see later section) will establish whether this is the case as this is a subjective criterion. CR 3: The website must have new photos to act as visual stimuli to the user. The homepage uses high quality images edited in Photoshop to entice the user. The sub-pages also have images similar in nature. User testing will establish whether this is the case as this is a subjective criterion. CR 4: The website must have pages dedicated to All pages that were required have been included in the web schemas produced and approved by the client. They are fully incorporated into the structure of the website. CR 5: The website must have the Chartered Firm watermark across the website. Although it is not explicitly visible in the website, the fact there is a tab on the left hand side of every page means the user will see this. When they roll over the side tab, they will see the Chartered Firm logo and a description saying how significant the logo is. CR 6: The website must have a navigation bar of some sort. The design incorporates a horizontal navigation bar below the header. CR 7: The website must have some sort of way to send a newsletter to clients email addresses. The design has incorporated the use of a newsletter plugin which requires users to sign up for a mailing list. Part of using Wordpress as the software of choice. The administrator can generate a newsletter via the plugin and send it to the mailing list. CR 8: The website will now have a blog where employees of Hannay will write about the latest news and developments in investment banking and financial planning. The design has incorporated a blog section. Employees of Hannay will have their own account for the website and can create a blog post which will automatically show up on the blog page. CR 9: The website will have a new enquiries system. Ms Barnes has requested for a form-based design. This has been fully implemented, together with the various forms of validation required. The enquiries system will send an email to a special email address set up to deal with enquiries and will also store enquiries in a database held in the backend of the website.3.3: Planning for Implementation, Testing and Installing/Introducing the Solution3.3.1: Planning for Implementation and TestingTasksClient RequirementDurationDeadline

Implementing the Website.

Creating mock-ups of Web Schemas. Starting the process of fulfilling CR 4. Diagrams are drawn up to illustrate what the structure of the website will be. Diagrams will include the pages required as mentioned in CR 4.2 days1st March 2012

Creating mock-ups of Front-End design of website. Starting the process of fulfilling CR 2, CR 5 and CR 6. Will fully fulfil CR 3 in this task. Designs will attempt to incorporate the following: Navigation bar Chartered Firm Watermark Colour Scheme similar to logo Visual stimuli.

1 week8th March 2012

Getting client feedback for Web Schemas and Front-End design. N/A This is required to make sure the client is satisfied with what I am designing. Client will suggest improvements to initial designs.

1 day10th March 2012

Adjusting schemas and designs in light of client feedback.Continuing to fulfil CR 2, CR 4, CR 5 and CR 6.

3 days13th March 2012

Getting client approval for amended Web Schemas and Front-End Designs.Completely fulfilling CR 2, CR 4, CR 5 and CR 6. Website designs now fully comply with the client requirements.1 day15th March 2012

Populate pages with data and images.N/A 1 day16th March 2012

Implement Newsletter and Blog functionality Fulfilling CR 7 and CR 8. This done through the use of plugins. Validation will need to be implemented as well as mentioned in Section 2.3.2.3 days19th March 2012

Implement Enquiries System Fulfilling CR 9 This is done through the use of plugins. Validation will need to be implemented as well as mentioned in Section 2.3.2.2 days21st March 2012

Testing the website

Functional Testing Making sure functions implemented are working correctly. Helps to make sure CR 7, 8 and 9 are operating as expected. All errors will be noted and fixed. I will be performing these tests.2 days

24th March 2012

Alpha testing

Solution will be given to the employees of Hannay Investments to test. Any errors/comments will be noted down and reported back to me. Helps fulfil CR 1-9 as these are all to do with the implementation of the website. Their comments will tell me whether the implementation is successful.1 week2nd April 2012

Beta testing Hannay will give the solution to a select number of users to test. Feedback will be noted and given to me. This will help fulfil CR 1-9 as these are all to do with the implementation of the website. Their comments will tell me whether the implementation is successful.2 weeks16th April 2012

Maintenance due to feedback Fixing solution after receiving feedback. Helps refine the system and further enhance the fulfilling of CR 1-9.2 days18th April 2012

3.3.2: Planning for InstallationThere are four main types of installation methods: direct, phased, pilot running and parallel running. I will need to consider the fact that both employees of Hannay and potential customers will be using this solution. The installation method should not cause any stress or inconvenience to both parties. Pilot running would be deemed inappropriate as it is impossible to run the system for a select number of users as the website does not have the ability to become the old version for a select range of users and become the new version for another select range of users.Phased changeover may be difficult to put in practice as the website cannot run both the old version and the new version simultaneously. Parallel running could be a viable installation method for training employees of Hannay in using the new system. However, from the users point of view, this is not viable as again, there is no way to selecting a range of users to access the new website while the rest can only access the old solution.The only suitable installation method is direct changeover. This is the quickest and cheapest method of changeover but can have harsh consequences if the process goes awry. To prevent any problems from occurring, sufficient training must be provided to the staff at Hannay well in advance before the new website goes live.Installation TaskClient RequirementDurationDeadline

Taking the existing website offline and uploading all the files and databases to the web hosting service.Helps fulfil CR 111 day25th April 2012

Making the website live.Fulfilling CR 111 day25th April 2012

3.3.3: Planning for TrainingAs mentioned in Section 2.4, some users will need training in several areas. Several training methods could be used to help the employees of Hannay learn how to use the new website. Instructor led training could be useful as I could be at Hannays offices and guide them through the user interface and show them how to do specific tasks. It may be time consuming as there are around 5 employees to train but it will ensure that they are fully able to do what is required of them. The experience is personal and the employees will have the opportunity to ask for help.Using a written guide as a sole training method is inappropriate as the employees of Hannay may encounter trouble which the written guide has not accounted for. The written user guide should be used as a supplement to a better form of training.Computer Based Training could be a better form of training as it is visual and can offer step by step instructions in operating the system. However, similar to the written guide, the user may get stuck and no one would be there to help.So all in all, I feel Instructor led training would be the most effective. Each employee is not required to familiarise themselves with the whole system; just the functions they are in charge of. Therefore, I could go round to each of the 5 employees and show them step by step how to use the system. A user guide will be made to supplement the instructor led training.

Training TaskClient RequirementDurationDeadline

Conducting Instructor led training with the employees of Hannay.Fulfilling CR 122 days25th April 2012

User guide made for employees of Hannay to supplement their training.Fulfilling CR 102 days25th April 2012

3.4: Strategy for Planned Testing of the Effectiveness of the Implemented SystemIn this section I am going to outline my strategy for testing the effectiveness of the implemented system. I am going to test the system against the client requirements and the evaluative criteria. This is known as requirements-based testing. Testing of the objective client requirements and quantitative criteria will be done on my local machine using a virtual server with me as the primary lead tester. This is to ensure that the current system is still in place and operational while testing occurs and that there is no disruption in service.The items which need to be tested extensively are the blog functionality, newsletter functionality and enquiries functionality. The tests need to take into account both the admin side and the user side of these services. In addition, the links between the pages of the website will need to be tested to see whether the structure reflects the approved web schema and that all links have the correct target page.A range of web browsers will need to be used to test the compatibility of the website. As stated in the client requirements (CR 1) the website must be compatible with major web browsers. However, there are many web browsers available. Referring back to my initial research into the subject referenced in sections 1.5 (Questionnaire for Users), and section 2.1 (Internal and External Constraints), it is clear that there is a range of web browsers which can be deemed popular. Firefox, Internet Explorer, Safari and Google Chrome are the browsers which have significant market share. However, in addition to testing the website with these browsers, the website needs to be tested with previous iteration of these browsers. This is to compensate for those who may not have updated to the most recent version of the above browsers. An exception to this is when testing Google Chrome or Apple Safari as they update automatically to the latest version without the need for the user to give input for this to happen. For testing previous versions of Internet Explorer, I will use a program called IETester which emulates previous versions of Internet Explorer perfectly. Google Chrome and Apple Safari are essentially the same browser due to both using the Webkit rendering engine. Therefore only one of these will need to be tested. To establish whether the webpage has rendered correctly, I will view the homepage to see if the slideshow is displayed correctly, see if the slide-out tab works and is laid out correctly, view the About Us page to see if the text uses the correct font family and is displayed correctly and view the Contact Us page to see if the embedded Google Map is displayed. I will need to come up with a range of test data to input into the system in order to see what occurs; the processes and outputs for each type of input needs to be correct. The type of input data needs to be of the following: normal, boundary and erroneous. I need to test whether the system correctly accepts normal and boundary but rejects erroneous data. The newsletter, enquiries and blog system will need to be tested with all three types of data in all input fields.Testing will occur in three stages. Firstly, testing will take place on my local machine with me as the lead tester. Secondly, the solution will be given to the employees of Hannay so they can test the system and give feedback on the subjective client requirements and qualitative criteria. Finally, the solution will be given to a select number of users for them to test and provide feedback to see whether the qualitative criteria have been met.Through the testing process, I will aim to eliminate all types of defects in the solution. I will aim to remove functional defects when I detect an outputs quality is insufficient. I would need to alter certain parameters such as validation rules in order to improve the quality of information output. I will need to eliminate performance defects too. I would do this by removing any unnecessary processes which can slow down the transition from input to output. Usability defects need to be removed as well. This can be done by re-designing forms which users may find illogical and lacking efficiency. Security defects must be eliminated due to the fact the newsletter system will carry email addresses. Encryption needs to be at a suitable level in order to eliminate this potential defect.

3.5 Test PlanClient RequirementEvaluation CriteriaTest No.Test DescriptionTest Data UsedExpected OutcomeActual Outcome

CR 1: The website must be compatible between browsers and devices.The solution must be compatible between various browsers on various devices.

1. Testing whether website renders correctly for a specific browser. This is a test for Internet Explorer 8.N/AWebsite renders correctly.As expected. See Figures 4.41, 4.42, 4.43, 4.44, 4.45 for evidence.

2. Testing whether website renders correctly. This is a test for Internet Explorer 9.

N/AWebsite renders correctly.As expected. See Figures 4.1, 4.2, 4.3 and 4.4 for evidence.

3. Testing whether website renders correctly. This is a test for Mozilla Firefox 11.N/AWebsite renders correctly.As expected. See Figures 4.5, 4.6, 4.7 and 4.8 for evidence.

4. Testing whether website renders correctly. This is a test for Mozilla Firefox 10.N/AWebsite renders correctly.As expected. See Fig 4.46, 4.47, 4.48 and 4.49 for evidence.

5. Testing whether website renders correctly. This is a test for Mozilla Firefox 9.N/AWebsite renders correctly.As expected. See Fig 4.50, 4.51, 4.52 and 4.53 for evidence.

6. Testing whether website renders correctly. This is a test for Apple Safari/Google Chrome.N/AWebsite renders correctly.As expected. See Fig 4.54, 4.55, 4.56 and 4.57 for evidence.

CR 7: The website must have some sort of way to send a newsletter to clients email addresses. 7. Administrator Side Test Creating a Newsletter Adding name of newsletter. Design the newsletter.

N/ANewsletter successfully produced.As expected. See Figures 4.9, 4.10, 4.11 and 4.12 for evidence.

8. Administrator Side Test Adding a subscriber Testing validation for email address field. Normal data used for this test.

Normal:Email: test@test.com

System accepts subscriber details.As expected. See Figures 4.13, 4.14 and 4.15 for evidence.

9. Administrator Side Test Adding a subscriber Testing validation for email address field. Erroneous data used for this test.Erroneous: abcdegf"Due to data not being in correct format, data is rejected.As expected. See Figures 4.16 and 4.17 for evidence.

10. Administrator Side Test Adding a subscriber Double entry into the database.N/ADue to entry already in database, entry is rejected.As expected. See Figures 4.18 and 4.19 for evidence.

11. Administrator Side Test Sending a newsletter.N/ANewsletter sent successfully to mailing list.As expected

12. User Side Test Becoming a subscriber. Testing validation for email address field. Using Normal data.Normal:Michael_hartley@hotmail.co.ukUser is successfully added to the mailing list.As expected. See Figures 4.20, 4.21, 4.22 for evidence.

13. User Side Test Becoming a subscriber. Testing validation for email address field. Using erroneous data.Erroneous:hijklDue to data being in wrong format, data is rejected.As expected. See Figures 4.23, 4.24 for evidence.

CR 8: The website will now have a blog where employees of Hannay will write about the latest news and developments in investment banking and financial planning.14. Administrator Side Test Creating a blog post.N/ABlog post created successfully.As expected. See Figures 4.25, 4.26, 4.27 for evidence.

15. Administrator Side Test Deleting a blog postN/ABlog posted deleted successfully.As expected. See Figures 4.28, 4.29 for evidence.

CR 9: The website will have a new enquiries system.16. User Side Test Make an enquiry Validation test on email field. (Format Check). Normal dataNormal:manoj-v@live.co.uk Data is accepted due to being in the correct format.As expected. See Figures 4.30, 4.31, 4.32 for evidence.

17. User Side Test Make an enquiry Validation test on email field. (Format Check). Erroneous data. Wrong format.Erroneous:lkjasfhgajlfData is rejected due to being in the wrong format.As expected, see Figures 4.33 for evidence.

18. User Side Test Checking whether the verification box works. Entering code as shownNormal:12Accepts data.As expected. See Figures 4.34 and 4.35 for evidence.

19. User Side Test Checking whether the verification box works. Entering code not shown.Erroneous: 123456 7Data is rejected on both occasions.As expected. See Figures 4.36 and 4.37 for evidence.

20. Administrator Side Test Test to see whether entry has successfully been made to database. This signifies that the enquiries system functionality works.N/AEntry was successfully made in database.As expected. See Figures 4.38, 4.39 and 4.40.

Does the website colour scheme reflect the new logo and appeal to young and older users?21. Show the design to a range of users. Users must have a wide age range so the test can target both young and older users. Conduct a questionnaire; collate results in the form of graphs.Design of the website.Users appreciate the new design.See Section 4.2 for more detail on this test.

Are the new photos visually appealing to the user?22. Show the photoset to a range of users. Use same users as in Test 21. Conduct a questionnaire; collate results in the form of graphs.N/AUsers appreciate the new photoset.See Section 4.2 for more detail on this test.

Section 4 Testing and Documentation of Implementation4.1: Evidence of Testing in accordance with Test Plan

Figure 4.1: Evidence of testing being conducted on Windows Internet Explorer 9. Slideshow displayed correctly. Figure 4.2: Slide out tab works as expected and is laid out correctly.

Fig 4.3: Uses correct font family and rendered correctly.

Fig 4.4: Google Map embedded content rendered correctly.

Fig 4.5: Website being tested in Mozilla Firefox 11

Fig 4.6: Slide out tab renders correctly and is properly laid out.

Fig 4.7: Text is laid out correctly and uses correct font family.

Fig 4.8: Embedded content renders correctly.

Fig 4.9: Creating a new newsletter.

Fig 4.10: Adding name of newsletter

Fig 4.11: Creating the design of the newsletter.

Fig 4.12: Message indicating newsletter has successfully been created.

Fig 4.13: Adding a new subscriber from the administrators side of the system.

Fig 4.14: Normal data test@test.com is being used for this test.

Fig 4.15: User has successfully been added to the systems database.

Fig 4.16: Using erroneous data: abcdegf for this test.

Fig 4.17: Invalid Email Address pop-up appears. Data is not accepted and user is not added to the subscribing list.

Fig 4.18: Using the same details I entered before in test number 8.

Fig 4.19: Message appears notifying that the user details match ones which are already in the database, therefore data is rejected.

Fig 4.20: This is the page where the user enters their email address.

Fig 4.21: Normal data used: Michael_hartley@hotmail.co.uk

Fig 4.22: Message confirming user has been added to subscriber.

Fig 4.23: Erroneous data used hijkl

Fig 4.24: Message appears indicating email address is invalid and therefore rejected.

Fig 4.25: Adding a post to the blog.

Fig 4.26: Message says that post is published.

Fig 4.27: Blog post appears in blog section of the website.

Fig 4.28: Viewing blog posts. Deleting the post made in Test 14.

Fig 4.29: Message says that post has been deleted.

Fig 4.30: This is the enquiries page.

Fig 4.31: Normal data entered for email address: manoj-v@live.co.uk

Fig 4.32: Message indicates enquiry was successfully submitted. Data was accepted.

Fig 4.33: As soon as erroneous test data was entered, message appears saying that email address is invalid. User is not able to submit enquiry.

Fig 4.34: Verification works by entering two digits with no spaces. Data entered is 12.

Fig 4.35: Code was accepted.

Fig 4.36: Enter more than 2 characters and data is rejected.Fig 4.37: Enter one character and data is rejected.

Fig 4.38: This is a screenshot of Test 16.

Fig 4.39: This shows that the enquiry has been logged in the back-end database.

Fig 4.40: Viewing details show the enquiry in detail and clearly reflects the information given in Test 16.

Fig 4.41: I am using IE Tester to test the website in an Internet Explorer emulator. I am opening a new IE 8 (Internet Explorer 8) window.

Fig 4.42: The homepage renders correctly.

Fig 4.43: Sidetab is laid out correctly.

Fig 4.44: Text laid out correctly and uses correct font family.

Fig 4.45: Embedded content renders correctly.

Fig 4.46: Homepage renders correctly. Evidence that test is done on Firefox 10.

Fig 4.47: Text is rendered correctly.

Fig 4.48: Side tab is laid out correctly.

Fig 4.49: Embedded content renders correctly.

Fig 4.50: Testing is done on Firefox 9. Homepage renders correctly.

Fig 4.51: Sidetab is laid out correctly.

Fig 4.52: Embedded content renders correctly.

Fig 4.53: Text is laid correctly and correct font family is used.

Fig 4.54: Testing is being done on Google Chrome. Homepage renders correctly.

Fig 4.55: Side tab is laid out correctly.

Fig 4.56: Text is laid out correctly and uses the correct font family.

Fig 4.57: Embedded content renders correctly.

Fig 4.58: Clicking send now will send the newsletter to the subscriber list.

Fig 4.60: Message appears saying email newsletter will be sent in 36 minutes time.

Fig 4.61: Dialog box appears saying emails have been sent successfully.

4.2: Evidence that Testing involved end-users/audience and Client4.2.1: Testing the Evaluative Criteria with the end-users/audienceFor Test 21, I will need to gather a group of users to test the system and gather their opinion on the aesthetics of the website. I have asked Ms Barnes to gather a variety of users so I can conduct another questionnaire in order to find out what the general consensus is on the look of the implemented system.Here is the sample questionnaire:Questionnaire on Opinion of Aesthetics1. Do you feel the layout reflects the logo in terms of colour?a. Yesb. Somewhatc. Not reallyd. No2. Do you like the new aesthetics of the website?a. Yesb. Somewhatc. Not reallyd. No Ms Barnes gathered a range of users aged between 35 and 65. I have collated the results of the questionnaire below.

Results:

Conclusions: The general consensus is that the aesthetics of the website are good. The aesthetics do seem to reflect the logo according to the users opinion. No one said they did not like the aesthetics. 9/10 people said they did like it. For Test 22, I will need to gather a group of users to test the system and gather their opinion on the new photoset. I have asked Ms Barnes to gather a variety of users so I can conduct another questionnaire in order to find out what the general consensus is on the look of the implemented system.Sample Questionnaire:Questionnaire on the opinion of the new Photoset for the Hannay Investments Website1. Do you like the new photoset for the Hannay Investments Website?a. Yesb. Somewhatc. Not reallyd. NoResults

Conclusion: The new photoset has been well received. No negative feedback was provided.

4.2.2: Testing with the Client and End Users at HannayI have emailed Ms Barnes to request that she and her staff test the system. I went down to their office and lent my laptop so they could individually test the system. I provided documentation for the solution as well (explained further in Section 4.3). I asked for testimonials from each employee as well. I have gathered this information and displayed it below.

Transcript: Hi Manoj

Thank you for coming in and providing us with your system. We have tested it and I have listed individual feedback below.

Kelly Warden - The system looks very nice, well done. I am in charge of enquiries, blogs and writing newsletters. I feel the system for enquiries works well and the database is very easy to read. The blog system is a bit complicated but after practicing and reading your documentation, I feel it will not be a big issue. The newsletter system will require practice. I feel the interface is quite ilogical and hard to use. Overall, it looks like a very polished system.

Sean - The website works very well. I am in charge of managing the website. Your user guide has made it very easy to edit and manage pages. I do not see any major problems.

Vanessa Barnes - The system works well. I like the design and it is up to my requirements and standards. I am able to perform all the tasks required for the website. Conclusions As stated in Section 2.4, Kelly is a novice user and does not seem to appreciate the GUI of the administration system. This could be due to her not having enough experience to deal with a variety of interfaces. However, I do understand her point of view. The interface is somewhat clunky and illogical. This will be expanded upon in Section 5.1. They seem to think the website works well and looks good. Ms Barnes stated that the website is up to her standards and requirements.4.3: Documentation for the Implemented SolutionI have created an admin and user guide for the employees of Hannay Investments as stated in the Client Requirements (CR 10). The admin guide will teach the employees of Hannay to use the system and also how to maintain it further. This is attached in the back of the coursework.

Section 5: Evaluation of Implemented Solution5.1: Critical Evaluation of the Implemented SolutionI have to critically evaluate my implemented solution to judge what are the strengths, weaknesses and areas of improvement.I feel there are a number of strong points to my implemented solution. Judging by the response of the questionnaire conducted in Section 4.2, the design of the website has been met with high praise. This is very assuring to hear as much time was spent to ensure the design was suitable for both young and old-aged users. Another strong point of the solution is the structure of the web pages which were dictated by the web schema I designed. After having informal discussions with users, they felt the structure was efficient and easy to follow and not awkward or difficult. Validation works very well and I feel the pop-up messages indicating that data is not being submitted due to invalid entry is a very nice touch in my opinion.However, I do feel there are a number of weaknesses in my implemented solution. I feel that the functionality implemented (i.e the blog, newsletter and enquiries systems) are somewhat complicated to use from the administrators side. It may take the user a long time to get used to operating the system as the interface is clunky, dull and can be confusing at times. This is due to Wordpress plugins being designed without the general novice user in mind. There is little or no room for customising the graphical user interface which is a shame. There are areas of improvement. The system from the administrators point of view would have benefited from a more user friendly interface which could involve hint boxes appearing to guide the user in performing their task. Perhaps even personalised branding on the administrator panel could help make the interface more professional. The extent of change I could have done is difficult to judge as I have little to no experience with PHP which is what plugins are coded in. Perhaps taking more time to research for suitable plugins may have yielded the solution having a more user-friendly admin interface.Overall, I feel I have created a very professional, sleek looking solution. Ms Barnes is pleased with what I have created.

5.2: Critical Evaluation of Implemented Solution against the Client Requirements and Evaluative CriteriaClient RequirementEvaluation

CR1: The website must be compatible between browsers and devices.Through the thorough testing done in Section 4.1 in accordance with the test plan made in Section 3.5 and research conducted in Section 1.4, the website is compatible between browsers and devices.

CR 2: The website must have a colour scheme which suits the new logo. The colour scheme must be conservative and not harsh to the eyes of the users.The new logo has tones of blue and white which reflects in the aesthetic design which solely uses shades of blue and white. The design has been highly praised as seen in the questionnaire conducted in Section 4.2.

CR 3: The website must have new photos to act as visual stimuli to the user.The homepage features a slideshow which uses these new visual stimuli and other pages too. Ms Barnes approved of the photoset and therefore the client requirement was met. I feel the photos used are very visually appealing and I am proud of my choice.

CR 4: The website must have pages dedicated to:

The Web Schema designed included all the pages that Ms Barnes wished to have in the website. The questionnaire conducted in Section 4.2 stated that the structure was efficient and suitable so I feel this client requirement was fulfilled successfully.

CR 5: The website must have the Chartered Firm watermark across the website.The final design features a side tab which slides out and shows a description of the Chartered Firm watermark across the website. This is featured across the website. However, I feel that it may not be immediate enough to the user as there is a chance that the user may never even look at the side tab. There is room for improvement. I could have incorporated the Chartered Firm watermark on the background.

CR 6: The website must have a navigation bar of some sort.This was incorporated into the design which was approved by Ms Barnes. I could have added lines underneath each selection in a sub-menu to help distinguish between different pages. Other than this, I feel the navigation bar is satisfactory.

CR 7: The website must have some sort of way to send a newsletter to clients email addresses.The newsletter system has been implemented successfully and the interface on the users side is very simple and easy to use. However the interface on the admins side of the website is very clunky and inefficient to use. More work could have been put into finding a way to make the interface more user friendly, perhaps by providing hint boxes or even removing sections which are not necessary for the purpose of the newsle