Manoj Vaseekharan

INFO 4 Coursework
Hannay Investments Website

Candidate Number: 2080 Centre Number: 12456

Contents
Section 1: Background & Investigation ................................................................................................................. 3 1.1: Introduction to the Organisation ................................................................................................................... 4 1.2: Description of the Current System and its Environment of Use ............................................................... 5 1.3: Identifying the Client, Users and Audience ............................................................................................. 10 1.4: Why the Client Needs a Solution ................................................................................................................ 11 1.5: Investigative Techniques .............................................................................................................................. 13 1.6: Client Requirements ...................................................................................................................................... 23

Section 2: Analysis & Deliverables ...................................................................................................................... 26 2.1: Scope of the Project ....................................................................................................................................... 26 2.1.1: Statement of the Scope .......................................................................................................................... 26 2.1.2: Internal Constraint ................................................................................................................................. 26 2.1.3: External Constraint ................................................................................................................................ 27 2.2: Description of the Current System .............................................................................................................. 28 2.3: Inputs, Processes and Outputs of the Proposed System ......................................................................... 29 2.3.1: Proposed IPO Tables ............................................................................................................................. 30 2.3.2: IPO Tables taking into account Clients comments .......................................................................... 33 2.4: Users ............................................................................................................................................................... 37 2.5: Evaluative Criteria ........................................................................................................................................ 39 2.5.1: Quantitative Criteria ............................................................................................................................. 39 2.5.2: Qualitative Criteria ............................................................................................................................... 40

Section 3: Design & Planning for Implementation ........................................................................................... 41 3.1: Alternative Design Solutions ....................................................................................................................... 41 3.1.1: Different Types of Software .................................................................................................................. 41 3.1.1.1: Adobe Dreamweaver ................................................................................................................... 41 3.1.1.2: Wordpress ..................................................................................................................................... 42 3.1.1.3: Coding From Scratch .................................................................................................................... 43 3.1.1.4: Conclusion ..................................................................................................................................... 43

3.1.2: Different types of Structures for the website ..................................................................................... 44 3.1.2.1: Design of structure 1 ..................................................................................................................... 45 3.1.2.2: Design of structure 2 ..................................................................................................................... 46 3.1.2.3: Design of structure 3 ..................................................................................................................... 47 3.1.3: Front end Design of the website .......................................................................................................... 48 3.1.3 Design of structure 3 ............................................................................................................................... 47

Section 1: Background & Investigation

1.1: Introduction to the Organisation
Type and Purpose of the Organisation Hannay 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 Organisation The 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. Contact

My 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 Use

The 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.
6

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
7

 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

Fig. 1.4: Web Schema of the current website. Illustrates how one would navigate the website.

1.3 Identifying the Client, Users and Audience

Clients My 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. Users Users 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 o Uses HTML editor to edit content. o Read enquiries in the company inbox which were sent by potential customers and possibly clients. Potential Customer o Browses webpages to gather information on Hannay Investments services, location etc. o To make an enquiry, they would use the enquiries system on the website. o 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 o Browse webpages to gather more information on Hannay Investments other services. o To make an enquiry, they would either use the enquiries system or use the information on the Contact Us page.

10

Audience The 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 Solution

While 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 rebranded. 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 better The 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
11

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.

12

1.5 Investigative Techniques

There are four investigative techniques: Interview, Questionnaire, Surveys and Observation. I have created a table listing the pros and cons of each technique. Investigative Technique Interview Pros 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. Cheap. Targets more people. Not time consuming. Easy to set up. Fixed number of responses. Quick response questions. Always in the hand of the surveyor. Ability to measure and tally results. Cons Effective when done oneto-one. o If done in group, interview could potentially go off track. Time consuming. Can be expensive to set up.

Questionnaire

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

Survey

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.

13

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. Interview I 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.

14

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 clientbase 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.

15

Questionnaire In 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 Website

1. Which of the following categories best describes your last experience using the Hannay Investments website? Would you say that your experience was:
a. b. c. d. e. Very pleasant Somewhat pleasant Neither pleasant nor unpleasant Somewhat unpleasant Very unpleasant

2. What kind of connection are you using to access the internet? a. Broadband b. 3G c. Dial-Up d. Dont know 3. How easy do you find navigating the Hannay Investments website? a. Very easy b. Somewhat easy c. Somewhat difficult d. Very difficult 4. How often do you find yourself accessing the Hannay Investments website?
16

a. Frequently (once a week) b. Often (once a month) c. Rarely (once every six months) d. Never 5. Have you ever used the current enquiries system? a. Yes b. No 6. If yes, how did you find the experience?
a. Very pleasant b. Somewhat pleasant c. Neither pleasant nor unpleasant d. Somewhat unpleasant e. Very unpleasant f. I have never used the current enquiries system 7. What device do you use to browse the internet? a. Desktop Computer b. Laptop c. Mobile d. Tablet e. Other 8. What browser do you use to access the internet? a. Internet Explorer b. Google Chrome c. Mozilla Firefox d. Apple Safari e. Other f. Dont Know 9. How easy can you find what youre looking for on the Hannay Investments website? a. Very Easy b. Somewhat Easy c. Somewhat Difficult d. Very Difficult

17

Results of the Questionnaire:

1. Which of the following categories best describes your last experience using the Hannay Investments website? Would you say that your experience was:
3.5 3 2.5 2 1.5 1 0.5 0 Very Pleasant Somewhat Pleasant Neither Pleasant or Unpleasant Somewhat Unpleasant

2. What kind of connection are you using to access the internet?

8 7 6 5 4 3 2 1 0 Broadband 3G Dial-Up Don't Know

18

3. How easy do you find navigating the Hannay Investments website?

4.5 4 3.5 3 2.5 2 1.5 1 0.5 0 Very Easy Somewhat Easy Somewhat Difficult Very Difficult

4. How often do you find yourself accessing the Hannay Investments website?
4.5 4 3.5 3 2.5 2 1.5 1 0.5 0 Frequently Often Rarely Never

19

5. Have you ever used the current enquiries system?

8 7 6 5 4 3 2 1 0 Yes No

6. If yes, how did you find the experience?

8 7 6 5 4 3 2 1 0 Very Pleasant Somewhat Pleasant Neither Pleasant nor Unpleasant Somewhat Pleasant I have never used the current enquiries system

20

7. What devices do you use to browse the internet?

7 6 5 4 3 2 1 0 Desktop Computer Laptop Mobile Tablet

8. What browser do you use to access the internet?

3.5 3 2.5 2 1.5 1 0.5 0 Internet Explorer Mozilla Firefox Google Chrome Apple Safari Other Don't Know

21

9. How easy can you find what youre looking for on the Hannay Investments website?
4.5 4 3.5 3 2.5 2 1.5 1 0.5 0 Very Easy Somewhat Easy Neither Easy Nor Somewhat Difficult Difficult Very Difficult

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.

22

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.

23

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.

o o

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

24

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.

25

Section 2: Analysis & Deliverables

2.1 Scope of the Project
2.1.1: Statement of the Scope Stated 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 Constraints There 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.
26

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.

27

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.
28

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. o I will need to provide Ms Barnes a number of mockups of the general layout, colour scheme and design of the website. o She will decide whether the website matches her requirements of it being sleek and fresh. Set of photos to put on the website. o Ms Barnes requires me to browse stock photo websites and pick out several photos which would be used on the website. o 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.
29

o 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. o 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) o This would be given to Ms Barnes and her employees to test and soon thereafter use. User guide o 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 System

2.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. Task Create a new blog entry. Input

Process Log in using username and password. Blog title. Blog content.

Output

Logging in confirms user is authorized to create a blog entry. Creation of a new blog entry, formatted correctly.

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 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. Message stating editing of blog entry is successful. If title or body is missing entries, message will state creation is unsuccessful and
30

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.

fields must be filled in. Option to view it and edit it. 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. Task Create a newsletter. Input

Process Log in using username and password. Compose the newsletter: o Title o Body

Output

Logging in confirms user is authorized to create a newsletter. Creation of a newsletter, ready to be sent to client base.

Add client to client base.

Log in using username and password. Add details on new client: o Name o Email Address

Client will be added to database.

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. Message confirming the client has been added to the client base.
31

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.

Task Send an enquiry.

Input Name Email address Details on enquiry.

Process Enquiry is sent as an email to Hannay Investments .

Output 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.

32

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 comments Here 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. Task Create a new blog entry. Input

Process Log in using username and password. Blog title. Blog content.

Output

Logging in confirms user is authorized to create a blog entry. Creation of a new blog entry, formatted correctly. Validation (length

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.
33

Edit a blog entry.

Log in using username and password. Edit blog title and content.

check) applied to blog title. Logging in confirms user is authorized to edit a blog entry. Edits are saved. Validation (length check) applied to blog title.

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.

Option to view it and edit it. 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. 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. Task Create a newsletter. Input

Process Log in using username and password. Compose the newsletter: o Title o Body

Output

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
34

Add client to client base.

Log in using username and password. Add details on new client: o Name o Email Address

Delete client from client base.

Log in using username and password. Click delete to remove client.

Client will be added to database. Validation on name (length check). Validation on email address (format check). Client will be removed from database.

newsletter will be deleted. Option to restart. Message confirming the client has been added to the client base.

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.

Task Send an enquiry.

Input Name Email address Details on enquiry.

Process Enquiry is sent as an email to Hannay Investments . Validation on name (length check) Validation on email address (format check) Validation

Output If successful, confirmation message saying enquiry has been sent. If unsuccessful (due to empty fields) message appears saying user must fill all fields in.
35

in form of a CAPTCHA to prevent spam. 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.

Task Sign up for newsletter.

Input Name Email Address

Process Validation in form of length check for name. Validation in form of format check for email. Users details will be stored in a database.

Output 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:

36

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: Users
As 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.

37

User of the proposed system

What they would use the system for

Skills currently possessed by user

Training required

What needs to be considered when designing the solution

Web page editing needs to be simple as Vanessa is not the only user who has limited web experience.

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.

Sean Beadsworth

Writing blogs. Maintaining the newsletter database. Maintaining the website.

Kelly Warden

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

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. 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 webbased system/environment.

Will need training on getting around the GUI of the system. Will need training in editing web pages due to lack of previous experience. 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.

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

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.

38

errors etc.) 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 Criteria

2.5.1: Quantitative Criteria Quantitative 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? o To maximise the achieving of business goals, the website must be compatible across various different devices and various different web browsers. o 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. o Internet Explorer 8 does not support the new standards in web technology (HTML5 and CSS3). o This is referenced and explained in further detail in Section 2.1 as an external constraint. o 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. o The database for the newsletter system will be holding sensitive information on Hannays clients. o The database will hold the clients name and their email address. o To meet this criterion, the database must be encrypted and clients must be notified that their details will be held in this database.

39

2.5.1: Qualitative Criteria Qualitative 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? o This requires opinions and input from my client and end-user. o 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. o I will be able to gather the results and draw conclusions from that. o 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? o This requires opinions and input from my client and end-user. o I will provide the new photoset to my client for her approval. o 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.

40

Section 3 Design and Planning for Implementation

3.1: Alternative Design Solutions
By 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 Software I 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 Dreamweaver Adobe 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
41

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: Wordpress Wordpress 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
42

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 Scratch I 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: Conclusion After 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.

43

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 website From 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.

44

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.

45

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.
46

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.
47

3.1.3: Front-End Design of the Website As 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.

48

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

49

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.

50

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 Solution

3.2.1: Final Web Schema I 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
51

Final Web Schema: Enquiries and Contact Us are now separate pages.

52

3.2.2: Final Front-End Design I 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.

53

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

54

Fig 3.1.3

Fig.3.1.4

55

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.

56

3.2.3: How the Design meets the Client Requirements I 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. o 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. o The colour scheme uses tones of blue and white. The tones of blue used reflect the use of blue in the logo. o 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. o The homepage uses high quality images edited in Photoshop to entice the user. o The sub-pages also have images similar in nature. o User testing will establish whether this is the case as this is a subjective criterion. CR 4: The website must have pages dedicated to o All pages that were required have been included in the web schemas produced and approved by the client. o They are fully incorporated into the structure of the website. CR 5: The website must have the Chartered Firm watermark across the website. o 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. o 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. o 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. o 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.

57

o 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. o The design has incorporated a blog section. o 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. o This has been fully implemented, together with the various forms of validation required. o 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 Solution

3.3.1: Planning for Implementation and Testing Tasks Implementing the Website. Creating mock-ups of Web Schemas. Client Requirement Duration Deadline

Starting the process of fulfilling CR 4. o Diagrams are drawn up to illustrate what the structure of the website will be. o Diagrams will include the pages required as mentioned in CR 4.

2 days

1st March 2012

58

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. o Designs will attempt to incorporate the following: Navigation bar Chartered Firm Watermark Colour Scheme similar to logo Visual stimuli. 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 week

8th March 2012

Getting client feedback for Web Schemas and Front-End design. Adjusting schemas and designs in light of client feedback. Getting client approval for amended Web Schemas and Front-End Designs. Populate pages with data and images. Implement Newsletter and Blog functionality

1 day

10th March 2012

Continuing to fulfil CR 2, CR 4, CR 5 and CR 6.

3 days

13th March 2012

Completely fulfilling CR 2, CR 4, CR 5 and CR 6. Website designs now fully comply with the client requirements.

1 day

15th March 2012

N/A

1 day

16th March 2012 19th March 2012

Fulfilling CR 7 and CR 8. o This done through the use of plugins. o Validation will need to be implemented as well as mentioned in Section 2.3.2.

3 days

59

Implement Enquiries System

Fulfilling CR 9 o This is done through the use of plugins. o Validation will need to be implemented as well as mentioned in Section 2.3.2.

2 days

21st March 2012

Testing the website Functional Testing

Alpha 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. 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. 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. Fixing solution after receiving feedback. Helps refine the system and further enhance the fulfilling of CR 1-9.

2 days

24th March 2012

1 week

2nd April 2012

Beta testing

2 weeks

16th April 2012

Maintenance due to feedback

2 days

18th April 2012

60

3.3.2: Planning for Installation There 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 Task Client Requirement Helps fulfil CR 11 Duration 1 day Deadline 25th April 2012

Taking the existing website offline and uploading all the files and databases to the web hosting service. Making the website Fulfilling CR 11 live. 3.3.3: Planning for Training

1 day

25th April 2012

As 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
61

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 Task Conducting Instructor led training with the employees of Hannay. User guide made for employees of Hannay to supplement their training.

Client Requirement Fulfilling CR 12

Duration 2 days

Deadline 25th April 2012

Fulfilling CR 10

2 days

25th April 2012

3.4: Strategy for Planned Testing of the Effectiveness of the Implemented System
In 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
62

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
63

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.

64

3.5 Test Plan

Client Requirement CR 1: The website must be compatible between browsers and devices. Evaluation Criteria The solution must be compatible between various browsers on various devices. Test No. 1. Test Description Testing whether website renders correctly for a specific browser. This is a test for Internet Explorer 8. Testing whether website renders correctly. This is a test for Internet Explorer 9. Testing whether website renders correctly. This is a test for Mozilla Firefox 11. Testing whether website renders correctly. This is a test for Mozilla Firefox 10. Test Data Used N/A Expected Outcome Website renders correctly. Actual Outcome As expected. See Figures 4.41, 4.42, 4.43, 4.44, 4.45 for evidence.

2.

N/A

Website renders correctly.

As expected. See Figures 4.1, 4.2, 4.3 and 4.4 for evidence.

3.

N/A

Website renders correctly.

4.

As expected. See Figures 4.5, 4.6, 4.7 and 4.8 for evidence. As expected. See Fig 4.46, 4.47, 4.48 and 4.49 for evidence.

N/A

Website renders correctly.

65

Client Requirement

Evaluation Criteria

Test No. 5.

Test Description Testing whether website renders correctly. This is a test for Mozilla Firefox 9. Testing whether website renders correctly. This is a test for Apple Safari/Google Chrome. Administrator Side Test Creating a Newsletter o Adding name of newsletter. o Design the newsletter.

Test Data Used N/A

Expected Outcome Website renders correctly.

Actual Outcome As expected. See Fig 4.50, 4.51, 4.52 and 4.53 for evidence. As expected. See Fig 4.54, 4.55, 4.56 and 4.57 for evidence.

6.

N/A

Website renders correctly.

CR 7: The website must have some sort of way to send a newsletter to clients email addresses.

7.

N/A

Newsletter successfully produced.

As expected. See Figures 4.9, 4.10, 4.11 and 4.12 for evidence.

66

Client Requirement

Evaluation Criteria

Test No. 8.

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

Test Data Used Normal: Email: test@test.com

Expected Outcome System accepts subscriber details.

Actual Outcome As expected. See Figures 4.13, 4.14 and 4.15 for evidence.

9.

10.

11.

Administrator Side Test Adding a subscriber Testing validation for email address field. Erroneous data used for this test. Administrator Side Test Adding a subscriber Double entry into the database. Administrator Side Test Sending a newsletter.

Erroneous: abcdegf"

Due to data not being in correct format, data is rejected.

As expected. See Figures 4.16 and 4.17 for evidence.

N/A

Due to entry As expected. See already in Figures 4.18 and database, entry 4.19 for is rejected. evidence. Newsletter sent successfully to mailing list. As expected

N/A

67

Client Requirement

Evaluation Criteria

Test No. 12.

Test Description User Side Test Becoming a subscriber. Testing validation for email address field. Using Normal data.

Test Data Used Normal: Michael_hartley @hotmail.co.uk

Expected Outcome User is successfully added to the mailing list.

Actual Outcome As expected. See Figures 4.20, 4.21, 4.22 for evidence.

13.

CR 8: The website will now have a blog where employees of Hannay will write about the latest news and developments in investment

14.

User Side Test Becoming a subscriber. Testing validation for email address field. Using erroneous data. Administrator Side Test Creating a blog post.

Erroneous: hijkl

Due to data As expected. See being in wrong Figures 4.23, format, data is 4.24 for rejected. evidence.

N/A

Blog post created successfully.

As expected. See Figures 4.25, 4.26, 4.27 for evidence.

68

Client Requirement banking and financial planning.

Evaluation Criteria

Test No.

Test Description

Test Data Used

Expected Outcome

Actual Outcome

15.

Administrator Side Test Deleting a blog post User Side Test Make an enquiry Validation test on email field. (Format Check). Normal data User Side Test Make an enquiry Validation test on email field. (Format Check). Erroneous data. Wrong format. User Side Test Checking whether the verification box works. Entering code as shown

N/A

Blog posted deleted successfully. Data is accepted due to being in the correct format.

CR 9: The website will have a new enquiries system.

16.

Normal: manojv@live.co.uk

As expected. See Figures 4.28, 4.29 for evidence. As expected. See Figures 4.30, 4.31, 4.32 for evidence.

17.

Erroneous: lkjasfhgajlf

Data is rejected due to being in the wrong format.

As expected, see Figures 4.33 for evidence.

18.

Normal: 12

Accepts data.

As expected. See Figures 4.34 and 4.35 for evidence.

69

Client Requirement

Evaluation Criteria

Test No. 19.

Test Description User Side Test Checking whether the verification box works. Entering code not shown. Administrator Side Test Test to see whether entry has successfully been made to database. This signifies that the enquiries system functionality works.

Test Data Used Erroneous: 123456 7

Expected Actual Outcome Outcome Data is rejected As expected. See on both Figures 4.36 and occasions. 4.37 for evidence.

20.

N/A

Entry was successfully made in database.

As expected. See Figures 4.38, 4.39 and 4.40.

70

Client Requirement

Evaluation Test Criteria No. Does the website 21. colour scheme reflect the new logo and appeal to young and older users?

Test Description 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.

Test Data Used Design of the website.

Expected Outcome Users appreciate the new design.

Actual Outcome 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/A

Users appreciate the new photoset.

See Section 4.2 for more detail on this test.

71

Section 4 Testing and Documentation of Implementation

4.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.

72

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.

73

Fig 4.5: Website being tested in Mozilla Firefox 11

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

74

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

Fig 4.8: Embedded content renders correctly.

75

Fig 4.9: Creating a new newsletter.

Fig 4.10: Adding name of newsletter

76

Fig 4.11: Creating the design of the newsletter.

Fig 4.12: Message indicating newsletter has successfully been created.

77

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.

78

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

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

79

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.

80

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.

81

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

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

82

Fig 4.23: Erroneous data used hijkl

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

83

Fig 4.25: Adding a post to the blog.

Fig 4.26: Message says that post is published.

84

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.

85

Fig 4.29: Message says that post has been deleted.

Fig 4.30: This is the enquiries page.

86

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.

87

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.

88

Fig 4.35: Code was accepted.

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

89

Fig 4.37: Enter one character and data is rejected.

Fig 4.38: This is a screenshot of Test 16.

90

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.

91

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.

92

Fig 4.43: Sidetab is laid out correctly.

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

93

Fig 4.45: Embedded content renders correctly.

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

94

Fig 4.47: Text is rendered correctly.

Fig 4.48: Side tab is laid out correctly.

95

Fig 4.49: Embedded content renders correctly.

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

96

Fig 4.51: Sidetab is laid out correctly.

Fig 4.52: Embedded content renders correctly.

97

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.

98

Fig 4.55: Side tab is laid out correctly.

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

99

Fig 4.57: Embedded content renders correctly.

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

100

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.

101

4.2: Evidence that Testing involved end-users/audience and Client

4.2.1: Testing the Evaluative Criteria with the end-users/audience For 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 Aesthetics

1. Do you feel the layout reflects the logo in terms of colour? a. Yes b. Somewhat c. Not really d. No 2. Do you like the new aesthetics of the website? a. Yes b. Somewhat c. Not really d. No Ms Barnes gathered a range of users aged between 35 and 65. I have collated the results of the questionnaire below.

102

Results:

1. Do you feel the layout reflects the logo in terms of colour?

12 10 8 6 4 2 0 Yes Somewhat Not really No 1. Do you feel the layout reflects the logo in terms of colour?

2. Do you like the new aesthetics of the website?

10 9 8 7 6 5 4 3 2 1 0 Yes Somewhat Not really No 2. Do you like the new aesthetics of the website?

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

103

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 Website
1. Do you like the new photoset for the Hannay Investments Website? a. Yes b. Somewhat c. Not really d. No Results

1. Do you like the new photoset for the Hannay Investments Website?
10 9 8 7 6 5 4 3 2 1 0 Yes Somewhat Not really No 1. Do you like the new photoset for the Hannay Investments Website?

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

104

4.2.2: Testing with the Client and End Users at Hannay I 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

105

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 Solution

I 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.

106

Section 5: Evaluation of Implemented Solution

5.1: Critical Evaluation of the Implemented Solution
I 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.

107

5.2: Critical Evaluation of Implemented Solution against the Client Requirements and Evaluative Criteria
Client Requirement CR1: The website must be compatible between browsers and devices. Evaluation 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. 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. 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. 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. 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. 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
108

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.

CR 3: The website must have new photos to act as visual stimuli to the user.

CR 4: The website must have pages dedicated to:

CR 5: The website must have the Chartered Firm watermark across the website.

CR 6: The website must have a navigation bar of some sort.

CR 7: The website must have some sort of way to send a newsletter to clients email addresses.

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.

distinguish between different pages. Other than this, I feel the navigation bar is satisfactory. 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 newsletter system. The blog system has been implemented successfully. Again as mentioned before, the interface on the users side is clean. However the admin interface is clunky and very complicated. More work could have been put into simplifying the interface. Perhaps a plugin specialising in blog creation rather than one which simply puts a blog on a page without any additional options to help blog creation become easier. The enquiries system works very elegantly from the users point of view as it includes validation and a verification system which I am proud of. From the admins point of view, the interface is a bit inefficient and awkward due to the fact it does not have the capability to send an email from the website itself. One would still need to use an email client to follow up an enquiry which affects workflow. A user guide was produced and shown to the employees of Hannay. They found it useful and satisfactory. All of them were able to follow the instructions and do their tasks correctly and efficiently.

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. CR 10: A user guide must be produced for employees of Hannay so they can learn how to use the system.

109

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

The system was up and running by April 25th 2012.

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

All employees were able to use the system by April 25th 2012.

Evaluation Criteria

Evaluation

Quantitative The solution must be compatible After thorough testing, the website is between various browsers on various compatible with browsers on various devices. devices. The criterion has been met. The solution must be compliant with the Data Protection Act. Only necessary data is being held in the system and held securely behind the website in the administration area. The only sensitive data held is email addresses and no data such as age, telephone numbers or address is held. Also data is retrievable and can be deleted upon request. I feel the solution does comply with the Data Protection Act. Qualitative Does the website colour scheme reflect The questionnaires conducted in Section the new logo and appeal to young and 4.2 shows that the users do feel the older users? aesthetics are appealing. As the questionnaire was conducted between 30 and 65 year olds, this criterion has been met. Are the new photos visually appealing to The questionnaire conducted in Section the user? 4.2 indicated that the users did find the photos appealing. No negative feedback was given; therefore the criterion has been met.

110

5.3: My Strengths, Weaknesses and How to Improve My Performance in the Future

I feel the project was an overall success. I was able to meet my deadlines and provide Mrs Barnes what I feel is a professional, sleek, solution which she and I are proud of. I feel that my approach to the project had many strong points and a number of weaknesses. From analysing these points, I know how to improve my performance when doing another project similar in nature in the future. I feel that my initial research that I did back in the Background & Investigation section was done very thoroughly and it really helped form the basis for the rest of the project. I put a lot of effort into collecting data and producing information which illustrated what the user opinion was of the current system. This was used to establish the requirements of the new system with my client. Another strength of my approach was the way I constantly gave feedback to Ms Barnes after a crucial stage of the development process. She was able to tell me what elements of my work were good and what parts were not. I was able to work off her feedback to absolutely guarantee that I was producing something which met her requirements. However, I do acknowledge that there have been several weaknesses in my performance. I feel the designs I had produced were not experimental enough. Although I was asked to stay within the confines of the colours of the logo, I could have put more effort into experimenting more with layouts, style sheets and fonts. Another weakness in my performance was with the way testing was conducted with my client and her employees. I was not present to watch over her employees test the system and help them through any difficult patches. All feedback was given through email. The training session I had scheduled was not for another few days after initial user testing. If I was present with them, I could identify any particular areas of improvement myself which the users may not have noticed or thought would be worth talking about. To improve my performance in a similar project in the future, I would spend more time on the design phase in the development cycle to ensure I have fully explored all the potential designs before coming up with a final one. This would give my client a larger range of ideas to look over and they could pick the best elements from each design to produce one final idea. I would spend more time on the testing phase as well to eliminate problems such as illogical menus which could affect workflow. I feel user testing is in a way more important than system testing as at the end of the day, the users opinion of the system matters more than the creators opinion of the system.

111

I felt the scope of the project was quite massive at first, but I was able to heed the challenge and complete the solution on time. I am proud of the solution I have produced which I am sure will bring Hannay Investments more business and prosperity in the future to come.

112

Hannay Investments Website Admin User Guide

113

Contents
Introduction to Wordpress page 3 Logging into Administration Area page 3 Maintaining the website page 5 Pages page 5 Adding a new page page 5 Removing a page page 8 Adding media page 9 Themes page 9 Functionality page 11 Blog page 11 Creating a blog post page 11 Removing a blog post page 12 Enquiries page 13 Newsletter page 14 Creating a newsletter page 14 Adding subscribers manually page 17 Further Development page 19 Plugins page 19 Sources of help page 21

114

Introduction to Wordpress
The Hannay Investments website is built upon a content management system called Wordpress. Wordpress is a very flexible platform for building and maintaining websites. This user guide will aim to introduce you to the platform, how to perform certain tasks and how to develop the website further in accordance to your changing requirements.

Logging into the Administration Area

The administrator area is where you will carry about your tasks. It is completely separate to the front end website which your users will not see. In this area you can customise the website, add or remove functionality, view enquiries, make blog posts and more. On your internet browser, type into the address bar: www.hannayinvestments.co.uk/wp-admin and press enter on the keyboard. You should get a page similar to the one below:

Log in using the appropriate credentials. The default username is admin and default password is password. It is highly recommended that you change these once you log into Wordpress for the first time. There is a tickbox which allows Wordpress to remember your log in credentials. This is not recommended for shared computers.
115

Once logged in, you should get a page similar to the one shown below.

This is the sidebar where you can start customising, maintaining and developing the website.

This is the dashboard. This page welcomes you everytime you log into Wordpress. You can change your username as password by going to the top right hand corner of the screen and clicking the Howdy Admin tab and then clicking Edit My Profile.

You can change your username and password here. Once you have familiarised yourself with the dashboard, you can start maintaining the website.
116

Maintaining the Website

Pages
Adding a New Page
You can add or remove pages very easily. To start, click pages on the sidebar on the dashboard.

You will then be presented with a list of pages present in the website. Click add new if you wish to add a new page.

117

Here you can add a title in the title box and compose the main body of the page.

This toolbar at the top of the main body editor is a collection of tools to help format and stylise your page.
You can use this to upload a picture or a media file (see later section). You can use these buttons to add bullet points, numbered list or a quote. You can use these buttons to align text to the left, centre or right. Create hyperlinks and delete links with this button. The read more button lets you create a section which expands when clicked.

Change text to make it Bold or Italic

Text will have a strikethrough.

Insert custom characters. Use these buttons to underline, centre text, and change font colour.

Change the formatting of the text. The different types of formatting you can have include: Paragraph, Heading 1, Heading 2, Heading 3 etc and more.

If youve copied and pasted something, you can use these buttons to format it. You can paste as plain text and from Word. Also you can remove formatting.

118

You can use the options on the right hand side of the page to alter certain parameters. You can show page title or hide it by ticking or un-ticking the box. You can save a draft so you can come back to it later and finish it. Clicking preview allows you to view what the page would look like with the theme applied to it. Publish allows you to put the page you created live on the web for the public to see.

You can alter the Page attributes. You can set parent pages. This will make your page a sub-page and will be listed under its parent in the navigation bar. You can alter the order of the pages in the navigation bar by entering a number into the box. You can also exclude pages from appearing in the navigation bar.

119

Removing Pages
To remove pages, go to the dashboard and click on Pages. You can highlight on one page and a number of actions appear.

Click trash to delete the page. You can also perform deletions for more than one page at once. To do this, tick the boxes of the pages you wish to delete and click on bulk actions at the top of the list of pages. Click on move to trash to delete.

Adding Media to Pages

To add images and videos to pages, use the upload/insert button above the main body editor as shown previously.

A dialog box will appear which will allow you to upload your media files and insert them into the page.

120

You can drag and drop files from a folder into this dialog box to upload them or you can click on select files to enter Windows Explorer to locate the files you wish to upload. Files you upload are automatically saved in the Media section of the dashboard. You can manage these by clicking on this link on the side-tab. For more information on this, you can visit Wordpress.org to view the appropriate documentation on this topic.

Editing Pages
To edit an existing page, click on the pages tab on the sidebar. You will be bought to a list of pages. Highlight over the page you wish to edit and click edit. You will be bought to a page similar to the one in page 6. You can edit content and save the same way as you would. If you are unsure on how the interface works, refer back to the section on Creating a New page.

Themes
If you wish to change the aesthetics of the website, you can do this easily and quickly via Wordpress. To do this, click on the Appearance tab on the sidebar in the dashboard. You will be bought to a screen similar to one shown overleaf:

121

You can install a new theme. This means you can replace the existing theme with a new one. To do this, click the Install Themes tab shown in the screenshot above. You will then be able to choose your own theme by selecting the criteria you require. Tick the boxes you wish to be present in your theme.

Then you will be presented with a list of themes which match your criteria. You can preview them and then install the one you are most satisfied with.

122

To revert to a theme which has previously been installed, just click on Appearance on the sidebar. You will automatically be bought to the Manage Themes section where you can preview themes which you have previously installed and then install them again.

Functionality
The website has three main pieces of functionality; the blog, enquiries system and newsletter system.

Blog
The blog works similarly to how pages function. They use the same interface. However, there are a few key differences.

Creating a blog post

To create a blog post, click on Post on the side-tab. You will be bought to a screen similar to the one below. Click Add New as highlighted to create a new post.

You will see a screen like the one shown below. It is essentially the same as the interface for creating a page. Please refer the section on creating a page if you are unfamiliar with this interface.

123

In order for the post to appear in the blog, you must tick the box which is labelled as blog under categories which is located on the right hand side of the screen. It looks like the screen below:

If you do not tick the box labelled blog, the post will not appear in the blog section of the website.

Removing a blog post

This is done similarly to how you remove pages from the website. To do this, click Posts on the sidebar to bring up the list of posts. You can perform bulk deletion or single deletion in exactly the same way as deleting a page. Please refer to the section on removing a page for instructions on how to do this.
124

Enquiries
A user will go to the enquiries page of the website and enter their name, email address and details of enquiry. All of these are sent to the administrator area of the website and held in a database which can be accessed when needed. To access this, highlight your mouse over Settings in the side-tab. You will see a menu similar to the one shown in the screenshot below. Click on Visual Form Builder.

You will see a screen similar to the one shown below. Click on entries as highlighted in the screenshot below. It is located near the top of the page.

125

A list of enquiries will be shown. Highlighting one will make several options appear. Click view to read the enquiry in full.

You can then make a follow up email by using an email client and the email address supplied by the customer.

Newsletter
The newsletter system works by collecting a list of subscribers, designing a newsletter and sending it to the subscribers.

Creating a Newsletter
To enter the Newsletter system, click on Wysijia on the side-tab. You will see the screen shown overleaf.

126

You will see a list of newsletters created. Click on create a new newsletter to start designing a new newsletter. You can change the subject line. You must tick synched Wordpress. This will enable the newsletter to be sent to those who are in the subscriber list. You can change the sender name and senders email address.

127

You can now design the newsletter. You can drag and drop elements into the design such as images and text.

On the right hand side of the page you can alter certain parameters of the newsletter.

Content allows you alter the body of the newsletter. Images lets you add images to the newsletter which can be imported from the media library. Styles lets you alter background colour, font colour and other graphical parameters. Themes lets you install a theme for the newsletter. To find out how to install a theme, refer to the documentation for Wysijia.

128

You can scroll to the bottom of the page and send a preview to a certain email address. If satisfied, click next step. You will be presented with a range of details which you need to look over to check whether they are correct. If so, click send now. If you wish to send the newsletter at another date, click send later.

Adding Subscribers Manually

The website has a page dedicated to collecting subscribers. However, some potential consumers may not use the website to get in contact with Hannay Investments. You can manually add subscribers to the list using Wysijia. Click on Wysijia on the side-tab. More options will appear underneath the Wysijia link on the side-tab. Click on the Subscribers link.

You will see a list of subscribers. To add a subscriber, click Add Subscriber as shown in the screen shot below.

129

You can add the email address, first name and last name of the subscriber. Keep the status at subscribed. Click add subscriber to add them to the list.

130

Further Development
Wordpress is a very flexible platform. You can add many more elements to your website in the form of plugins. Plugins add more functionality and innovation to your website. The majority are highly customisable to suit your requirements.

Plugins
If you have an idea for what additional functionality you wish to add to your website, click Plugins on the side-tab and click add new.

Type into the search box what plugin you want and click search.

131

You will get a list of plugins which you can implement into your site. You can sort by featured, popular, newest and recently uploaded. You can read up on more details of the plugin by clicking details.

You can read up on how to install the plugin by clicking Installation. You can view screenshots of the plugin in action. Changelog shows you the latest additions and alterations made to the plugin. FAQ will show you the frequently asked questions which you may have.

132

If you are happy with your choice, click install now. The plugin will install itself.

You can then choose to activate plugin to start using it or you can return to the plugin installer to activate it later. To activate a plugin at a later date, click plugins on the sidebar and click activate now on the plugin you wish to activate.

Sources for help

There is documentation available on http://codex.wordpress.org which can help you understand different sections of Wordpress whether its installing plugins or simply understanding the interface. In addition, there are various Wordpress communities which are worthwhile joining as they feature specialist Wordpress users who can help you with different parts of the system. Stack Overflow is an example of this. You can use Google for other Wordpress communities.

133

134