Plan and Design - Information and resource collection
Comparison of similar system/websites
06 websites are analysed under this topic to gain inspiration and answer the question imposed on the student in task 01 -a. The websites/systems analysed  are as follows,
Sen Wellness Sanctuary
Santani Wellness
Ayuda healing
Amuna
The Kandy Samadhi Centre
Ayugiri Wellness
These websites were chosen to relate to the exact scenario provided in the assessment brief to suit the key words or the heavily stated terms of “Holistic Wellness” and “located in Colombo, Sri lanka”. I chose these websites because they matched with the above keywords and are heavily related to GreenLife Wellness Center in either the services they provide or the overall similar system implementation found there.
07 categories will be used to analyse all the websites and provide results. And the categories which are to be used are as follows:
Navigation (Mainly the navigation bar)
Design and Layout
Aesthetics and branding (Color combination/theory should be discussed in this)
Pages (Primarily the homepage, about us page, contact page and the services page should be analysed)
Web performance (keywords, ranking, SEO)
Mobile optimization and responsiveness
User interaction (Forms, Live chat)
Each website will be analysed below in detail singularly and then compared with each other later on in the report.
Sen Wellness Sanctuary
Navigation bar: Hamburger menu style navigation bar is used in this website which is present in the far left corner while a call to action button which states “Booking Enquiry” is present in the far right corner. Wehn the maburger menu is clicked upon , a side-bar/side-nav-bar opens which displays links to an about page, retreats page, the sancutary page and a blog page along with a contact us page. Furthermore, when you leave the hompeage and access any other page , the menu changes into a typical/usual enu page with a hamburger menu nav-bar in the left corner, an accomodation page link, treatments page link, retreats page link, the sanctuary page link, and the daily rhythm page link in the middle and a call-to-action button in the right corner. Based on my personal opinion, sometimes it feels quite hard to naviagtethe website and feels like the user has to work towards finding a specific page and inconcsistent nav-bar styling across the homepage and other pages or subpages does also feel covoluted even though the nav-bar functions and looks quite smooth. 

This is how the website is displayed in the homepage intially. 

When the hambruger menu button is clicked upon, a side navigation bar opens to display the primary pages linked in the website which can be quite convoluted and hard to grasp for casual users. 

This is how the navigation bar is displayed when viewed from every other page apart from the homepage in this website.
Design and layout: This website uses a prominent white background along with high quality videos and imagery along with proper typography and a vibrant call to action button which suits the overall vibe  of the place. Limited functionalities can be noticed throughout the homepage which is designed mostly to drive traffic to the website but apart from it, the design is quite smooth and looks good. The header always displays a high-quality video that is quite related to the services offered at this wellness center and the footer is also conventionally smooth and good to look at and is also quite infromative.
The layout is well-organized and is intuitive to the user to navigate but does prove to be sometimes harder to find exact links or pages within the website due to inconsistent navigation bar design. The content is well-organized with use of clear headers and  footers. Z-Pattern and container-free format layout types are used to mimic users’ intuitive navigation and the website is designed to accomodate it based on the device it is displayed on. A full screen layout is present in the website for immersive user experience. website is designed to be quick-loading with minimal delay.
Aesthetics and Branding: The main colors used in the website are lavender for header, green to highlight a specific horizontal grid representing the global recognition and white for backgrounds. Based on color theory, the color combination used evokes a sense of a fresh beginning in a nature based setting while highlighting a spiritual awakening. The branding is quite consistent with the aesthetics displayed through the colors, typography and the content.
Pages: The main pages displayed within the website includes a homepage, a blog page, a contact us page and also several services/offerings page (accomodations and retreats etc). All pages display a video playing in the ehader section of the website. Hnece, users have to scroll down to view the content of the page they clicked on which can sometimes be a hindrance to user experience by not offering quick infromation leading to quick bounce rate.
Homepage: The homepage utilizes a full-screen layout to increase user immersiveness with the logo being located on the center of the video playing in the background and two buttons located on either side of the screen with the hambruger menu button on the left and the CTA “Booking Enquiry” on the right. Further this page displays a short introduction on the wellness centre, a grid-like structure to display reviews of the centre, a few links to toher important pages within the website, and a form to link to a newsletter and a social media link. The page is well informative with structured content and is easy to understand and read but lacks a consistent nav-bar design across all other pages. 
Blog page: The blog page uses a grid layout style to display content and maintains a consistent aesthetic and layout in the header and the footer. All blog posts available in this section directly correlates to the services offered by the wellness centre, ensuring a consistent branding and well-informed and structured approach to information.
About page: This page uses a centered approach to display information in well structured paragraphs and is quite simple to read and understand, indicating a simplistic approach to show professionalism and branding consistency.
Services page: A dedicated services or products page is not available to view in this website, rather it separates the content into several pages and sections. All the pages follows the same structure and consistency in header, footer and body as the blog page and the about page in the website . The pages/sections displayed are the accomodation page, treatments page, retreats page, the sanctuary page and the daily rhythm page.
Accomodation page - This page uses a Z-pattern layout to display its content and the content is about the various accomodations and the facilities provided by the wellness centre. Furthermore, a table of contents is provided in the top of the page to navigate easily and quicker to the necessary links which is displayed in a toggle/dropdown menu.
Treatments page - This section provides information on the various types of treatments offered by the wellness centre and uses a Z-Pattern layout to display content and imagery across the page. A table of contents is provided at the top of the section body in a dropdown menu.
Retreats page - This page provides information on retreats offered by the centre and provideslinks to sub-sections within the website through a grid-type layout.
The Sanctuary page -  Similar to the Retreats page, this section too offers links to toehr webpages within the website like accomodations apge, sustainability etc to provide more information on the sanctuary where this wellness centre is located.
The Daily Rhythm page -  This page offers further information on activities available or practiced on a regular basis to users and uses the same Z-pattern layout as the other pages.
Contact Page: The contact page uses a grid-layout structure and feels the most off from the consistent branding offered by the rest of the website and feels crowded or unpleasant, almost like an afterthought and not being planned well like the other pages and sections. A contact us form and more information like contact details and a map location is given in this section. The structure of the content feels off and poorly structured.
Web performance: Website performance depends on fast load times and quick content display optimization. According to Google’s PageSpeed Insights tool, This website is graded an average 86 score in performance. Moreover, this website is also SEO-optimized. Server downtimes and hosting issues can affect the web perfomance like what is faced by all other websites too.

This is the report summary provided by Google’s PageSpeed Insights tool. The scores reported in the tool are given above.
Mobile Optimization and Responsiveness: Apart from some instances, the website is quite mobile reponsive and is properly optimized to help users view, navigate and use the website as intended simialr to its desktop counterpart.
User Interaction: All forms provided in the website work like they are intended to and is structured properly to collect the necessary information from users looking to inquire about or access the services.
Santani Wellness
Navigation bar: Hamburger menu style and footer navigation style is used in the nav bar in this website. Further, the simplified nav bar displays the logo, name and the hmaburger menu button on the left end and a CTA “Reserve now” button on the right. When the hmaburger nav button is clicked, a mega menu style navigation bar opens to reveal the various sections and pages available in the website. And there is also an option to choose a different service type (Linked to a holiday villa) that is also offered by Santani and this option/button is available near the hmabruger menu button. When we scroll down from the intial immersive video based header , a normal naviagtion bar appears with multiple options like overview, facilities and stay etc. 
Design and layout: White color is predominantly used in the background and furthermore, high-quality imagery and video is used across the website to ensure quality. Proper typography and quite heavy/vibrant CTA buttons are available throughout the website. The design is much smoother and blends well with the full-screen video playing in the header and the other design colors. 
The layout structure in this website utilizes two distinct styles, one is a container-free style to provide strucutred content in the website body and use of grid style to display links and imagery along with captions etc. A full-screen layout is used to increase user immersiveness.
Aesthetics and branding: The color combination used in this website are white for the header and the body, and light brown for the footer. This color combination eludes a fresh start along with the rustic natural feeling alluding to the various nature related branding done by this wellness centre. These colors stay consistent with the tone of branding and also actually helps in elevating the user experience of this website.
Pages: The main sections/pages displayed in the main navigation bar available at the top of the webpage include Overview page, Facilities page, Wellness Page, Leisure page, Stay page, Dining page, gallery page and an offers page but when you click upon the hmaburger menu button to access the mega menu naviagtion bar, an about Santani page and a contact page appears too. All pages display either a high qualiy video or a high quality imagery in the header and the content is available below it to be found when scrolled downwards.
Homepage: The homepage features a video playing in the heaader with a CTA button on the right and the nav bar in the left along with a fully immersive screen layout. Further, all content availabel on the page are mostly infromative and lead to other sections or pages availabe within the website and is structured using grids and container-free styles. Furthermore, a recognition grid and a social media link is present int he site to ensure more traffic and promotion. A newsletter subscripton button is also given as a CTA “Subscribe ” button.
About page: This page features the same consistent styling as the other pages and is msotly presented ina grid frmoat by linking to other important sections and pages within the site and doesnt offer any unique propeosition except high quality imagery present in the page.
Contact us Page: The contact us page of this website has been designed perfectly with a get direction CTA link, a user form to contact the wellness centre and a map snippet pointing the centre’s location and also displays a frequently asked questions section and a link to the blog section/page. Furthermore, the styling and designign and layouts tay consistent with the rest of the website. 
Blog page: This page displays several blogs related to the brand and the services offered by the wellness centre and also features a CTA section encouragng the user to “book your stay”. This page is consistent with the detiling and layout of the other pages too.
Services: A dedicated services page is not availble for this site but several pages/sections are displayed in the main naivgation bar at the top which includes an facilities, wellness, lesisure, overview, stay, dinign, gallerya and offers pages.
Overview: this page and section concsists of an  about us page and everythign else like about page, sustainbility and founders story etc which is crucial to establish trust with the user. 
Facilities: This section links to several other pages pertaining to the spa facilites and other accomodation advantages etc to assist the user in gaining more infromation about this wellness centre. 
Wellness: This secion contains infromation on all things related to wellness and consultation booking etc which aids he user to go throiugh with the bookings and gainging information at ease.
Leisure: This section links to toher pages in the site which offers lesiure activities like safari and challeneges etc which helps in establishing the proerp brand identity and ensures trust in the centre. Fruther, this section also links to pages to visit nearby which can help its users plan out the wellness trip easily.
Stay: This section ikns to different webpages within the site to book for accomodation and is quite informative for users.
Dining: This secton referrs the user to gain information on various dingin options avialbe at the wellness resort and helps to make important decisions based on food facilities and dining facilties.
Offers: This sections provides details on all the offers available in the wellness centre which could either be lesirure related or wellness related, helping users choose quite easily. 
Web performance: According to Google PageSpeed Insights, the website perfromance rating of this site is an astounding 99 ranking best across four categories which are perfromance, accessiblity, best practices and SEO.
A screenshot pertaingin to the report is given below:
 

Mobile optimization and responsiveness: The website works well in mobiels and is quite responsive too. Furthermore, consistent deisn and layout can be ppbserved in optimization for mobiel as evident through the proper structuring of the website.
User interaction: Live chat option is available and is quite useful too. Further, forms and other user-freindly contact information and everythign is available and can be found quite easily by scrollign to the footer or goign to the contact us page.
Ayuda Healing
Navigation: The website uses a horizontal navigation menu style and a dropdown menu style to display the various sections/pages. The nav bar displayed on the top has its logo and the branding on the left end while the section links are located in the middle and a CTA “Book Consultation” button is located in the right end. The nav bar is displayed on top of an immersive video background that plays out the daily activities of the wellness sanctuary. A footer navigation bar is also present in the website across all pages to allow users to access quick links with ease.
Design and Layout: The predominant background color used is white. High quality imagery and videos are used in the background and grid-like structures to increase website attractiveness. The colors used in the website, the videos and images displayed are all integrated beautifully while maintaining immersion and enhancing user experience. 
Several layout styles like multiple column layout, fullscreen layout and grid style layout formats have been used across this website ‘s structure. This use of multiple layout formats/styles helps to structure the wide plethora of contnt available acros the website and allow every content to feel unique and modular, allowing for ease of understanding for the user. Moreover, several CTA buttons have been placed strategically to conert users into customers which doesnt feel intrusive to the user experience.
Aesthetics and branding: The color combination used in this website are grey/black for footer and header and white for bacground while implmementing transclucent background images as a layering underneath the white background. Use of white and balck looks visually appealing but offers nothing unique or special to complement the branding  nor the aesthetics, letting the user feel like a typical web experience and nothing unique visually. Consistency is maintained throughout the site to ensure the user has a similar experieince across all pages and sections. 
Pages: The sections/links mentioned in the top navigation bar includes a homepage, about us page, ayuda sanctuary page, a special offers page, a programme page, a sustainability page and a contact page which can be found by hovering or clicking the vertical ellipsis (the 03-vertical dots). The pages and sections of this website dispay content in the most simplifeid way as much as possbile and try to be informative to increase ease of understanding which can ellicit a mixed response for the users with some feeling it is uninspired and some finding it highly useful. Personally, I feel and understand both of those views as i feel like certain pages provide infromation quickly and easy to understand while certain pages could do more with its visuall appeal.
Homepage: A fullscreen immmersive video plays in the header background layered below the transparent naviagtion bar and a prominent CTA button. Wehn scrolled downwards, grid like layouts and container-free styles display the content along with a reviee grid and very porminent and vibrant and hard to miss CTA buttons being used throughout the entire website. 
About us section: The about us page in this website is not a singular website but a collection of webpages and sections. The pages that come under this section are as follows:
The founder page: This page  provides information on the founder and the founder’s credentials, helping users to understand and trust the branding more.
The Ayuda concept: Provides infromation on the values, concept and the purpose of the wellness centre.
The governance board: Provides infromation on the governging body and personnel of Ayuda.
The Team: Provides infromation on the personnel dedicated to handling the daily activities of the wellness centre.
The mission and vision: Provides information on the mission and vision of the centre in upholiding hoslistic welfare for the customers and themselves.
Contact page: The contatct page hosts a map snippet of the sanctuary location and has a form to fill to inquire about any questions the user might have. The page is heavily simplifed and feels quite typical and akin to what a contact us page on another nornaml website might look like without any brand-specific customization.
Blog page: A blog page is not avaialbale in this website which might be seen as less trustworthy by users bu it doesnt have a very spefici impact.
Services: A specific services page is not avaialble but a webpage which mentions about seversal programmes offered by this wellness centre can be considered quie akin to the srvcies page. The programmes page has several sub-pages which are directly link from the programmes section and offers infromation on multiple different programmes ffered by the sanctuary. Furthermore, the The ayuda sanctuary page and the special offers page and the sustainability page can all be considered directly linked to the services section because it provides more infromation on sthe services offered by speaking on benefits, costs etc.
Web performance: According to Google PageSpeed Insights , the perfromance score is given as 51 which is an average score that means the website can be improved much more to reach its full potential. The report is attatched below.

Mobile optimization and responsiveness: This website is mobile repsoive and is optimized to use in both mobile and desktop devices but the huge drawback comes when cnosidering the load times. A significant load time when accessing pages which exceeds 2 seconds can be noticed when accessing the website. And based on the report from PageSpeed Insights, the accessiilty factor is rated as 79 which is good but not best, which can be alluded to slow load times and inability to provide consistent perfromance across all devices.
User interaction: This website has a live chat funtion and a whatsapp chat funtion enbaled across all pages in the bottom right corner. Furthemore, contact information and questions from has also been provided to users easily to ensure user interaction is existent within the website. Not the best or very detailed, but quite functional when compared to simialr websites.
Amuna
Navigation: Hmaburger menu style is used to design the naviagtion bar in this website. When clicked upon it opens a mega menu style nav bar that has the necessary sections/pages linked to it. The hamburger menu button is located in the far left and a CTA is located in the far right of the header while a video plays in the background.
Design and Layout: Prominent background colour used throughout the entire website is white. High quality imagery, videos and typogrpahy is used across the website to make it visually appealing.
The layout structure of this site is a mix of fullscreen immerive layout style, grid style and a multiple column style. This makes the layout structure quite common among all the various wellness centre sites which typically use noe or more of a comiation of these layout styles with prominent CTA buttons and vibrant images. 
Aesthetics and branding: The colors used in this website are white (prominently), yellow in tidbits in the background and th footer respectively. But the footer doesnt necessarily use a specific color but rather an image layered beneath the footer bar which is quite unique and visuall appealing. The use of white reflects a professional outlook and the popping yellow in various buttons etc offer a sight color contrast and a unique color schema when viewing the site. Consistent branding and aesthtics are reflected throughout the entire site and feels somewhat fresh even though many unique things are not available in the site visually. The logo feels unique and is actually reprsentative of the branding message of the wellness centre.
Pages: The main sections/pahes linked in the navigation bar include a Wellness Programs section, Ayurvedah treatments section, Anuma offers page, ccomodation section, A blog page , a host a retreat page, a contact us page and  BOOK now page. All these pages have consistent styling, design and layout structure and feels very minimalistic but modern. 
Homepage: While homepage is not directly linked in the nav bar, it is accessed by clicking on the logo available in the centre of the nav bar. It provides links to other sections in the site and uses grid styling throughout the page to convert more users. A F layout style is used to design the homepage which is quite succesful and unique in displaying the necessary conversion links quickly to users. 
About us page: An about us page is not availabel in the site which is huge drawback when compared to other factors due to it lacking professionalism and might come across as less trustowrthy to users.
Contact us page:  The contact us page is consistent with the branding of the wellness centre and is very much infromative with the aestehtics of the site too. Furthermore, a map is linked in the page along with a short snippet on other deals/services offered by the centre and a form to contact the team of the Wellness centre.
Blog page: This page is structured porperly using magazine style layout and gridstyle layout to enhance user experience and does also well in provididjg the added functionalitiy of being able to view articles through catwgories which was non existent in other sites too. This feature mught be quite useful to users who want to filter out spefici articles from the site. And all the content is algned towards the branding o the wellness cnetre and focuses heavily on holistic wellness. 
Services page: A dedicated services page is not avaible but several other pages can be catgorized uder this category. Those sections/pages are,
Wellness Programs: This section provides infromation about all the programs going on at the wellness centre and links to several sub-pages that might be useful for users. 
Ayurveda Treatments: This section provides infromaton on various treatments availble at the centre which can be customized oraccessed based on preferences of the users. 
Amuna Offers: This page offers informaton on deals and offers avalable at the wellness centre which can be quite useful to turn leads into customers and drive traffic through promotion.
 Accomodation: This section offers infromation on all accomodations vaialbe foe the customers and various benefits available for them.
Host a retreat: This page is designed to provide infromation to potential custoers to host a retreat for themselves and all the necessary infromation based on it to make it happen.
A book now page/button is available which has a system embedded to helpp the user to book through it. 
Web performance: According to Google’s own PageSpeed Insights, the performance score of the site is 60 which is quite average. The report screenshot is given below.

Mobile optimization and responsiveness: This site is well optimized for mobile devices and  is very responsive to mobile devices due to quick load times. 
User interaction: A well designed chatbot and live chat functions is available as a button across all pages in the site and proper contact information and forms have been used to make the user interaction feel seamless when comapred to to similar sites. 





a.	Analyzing similar web systems will be very important to plan new site Find web sites that share a similar audience and compare them considering design factors and other relevant features. (Marks 20)

the marking criteria to mark this questin is as sollows:

Provides an excellent level of detailed web site comparison with valid arguments regarding the similar web applications and appropriate criteria are available.
Maintains critical evaluation of web site features and design aspects


based on this question and usig my notes given above, write me the answer for this university assessment task 01 answer and make it come within 1000 words and also make sure to structure it poreprly as you wish and use tables etc to limit word count wehre possible and necessary