Field Notes Archive
Grade Standard Exemplification Materials Summer 2024 Occupational Specialism: Digital Production, Design and Development Distinction Version 1.0
Article Overview
Section 1
Grade Standard Exemplification Materials Summer 2024 Occupational Specialism: Digital Production, Design and Development Distinction Version 1.0
Digital Production, Design and Development T Level Technical Qualification in Digital Production, Design and Development – Grade Standard Exemplification Material 2024– Version 1.0
Contents Introduction Student work: Task 1 Task 2 Task 3a Task 3b pages 1-2 pages 3-172 pages 3-49 pages 50-96 pages 97-164 pages 165-172
Section 2
Digital Production, Design and Development T Level Technical Qualification in Digital Production, Design and Development – Grade Standard Exemplification Material 2024– Version 1.0
Introduction This document contains the Grade Standard Exemplification Materials (GrSEM) which includes student work.
The purpose of this material is to support centres and students in their understanding of the requirements of the Occupational Specialism component of the Technical Qualification and to prepare for future submissions.
Section 3
The student work submitted was marked and awarded at the boundary of the grade indicated within the document. It should be noted that the portfolio of work provided may include tasks (and elements of) which perform above, at and below the final awarded grade and the holistic grade for the portfolio is made up of the performance across all tasks.
The portfolio provided is typical of a learner performing at the grade awarded for the Occupational Specialism and should therefore indicate an indicative level of performance to achieve that grade.
This document should be used in conjunction with the task booklets, mark scheme and most notably, the Lead Examiner report. These documents can be found on the Pearson website here Digital Production, Design and Development | Pearson qualifications.
Section 4
The duration of this assessment is 87 hours of supervised sessions spread over a period of 14 weeks.
The assessment is split into four tasks covering a range of topics. These are summarized below:
1 Analysing the problem and designing a solution Proposal of the designed solution A set of design documents 20 hours 2 Developing the solution Prototype 30 hours 1 Task Topic Evidence Time
Section 5
Digital Production, Design and Development T Level Technical Qualification in Digital Production, Design and Development – Grade Standard Exemplification Material 2024– Version 1.0 Development documents Test log Code for prototype solution 3a Gathering feedback to inform future development Plan and report on gathering feedback 15 hours 30 minutes 3b Evaluating feedback to inform future development Feedback evaluation report 2 hours
2
Section 6
Contents Visual/Interface designs ........................................................................................................ 2 Logo .................................................................................................................................. 2 Colour Scheme .................................................................................................................. 2 With # ............................................................................................................................ 2 Array .............................................................................................................................. 2 Object ............................................................................................................................ 2 Navigation bar ................................................................................................................... 4 Home Page ....................................................................................................................... 5 About Page ....................................................................................................................... 6 Educational Visits Page ..................................................................................................... 7 Booking System ................................................................................................................ 8 Log In/ Register ................................................................................................................. 9 Full solution ..................................................................................................................... 11 Data requirements .............................................................................................................. 12 ERD + Data flow .............................................................................................................. 12 ERD - Closer view ........................................................................................................ 12 Data dictionary ................................................................................................................ 13 Algorithm ............................................................................................................................. 15 Wireframes and the flow .............................................................................................. 15 Booking system flowchart, view – full flowchart ............................................................ 15 Booking system flowchart, view – closer on main logic ................................................ 16 Booking system flowchart, view – closer on the booking a room logic .......................... 16 Booking system flowchart, view – closer on booking a ticket logic ............................... 17 A test strategy ..................................................................................................................... 18
Section 7
Visual/Interface designs Logo This logo I have created using Canva, the main inspiration lies in the name of the brand – “Riget”, which I have found to be an anagram for Tiger, thus the icon of the tiger. As the brief did not mention when the zoo was founded, I have used a random 1999, however it can be changed, when the client mentions the real date. I find this logo to be inclusive as it is sensible enough for children, however not too childish for adults.
Colour Scheme This colour scheme was chosen, after I conducted research into industry. Specifically, I have looked into the competitors’ websites that are located in the Great Britain. What I found was that green and orange were dominant colours. I find it very sensible since it resembles how zoo actually looks with a lot of green areas and animals with the orange four. As well as that I have looked into archetypes and how these colours would fit in. This is the Colour palatte I came up with, using https://coolors.co/.
With # #aea593, #3b3b46, #6f6634, #71725a, #2e2f39, #979d95, #ffffff, #44513e, #be8e4b
Section 8
Array ["aea593","3b3b46","6f6634","71725a","2e2f39","979d95","ffffff", "44513e”, "be8e4b"]
Object {"Khaki":"aea593","Onyx":"3b3b46","Field drab":"6f6634","Reseda green":"71725a","Raisin black":"2e2f39","Battleship gray":"979d95","White":"ffffff" ,"Ebony":"44513e","Lion":"be8e4b"} 4
When doing the design in Figma, I was constantly checking the contrasts and colours for compliance with WCAG, for that I have used WebAIM website. First combination that I used a lot through out the website UI design, was white on the ebony.
Section 9
For some of the ideas, like the one belove I had to adjust, this was for some of the buttons. 5
Section 10
In The following pages I will attach all the designs that I have made using Figma. I want to mention though, that some of it might be undergoing slight changes once the development of the prototype starts. For example, the booking system is a bit more complex than it is illustrated in the UI designs I’ve produced, therefore I will need to adjust it to the backend once in development. 6
Section 11
10
Section 12
12
Section 13
13
Section 14
14
Section 15
16
Section 16
17
Section 17
18
Section 18
19
A test strategy Considering the scope of the project, we are going to be using manual testing. However, for future considerations, automated testing also can be used. Date of test Component to be tested Type of test to be carried out Prerequisites and dependencies 18 April 2024 Navigation bar Black box testing -> Functional testing: Integration testing No data inputs needed at this stage, tester will go through the navbar and test if all the correct pages are loaded. EX. clicking on about us should load about us page 18 April 2024 Homepage White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing homepage unit, testing integration of homepage within the website. 18 April 2024 About Page White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing about page unit, testing integration of about page within the website. 18 April 2024 Educational visits page White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing educational unit, testing integration of eduvisit within the website. 20
18 April 2024 Booking page White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing booking page unit, testing integration of booking page within the website. 20 April 2024 Booking System Backend-> database testing Test if any errors are shown while executing queries. Test data needed for booking a ticket: CustomerId, time_slot, ticket_type; Test data needed for room booking: CustomerId, Date_from, Date_to, Quantity 18 April 2024 Login page White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing login unit, testing integration of login page within the website. 20 April 2024 Login system Backend-> database testing Test data needed: Valid username and password and invalid to check the robustness 18 April 2024 Sign up page White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing sign up unit, testing integration of sign- up page within the website. 21
Section 19
20 April 2024 Sign up system Backend-> database testing Test data needed: Name, username, password, repeat password, email 18 April 2024 Navigation bar Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 Home page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 About Page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Section 20
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 EduVisit page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 Booking page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 Sign up page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android 22
Section 21
Browsers: Chrome, Edge, Firefox, Opera, or Safari 18 April 2024 Sign In page Black box testing -> Non- Functional testing: Compatibility testing OS needed: IOS, MacOS, Windows, Android
Section 22
24
Contents Business context ............................................................................................................................................. 2 Empathy map .............................................................................................................................................. 2 User stories ................................................................................................................................................. 2 Functional Requirements ................................................................................................................................ 4 Homepage ............................................................................................................................................... 4 Educational visits page ............................................................................................................................ 4 Booking system ....................................................................................................................................... 4 Personal Account .................................................................................................................................... 5 Non-functional Requirements ........................................................................................................................ 5 Security ................................................................................................................................................... 5 Maintainability ........................................................................................................................................ 5 Performance ........................................................................................................................................... 5 Usability -> Accessibility .......................................................................................................................... 5 Decomposition ................................................................................................................................................ 6 KPI’s ................................................................................................................................................................. 6 Business KPI’s .......................................................................................................................................... 6 Website KPI’s .......................................................................................................................................... 7 A description of proposed solution ................................................................................................................ 8 Justification ..................................................................................................................................................... 8 How the recommended solution meets the needs of the client. ............................................................... 9 How protentional risks will be mitigated. .................................................................................................10 Regulatory guidelines and legal requirements will be addressed. ...........................................................11 Appendix 1 ....................................................................................................................................................13 Hardware and software ............................................................................................................................13 Emerging technologies..............................................................................................................................14 Meeting different user needs ...................................................................................................................16 Guidelines and Regulations ......................................................................................................................25 Appendix 2 ....................................................................................................................................................26
25
Section 23
Business context Our client, Riget Zoo Adventures (RZA), is a well-established business that is interested in digitalisation in order to keep existing customers satisfied as well as engaging new clients, Currently RZA offers a safari- style wildlife zoo, an on-site hotel and educational visits. A client is looking for a digital solution that would information about attractions and facilities, materials to support educational visits and allow users to book tickets and stays in the hotel. I am proposing to develop an interactive website that would include all the features that the client requires and some more. In the following passages I will be explaining and justifying my proposal.
Empathy map Says - I need more information before visiting this zoo. - Could I buy a book that has all the animals description, so I get to learn while I’m on my educational trip as well? - Could I book my tickets and book a hotel in advance via website? - Could I create my account so I could manage my bookings? I need to cancel my booking for this Saturday because my child is not feeling well. Thinks - I wish there was a website where I could see all the animals, it would be easy to decide if I want to go this zoo - It would be so much easier if they just had a booking system and I could book a ticket in advance instead of standing in the line for hours. - I would rather book a hotel in advance, what if there are no rooms left when we visit. - Oh, I wish I had more personalised experience, I wish I had my own account. I don’t want to lose my money just because I couldn’t cancel my visit.
Does - Comes to the zoo with very little awareness - Comes to visit, but the zoo is too full today - Comes to visit and finds out that the hotel is overbooked Feels - Overwhelmed - Confused - Stressed and annoyed because of the que to by ticket - Willing to be reassured that the hotel is booked for the time they come
Section 24
User stories As a [user]… I want … So that … Acceptance Criteria First time customer To visit a website and find some information on what the zoo is offering. I can compare it with other zoos and see why I should choose this one, as well as that I would be able to see if The system should allow user to see the clear navigation bar at the top, in the main section there should be 26
Book my tickets quickly online. there are animals that I am particularly interested in. I will not have to wait in the que for tickets, when I visit. a carousel in the main section that will prompt users to all the other sections. When user visits the about page, all of the necessary info will be displayed in there such as how to get here, opening times, animals, facilities, hotel info. On the top right corner there will be a “Book” button that will prompt user to the booking page, it could be a ticket booking or a hotel booking. Student To visit website that is easy to follow and does not have unnecessary information, I also want to find educational trip section on there where I can browse and get all necessary materials for my trip, for ex book that describes all the animals that I’m going to see in the zoo. When I am on my trip I was fully aware of what is going on and had enhanced experience, I also want to learn more when I’m on the trip. The system should provide the educational visits page for students. On this page there should be a catalogue of things that they might need while on the trip. Parent To book a hotel and tickets in advance I’m sure that when I come with my children we will have where to stay, and I will not need to drive all the way back home the same day. In the booking area there is an option to book a hotel. Loyal customer To have a discount when I visit for the second time. To have my account where I would see how when I have visited. And to be able to cancel my future bookings if I need to do so. If I visit multiple times, I can save some money. I also want to feel a more personalised experience. The website should contain an option to create an account and login. When user is on any of the pages, he/she should be able to easily navigate to the Account section. When on the Account page, user should be able to Manage bookings, have reward for each visit. See his/her previous visits. 27
Functional Requirements Homepage The system should display homepage that consists of Navigation bar, main section and footer. In the main section website provides A carousel of pictures with links that prompt user to other areas of the website, ex about page. No data inputs required for this page. When the user clicks on the links to different pages it should go to the required page. Ex. User clicks on the Book button, it should quickly navigate the user to the booking page. Navigation Bar consists of: - Home - About - Educational visit - Book - Account About Page The system displays the about page which is similar to the homepage and consists of the navigation bar, main section: Opening times, Our animals, Hotel info, How to get here; and a footer. No data inputs required for this page. Educational visits page The system displays the educational visit page which consists of the navigation bar, main section where the user can browse the catalogue of useful materials for the educational trip and the pricing of it, as well as that user should be able to download a pdf guide with all the animals that are in the zoo. No data inputs required for this page.
Section 25
Booking system The system should have two services options to book: book a room or book a ticket. Then user the correct form should be displayed, first user is prompted to select a day and timeslot, then fill in personal details. After user fills in the form, order should be placed and sent to the database, user should see the message of the successful placement or in case of any errors a message that something went wrong during ordering. User input requirements:
Booking a room •Stay from [], to [] •Room type (Single room, Double Room, Twin Room, Double Room -Disability Access) •Number of visitors •Full name •Email Booking a ticket •Date and time •Type of ticket (Adult,Child, Student, Educational trip) •Full name •Email28
Personal Account The system should allow user to create an account, or sign in, if the account already exists. Once signed in to their account user should be able to manage their bookings ex. cancel, user should also see previous stays and rewards. The system should allow user to log out once needed.
Section 26
Non-functional Requirements Security The system should be secure and robust: o System must validate all data inputs. o System must use secure cookies. o System must use SHA256 Encryption for the passwords.
Maintainability It is important that after deployment system can be maintained cost-effectively. To ensure good maintainability, I will only use good coding practises throughout the code, I will ensure that naming conventions are relevant and easy to follow, I will only use standard API formats. Performance - Page speed/load: webpage should be loaded within 2-6 seconds. - Latency: it should take not more than 100 milliseconds for system to respond to the user. - The system should not be overloaded with API calls, as they might slow down the performance. Usability -> Accessibility The system should be straightforward to use, both for the end-users and the content editors that oversee backend system. System should be adapted to different user needs: the system should be following Web Content Accessibility (WCAG) guidelines.
Section 27
KPI’s Business KPI’s Trustpilot reviews the higher the ranking on the third party’s ranking websites such as Trustpilot the better it is for the business, the reason being is that usually people look for the best option and it is crucial for them to be able to see what other people that have already visited place think, it is due to complex human psychology. Recent example: to conduct research and make a valid proposal I first had a look on the Trustpilot to see what competitors offer. Visitor satisfaction rate it can help identifying areas of improvement and therefore boost customer’s experience. One way to track this KPI is to ask customers to fill in short surveys. Industry standard is to keep this rate 80% and higher, however the higher rate, better it is for the business, meaning that everything is managed to the highest standard. One drawback is that sometimes customers are too busy to do it and some of the are not bothered to read the question properly. To mitigate that, we need to make sure that the questionnaire is short and has and engaging element to it. The number of educational programs offered this can allow the business to make strong connections with public and have even more customers. It can be calculated by adding all of the programs offered per year. If the number growth over years that would mean that business has an adequate scaling up. Home •Navigation bar •Carousel as a main section •Footert About us •Navigation bar •Opening times •Our animals •Hotel info •How to get here •Footer Educational trip •Navigation bar •Catalogue of the materials for the trip •Safety information •Footer Book •Navigation bar •Book a ticket •Book a hotel •Footer My account •Navigation bar •Sign up/Signin •Reset password •My rewards •Cancel booking •Logout 30
Percentage of repeat visitors it shows us the business’ ability to maintain customers. Therefore, if there’s a drop in this percentage business can easily spot that there is a problem with customer satisfaction and thus perhaps, they should consider their customer service more. This KPI will allow business to identify areas for improvement and faster long-term loyalty. In order to calculate this KPI business needs to have the number of repeat visitors and total amount of visitors. Then divide repeat visitor by total visitors and multiply by 100. Revenue growth rate asses RZA’s financial performance, which can help to perform better informed decisions. The higher the business revenue growth rate the better.
Website KPI’s Page Load time It is essentially how long it takes for page to load and appear on the user’s screen. It is crucial that this time is as low as possible. Even few seconds can result into the loss of the protentional client. With the development of the digital sector, people tend to wait less and less if the there are any troubles accessing website as they are well aware of the vast amounts of options they’ve got. This KPI can be seen using reporting tool, for example Google Analytics. Bounce Rate This KPI shows the percentage of users that visit the website and then leave immediately without taking any actions. It is logical that if this rate is high the website is either performing poorly or it is simply not appealing well to the user, one other reason might be hidden in the advertisement, if the website is offered to the wrong audience, it might be that they click without any interest in the sector at the first place. A good website though will keep the visitors to interact at least with few pages before leaving. Therefore, it is a crucial tool that will allow to see if the website needs any changes or not. Traffic by source
Section 28
It allows to see different sources of traffic. For example, what devices are most used to visit the website, and therefore RZA could investigate farther development of that device. If let’s say most traffic comes from smartphones it is sensible to develop a mobile app.
Section 29
It indicates how well the website prompts customers to complete the action desired by the client. For example, RZA wants to have n number of bookings and y amount of account registrations per day then we would need to take those two goals per specific amount of time and divide it by total number of users and multiply it by 100%. It is important that this rate is reasonably high, if the rate is low that would mean that the website is doing its function very poorly. 31
Average time on page It shows us how much time on average user spends on the website. Depending on the page this time can indicate different outcomes. For example, if the average time on the homepage or about page is high it’s a good indicator as it shows that the content is engaging and relevant for the user however if KPI is high on the booking page then that might show that there are some errors or it’s to hard for the user to understand. And thus, some changes should be made.
A description of proposed solution In the above paragraphs I was decomposing, analysing, and setting the requirements for the system. In this section I will be summing up the proposal and its main benefits to the client – RZA. The final proposal is an interactive website that will include following Key features and benefits: - Inclusive solution The website is going to be an inclusive platform that will allow all users navigate through and use its functionality. In this way RZA will ensure that all customers fill included and therefore satisfied with their services. - Quick and easy booking One of the most important features is booking a ticket or a room in advance, which will help reduce ques for the tickets kiosks in the Zoo, as well as that users will be resting assured that they will have the place to stay overnight, not worrying that the hotel is overbooked. - Materials for educational visits The website will allow students and their parents to see all the necessary information and materials for educational visits. As well as that they would be able to download a pdf with all the animals in the Zoo. - Info Blocks Will provide customers with information about the zoo and facilities, opening times, hotel, and animals - Personalised experience For loyal customers website offers to create an account and have some awards for each visit, for example a discount coupon. As well as that, customers will be able to see their previous visits and manage their current booking. Which will ensure that customers receive personalised experience and come back to the RZA.
Section 30
Justification In the above paragraphs I have proposed a digital solution to the client. Which is an interactive website that meets different users needs, I have also stated the requirements: functional and non-functional and provided decomposition. I this section I will be justifying my proposal. 32
How the recommended solution meets the needs of the client. Inclusion-driven solution One of the client’s needs is to support a wide range of customers, therefore a lot of emphasis will go into making sure that the website is built with all the customers in mind. The frontend will be developed based on the reliable Bootstrap templates, that follow WSAG. All the colours and contrasts will be checked before implementing the design into the protype. The reason being we want the website to be accessible for everyone, ensuring that all the customers are having a good experience. As well as satisfying existing customers, website will be a powerhouse for engaging new customers. Efficient way to buy and book Another client requirement is to allow users to book tickets and hotel rooms online. The website will contain an easy to navigate booking system with a robust backend and database. This will help our client to keep track of all the tickets sold and rooms booked. Client will be able to analyse this data and make a better informed strategical and technical decisions. On top of that customers satisfaction rate will grow as they don’t have to waste time in the ques and worry about availability of rooms in the hotel.
All about educational visits section Another client need was to support educational visits. I’m proposing to make a separate page dedicated to the educational trips where all the necessary information will be displayed. In this way it will be easy to spot on the navigation bar. And this will help to enhance students’ experience. Informational blocks Another feature that client required is to do with information about attractions and facilities. What I have proposed is to make an about page where end-user could find all the necessary information. After research into industry, I have found that most of the zoo websites have the animals’ sections, where users could see all the current animals in the zoo. I think it is a reasonable feature to add as it will help customers to make more informed decision. Perhaps, RGA has exactly the animal that one of the protentional clients wants to see, this would bring a new customer. However, if the opposite happens and the customer is interested in the particular animal, but that animal is not in the Zoo, then it would be sensible to the user not to come, which is also a benefit for RZA, as this customer will have a very high chance of coming out not satisfied, which could lower RZA ranking on the third-party rankings’ website. As well as animals’ section, I have proposed to add information about the hotel, opening times and attractions. Which will keep protentional customers informed.
Section 31
Personalised user experience As an additional feature client has mentioned that users could have their own accounts and perhaps a loyalty system. What I have proposed is a robust registration / login system. Users will 33
be able to create an account and have some awards for each visit, for example a discount coupon. As well as that, end-users will be able to see their previous visits and manage their current bookings. This will improve their experience with RZA and therefore promote brand’s reputation. In the long-term allow RZA for scaling up.
How protentional risks will be mitigated.
Section 32
In the proposal above I have mentioned that the website will contain following features: Info page (About Page), Educational visits, Booking system and personalised account system with loyalty program. In this passage I will walk through the potential risks and their mitigations. Informational inaccuracy (Poor data quality) This could lead to lost revenue, poor customer experience and in long term even to the reputational damage. The way to mitigate it is to hire staff that will oversee editing content and making sure it is up to date. Although for the scope of this project I will not be implementing CMS (Content Management System), it might be a sensible solution for farther development, as it will reduce the complexity of maintaining the website, therefore increase efficiency. The reason being is that it allows for content change in a nice user- friendly interface, which essentially does not require programming knowledge, therefore could be done by content creators.
Miscommunications with schools and students when it comes to educational visits can be an issue, when not handled gracefully. One example could be arranging a visit for the wrong time slot. Another could be misleading information about materials required on the web page. This frankly leads us back to the information inaccuracy issue and the way to mitigate those would be quite similar, however I would highly suggest that there are delegated to manage educational programs. In case of, something going wrong, they would be able to quickly react to the circumstances and come up with a solution.
Booking system – data loss There are a handful of risks when it comes to the booking system and its implementation like overcomplicating the booking process, not having enough customer support, failing to customize accordingly to business needs. However, what I want to concentrate is system glitches and data loss which could be dreadful to the business reputation. For example, if the data loss happens and the customers that booked a hotel to stay the night, it would be extremely unpleasant experience to them having to change their place and looking for different place on the day of a visit. To mitigate this, the system must be thoroughly tested. However, for data loss it’s not always sufficient, therefore data backups will be a reasonable solution to this potential risk. 34
Section 33
Personalised account – data breaches One of the risks with the most consequences is a data breach. As for the login system, we will gather some customer information, there is always a risk of this data to be stollen. To mitigate this, company should have a robust security plan, that comprise of multiple prevention technics. For this scope I will be implementing password encryptions to enhance the security.
Regulatory guidelines and legal requirements will be addressed.
To make sure the solution that I have proposed above meet the low, I will ensure that the website is compliant with such legislations as GDPR (General Data Protection Policy), COPPA(Children’s Online Privacy Protection Act), EU Cookie Law. 35
Section 34
Appendix 1 Hardware and software 1. Contactless payments One of the most important developments, especially in times of the pandemic, is that technology has enabled contactless payments. Additionally, customers might not always be carrying their credit or debit cards on them at all times or don’t have immediate access to cash. Enabling cashless transactions makes the whole experience more accessible for clients, as everyone has a smartphone these days, and it also saves time and effort for both customers and employees. Contactless delivery used to be a convenience earlier, but lately, it was more of a necessity than a convenience because of COVID-19. 2. Voice control Voice control and voice search options are a massive step towards making the travel industry more accessible for everyone. Most of the apps were not accessible to people with visual impairments, and enabling voice controls will make the apps and websites accessible to a whole new demographic. Besides the booking experience, voice controls and search options can also help make the customer experience more interactive and exciting by including voice control lighting and heating within hotel rooms and assisting tourists with information about a particular location. You don’t need to have a huge team to help you with tech for your business. You can even hire remote software developers who are highly qualified and can assist you in implementing technology in your operations. 3. Robots That is probably one of the most exciting advancements in recent times. While voice recognition and cashless transactions have more or less become a norm in our everyday lives, it’s not often one gets to see machines doing daily tasks. Restaurants and hotels can largely benefit from implementing robot technology in their operations. For example, robot support can reduce human effort in food preparation, luggage transport, and other deliveries. 36
For example, at the Dubai Expo, a food delivery company called Talabat had a marketing campaign advertising the future of food delivery – with GPS-powered robots. This achieved two purposes – it made the brand stand out and therefore made it memorable, making its mark in the customer’s minds. As a business, you should always strive to make a memorable impression in your customer’s minds, and Talabat successfully did that by using robot technology in their campaigns. 4. Virtual Reality (VR) Virtual Reality has become a huge thing, with big names like Meta trying to make their mark in VR. VR will definitely be a massive part of our future, and businesses across various sectors and industries are already accommodating VR in their operations. Travel and Tourism is one of the biggest industries that have the potential to use virtual reality. For example, with the help of VR, tourists will be able to have a glimpse of the place they’re visiting before going there. It’s like a trailer of a vacation to help customers make an informed decision. Thomas Cook made the most of VR technology when they introduced their ‘Try Before You Fly’ initiative that let people take a virtual tour of the city and its key attractions before deciding if they want to visit. That gave them an edge over their competitors, and as we mentioned before, it made a memorable impression on the consumer’s minds. 6. AI-powered chatbots We’ve spoken before about how automating processes makes operations convenient for everyone and reduces human effort. Of course, customer service is a big part of that process. Since most travel-related bookings are made through the internet, there are no fixed timings, and customers often make their reservations at night. Naturally, it’s impossible to have a customer service team working round the clock. With the help of artificial intelligence, chatbots can be programmed to help customers complete search queries and get answers to commonly asked questions in live chat without having to speak to a customer service representative. However, it’s understandable that machine learning is not yet equipped to replace human effort altogether. For queries beyond AI chatbots’ capabilities, you can hire a virtual assistant to help with customer service.
Emerging technologies Interactive Maps Advanced software solutions have become indispensable tools in our interconnected world, reshaping the way we navigate and understand our surroundings. In 2024, mapping 37
Section 35
technology has evolved beyond mere directional guidance, offering companies and users a comprehensive and dynamic experience. These interactive mapping software solutions incorporate real-time data, satellite imagery, and machine learning algorithms to provide accurate and up-to-date maps. Businesses can use these interactive tools to customize their maps to meet the needs of their audiences. Whether used for urban planning, logistics optimization, or travel navigation, mapping software has transcended traditional boundaries. It not only enables users to find the quickest route from point A to point B but also facilitates a deeper understanding of geographic landscapes. With features like augmented reality overlays and interactive layers, mapping tools continue to redefine our spatial awareness, making them an essential companion in our daily lives. Augmented Reality (AR) for Enhanced Experiences For travel and tourism companies aiming to remain competitive, the integration of augmented reality into customer experiences is essential. The AR market is projected to experience a remarkable CAGR of 38% by the year 2030. This growth forecast underscores the increasing importance of AR in the industry, highlighting its pivotal role not only in enhancing customer engagement but also in securing a competitive edge for businesses within the travel and tourism sector. In 2024, we can expect AR to become an integral part of travel apps, providing users with real-time information and enhancing the experience of their surroundings. Imagine walking through historical landmarks and using AR to witness ancient civilizations coming to life or getting instant translations of street signs. AR will bridge the gap between the physical and digital worlds, offering tourists a more immersive and interactive journey. Blockchain for Secure and Transparent Transactions Blockchain technology is gaining traction in the tourism industry, offering secure and transparent transactions. By 2024, blockchain will likely become widely adopted for booking accommodation, flights, and travel services. Its decentralized nature ensures transactions remain tamper-proof while simultaneously lowering fraud risk. Smart contracts will automate processes, ensuring seamless and secure interactions between travellers and service providers, ultimately fostering trust in the industry. Artificial Intelligence (AI) for Personalized Travel Experiences Artificial intelligence is becoming increasingly sophisticated in tailoring travel experiences to individual preferences. In 2024, AI-powered travel assistants will be the norm, providing personalized recommendations for accommodations, activities, and dining based on travellers’ preferences and past behaviour. Machine learning algorithms will continuously refine suggestions, ensuring that each trip becomes a unique and tailored adventure. AI will also play a crucial role in customer service, with chatbots providing instant assistance and support throughout the travel journey. 38
Meeting different user needs A clear and easy to navigate website, adapted so children can look through it as well. Th examples that I have researched are: Chester Zoo, Yorkshire Zoo, Colchester Zoo, West midland Safari Park and Blackpool zoo.
39
Section 36
40
Section 37
41
42
43
Section 38
44
Section 39
46
47
Section 40
Appendix 2 Software Development for Leisure, Travel & Tourism: Tech Trends for 2023 (youteam.io) 7 Top Tech Trends Emerging in the Tourism Industry in 2024 | She Owns It List of 9 Legal Requirements for Websites and Tips to Meet Them - Termly Guide to Non-Functional Requirements | Insight | Box UK 49
Task 2: Test log Description of test Test data to be used (if required) Expected outcome Actual outcome Comments and intended actions Navigation bar: Black box testing -> Functional testing: Integration testing No data inputs needed at this stage, tester will go through the navbar and test if all the correct pages are loaded. EX. clicking on about us should load about us page Navigation bar is displayed properly, it has four 3 sections: logo, links, signup/login. When hover over the links green line eases in. When clicking on the links it takes you to the page that it describes.
The Navbar works as expected. All the links work. none Homepage: White box testing, Black box testing - > Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing homepage unit, testing integration of homepage within the website. Homepage is displayed properly, all buttons work: when user clicks on learn more button, it navigates to about page, book navigates to main booking page, EduVisit to eduvisit page, book that is in the hotel card navigates to All the buttons work, page is properly integrated within website. 50 Task 2
Section 41
About Page: White box testing, Black box testing - > Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing about page unit, testing integration of about page within the website.
About page displays five sections: Our animals, opening times, prompt to booking tickets, our facilities and location. All select buttons should lead to the main booking page.
All the sections are displayed; however, I have learned that select options lead straight to the booking ticket, which may lead to an issue as user might be not signed in. Reroute user to the booking main page instead. For this I will change href for the buttons. 51
Section 42
Regression testing, Checking if previous issue was fixed and if the user is routed to the correct page. No Data needed. Testing if all the buttons are functional, testing about page unit, testing integration of about page within the website.
All select buttons should lead to the main booking page.
Section 43
Educational visits page: White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing educational unit, testing integration of eduvisit within the website. EduVisit displays three sections: opening times, section with placeholders for content, prompt to booking tickets. Select button should lead to the booking page.
Section 44
I will add href to this button so it leads user to booking main page.
Regression testing, Checking if previous issue was fixed and if the user is routed to the correct page. No Data needed. Testing if all the buttons are functional, testing educational unit, testing integration of eduvisit within the website. Select button should lead to the booking page.
Button leads to booking page. Booking page: White box testing, Black box testing - > Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing booking page unit, testing integration of booking page within the website. Booking page displays two vertical sections, one prompts to book a room and the other to book a hotel. When user clicks on the book a room the system should check if the user is signed in. If yes route the user to
Section 45
53
the booking if not route the user to the login page with the message: You need to login to book a room. 54
The main booking page is well integrated within the website. When clicking on book a room or ticket, system indeed checks if user is signed in and if yes lets user to book if not prompts to login with a message. Booking System: Test the room booking process. Test Data: Normal: -Single - From 25/04/2024 To 28/04/2024 - Yes
Section 46
If user is signed in than he/she can access the booking process, once the test data is entered, new record should be created in the room_bookings table in the database. The user is signed in and acessed the room booking section, after entering the correct test data a new record was created:
And user was routed to the user page where the new booking was added into her bookings with the message: You have successfully booked a room: 55
56
Section 47
Booking System: Test the ticket booking process. Test Data: -Double - From 29/04/2024 To 30/04/2024 - No
With no confirmation process should not be completed instead user should get a message: You have not confirmed your booking!
While testing this I came to realise that I have placed the pound sign in the wrong place. I will change it now! 57
Section 48
Regression testing. £ signs are in the correct place.
Booking System: Test the room booking process. Test Data: Normal: -Adult - Visit date: 05/06/2024 - Yes
If user is signed in than he/she can access the booking process, once the test data is entered, new record should be created in the ticket_bookings table in the database. The user is signed in and acessed the room booking section, after entering the correct test data a new record was created:
Section 49
And user was routed to the user page where the new booking was added into her bookings with the message: You have successfully booked a room:
58
Login page: White box testing, Black box testing - > Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing login unit, testing integration of login page within the website. Log in page should display login form where user can enter username and password in the bottom of the form there should be an option to get to the sign up page in case you don’t have account yet, when the link is clicked it should lead user to the sign up page Login page works as acpected, it displayes a form and when clicking the link it displayes signup page instead. 59
Section 50
Login system : Backend-> database testing In this test I will be testing validation and thus robustness of the system. Invalid data: no data or error=emptyinput The system should catch an error and route user to ?error=emptyinput page that will display error message to the end user saying : You have not filled in all the fields. I have noticted that I have mistakenly outputed the wrong message even the in the url we can see that the system caught the correct error: I’m going to change the message that is displayed in the login.php 60
61
Regression testing. Testing to see if the changes work. Invalid data: no data or error=emptyinput Correct message is displayed.
Section 51
Login system : Backend-> database testing In this test I will be testing validation and thus robustness of the system. Invalid data(user does not exist): Jhon1234 7777 Error message that says user not found should be displayed. Similar as in previous test I have displayed the wrong message to the end user, however it is an easy fix since the system cached the error correctly:
To fix this I will change the route to /login.php?error=usernotf ound in my LoginContr class in classes folder. However that is only one part. As well as that I have to add the error message when this error is caught in the login.php 62
file Regression testing Invalid data(user does not exist): Jhon1234 7777 Error message that says user not found should be displayed
Section 52
Login system : Backend-> database testing In this test I will be testing against valid data, to test if the user is actually logged Valid data: anastasia1234 1234 User should be routed to the userpage and top left corner in the navigation bar The Login works as expected : 63
in when the correct credentials are entered should be changed to username and logout options
Testing if logout button works No data needed The user should be logged out Logout works as expected:
Section 53
64
Sign up page: White box testing, Black box testing -> Functional testing: Integration testing, Unit testing No Data needed. Testing if all the buttons are functional, testing sign up unit, testing integration of sign up page within the website Sign up page should display signup form where user can enter username and password in the bottom of the form there should be an option to get to the login page in case you already have account, when the link is clicked it should lead user to the sign up page
Sign up system : Backend- > database testing In this test I will be testing against invalid data so that we can see if the system catches the errors. Invalid data: no data or error=emptyinput Empty error massage is displayed The error is handled correctly: 65
Section 54
Sign up system : Backend- > database testing In this test I will be testing against invalid data so that we can see if the system catches the errors. Invalid data (user already exists): anastasia1234 1234 The error should be displayed The system catches the error:
Section 55
67
Regression testing Invalid data (user already exists): anastasia1234 email@example.com 1234 1234
Section 56
Sign up system : Backend- > database testing In this test I will be testing against invalid data so that we can see if the system catches the errors. Invalid data (passwords do not match): Vlad9999 vlad.ol@yahoo.com 9999 99990 The error should be displayed Works as expected 68
Sign up system : Backend- > database testing In this test I will be testing against invalid data so that we can see if the system catches the errors. Invalid data (passwords do not match): Vlad9999 vladislav 9999 9999
Section 57
Sign up system : Backend- > database testing In this test I will be testing against valid data to see if the account is actually created and the record is added to the database Invalid data (passwords do not match): Vlad9999 vlad.ol@yahoo.com 9999 9999
The record should be added to the database and the success message should be displayed User record is created in the database with the hashed password for security:
However, message was not displayed .
Section 58
I will add a message to the php/signup.php?error=no ne 69
Regression testing No data needed, just refresh the page Message should be displayed
70
Section 59
image https://unsplash.com/photos/elephant-on- river-during-daytime-8uJ0Am-ZdTA Catching the eye of the end user, and making it clear what the website is about. First retrieved during design stage. Second for assets folder on 15/04/2024 Picture in Ed activities card
image https://unsplash.com/photos/group-of- people-wearing-white-and-orange- backpacks-walking-on-gray-concrete- pavement-during-daytime-CYlPykF-qAM Catching the eye of the end user, and making it clear what this section is about. First retrieved during design stage. Second for assets folder on 15/04/2024 Picture in the hotel card on the homepage
image https://unsplash.com/photos/white- mattress-beside-sectional-sofa- emqnSQwQQDo Catching the eye of the end user, and making it clear what this section is about. First retrieved during design stage. Second for assets folder on 15/04/2024 Picture in the our animals section:
Section 60
image https://unsplash.com/photos/brown-lion- and-lioness-on-rock-5h1_OwBxLNI Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 71
Section 61
image https://unsplash.com/photos/red-panda- climbing-on-tree-a9NQ6z1zqro Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 Picture in the our animals section: image https://unsplash.com/photos/two-giraffe- and-three-zebra-on-green-grass-field- under-trees-at-daytime-ttpNCevA1tA Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 72
Section 62
image https://unsplash.com/photos/brown-bear- sitting-on-grass-field-y421kXlUOQk Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 73
Section 63
https://unsplash.com/photos/zebra-in- fence-k1Z8oeroFsI Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 Picture in the our animals section:
image https://unsplash.com/photos/blue-and- yellow-macaw-perching-on-wood- AJizGPAyC1U Catching the eye of the end user, and showing the end user what animals are in client’s zoo 17/04/2024 74
Section 64
image https://unsplash.com/photos/woman-in- black-leather-jacket-standing-beside- giraffe-during-daytime-T8sYhSINRyU Showing user what experience they get when visiting rza First retrieved during design stage. Second for assets folder on 15/04/2024 Picture in the our facilities section:
image https://unsplash.com/photos/brown- wooden-table-with-chairs-VmAaEe0vVi0 Catching the eye of the end user, and showing the end user what facilities are in client’s hotel 22/04/2024 Picture in the our facilities section:
image https://unsplash.com/photos/hallway-of- building-LfqmND-hym8 Catching the eye of the end user, and showing the end user what facilities are in client’s hotel 22/04/2024 75
Section 65
image https://unsplash.com/photos/brown- wooden-lounge-chairs-near-pool- surrounded-by-palm-trees-vmIWr0NnpCQ Catching the eye of the end user, and showing the end user what facilities are in client’s hotel 22/04/2024 Picture in the our facilities section:
image https://unsplash.com/photos/white-bed- linen-with-throw-pillows-Yrxr3bsPdS0 Catching the eye of the end user, and showing the end user what facilities are in client’s hotel 22/04/2024 Picture in the our facilities section: image https://unsplash.com/photos/bread-with- sliced-lemon-on-white-ceramic-plate- lw3Lqe2K7xc Catching the eye of the end user, and showing the end user what facilities are in client’s hotel 22/04/2024 76
Section 66
image https://unsplash.com/photos/group-of- people-wearing-white-and-orange- backpacks-walking-on-gray-concrete- pavement-during-daytime-CYlPykF-qAM Catching the eye of the end user, and making it clear what this section is about. First retrieved during design stage. Second for assets folder on 15/04/2024 ½ background for main booking page image https://unsplash.com/photos/white- mattress-beside-sectional-sofa- emqnSQwQQDo Catching the eye of the end user, and making it clear what this section is about. First retrieved during design stage. Second for assets folder on 15/04/2024 77
Section 67
image https://unsplash.com/photos/woman- wearing-gray-coat-standing-on-brick- pavement-q7pOFt3J0ks Catching the eye of the end user, and making it clear what this section is about. First retrieved during design stage. Second for assets folder on 15/04/2024 Location API on the about page
API https://developers.google.com/maps Making it easy for end user to see where rza is located in an interactive way 22/04/2024 Background for the user page image https://unsplash.com/photos/white-and- pink-flamingos-4Gi06ZMns30 I used this picture to still keep the idea of the zoo however I added shade so it does not destruct the user from the main information 22/04/2024 78
Bootstrap components used throughout the website Bootstrap https://getbootstrap.com/docs/5.0/getting- started/introduction/ I used bootstrap elements as it is relatively fast to create the frontend, however the main reason is that bootstrap elements are widely used now and became more intuitive to the end user.
Section 68
79
Contents General layout ......................................................................................................................................... 2 Homepage ............................................................................................................................................... 2 Screenshot of the design .................................................................................................................... 2 Screenshot of the prototype ............................................................................................................... 3 About us page ......................................................................................................................................... 4 Screenshot of the design .................................................................................................................... 4 Screenshot of the prototype ............................................................................................................... 5 EduVisit page ........................................................................................................................................... 6 Screenshot of the design .................................................................................................................... 6 Screenshot of the prototype ............................................................................................................... 7 Booking main page .................................................................................................................................. 8 Screenshot of the design .................................................................................................................... 8 Screenshot of the prototype ............................................................................................................... 9 Booking Room page .............................................................................................................................. 10 Screenshot of the design .................................................................................................................. 10 Screenshot of the prototype ............................................................................................................. 11 Booking Ticket page .............................................................................................................................. 12 Screenshot of the design .................................................................................................................. 12 Screenshot of the prototype ............................................................................................................. 13 Signup page ........................................................................................................................................... 14 Screenshot of the design .................................................................................................................. 14 Screenshot of the prototype ............................................................................................................. 14 Login page ............................................................................................................................................. 15 Screenshot of the design .................................................................................................................. 15 Screenshot of the prototype ............................................................................................................. 15 Userpage ............................................................................................................................................... 16 Screenshot of the design .................................................................................................................. 16 Screenshot of the prototype ............................................................................................................. 17 Technical notes ..................................................................................................................................... 17
80
Section 69
General layout General layout of the website is fairly close to the designs I have made. The most noticeable change perhaps is the navigation bar. I have decoded to change it closer to the final stages of the development as it seemed more modern and therefore not outdated. I have kept the colour scheme as in design docs as I wanted it to be WCAG compatible. Homepage Screenshot of the design 81
Section 70
82
Section 71
84
Section 72
86
Section 73
88
Section 74
90
Section 75
92
Section 76
94
Section 77
Technical notes To complete this prototype I have used: FRONTEND - HTML - CSS - Bootstrap - JavaScript BACKEND - PHP - SQL - XAMPP 96
Section 78
Contents Aim of feedback: .............................................................................................................................................................................................................................. 2 Feedback Summary .......................................................................................................................................................................................................................... 5 Synopsis of who was asked for feedback..................................................................................................................................................................................... 6 Synopsis of who responded and provided feedback ................................................................................................................................................................... 8 Results of feedback (results, charts, graphs, scales etc) .................................................................................................................................................................. 9 Summary of feedback in detail ...................................................................................................................................................................................................... 43 Overall impression: .................................................................................................................................................................................................................... 43 Navigation: ................................................................................................................................................................................................................................. 44 Homepage: ................................................................................................................................................................................................................................. 46 About Page ................................................................................................................................................................................................................................. 48 Educational visit page ................................................................................................................................................................................................................ 52 Main booking page, booking system & signup/login system. ................................................................................................................................................... 52 Pure technical questions ............................................................................................................................................................................................................ 59
Section 79
Aim of feedback: To find out how effective the prototype of the proposed solution is and furthermore to be able to find out how well the solution meets requirements of the client. In this feedback I will be creating questionnaire for two different types of users: technical and non-technical. I will include questions that will cover all the specific aspects of the website rather than just generic questions.
Audience Prototype options Prototype you will produce Questions to ask about the prototype Method of gathering feedback Who to get feedback from and why Non- Technical & Technical There are a lot of options that I considered before choosing how am I going to demonstrate my website to the audience both technical and non- technical. For example, if it was an actual real- life project, gathering the room of colleagues and getting them to test it whilst observing would be quite sensible thing to do. Another thing that could be done is making a presentation with and present it to the chosen audience after which Because it is not a real-life project. Some of the options are limited. Therefore, it seems to me that there are two reasonable options: sending the link or the video.
Because all of my chosen testers are located within same network, I have an opportunity to send the link to show them the - What is your name? - Please rate overall first impression of the website. - Does the website give you a clear understanding of its purpose? - What do you like least/most about website? - How would you describe the website's design? Is it visually appealing? - Is the layout intuitive and easy to navigate? - How easy was it for you to find the website's navigation menu? What are your thoughts on the logo? Do you recon it is easily remembered by the user? Do you believe that the average user will quickly recognize it? I have decided to use Microsoft forms in order to gather feedback from both technical and non-technical users, the reason being it has a lot of functionality like attaching videos and photos to the questions, as well as that there are different For this project all the testers will be my groupmates. However, there are two different groups that I need to gather feedback from: technical and non-technical. That’s when sending the forms out I will specify which category I would like the user to choose and then respond to all the questions in that type of manner. 98
Section 80
showing how the prototype works. Then ask them all the questions prepared prior to that. That would make all the colleges more engaged, and the feedback will show the collective opinion. Some important ideas might come out of such a way of working. However, for the small projects or the once like this one that has an educational purpose and therefore has a few limitations, there are also other ways of showing the prototype. Two of such methods would be creating a walk-through video and sending the link to the website to classmates. However, for the link, it should only be people that are connected to college network, and the actual website at work. I find it way more interactive than just showing the video.
As well as that the downside of the video would be inconvenience in filling the form and having to stop and go back over the video in case you missed something that is asked in the form.
To make their experience better, I decided to create a questionnaire in a so that it walks them through the website and helps to discover features.
Section 81
- Please try to hover over navigation links, does the green line appear? What are your thoughts on it? - Please rate the logo and the navigation bar - The colour palette of the website is: o User-friendly, makes me want to spend more time on the website. o Is not very pleasant; I would rather change it. - What would you rate the Homepage? - From seeing only homepage, is the purpose of the website clear? - Have you used any buttons to navigate farther through the website, did they work? - What is your overall impression of the about page? - Please rate the about page. - Do you find it useful to have the animals’ section in the about page? Did it capture your attention? - Do you find it sensible to have a section with opening times on the about page and EduVisit page? - What do you think about having embedded map on the about page? - Please rate the EduVisit page (Keep in mind that the placeholders will ways to ask users such as to rate, to choose a multiple answer question, to write a long answer. And on top of that it enables you to branch, when needed. Since I have decided to do just that after the question of whether the user is tech or non- tech, Microsoft forms are the most reasonable method for me to gather feedback. 99
localhost should be running otherwise the website would not be accessible. As well as that in some questions that are focusing on. one or two particular aspects of the website, I will be adding screenshots. I will also provide technical users with screenshots of some technical aspects to gather more effective and comprehensive feedback. be filled with useful information for students once the client provides data and prototype goes into development. - Please rate the visual appearance of the main booking page. - Please try to book a ticket of your preference, you will find that to book a ticket you need to login first? How quickly did you find the sign up link, to create account before logging in? - Have you seen helpful message : “You need to login first to book a room”? Did you find it easy to create an account and login? - Now that you have successfully logged in do you notice the changes on the navigation bar? Do you find your experience more personalised, having this feature? - Please rate the sign up/login system (Make sure to checkout validation) - Once you are logged in the website takes you automatically to the user page, however because you have yet not booked any tickets or rooms there is an error message that will be fixed in the farther development. Feel free to navigate There is going to be one form for both technical and non-technical users however at the point of the question about technical skills level the questionnaire will be branched. This will be done to gather as much feedback as possible, as in this way technical users will answer both technical and non-technical questions. 100
back to the booking page and try to book a room now. - Have did you find the booking form? What did you like and what did you not like? - Now that you have booked a room and a ticket, can you see your bookings on the user page? - Please choose what is your prior technical skills level - Please look at the database. In your opinion is this table structured in the most efficient way? If not, what changes would you make to improve it? - - Please look at the naming conventions and the folder structure. Is it somewhat clear? How easy would that be to continue working on the project in case of reassigning it to you?
Section 82
For this questionnaire, I have carefully chosen the audience for the feedback. I have asked 11 people to complete the form the form is the same and the only difference for technical users will be in the end of the form therefore, all 11 testers have completed the non – technical form and 8 completed technical form. Please see the table belove to see the criteria that I was choosing based on, I have only included initials to not disclose personal information of the testers. 102
ER – male, has younger sibling is a frequent zoo customer. FO – male, has prior experience working for the zoo. AN – female, has younger siblings, and very recently had experience booking tickets for Chester Zoo. DW – male, advanced technical skills, prior knowledge of the sql databases and php SC – male, advanced frontend knowledge and UI/UX design CB – male, has prior experience in creating full stuck solution. BW – male, advanced database knowledge, VT – female, is an average user that could potentially become a client of the zoo, she did not have prior experience booking online, therefore will give feedback that will give some insights for this time of audience. RO – male, has prior experience in UI/UX design. MV – female, has prior experience in UI/UX design and frontend development. SS – male, has prior experience in full stuck development. 103
Section 83
Everyone that has received the form had responded to the questionnaire. All together 11 answers. 104
Section 84
106
107
108
Section 85
109
110
111
Section 86
112
113
114
Section 87
115
116
117
Section 88
118
119
120
Section 89
121
122
123
Section 90
124
125
126
Section 91
127
128
129
Section 92
130
131
132
Section 93
133
134
135
Section 94
136
137
138
Section 95
The result of rating the first impression is 8.45 out of 10 based on 11 responses, where the highest is 10 and the lowest is 7. Personally, I agree with the result as I see how the frontend could be developed farther. On the question, if the website gives a clear understanding of its purpose, all 11 people that completed the form has responded with a yes, which I see as a success, because it will keep the right audience on the website and lower the bounce rate. For the question most/least liked about the website, there are different answers, however almost all the testers seem to like that the website has a lot of functionality that works, the technical users were mentioning the login system, colour and consistency on the website. One of the testers underlined: I like how wide it feels. You made good use of the available space and the site looks and feels professional. For the dislike part some of the user mentioned the footer structure. Which I fully agree with, as I have not spent too much time on the development of the footer, I rather concentrated on the functionality and backend, which took most of the time of the prototype development. And I think I should have added a message “still under development” to show testers that it is going to be farther developed. Similarly, to this, one tester has mentioned: I'm unable to cancel a booking once I've booked, so maybe this could be something to improve in the future to give a better user experience. For the feature of managing your bookings I have only done the frontend and therefore it did not function. However, what I could have done is display a message that says this feature is currently being developed, so users know that they’re booking was not cancelled and why.
139
Section 96
In the questionnaire I have asked the testers to see if the layout is intuitive and easy to navigate to which all the testers answered positively. To support this, here is a pie chart formed from the answers:
The other question that I asked was: How easy was it for you to find the website's navigation menu? What are your thoughts on the logo? Do you recon it is easily remembered by the user? Do you believe that the average user will quickly recognize it? I have asked these questions to understand if the website will help my client RZA adventures to make strong connections with its customers. I was very much satisfied with the responses that I received. For ex. 140
The color was distinctively different and it looks great and is easy to navigate and locate so overall it was easy and i had no issues.
Section 97
Yes i believe it would be easy for a new user to navigate through the site without getting lost. The logo is very appealing and it stands out very well and easy to identify that it would be a zoo website
I think it has a unique look and the logo is good and easily recognizable.
It was very easy and the logo looks good and memorable so it will most likely be remembered and recognised by the user
Section 98
141
On the navigation bar I have added a hover effect feature and therefore I wanted to know how would protentional end users like it. The question I asked: Please try to hover over navigation links, does the green line appear? What are your thoughts on it? I had very positive feedback, meaning that this is a feature that we need to keep on the website:
Section 99
I consider colour palette to be very important when designing and developing the website. As a lot of users out there judge the website by its appearance which is quite sensible, consistent colour palette throughout the website might keep user more engaged, as well as give the feeling of the “save space”. Therefore, I have asked the following question: 142
The most important thing about homepage is to capture users’ attention and to give a clear understanding of the website, so the user follows to the other pages and potentially becomes a paying customer. Therefore, I have asked the following question: 143
About Page I have asked testers to rate the about page. The average rating was 7.0 out of 10. Which I find sensible, now that I see that in farther development, I could add more information about the RZA. One section of the about page contains animals that customers will find when they visit zoo. Therefore, I wanted to know if that is something that end user would be interested seeing on the about page. My question: Do you find it useful to have the animals section in the about page? Did it capture your attention? 144
Section 100
It captured my attention with the visual images and the details were very informative, overall great about me page
I think it is useful to have the animals here, as they are the most important part of a zoo so people will want to learn about them first.
yes, it was clearly a great way to catch the user's attention and to let the user stay a longer time on the website, and be more intrigued about what is in the zoo.
Section 101
I think it's useful to have it as it tells the user what animals are available and what to expect and it definitely captured my attention 145
From this feedback I can take that this section is very useful and should be kept on the website, Because of such a great review I think in farther development this section should be paid a lot of attention. The other section that I have included on the about page is opening times, therefore I wanted to get testers’ opinion on that:
Do you find it sensible to have a section with opening times on the about page and EduVisit page? I think it's sensible as the user might forget the opening times when they get to one of these pages so it will be convenient for them to see it on that page rather than go back to the other page to see it however you should probably make the positions of the opening times more consistent for example make sure it is on the top or middle of the page on both pages
Section 102
Yes it allows the user to view the businesses operating hours so they can arrive at the correct time
Yes as you're giving users information and answers to their questions that if it wasn't there the business may have received calls from customers who just want to know the opening times From these responses, I can conclude that the opening times is a very important section to have. 146
Finally, I have asked about the embedded map as a location guide and according to the feedback testers find it very much useful: 147
Section 103
Main booking page, booking system & signup/login system. The main booking page consists of two sections divided vertically: book a room and book a ticket. Once you press the button the system automatically checks if the user is signed in or not, if not, refers the end user to the login page first with a message. When user is logged in then he/she can proceed with booking which consists of 3 stages: choosing type of ticket or room, choosing the date and confirmation. First thing I have decided to ask about this page is if it is appealing at first place: 148
The result 8.55 out of 10 based on 11 people asked is very reasonable. Since all the testers see the website first time, I’ve assumed that they will not be logged in or signed up, thus a great chance to test how the booking handles this scenario first. Because the booking refers users to login page and not sign up, it is crucial that users can almost instantaneously and very intuitively find the link to sign up, therefore I have asked the following question: Please try to book a ticket of your preference, you will find that to book a ticket you need to login first? How quickly did you find the sign up link, to create account before logging in? Some answers: i was able to do the process very quickly and get what I wanted to do done 149
Very clear as it is common for it to be in the position it is in. Normally the first place a user looks
Section 104
I found it fast as it is in the most common place which is good for users as they wont have to search for the sign up page.
I knew where to look for it, so I found it quite quickly
Signup process was quite easy to, but if you were to develop the signup page even further I would include some sort of validation that would automiatically go to the next field required, for example when I type in a username and press enter it displays me an error message instead of this allow the system to go onto the next field automatically Most of the feedback was extremely positive, which I find satisfying, the very last comment I have added above had a suggestion for farther development, which is a very useful piece of feedback. The validation that I have added was a backend validation that will not allow for erroneous data to the database and therefore extremely secure, while using simple html-based validation might lead to the issues. One example would be, someone could change html in browser’s development tools and that would then pass and data in or no data in. However, after reading this feedback, I have realised that in actuality the combination of both validations would be the most appropriate way to go about it. 150
Section 105
In order to make it a more smooth-sailing experience for users, I decided to add a message if users is redirected to the login page through the booking system. Most of the responses show that this function works, and it’s easily spotted, however because there were two people that have not noticed this message, it might be sensible in the future development to Change the colour of it of make it an alert type of message. The following question was:
Most responses were positive, but one. It’s quite hard to argue one’s opinion on their experience. However, I find it, that we are safe to rely on the majority. 151
Section 106
Have did you find the booking form? What did you like and what did you not like? Some answers:
clear and concise but maybe adding some more information and visual images would be nice. 152
The booking is nicely laid out I'd say, but maybe if you could have written some more information in the price boxes to give a better insight into what's included in each ticket or room selection it would make their selection more easy.
Section 107
The booking form was easy to understand and showed up once you had booked a ticket on the bookings page.
I liked the fact that it was in different stages and there was a little progress bar at the bottom to view how many stages there are
Section 108
It is easy to use but I cannot book for multiple tickets at once. 153
I liked that it was easy to use but I didn't like the fact the you can't book both child and adult and that you cant type how many children and/or adults are coming All the comments hade some positives to say which is really good, however what I really want to focus on here is negatives as that is exactly what drives farther development. One of the testers included that some more images and content might be nice the other one said that some more information in price boxes will help the in the selection process. I completely agree with those comments, I have made a pretty generic placeholders that will satisfy the overall design and the website theme. However, when it comes to the actual deployment all the data and appropriate images provided by the client will be integrated instead. Thus, I think this issue will be exhausted by the time the software goes live. The other two comments were on the other hand more serious saying that in the form it does not ask you how many children or adults the tickets are booked for, meaning that the users will need to book all the tickets separately, which might influence their overall experience on the website, depending how many separate tickets they need to book. Therefore, this issue should be addressed first thing in the farther development. On the positive side, it is fairly easy to integrate, by adding one more filed to the booking form and one to column to the table on the database + validation. On average it should not take more than 1.5 hours to implement.
Another feature that I have added was that when the user has any tickets booked or rooms reserved, they will be shown in the user page, thus the following question: 154
Section 109
While crating this form I have encountered a bug in the system: once you sign up for the first time and you don’t yet have booking data on the database the system does not handle it gracefully instead shows error messages inside the user page and therefore few questions earlier I explained that to my testers :
However, once the bookings are made, the system displays them, and I have tested it multiple time. As well as that 8 responses show that the bookings are displayed. Therefore, I think before deployment it should be something to investigate, however it should be working properly.
Pure technical questions I structured my form in the way that all the testers must answer first and biggest chank of non-technical questions, and then I separate them by asking the question:
Section 110
In this way, Technical users could answer both technical and non-technical questions. In terms of technical questions, I found it the most important to ask the opinion on the naming convention and the clarity of the database structure, since this is important in case this project should be farther developed by another programmers. 155
Section 111
Please look at the database. In your opinion are the naming conventions for the tables reasonable? Is the customers table structured in the most efficient way? If not, what changes would you make to improve it? Some of the answers:
Section 112
Yes they are reasonable and easy to understand for anyone else looking at the database 156
Yes, looks good, the fact it is within one database and the password is encrypted
The naming conventions are appropriate and security was considered via password hashing My question:
Section 113
Please look at the naming conventions and the folder structure. Is it somewhat clear? How easy would that be to continue working on the project in case of reassigning it to you? Some of the answers:
It looks very clear as a technical suer and like how it separated in different folder
157
Section 114
It is clear and well structured. it might take some time to understand the namings but it will be pretty easy to continue working on the project.
the naming conventions are very clear and they would help any other developer once they're working on it
The folder structure is clear to understand as files are segmented according to their respective languages. Based on the average answers, I can see, that the way I left the project it could be picked up easily by other technical people, which will greatly benefit my client. As well as that I can see that the database structure is good, which is a very important aspect of the backend.
Section 115
In conclusion, most of the feedback was positive, which shows the success of the prototype, however there are some areas that need improvement, and therefore will be addressed in the future development or before the project goes live. To see specific issues to be addressed, please see the above sections. 158
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 1/6 RZA website feedback Hi! Would you mind taking 7 minutes to complete this form? Thank you! Here is the link to the website: http://172.22.18.103/rza_adventures/php/home.php :) Please enter your name 1 Please rate overall first impression of the website. 2 1 2 3 4 5 6 7 8 9 10 Ye No Does the website give you a clear understanding of its purpose? 3 What do you like least/most about website? 4 How would you describe the website's design? Is it visually appealing? 5159
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 2/6 Yes No Maybe Is the layout intuitive and easy to navigate? 6 How easy was it for you to find the website's navigation menu? What are your thoughts on the logo? Do you recon it is easily remembered by the user? Do you believe that the average user will quickly recognize it? 7 It is very interactive, a good feature to have I did not like it, it's distracting Please try to hover over navigation links, does the green line appear? What are your thoughts on it? 8 Please rate the logo and the navigation bar 9 1 2 3 4 5 6 7 8 9 10 User-friendly, goes well with RZA adventures Is not very pleasant, I would rather change it The colour palette of the website is: 10160
Section 116
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 3/6 What would you rate the Homepage? 11 1 2 3 4 5 6 7 8 9 10 Yes No From seeing only homepage, is the purpose of the website clear? 12 Yes, Yes Yes, No No, No Have you used any buttons to navigate farther through the website, did they work? 13 Please rate the about page 14 1 2 3 4 5 6 7 8 9 10 Do you find it useful to have the animals section in the about page? Did it capture your attention? 15 Do you find it sensible to have a section with opening times on the about page and EduVisit page? 16161
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 4/6 It's useful, I like it better than simple text I would not use it, I would prefer textual location What do you think about having embedded map on the about page? 17 Please rate the EduVisit page ( Keep in mind that the placeholders will be filled with useful information for students once the client provides data and prototype goes into development) 18 1 2 3 4 5 6 7 8 9 10 Please rate the visual appearance of the main booking page 19 1 2 3 4 5 6 7 8 9 10 Please try to book a ticket of your preference, you will find that to book a ticket you need to login first? How quickly did you find the sign up link, to create account before logging in? 20 Yes, Yes Yes, No No, Yes No, No Have you seen helpful message : “You need to login first to book a room”? Did you find it easy to create an account and login? 21 Yes No Now that you have successfully logged in do you notice the changes on the navigation bar? Do you find your experience more personalized, having this feature? 22162
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 5/6 Please rate the sign up/login system (Make sure to checkout validation) 23 1 2 3 4 5 6 7 8 9 10 Once you are logged in, the website takes you automatically to the user page, however because you have yet not booked any tickets or rooms there is an error message that will be fixed in the farther development. Feel free to navigate back to the booking page and try to book a room now. !(No response needed) 24 Have did you find the booking form? What did you like and what did you not like? 25 Yes No Now that you have booked a room and a ticket, can you see your bookings on the user page? 26 Technical user Non technical user Please choose what is your prior technical skills level 27 Please look at the database. In your opinion are the naming conventions for the tables reasonable? Is the customers table structured in the most efficient way? If not, what changes would you make to improve it? 28163
Section 117
5/8/24, 10:51 AM RZA website feedback https://forms.office.com/Pages/DesignPageV2.aspx?origin=NeoPortalPage&subpage=design&id=4OQOG2ZRykO0ZwI86bscxJFa7lTQZfREtHa-… 6/6 This content is neither created nor endorsed by Microsoft. The data you submit will be sent to the form owner. Microsoft Forms Please look at the naming conventions and the folder structure. Is it somewhat clear? How easy would that be to continue working on the project in case of reassigning it to you? 29164
Introduction In this passage, I will be evaluating the effectiveness of the digital solution that I’ve been developing during this assessment period and how it meets requirements. As well as that I will be sharing my ideas as to how the solution can be developed further. The effectiveness of the assets and content used: The reasoning behind selection Most of the assets on the website were chosen in the design stage and then implemented during development. I have carefully chosen all of them, to make sure they are a good representation of my client – RZA adventures.
Some of the assets like hotel pictures for our facilities section shown above, were chosen slightly later in the process, as I have decided to add this section after the beginning of the development. Home page background: I have chosen this specific background for various reasons such as: - It is a good representation of the zoo, and user can very quickly understand what this website is for, when gathering feedback, I have established that the average user can understand the purpose of the website very quickly. Therefore, it seems now like this picture suites just right. - It helps to emphasize that RZA is wild safari zoo - It has a good contrast, thus suitable for different types of end users - It fits the colour palate that I have previously chosen perfectly Even though this background seems to me a good solution, it is worth mentioning that is can be easily changed when needed. For example, maybe my client will decide on a different background for different seasons, all that needs to be done is replacing image in the assets folder. 165 Task 3b
Section 118
About page On the about page I have added four sections: animals, opening times, facilities and location. All those sections have some assets included. For example, Animals section has handful of animal pictures in there. I have chosen these assets in order to capture the eye of the protentional customers, as well as that it will give the end user a chance to see what they are up for if they decide to visit RZA. 166
In opening times section, I have carefully chosen the background to emphasize on the amazing experience end users can get if they decide to visit rza.
For our facilities I have chosen different types of pictures to show the overall experience they will get in rza hotel. In location section I have embedded Google map API. I have decided to do so to make the website more interactive and to enhance user experience. For the booking pages I have chosen relevant background, for example if you are booking a ticket the background will show the zoo, but if you are booking a room the background will be a hotel lobby, which will make user experience more intuitive and smoother. It will also prevent user form mistakenly booking a wrong ticket. For User page I have chosen a nice animals flamingos background, however I covered it with black opacity 0.5 shade in order to make sur that it is not distracting user. The validity and reliability For all the assets I have used a reliable source such as unsplash, for API I have used Google API. Because I have not added any content like RZA history, information about animals or facilities, there is no risk of invalid information, once the content is provided by the client, then it is going to be added to the website. Specifically, to prevent erroneous information and content on the website I have used Lorem ipsum text as a placeholder in all the places that require some info.
Section 119
Legal and ethical implications All the background pictures and icons are Copy right free, therefore legal to use and there is no need to change them before the deployment, unless the client has its own pictures that would like to be used instead. As for the content once again, I think it would be completely unethical to just copy it from competitors’ website or just have it written by the AI and therefore I have used placeholders instead.
How the digital solution meets the requirements of the solution Functional and non-functional requirements Functional requirements In my proposal I have stated that the system should include: 167
o Home page o About page o Educational visit page o Booking System o Login/Signup/Account system The solution that I have produced meets all those requirements. I have developed the website that I very close to the initial designs and proposal. It has the homepage, about page with all 4 required sections: Opening times, Our animals, Hotel info, how to get here. EduVisit page that has main section where the user can browse the catalogue of useful materials (now they are just placeholders, however when content is provided by the client it will contain all that is required). Booking System that has a main page where user can choose what to book: a room or a ticket. Then user is directed to that page. I have changed the logic of the system from the initial design. In the initial proposal I have proposed to make a system that would ask user for details like email and name every time that the booking is made. However, while developing the solution, I realised that this is not the best way to go about it. Instead, the system now checks if the user is signed in, if not kindly asks to sign in or create account first and then to make a booking. In the way, the database is well structured and is easy to track KPI’s for my client, however it is also useful for users as it is much quicker and prevents from entering wrong details. Login system has been developed exactly like I proposed, and I have used same required inputs that I previously proposed, please see belove. 168
Section 120
169
Non-functional requirements Security considerations The system should be secure and robust: • System must validate all data inputs. • System must use secure cookies. • System must use SHA256 Encryption for the passwords. All the inputs are validated on the backend level, I have essentially considered both types of validation: frontend(html) validation and backend validation. I have chosen to go with backend validation as it is the most secure method. It prevents malicious users from submitting wrong data using developer tools in browser, whereas html does not protect from this. System uses secure cookies. The solution contains signup/login system, I made sure it is secure by hashing all the passwords using SHA256 Encryption before they reach the database and then they’re stored in that way. 170
Accessibility features • The system should be straightforward to use, both for the end-users and the content editors that oversee backend system. • System should be adapted to different user needs: the system should be following Web Content • Accessibility (WCAG) guidelines All of those requirements are met in the solution. Before starting to develop the prototype, I have made sure that my previous design is inclusive for different types of users. For example, I have checked if all the colours and contrasts are accepted by the WCAG by using online checker. Another example would be a map API that is easier to use then just a small text in the footer stating the location. As well as that, I made sure that the website is easy and intuitive to navigate. I have added “walk through” and validation messages all throughout the website. For example, once user clicked on register and wants to switch to sign in, there are two ways to do so, first is to click on the “Already a member? Login” or just to click on the sign up in the navigation bar.
Section 121
KPI’s For the moment it is just a prototype, and it has no users to track KPI’s. For example, KPI’s like bounce rate or average time on the page are not yet sensible as it has not been deployed and runs on the localhost. However, it has a working login system and booking system, and all that data is stored on the database in the different tables. By analysing this data business can have insights on how many new users there are, what is the percentage of the users that booked a ticket online or booked a room or both. For example, it would be useful to know the tendency in relations between booking the ticket and the room to understand what rza get more revenue from. As well as that, RZA could track how many bookings were made per month as I have included automatic timestamps for all the records, and then analyse positive and negative trends. Because I have added those timestamps for when each account is created RZA can also track how many inactive accounts there are and potentially delete them after a year or so.
How the prototype could be developed further First of all, in farther development there should be all the required content added, as for this solution I have not provided the content like animals’ info, hotel info. Before deploying this info should be added. Secondly, because of the security considerations I have not added the feature to buy a ticket or pay for the room in advance. However, I this it would be a sensible feature to have as some users may want to do just that. Thirdly, it was my intention to develop a rewards system, for example when the user, has three visits to the zoo in her/his account, they get a free visit next or discount on the room, which is a good stimulation for customers. However, in this scope I was not able to develop it. Once the user page is displayed after logging in, there is a placeholder for “Loyalty points” though. Therefore, once it is developed it will be very beneficial feature for the RZA to have. 171
Another feature, that I consider to be a great feature is Animal API, that could be added to the education page. For example, user is interested in a particular animal, he/she enters the name of the animal and some interesting facts about the animal will be displayed. Finally, the hosting of the website, currently it is running on the localhost. But to be a live projected it should be deployed. 172
Section 122
All the material in this publication is copyright © Pearson Education Limited 2024. ‘T-LEVELS’ is a registered trade mark of the Department for Education. ‘T Level’ is a registered trade mark of the Institute for Apprenticeships and Technical Education. ‘Institute for Apprenticeships & Technical Education’ and logo are registered trade marks of the Institute for Apprenticeships and Technical Education. The T Level Technical Qualification in Digital Production, Design and Development is a qualification approved and managed by the Institute for Apprenticeships and Technical Education. Pearson Education Limited is authorised by the Institute for Apprenticeships and Technical Education to develop and deliver this Technical Qualification. Pearson and logo are registered trade marks of Pearson.