Project Milestone 1
This Website is a responsive, user-focused website designed for Clancy Nook, an experienced tour guide offering historic walking tours around Manchester. This project is developed as part of Project Milestone 1 for the Code Institute's Full Stack Web Development program. The website aims to provide a central hub for tour information, booking, and reviews.
Visit the deployed site on GitHub here.
This project is designed to meet the following key requirements:
- Create a static front-end website of at least 3 pages, or a single scrolling page divided into at least 3 distinct sections.
- Incorporate HTML5 and CSS3 technologies to structure and style the site.
- Include a main navigation menu for intuitive user experience and responsive design for different device sizes.
- Use semantic markup and accessible design principles to ensure inclusivity.
- Provide clear, user-focused content that fulfils both user and business goals.
- Host the project on GitHub Pages, with version control via Git and complete documentation in a this README.md file.
As a developer in training, this project aims to demonstrate:
- Proficiency in HTML5 and CSS3 to create structured and styled web pages.
- The ability to implement responsive design principles, ensuring the site adapts to mobile, tablet, and desktop devices.
- Skills in accessibility-focused design, following WCAG guidelines for color contrast, navigation, and semantic markup.
- The capability to organise and manage a project using Git version control and clear commit messages.
- The ability to write well-documented, maintainable code with an emphasis on user experience (UX) principles.
- Thorough testing and debugging processes to ensure the site performs as intended across multiple devices, browsers, and screen sizes.
- Use of validation tools (e.g., W3C HTML and CSS Validator) to confirm compliance with modern web standards.
- Implement performance analytics tools such as Lighthouse to optimise the site's performance, accessibility, and adherence to best practices.
The Clancy Nook project focuses on achieving the following:
- Offer an intuitive, engaging platform for tourists, locals, corporate and community clients to learn about and book walking tours.
- Showcase Clancy Nook's expertise and services offered.
- Build a professional online presence for Clancy Nook.
User experience (UX) design focuses on creating meaningful, efficient, and enjoyable interactions between users and a product or service. For a website, this means designing a platform that meets users’ needs while providing an intuitive and visually appealing interface.
Prioritising user experience is essential to ensuring that visitors can easily navigate the site, achieve their goals, and enjoy the process. This is particularly relevant to the Clancy Nook website, where the goal was to cater to a diverse audience of locals, tourists, and corporate clients.
The Strategy Plane in UX design formed the foundation of the project by aligning business goals with user needs. It addressed fundamental questions about what the website aimed to achieve and how it delivered value to its users.
For Clancy Nook, this meant not only creating an online presence but also ensuring the site served as a gateway for users to learn about, book, and engage with the historic walking tours offered. The strategy plane was the first port of call in the development process, as it established the overall purpose of the site and guided all subsequent design and development decisions.
The development process for the Clancy Nook website began with an in-depth meeting with the client, Louis Cane. During this discussion, we explored key aspects of the business, including:
- The primary goals for the business and the website.
- Insights into Clancy Nook’s past operations, including its use of Linktree, TripAdvisor, and Eventbrite.
- Previous clientele and anticipated future clientele.
- Future goals to expand the business by attracting more corporate clients and building partnerships with community organizations.
The following business goals were established for the Clancy Nook website during the initial discussion phase. These goals emerged from a collaborative dialogue with the client, focusing on both immediate needs and aspirations for the future. While some goals centered on creating a strong digital presence and improving user experience, others reflected long-term ambitions, such as attracting corporate clients and collaborating with local communities.
Each business goal was paired with a corresponding call-to-action (CTA) designed to:
- Guide users toward desired actions such as booking a tour, learning more about the guide, or contacting for corporate inquiries.
- Make the website's purpose immediately clear to visitors.
-
Establish Online Presence
Created a professional and user-friendly website to build credibility for Clancy Nook as a premier provider of historic walking tours in Manchester.
Call-to-Action: "Discover Clancy Nook and explore Manchester's rich history with our guided walking tours. Visit my website to learn more and join our community of history enthusiasts." -
Simplify Booking
Integrated seamless links to Eventbrite for easy tour booking while showcasing a personalized contact option for inquiries.
Call-to-Action: "Book your spot on a Clancy Nook walking tour today through our Eventbrite integration or contact me directly for inquiries." -
Showcase Unique Value
Highlighted Louis Cane's deep knowledge of Manchester's history and the engaging storytelling that set Clancy Nook apart from other tours.
Call-to-Action: "Experience Manchester’s history like never before with Clancy Nook, your expert guide and storyteller." -
Provide a Central Hub for Tour Information
Served as a central resource for tour details, showcasing engaging images, insightful descriptions, and glowing testimonials to entice potential customers.
Call-to-Action: "Find all the details you need in one place—tour schedules, meeting points, and reviews—all at your fingertips." -
Encourage Repeat Customers
Built customer loyalty by offering exclusive updates on new tours or events through an optional newsletter signup.
Call-to-Action: "Stay in the loop! Follow us on social media for updates on new tours and exclusive events." -
Attract Corporate Clients (Future Goal)
Expanded Clancy Nook's reach to the corporate world by showcasing tailored private tours for businesses, including team-building events, company outings, and cultural excursions.
Call-to-Action: "Looking for a unique team-building experience? Contact me to arrange private walking tours." -
Facilitate Opportunities to Work with Communities (Future Goal)
Fostered connections with local communities by offering concession rates or free tours for underserved groups, contributing to the city’s cultural inclusivity.
Call-to-Action: "Partner with Clancy Nook to make history accessible to all. Reach out for details about our community-focused tour initiatives."
Goals 6 and 7, while not central to the website's initial development, represented aspirational objectives for the business’s growth and social impact. By planting the seeds for these initiatives early on, the site could evolve over time to accommodate these long-term ambitions.
Understanding who attended and booked Clancy Nook tours helped establish clear user demographics. This process allowed for the identification of key user groups, their needs, and their motivations. These insights informed the development of tailored user stories and features for the website. By analyzing the clientele and tour attendance patterns, we aligned the website's functionality and content with the expectations of the target audience. This ensured that every feature and piece of information on the site resonated with its users and provided maximum value.
The demographics were broken down by tour type to account for the unique audience profiles each tour attracted:
-
City Center Tour:
- 60-70% Mancunians: Local history enthusiasts seeking to deepen their understanding of the city.
- 20-30% Tourists or Visitors: Out-of-town guests looking to explore Manchester's cultural and historical highlights.
- Diverse audience mix, including families, students, and older adults.
-
Whalley Range Tour:
- Majority local residents: Individuals with a vested interest in the area's history or personal connections.
- New residents: Those wanting to learn about the neighborhood they now call home.
- Former residents: Occasional attendees revisiting for nostalgic reasons.
-
Ancoats Tour:
- 80-90% from the wider Manchester region: Predominantly history enthusiasts who appreciated the industrial heritage of Ancoats.
- Currently lacking local attendance: Attracting Ancoats locals remained a growth area and a goal for the tour guide.
The insights gathered from the demographic analysis and business goals allowed us to define the following target audiences for the Clancy Nook website. Each audience group aligned with specific business goals, helping to establish clear connections between user needs and the website's features.
-
New Users - Prospective Customers
First-time visitors exploring Clancy Nook and seeking information about tours to decide on booking. -
Returning Users
Loyal customers looking for updates, new tours, and opportunities to engage further. -
Locals
Residents of Manchester or surrounding areas interested in deepening their connection to the city’s history. -
Tourists
Visitors to Manchester who wanted to learn about its cultural and historical highlights in an engaging way. -
Corporate Users (Businesses) - Prospective Customers
Businesses interested in private tours for team-building events, company outings, or corporate retreats. -
Community Leaders (Non-profits/Schools) - Prospective Customers
Organizations looking to collaborate with Clancy Nook for concession-priced or free educational tours tailored to their needs.
For this project, user stories were developed to capture the diverse needs of Clancy Nook’s target audience, ensuring the website provided a user-centric experience. The creation of user stories helped define what different user groups—such as locals, tourists, corporate clients, and returning users—expected from the website. These stories bridged the gap between user needs and the technical development process, ensuring every feature contributed to a positive user experience and served as a roadmap for development and design decisions.
To ensure effective and timely delivery, the user stories were divided into three priority categories: must-have, should-have, and could-have. These categories reflected the essential, important, and desirable features for the website.
- Must-Have stories represented the core functionalities that the website could not succeed without. These included fundamental aspects like clear navigation, booking instructions, a contact form, and reviews.
- Should-Have stories included features that enhanced the user experience and catered to specific user groups, such as social media links and private tour information.
- Could-Have stories consisted of advanced or supplementary features that, while not essential, would add extra value if implemented, such as downloadable brochures or storytelling audio clips.
This prioritization ensured critical features were developed first while leaving room for additional improvements based on time and resources.
Must-Have
- As a tourist, I want the website to be easy to navigate, allowing me to quickly find tour information.
- As a local, I want to read about the guide’s expertise and background so that I can appreciate the depth of historical knowledge offered.
- As a new user, I want clear instructions on how to book tours so that I can easily reserve my spot on a Clancy Nook tour.
- As a new user, I want to learn about the tours’ themes and details so that I can decide which tour to book.
- As a local, I want to see reviews from other attendees so that I can feel confident about the tour’s quality.
- As a returning user, I want to be able to write a review so I can encourage others to book a tour.
- As a returning user, I want to be able to contact the tour guide so I can ask about upcoming tours.
- As a returning user, I want to find other available tours so that I can book a different tour.
- As a local, I want to easily contact the tour guide so that I can ask about specific tour routes.
- As a new user, I want to know how to contact the tour guide so I can ask questions about the services they offer.
- As a tourist, I want to easily contact the tour guide so that I can ask which tour would be most suitable for me.
Should-Have
- As a corporate user, I want to find information about private tours for businesses so that I can book a group experience.
- As a returning user, I want to find social media links in the footer so that I can follow updates and share my experience.
- As a new user, I want to view a gallery of images from past tours so that I can get a sense of the experience.
- As a tourist, I want to access clear meeting point details so that I can find the starting location easily.
- As a business owner, I want to easily contact the tour guide so that I can ask about availability for private tours.
- As a community leader, I would like to be able to contact the tour guide so I can ask them about community concession rates.
Could-Have
- As a corporate user, I want downloadable PDFs or brochures about corporate tours so that I can easily share them with my team.
- As a tourist, I want media clips or snippets of the guide’s storytelling so that I can preview the experience before booking.
By creating and prioritizing these user stories, the website ensured a structured, user-focused development process that delivered meaningful value to both users and the business.
The analysis of user needs and expectations highlighted several critical components that formed the foundation of the Clancy Nook website. These components were designed to address the goals of both the business and its diverse user base, ensuring a user-friendly, informative, and engaging experience. Below are the core website components that emerged during the planning phase:
-
About Section
Including information about the guide’s historical knowledge and storytelling abilities emphasized the unique value Clancy Nook offered, particularly appealing to locals and history enthusiasts. -
Tours Information
Providing clear and accessible details about available tours, including themes, schedules, meeting points, and additional details, was identified as a top priority. This ensured users could quickly learn about the experiences offered. -
Booking Options
A streamlined booking process via integrated links to Eventbrite, combined with a user-friendly contact form for bespoke inquiries, made securing a spot on a tour simple and efficient. -
Contact Form
A dedicated contact section provided users with an easy way to reach out for questions, inquiries about bespoke tours, or to request additional information, ensuring communication. -
Transparent Pricing
Highlighting pricing information, including the pay-what-you-can option, ensured users understood the cost of the tours. This transparency encouraged bookings while showcasing Clancy Nook's accessibility for a wider audience. -
Group Booking Section
Dedicated sections for corporate users and community leaders provided tailored information about private and group tours. This included details on how these tours could be customized to meet specific needs, reinforcing the business’s appeal to a broader audience. -
Reviews Access
Featuring testimonials and reviews from past attendees helped build credibility and trust, particularly for new users and locals seeking assurance of tour quality. -
Image Gallery
A gallery showcasing images from past tours provided a visual representation of the experiences offered. This component was designed to engage tourists and returning users, giving them a sense of the atmosphere and storytelling that Clancy Nook tours provided. -
Social Media Integration
Social media links in the footer encouraged users to stay connected with Clancy Nook, providing updates and opportunities to share their experiences. This fostered community engagement and increased the visibility of the tours. -
Supplementary Media
Supplementary resources, such as downloadable PDFs or brochures for corporate and private tours, provided businesses with shareable materials to aid in internal planning. Additionally, audio or video snippets of the guide’s storytelling offered a unique preview of the experience for prospective customers, enticing them to book a tour.
The Importance/Feasibility analysis evaluated each website component based on two criteria: importance and feasibility. Importance referred to how critical the component was to achieving the business goals and addressing user needs outlined in the user stories. Feasibility, on the other hand, assessed the practicality of implementing the component within the project's constraints (e.g., timeline, resources, and technical expertise).
This analysis ensured that the development process prioritized components that delivered the most value while remaining achievable. By striking this balance, the project remained focused and efficient, delivering the maximum possible impact within its constraints.
The table below rated each component on a scale of 1 to 5 for both importance and feasibility:
- Importance: A rating of 1 meant the component had low relevance to business goals or user stories, while a 5 signified that the component was essential.
- Feasibility: A rating of 1 indicated that the component was difficult to implement within the project's constraints, while a 5 meant it was straightforward to achieve.
| Component | Importance | Feasibility |
|---|---|---|
| About Section | 5 | 5 |
| Tours Information | 4 | 4 |
| Booking Options | 4 | 3 |
| Contact Form | 5 | 4 |
| Transparent Pricing | 3 | 5 |
| Group Booking Information | 3 | 4 |
| Reviews Access | 4 | 2 |
| Image Gallery | 3 | 3 |
| Social Media Integration | 3 | 5 |
| Supplementary Media | 1 | 2 |
The graph below illustrates the relationship between importance and feasibility for each component. Components plotted closer to the top-right corner are both high in importance and feasible, making them top priorities for the project. Components in other quadrants help identify where compromises or adjustments may be needed.
Graph Insights:
-
High Importance & High Feasibility: Components such as the About Section, Contact Form, Tours Information, and Transparent Pricing appear in this quadrant, making them the highest priority for the website. These are the backbone of the user experience and directly align with Clancy Nook’s primary goals of establishing credibility, simplifying bookings, and providing clear information.
-
High Importance & Moderate Feasibility: Features like Booking Options, Group Booking Information, and Reviews Access are essential but require careful implementation. For example, while Reviews Access is crucial for building trust and encouraging bookings, the additional design and structural requirements make it slightly more complex to integrate. Nonetheless, it is still a key feature to include, especially as it directly supports the site's credibility and aligns with user needs for confidence in the service.
-
Moderate Importance & High Feasibility: Social Media Integration stands out as a low-effort, high-reward feature. Adding social media icons in the footer enhances user engagement and encourages sharing without significantly increasing development complexity.
-
Low Importance & Low Feasibility: Features like Supplementary Media, including brochures and audio snippets, rank lower in priority. While they could enhance the user experience, they are considered optional for the project's minimal viable product (MVP).
The Scope Plane in UX design addressed the functional and content requirements necessary to fulfill the strategic objectives outlined in the Strategy Plane. While the Strategy Plane defined why the project existed and who it served, the Scope Plane determined what the website needed to achieve those goals.
For the Clancy Nook website, the Scope Plane was essential to identifying the core features of the website by establishing what functional and content requirements enabled the project to meet its business goals and user needs effectively. The components, user stories, and business goals presented previously played a crucial role in defining and prioritizing these requirements, ensuring the project remained focused and aligned with its objectives.
Through this analysis, it became evident that the components summarized the essential requirements for the website in terms of what had to be achieved to deliver value to both users and the business. These requirements naturally prioritized themselves into three categories: must-have, should-have, and could-have requirements.
Must-Have
- Give users an overall feel for the brand/aesthetic
- Share information about Clancy Nook
- Present the available tours
- Provide clear pricing information
- Guide users through the website
- Receive communications from users
- Show reviews from previous clients
- Enhance user engagement and accessibility
- Instruct users on how to book
Should-Have
- Share images from previous tours
- Link to various social media outlets
- Enable users to submit their own reviews
- Showcase concession or community rates
- Offer private booking information
Could-Have
- Provide supplementary media
Functional requirements defined the features and behaviors a website needed to meet user and business goals. In UX design and development, they ensured the website functioned as intended, allowing users to navigate, submit forms, and access information easily. During development, these requirements acted as a blueprint, helping prioritize tasks and allocate resources, ensuring the site fulfilled its purpose, from booking tours to sharing reviews effectively.
To determine which project requirements had functional requisites, the user stories, business goals, and UX components were reviewed. Functional requirements were categorized based on their scope and application:
- Macro Functions: Applied universally across the entire website (e.g., responsive navigation, accessibility).
- Meso Functions: Applied across multiple but not all pages or features (e.g., booking and review instructions).
- Micro Functions: Applied to specific sections or elements (e.g., the contact form functionality, image gallery).
Must-Have
- Macro:
- Seamless navigation across pages
- Accessibility features (e.g., alt text, keyboard navigation)
- Responsive design for all devices
- Functional links to booking options (Eventbrite)
- Meso:
- Clear booking links
- Tour highlights
- Intuitive navigation with feedback animations
- Micro:
- Functional contact form for user inquiries
- Accessible reviews from past clients
- Clearly displayed dynamic pricing information
Should-Have
- Macro:
- Social media icons linking to platforms
- User-generated content uploads (e.g., photos, reviews)
- Micro:
- Responsive gallery page
- Meso:
- Option for users to submit reviews directly via the site or linked platforms
Could-Have
- Meso:
- Supplementary downloadable materials (e.g., PDFs of tours)
- Micro:
- Features for private bookings (e.g., pre-filled forms)
- Playable media (e.g., media snippets of the guide or tour previews)
Content requirements defined the textual, visual, and aesthetic elements a website needed to meet user needs and fulfill its purpose. They translated the website's strategy and scope into tangible components that aligned with business goals and user stories.
For Clancy Nook, content requirements provided the what and how, filling the website's framework and ensuring users could access relevant materials like tour information, imagery, and branding elements. These requirements directly enhanced the site's usability and overall user experience (UX).
Content was the information users interacted with on a website. It drove engagement, built trust, and communicated value. For Clancy Nook, clearly defined content requirements ensured users could easily read and understand essential information, such as tour schedules and pricing, while also creating a visually appealing and cohesive aesthetic to align with the brand's identity.
To ensure a comprehensive and organized development process, the content requirements were divided into the following categories:
- Graphic Content: Visual assets that enhanced user engagement and showcased Clancy Nook's unique identity.
- Textual Content: Essential information guiding users through the website.
- Aesthetic Content: Defined the visual presentation of the website and reinforced the brand.
- Interactive Content: Dynamic content elements that facilitated user interaction.
Must-Have
- Graphic:
- Professional logo
- Tour images
- Image of the tour guide
- Textual:
- Tour information
- Page/section headings
- Tour details
- Contact information
- Aesthetic:
- Cohesive color palette
- Readable typography
- Interactive:
- Links to booking/review platforms
- Contact form elements
Should-Have
- Graphic:
- More imagery of tours
- Textual:
- Reviews from past clients
- Interactive:
- Social media links
Could-Have
- Graphic:
- High-quality videos of the guide and tours
- Textual:
- Downloadable brochures
Core Features outlined the key parts integrated into the Clancy Nook website to ensure it met both user and business goals. These features stemmed from the previously defined strategy and scope, helping prioritize functionality and content into deliverables.
Each feature was categorized as a must-have, should-have, or could-have, based on its importance and feasibility, and further classified as Site, Page, Section, or Elemental Features to clarify its scope of application.
| Component | Importance | Feasibility | Category | Priority |
|---|---|---|---|---|
| Navbar at top of page & footer navigation buttons | 5 | 5 | Website | 🔴 |
| Footer | 5 | 5 | Website | 🔴 |
| Accessibility features (alt text, aria-label, contrast, readable fonts) | 5 | 5 | Website | 🔴 |
| Responsive design for all devices | 5 | 5 | Website | 🔴 |
| Homepage | 5 | 5 | Page | 🔴 |
| Tours Page | 5 | 4 | Page | 🔴 |
| Contact Page | 5 | 4 | Page | 🔴 |
| Success Page | 4 | 4 | Page | 🔴 |
| 404 Error Page | 4 | 5 | Page | 🔴 |
| About Section | 5 | 5 | Section | 🔴 |
| Tour Summarising | 4 | 4 | Section | 🔴 |
| Links to platforms (Eventbrite, TripAdvisor) | 4 | 4 | Elemental | 🔴 |
| Contact Button | 5 | 5 | Elemental | 🔴 |
| General Inquiries Option on contact form | 5 | 5 | Elemental | 🔴 |
| Contact Details | 5 | 5 | Elemental | 🔴 |
| Gallery Page with images from past tours | 4 | 4 | Page | 🟡 |
| Reviews Page for feedback from past customers | 4 | 3 | Page | 🟡 |
| Private Bookings Section | 4 | 3 | Section | 🟡 |
| Community/concession rates section | 3 | 3 | Section | 🟡 |
| Social Media Links | 4 | 5 | Elemental | 🟡 |
| Review option on contact form | 4 | 3 | Elemental | 🟡 |
| Booking option on contact form | 4 | 3 | Elemental | 🟡 |
| Dedicated section for private bookings & group tours | 3 | 3 | Page | 🟢 |
| Supplementary media (downloadable brochures, audio clips) | 2 | 2 | Section | 🟢 |
| Embedded video snippets showcasing storytelling | 2 | 2 | Elemental | 🟢 |
Explanation of Colors:
🔴 Must-Have (Red) → Critical to the website’s function & user experience
🟡 Should-Have (Yellow) → Important enhancements but not vital for MVP
🟢 Could-Have (Green) → Nice-to-have features
The Structure Plane in User Experience (UX) design focused on how the information within the project was organized and how users interacted with that information. It bridged the gap between the abstract elements of strategy and scope and the more concrete aspects of the user interface, defining how users experienced navigation and interaction with the website.
The Structure Plane encompassed navigation, which required a clear and consistent navigation scheme that reflected the importance and relationships of different core features. Additionally, interaction design played a key role in defining how users engaged with the website’s interface. This involved deciding on interaction models, selecting appropriate UI elements such as buttons, forms, and sliders, and designing feedback mechanisms that informed users of the system's responses to their actions. Furthermore, developing an effective information architecture was crucial. This included organizing website content in a logical manner for the target audience and often involved techniques like card sorting to involve users in the organization process.
For Clancy Nook, this section set the framework for structuring content and functionality in an intuitive and user-friendly way. Key considerations included mapping out the user flow to cover the user stories and ensuring that the navigation structure supported these journeys. Maintaining consistent patterns in layout and design was also vital in promoting instinctual navigation throughout the site while adhering to best practices. Additionally, the structure was designed to accommodate differently-abled users by ensuring semantic elements were appropriately used and ARIA labels were descriptive to support screen reader compatibility.
Throughout the project, effective prioritization according to business goals, user needs, and developer capabilities was crucial. With the project scoped to develop a fully functional front-end site within a specific timeframe, continuously reevaluating priorities and core components ensured timely deployment while balancing essential and additional features.
Prioritization was key for managing the project under tight deadlines. To achieve this, the MoSCoW prioritization technique was used to categorize tasks. Initially, tasks were divided into Must-Have, Should-Have, and Could-Have categories to allocate resources effectively and meet critical milestones. However, as the project progressed, the final component in this model was introduced: the Won't-Have category.
Introducing Won't-Have items marked a strategic decision to recognize and set aside features that were not feasible within the current constraints of timeframe, project requirements, skillset, or client resources. This categorization was not about permanently discarding features but rather temporarily deferring those that, while valuable, were not viable for the initial launch.
Unlike Could-Have items, which remained on the roadmap for potential inclusion if time and resources allowed, Won't-Have elements were explicitly not planned for this project phase. By clearly defining what would not be included in the initial deployment, a foundation was set for future enhancements as skills advanced and additional client resources were secured.
Several features were relocated to the Won't-Have category due to limitations in skillset, resources, and project scope. Below is a breakdown of these features:
-
Community/Concession Rates
- The client was still finalizing details for community and concession rates, preventing their immediate inclusion.
-
Form Submission Functionality
- Implementing real back-end form submission capabilities exceeded the current skill level, limiting forms to front-end functionality only.
-
Ability to Book on the Website
- Direct booking required back-end skills and integration with reservation and payment systems, which were beyond the scope of this project.
-
Supplementary Media like Downloadable Brochures
- The absence of client-created content for downloadable brochures delayed the implementation of this feature.
By defining Won’t-Have items early in the development process, the project maintained focus on delivering a high-quality, fully functional front-end website while ensuring room for future growth and improvements.
| Component | Importance | Feasibility | Priority (MoSCoW) |
|---|---|---|---|
| About Section | 5 | 5 | 🔴 |
| Tours Information | 4 | 4 | 🔴 |
| Booking Options | 4 | 3 | 🔴 |
| Contact Form | 5 | 4 | 🔴 |
| Transparent Pricing | 3 | 5 | 🔴 |
| Group Booking Information | 3 | 4 | 🟡 |
| Reviews Access | 4 | 2 | 🟡 |
| Image Gallery | 3 | 3 | 🟡 |
| Social Media Integration | 3 | 5 | 🟡 |
| Supplementary Media | 1 | 2 | 🟢 |
| Community/Concession Rates | 3 | 2 | 🔵 |
| Form Submission Functionality | 4 | 2 | 🔵 |
| Ability to Book on the Website | 5 | 1 | 🔵 |
| Downloadable Brochures | 2 | 2 | 🔵 |
Explanation of Colors:
- 🔴 Must-Have (Red) → Critical to the website’s function & user experience
- 🟡 Should-Have (Yellow) → Important enhancements but not vital for MVP
- 🟢 Could-Have (Green) → Nice-to-have features
- 🔵 Won’t-Have (Blue) → Not feasible for this phase due to scope/time constraints
Site hierarchy referred to the organization and structure of a website’s content and navigation. It determined how information was grouped, categorized, and accessed by users, impacting how efficiently they could find what they needed. A well-structured site hierarchy enhanced usability, accessibility, and overall user experience (UX) by guiding users through the website in a logical, intuitive way.
From a UX perspective, site hierarchy played a crucial role in:
- Ensuring easy navigation so users could find key information quickly.
- Minimizing frustration by preventing unnecessary clicks or confusion.
When designing a navbar and site structure, standard best practices guided how content was prioritized. These principles ensured a good user journey:
-
The homepage
- Always served as the first navigation item.
- Acted as the starting point for users to explore the site.
-
Pages arranged in a logical order
- Main content appeared first (e.g., Tours).
- Supplementary content followed (e.g., Gallery, Reviews).
- Action-oriented items (e.g., Contact) appeared last or were highlighted.
-
About sections were commonly integrated into the homepage rather than a standalone page.
- Many sites placed the About section on the homepage, ensuring quick access while keeping navigation concise.
-
Primary actions were made visually distinct.
- The most important action (e.g., "Contact") stood out using color or styling.
-
Supporting functional pages:
- A 404 Error Page ensured that users were properly redirected if they encountered a broken link.
- A Success Page provided confirmation after users completed a form submission, reinforcing positive engagement.
By following these principles, the Clancy Nook website provided an intuitive user experience that aligned with expectations. The project identified which features should be standalone pages and which should exist as sections within pages.
| Page Name | Purpose |
|---|---|
| Home | Provides an overview of Clancy Nook, highlights key tours, and includes an embedded About section. |
| Tours | Lists all available walking tours, including details on themes, schedules, and booking options. |
| Gallery | Showcases images from past tours to visually engage users. |
| Reviews | Features testimonials and feedback to build credibility. |
| Contact | Provides a contact form, direct contact details, and social media links. |
| Success Page | Confirms form submissions, ensuring users know their request was received. |
| 404 Error Page | Provides an accessible, helpful page when users land on a broken or missing link, guiding them back to relevant content. |
The pyramid diagram visually represents the hierarchical structure of the Clancy Nook website, showing the relationships between the pages based on importance, functionality, user frequency and journey.
To clearly define the purpose and function of each page, labels (Who, What, Where, When, Why, How, Help, Witness, Worth, Welldone, and Whoops) were assigned to understand how each page served user needs and supported Clancy Nook’s business goals.
-
Homepage - Welcome, What & Why
- Acted as the entry point, introducing Clancy Nook and the services provided.
- As the most visited page, it served as the primary starting point for users.
- The About section was placed within the homepage, aligning with standard practices.
- Provided a brief preview of available tours designed to engage and attract potential participants.
-
Contact Page - How & Help
- Many users navigated to this page after exploring the site, making it a key component of the hierarchy.
- Served a crucial role in the business by facilitating user inquiries.
- Highlighting "Contact" encouraged users to first explore the site and then take action.
- It was visually distinct in the navbar to emphasize its importance.
-
About Section - Who
- Provided essential background on Clancy Nook.
- While not a standalone page, it was a key section in the customer journey.
-
Tours as the Central Page - Which, Where & When
- Represented the core offering of the business.
- Served as the center page of the customer journey, following the homepage and preceding the contact page.
-
Gallery & Reviews as Supporting Pages - Witness & Worth
- Helped build trust and provided additional engagement but were secondary to the tours themselves.
- Offered a visual representation of past tours, helping potential customers get a feel for the experience.
- Showcased testimonials from previous customers, reinforcing credibility and trust.
-
Success Page & 404 Page as Supporting Functional Pages - Welldone & Whoops
- The Success Page provided a confirmation message after users submitted a form, preventing confusion.
- The 404 Error Page ensured users were given helpful redirection options rather than encountering a dead end.
The finalized navbar order followed both best practices and business goals:
This structure ensured a logical and effective user journey, guiding visitors through exploring tours, seeing testimonials, and finally contacting the guide.
The Success Page and 404 Page existed as functional pages but were not included in the navigation. Instead:
- The Success Page was triggered after form submissions.
- The 404 Error Page automatically loaded if users entered an incorrect or broken URL.
Effective navigation was fundamental to user experience (UX) design, ensuring users could explore the website intuitively while being guided toward key actions. Standard navigation best practices emphasized clarity, consistency, and accessibility, making it easy for users to find what they needed while supporting the business’s objectives.
For the Clancy Nook website, navigation was structured to balance free access via the navbar with a logical journey between related pages, aligning with standard web design conventions, user needs, and business goals. Good website navigation followed three key principles:
- Predictability – Users should know where to go next without confusion.
- Efficiency – Important pages should be accessible within one or two clicks.
- Guidance – While users could explore freely, the site should encourage a natural progression.
Navigation directly supported Clancy Nook’s business objectives by:
- Promoting tour bookings – The tours page served as a focal point of the site, with multiple entry points leading users there.
- Building trust – The reviews and gallery pages reinforced credibility, leading users towards booking.
- Encouraging engagement – The site provided prominent contact options to make inquiries easy.
By structuring the navigation around user intent and business priorities, the site helped new visitors discover Clancy Nook, validate its credibility, and complete a booking inquiry effortlessly.
As a standard web convention, the navbar appears across all pages, giving users immediate access to:
📌 Home 📌 About 📌 Tours 📌 Gallery 📌 Reviews 📌 Contact
This reflected a widely recognized pattern in website navigation, where the website was structured to encourage a natural progression through interconnected pages.
- Homepage served as the entry point.
- About Section followed, providing background context.
- Core service (Tours Page) took central focus.
- Supporting content (Gallery & Reviews Pages) enhanced credibility.
- Contact Page remained a prominent final step for conversions.
While the Success Page and 404 Error Page were not part of the core navigation, they still played an essential role in the site's user experience. These pages existed within the Clancy Nook website, ensuring users remained within the site's ecosystem.
🎉 Success ❌🔗 404 Error
- Success Page provided confirmation after a form submission, reassuring users that their action was completed successfully. It prevented uncertainty and offered a clear next step, such as returning to the homepage or exploring more tours.
- 404 Error Page provided helpful redirection options to guide users back to relevant sections of the site, such as the homepage or tours page. If users reached a broken or non-existent link, the 404 page ensured they were not met with frustration.
Certain actions required external platform navigation, integrated into the user journey:
🔗➡️ Booking 🔗➡️ Review 🔗➡️ Social Media
- Booking (Eventbrite) – Linked from the Tours and Contact pages.
- Review Platform (TripAdvisor) – Linked from the Reviews page.
- Social Media – Found in the footer and relevant sections for engagement.
This ensured that while external tools handled bookings and reviews, users always felt anchored within the Clancy Nook website.
This diagram illustrates the navigation of the Clancy Nook website, showing how users can move between core pages such as Home, About, Tours, Gallery, Reviews, and Contact. It also depicts external navigation links to social media, booking, and review platforms, as well as functional pages like the 404 Error and Thank You pages, which guide users when they encounter errors or complete actions.
Interaction design played a crucial role in shaping how users engaged with the website’s interface. It involved determining effective interaction models, selecting suitable UI elements like buttons, forms, and sliders, and implementing feedback mechanisms that provided users with clear responses to their actions. The goal was to create an intuitive and engaging experience that aligned with user expectations and business objectives.
Effective interaction design followed industry best practices to ensure intuitive usability:
- Provided clear and predictable interactions, minimizing user frustration.
- Implemented visual feedback mechanisms (such as hover effects, form validation, and confirmation messages).
- Used sticky navigation or footers for quick access to essential functions.
- Designed forms with dropdowns, auto-fill options, and validation messages to enhance usability.
- Ensured smooth scrolling for intuitive page transitions, especially on mobile devices.
The Clancy Nook project applied these best practices while considering previous design decisions to guide users through the site. Therefore:
- Navbar elements were designed to be intuitive, ensuring users could easily explore tour options and make inquiries.
- The footer provided additional navigation buttons, improving accessibility without cluttering the main interface.
- The booking process was streamlined, with clear CTAs directing users to external platforms such as Eventbrite.
- Forms used conditional fields while providing real-time feedback for missing or incorrect inputs.
- Error handling mechanisms (such as the 404 page) prevented dead ends, guiding users back to relevant content.
- A success page confirmed user actions, ensuring clarity after a form submission.
The navbar was a crucial aspect of user experience, ensuring that users could easily move between different sections of the website. A sticky navigation bar remained at the top of the screen as users scrolled, ensuring quick access to key pages without needing to scroll back up. This improved usability and accessibility.
A fixed footer remained at the bottom of the page, providing additional navigation buttons for quick access to key areas and social media pages.
Text-based buttons were used to guide users through the website.
- Contact button was prominently placed to ensure easy access to making inquiries.
- Submit button was included in the contact form, providing clear action confirmation.
- Home button was available on the 404 Error and Success pages, allowing users to easily navigate back to the main site.
Each button had a corresponding call-to-action, encouraging users to take the next step, whether it was making an inquiry or finalizing a booking.
Logo buttons for Eventbrite and TripAdvisor were placed on the Tours and Reviews pages, respectively. These buttons provided direct access to Eventbrite for booking tours and TripAdvisor for reading and submitting reviews, ensuring a easy transition to these external platforms.
Another interactive feature designed to enhance user engagement was the clickable tour cards on the homepage. These cards provided a brief summary of each featured tour, giving users an overview of the available experiences. To encourage interaction, users could click on a card, which would take them directly to the corresponding tour section on the Tours page.
This feature included:
- Hover Effects, where the card would expand slightly and a shadow would appear to create a sense of depth.
- A call-to-action at the beginning of the section, informing users that they could click on any tour for more details.
To enhance the user experience on the Tours pages, image carousels were implemented, allowing users to easily browse through historic photos of landmarks featured on the tours. These interactive elements provided a dynamic visual preview of the experiences offered, helping potential customers make informed decisions.
To balance convenience with interactivity, each carousel included:
- Four Photos
- Automatic Rotation
- Previous and Next Buttons
The contact form provided a simple and accessible way for users to ask questions or make inquiries. To improve usability and streamline interactions, several design choices were implemented to enhance the user experience.
- Required Fields prevent form submission unless all necessary details are provided, improving data accuracy.
- Error Handling and Validation notify users of missing or incorrect entries, prompting them to make corrections before submitting.
- Dropdown Select allow users to select predefined options, reducing input errors and making the form easier to complete.
- Conditional Fields dynamically appear based on the selected message subject, ensuring users only see relevant input fields, reducing clutter and improving efficiency.
- Radio Buttons enable users to quickly select a specific tour, simplifying the booking or inquiry process.
- Rating Slider allows users to provide feedback on their experience, offering an intuitive way to rate tours.
- Image Upload functionality enables users to submit images (JPEG and PNG formats only), allowing them to share photos relevant to their inquiry or review.
- Placeholders guide users through the required fields, ensuring they understand what information is needed.
The structuring, organization, and labeling of website content ensured that users could easily navigate and find relevant information. This critical aspect of user experience (UX) design influenced how content was grouped, connected, and accessed.
When designing a website's information architecture, several key principles were considered to ensure an intuitive and user-friendly experience:
- Hierarchy & Organization: Content is structured logically, with core pages easily accessible through the navigation bar, and supplementary content grouped into relevant sections.
- Logicality & Flow: The structure follows a natural user journey, ensuring that pages and sections connect in a way that makes sense. Users are guided from broad introductory content to specific details, reducing friction and cognitive load.
- Findability & Accessibility: Users should be able to locate key information efficiently, with minimal clicks.
- Consistency: Layout, terminology, and navigation patterns remain uniform across all pages to reduce confusion.
- Scalability & Flexibility: The structure allows for future growth, ensuring new content can be integrated without disrupting usability.
This diagram visualizes information architecture for the site as well as the the hierarchy and relationships between pages, interactive elements, and external links. The structure follows established UX best practices while integrating the project's strategic goals.
-
Homepage:
- Served as the entry point and provided a structured overview of Clancy Nook’s offerings.
- Contained the About section and a Featured Tours section, linking directly to detailed tour pages.
-
Tours Page:
- The core service page listing available walking tours.
- Contained individual tour sections (e.g., A Tale of Two Cities, True Crime in Ancoats).
- Integrated Booking Guidance, directing users to external platforms for reservations.
-
Gallery Page:
- Displayed images from past tours in an interactive format.
-
Reviews Page:
- Highlighted feedback from previous participants.
- Integrated Feedback Guidance, linking users to external review platforms.
-
Contact Page:
- Provided direct access for inquiries.
- Featured a Contact Form with interactive fields and submission validation.
-
404 Error Page:
- Prevented frustration by guiding users back to the homepage or relevant sections.
-
Success Page:
- Confirmed form submissions and provided next-step options.
-
Primary Navigation:
- A sticky navbar provided constant access to key pages.
-
Secondary Navigation:
- A fixed footer offered additional access to key pages.
-
Internal Linking:
- Featured tours on the homepage linked to corresponding tour sections.
-
External Linking:
- Eventbrite and TripAdvisor buttons directed users to booking and review platforms.
- The fixed footer contained links to Instagram, Facebook, and LinkedIn.
The Skeleton Plane in UX design built upon the Structure Plane, refining the foundational layout into a tangible, user-friendly interface. While the Structure Plane established how the website’s content and navigation were organized, the Skeleton Plane focused on how users interacted with these elements, ensuring a A and intuitive experience. This included defining how navigation, interactive features, and responsiveness contributed to a fluid user journey.
Navigation design was introduced in the Structure Plane to establish a clear hierarchy and logical content flow. In the Skeleton Plane, this concept was further refined into visual and interactive navigation elements that efficiently guided users through the site.
The Skeleton Plane introduces three aspects of user experience:
- Interface Design: Determines the placement of buttons, forms, images, and interactive elements, ensuring they are intuitive and user-friendly.
- Information Design: Focuses on how content is structured and displayed, ensuring readability, accessibility, and logical progression of information.
- Responsiveness: Ensures that the layout, interactive components, and navigation adapt fluidly across mobile, tablet, and desktop devices, providing a consistent and accessible experience regardless of screen size.
A well-designed navigation system enhanced usability and supported business objectives by guiding visitors toward key actions. In the Skeleton Plane, navigation design was an extension of the structural foundation laid out in the previous phase. While the Structure Plane defined how content was organized and how different sections related to one another, the Skeleton Plane determined how users visually perceived that structure.
When designing a website’s navigation, industry best practices focused on clarity, consistency, and predictability. Standard conventions included:
- Navigation Bars: Ensuring the primary navigation was always accessible without users having to scroll back up.
- Logical Ordering of Menu Items: Following a structure that mirrored user intent and expected progression.
- Clear Labels & Readability: Avoiding jargon or ambiguous terms in navigation links.
Effective navigation also considered the natural progression of a user journey when visiting a website, taking into account:
- Predictable Flow: The navbar, footer navigation, and internal links maintained consistency across all pages, reinforcing intuitive movement.
- Progressive Discovery: Content was structured to lead users naturally from exploration (Homepage & Tours) to engagement (Reviews & Gallery) and finally to action (Contact & Booking).
- Interaction & Feedback: Hover effects, active states, and visual indicators provided clear cues when users engaged with navigation elements.
The Clancy Nook website’s navigation followed a hierarchical order that aligned with user expectations:
- Homepage (Overview) – Visitors first needed an introduction to Clancy Nook and the experience it offered.
- About (Who Provides the Service?) – Established credibility by introducing the guide.
- Tours (What is the Service?) – Provided clear details on what was being offered.
- Gallery & Reviews (How Good is the Service?) – Allowed users to see testimonials and images from past tours to build trust.
- Contact (Next Steps – Booking, Inquiry, or Review Submission) – Provided a clear action point to either book a tour, submit a review, or ask a question.
The primary navigation bar (as shown in the wireframe) followed these principles by presenting the most relevant pages in a structured and easy-to-scan format. Key design choices included:
- Sticky Positioning: Ensured that users always had access to navigation, no matter where they were on the page.
- Clear Hierarchy: The order of menu items reflected the natural progression of user interest.
- Hover Feedback: When users hovered over navigation links, the text was underlined to reinforce interactivity and improve clarity.
- CTA Emphasis: The "Contact" button was visually distinct, guiding users toward taking action.
In addition to the primary navbar, the footer navigation served as a secondary means of guiding users through the site. To maintain simplicity and user familiarity, icons were carefully chosen based on widely recognized symbols that users instinctively associated with their functions.
-
Additional Access to Core Pages:
The footer contained links to important sections like the Homepage, About, Tours, Gallery, Reviews, and Contact pages, reinforcing the primary navigation structure. -
Social Media Links:
Icons for Instagram, Facebook, and LinkedIn provided direct links to Clancy Nook’s presence on these platforms. These choices aligned with user expectations, ensuring instant recognition for social media engagement. -
Alternative Navigation in Case of Page Errors:
If users landed on a 404 Error page, the footer ensures they could return to the homepage without frustration.
To enhance usability, the icons and navigation links in the footer featured hover effects that subtly changed color or added a shadow effect when hovered over. This feedback mechanism improved user interaction by reinforcing interactivity, making it clear which elements were clickable and guiding users effortlessly.
Navigation extended beyond menus—buttons served as additional access points, ensuring smooth user interactions. These elements were strategically placed across the site to align with user intent and facilitate consistent movement between pages and actions.
- Call-to-Action Buttons
- Contact Button: Encourages users to get in touch for inquiries and bookings.
- Submit Button: Located within the contact form, ensuring clarity in form submission.
- Home Button: Appears on the Success and 404 Error pages, helping users return to the main site effortlessly.
- External Links/Logo Buttons
- Eventbrite Button (on the Tours page): Takes users directly to the booking platform.
- TripAdvisor Button (on the Reviews page): Provides quick access to customer reviews and the option to submit feedback.
These buttons feature a color change on hover, reinforcing interactivity and indicating that they are clickable.
Interface design and information design were key components of the Skeleton Plane in UX, transforming abstract structural decisions into tangible, user-friendly elements.
- Interface Design determined how users interacted with the site, ensuring that buttons, menus, forms, and other interactive components were intuitive and accessible. It directly impacted usability, influencing how easily users could perform actions such as booking a tour or submitting a review.
- Information Design focused on how content was structured and displayed, ensuring clarity, readability, and logical flow. This encompassed text hierarchy, visual layout, and how information was grouped to guide users through the website.
Both interface and information design worked together to create a great user experience, making sure the site was both visually coherent and functionally efficient.
The Clancy Nook wireframes follow a mobile-first design approach, prioritizing smaller screens before scaling up to desktop layouts. This ensures optimal usability on smartphones and tablets, where most users will likely access the site.
The wireframes illustrate key interface and information design principles, with a consistent navbar and footer for smooth navigation across all pages, clear sectioning of content, guiding users through an intuitive journey and accessible call-to-actions ensuring easy engagement with tour information, booking links, and reviews.
The homepage introduces Clancy Nook and serves as the central hub for user exploration. The design follows a logical user flow, moving from general information to specific actions:
- A prominent call-to-action (CTA) at the top immediately encourages engagement.
- The About section provides credibility, highlighting the tour guide’s expertise.
- The Tours section presents key offerings using interactive cards, allowing users to navigate to detailed descriptions effortlessly.
- The footer navigation ensures users can quickly access contact details and social media.
The Tours page expands on available experiences, following an information hierarchy that aligns with user expectations:
- Each tour card includes a high-level description, price, duration, and key details.
- Icons are used for quick comprehension of factors like meeting points, cost, and accessibility.
- The external booking button (Eventbrite) is clearly highlighted, directing users to secure their spot.
A visually rich section, the Gallery Page utilizes a grid layout to showcase previous tours.
- The image-driven design minimizes text reliance, immersing users in the experience.
- Consistent spacing and alignment ensure aesthetic harmony and usability.
User-generated content plays a key role in building trust. The Reviews page is designed with:
- Card-based layout, making individual testimonials easy to read.
- Star ratings for visual impact.
- External TripAdvisor integration, allowing users to contribute their own feedback.
This page simplifies communication, ensuring users can reach out effortlessly.
- A structured contact form with labelled fields maintains clarity.
- Dropdowns and radio buttons streamline form completion.
These pages enhance the user journey and error recovery:
- The Success Page reassures users after submitting a form, with a return home button for further exploration.
- The 404 Page provides helpful redirection, preventing frustration by guiding users back to key sections.
- Hover Effects on buttons and navigation elements provided visual confirmation of interactivity, ensuring users intuitively understood which elements were clickable.
- Familiar Icons (social media, contact, booking platforms) aligned with user expectations, creating a bridge between the website and external services like Eventbrite and TripAdvisor.
- Simple, high-contrast buttons improved accessibility, ensuring users with visual impairments or low contrast sensitivity could easily identify key actions.
- The navigation bar and footer remained persistent across all pages, ensuring users always had access to primary actions regardless of their location on the site.
- Typography, spacing, and button styling followed a uniform design system, reinforcing brand identity and usability.
- Forms and CTAs maintained a consistent design language, with structured layouts, clear labeling, and predictable placements to enhance intuitive interactions.
Responsiveness is a fundamental aspect of modern web design, ensuring that websites function across various screen sizes and devices. A responsive design dynamically adapts to different viewports, maintaining usability and accessibility without compromising the user experience. The Clancy Nook website followed a mobile-first approach, progressively enhancing features for larger screens while ensuring optimal performance on smaller devices.
Responsive design followed established industry standards and best practices to ensure websites are accessible, functional, and performant across all devices. These guidelines helped create a great user experience while maintaining consistency and usability. The Clancy Nook website adhered to these principles, ensuring a high-quality, responsive interface.
- Mobile-First Approach: Websites are designed for small screens first, with enhancements for larger devices. This ensures optimized performance, progressive enhancement, and better accessibility for mobile users.
- Flexible & Fluid Layouts: Using relative units (%, em, rem, vh, vw) along with CSS Flexbox and Grid allows content to scale dynamically, maintaining proportional spacing and responsiveness.
- Adaptive Styling with Media Queries: CSS media queries adjust content based on device resolution, ensuring a tailored experience across mobile, tablet, and desktop.
- Optimized Navigation for Usability: Clear navigation improves user experience with hamburger menus for mobile, sticky headers for quick access, and footer navigation for alternative entry points.
- Accessibility & Inclusive Design: The site follows Web Content Accessibility Guidelines (WCAG) guidelines, incorporating semantic HTML, alt attributes, aria labels and readable typography for improved usability.
Responsive web design ensures that a website provides an optimal viewing and interaction experience across various devices. The Clancy Nook wireframes follow a structured approach to responsiveness, adapting layouts and elements to different screen sizes through core breakpoints. These breakpoints ensure streamlined transitions between mobile, tablet, and desktop views:
- Mobile (≤ 768px): Designed for vertical scrolling with stacked content for easy navigation and touch interactions.
- Tablet (769px - 992px): Introduces multi-column layouts where possible, maintaining readability and usability.
- Laptop/Desktop (≥ 992px): Maximizes screen real estate with a full-width layout, enhancing spacing and alignment for a visually engaging experience.
Each page follows a mobile-first approach, progressively adapting content and UI components for larger screens while ensuring a consistent and user-friendly experience.
The homepage wireframes illustrate how key sections dynamically adjust across devices.
- Mobile View: Sections are stacked vertically for a streamlined scroll experience.
- Tablet View: Elements begin aligning side by side where space allows.
- Desktop View: A full-width layout ensures content is spread optimally.
The Tours page maintains readability across devices.
- Card-based layout: Each tour is presented in a modular card style that adjusts with an image carousel.
- Consistency: Tour details and images scale proportionally.
- Alternating Content Alignment: On larger screens, the layout shifts from a centrally aligned structure to an alternating arrangement along the x-axis. This enhances visual flow and breaks monotony, making the content more engaging and easier to follow.
Inspired by a masonry layout, the Gallery page adjusts dynamically.
- Mobile View: A single-column display ensures image clarity.
- Tablet & Desktop Views: A staggered multi-column arrangement maximizes screen space and aesthetic appeal.
The Reviews page maintains structured spacing across breakpoints.
- Mobile View: Reviews stack vertically.
- Tablet View: A two-column grid balances content and readability.
- Desktop View: Expands to a three-column layout for efficient space utilization.
The Contact page ensures an intuitive and accessible form experience across devices.
- Mobile: Form inputs and buttons span the full width of the screen, making them easy to tap on smaller devices.
- Desktop: Inputs are arranged side by side where space allows, optimizing readability and usability.
- Adaptive Input Sizing: Fields such as phone number inputs are shorter, while longer text inputs like email fields expand to accommodate expected content length.
- High Contrast & Accessibility: All form elements maintain sufficient contrast and spacing for optimal legibility.
The Success page provides clear user feedback and an easy navigation path after form submission.
- Mobile: The confirmation message and CTA button are centrally aligned, ensuring visibility.
- Desktop: Content is spaced more generously, with improved layout structure.
- Clear Navigation: Users are guided back to the homepage or another relevant section through a prominent CTA button.
The 404 error page ensures users can navigate back easily.
- A clear CTA button directs users to the homepage.
- Responsive text scaling ensures visibility.
The Surface Plane was the final stage of UX design, where structure, interaction, and aesthetics came together to create a visually polished and intuitive interface, shaped by the underlying skeleton. While earlier phases focused on functionality, content organization, and interactivity, this stage refined color schemes, typography, spacing, contrast, and branding consistency to enhance usability and engagement.
For Clancy Nook, the visual identity was more than just an interface—it embodied the essence of the business. The design reflected rich storytelling heritage, deep historical connections, and ties to Manchester’s past. The aesthetic approach carefully balanced tradition with modern usability, fostering a sense of exploration, discovery, and historical intrigue while ensuring clarity and ease of use for all visitors.
Each design element—from typography inspired by historical manuscripts to a warm, inviting color palette echoing Manchester’s industrial and cultural legacy—was thoughtfully selected to establish Clancy Nook as a knowledgeable and engaging tour experience.
The followingC visual design principles were considered:
- Hierarchy & Focus – Highlighting content as clear focal points, using contrast and typography to guide user attention.
- Consistency – Standardizing color schemes, spacing, and typography for a cohesive and professional appearance across all pages.
- Accessibility – Ensuring WCAG compliance, including high-contrast text, scalable font sizes, and readable typography.
- Clarity & Readability – Using clear, legible fonts, adequate line spacing, and structured layouts to improve content consumption.
- Minimalism & Simplicity – Removing unnecessary elements to highlight key interactions and maintain a clean, user-friendly experience.
Much of the Surface Plane was directly influenced by the initial meeting with Louis Cane, where the essence of Clancy Nook’s brand identity was explored. During this discussion, a thematic direction rooted in storytelling, history, mystery, and intrigue was established, forming the core of Clancy Nook’s persona. These discussions guided the design choices, ensuring that every visual aspect of the website aligned with Louis’s existing branding, including logos and imagery that evoked a sense of exploration and discovery.
These images played a crucial role in reinforcing this alignment, depicting Louis Cane as Clancy Nook in his tour guide attire, embodying the Victorian-era historian and storyteller that defined his brand. This persona was not just a marketing tool but an integral part of the tour experience itself—when visitors booked a tour, they stepped into a world of curated narratives and historical insights.
Color was essential for branding, navigation, and user interaction. The website’s palette balanced historical authenticity with modern usability and accessibility. Inspired by Clancy Nook’s branding and Louis Cane’s tour guide persona, the aesthetic reflected Victorian-era storytelling, emphasizing mystery, heritage, and exploration.
To ensure the selected colors met both branding and accessibility requirements, Adobe Color was used to extract a historically resonant yet web-friendly palette. This tool enabled the derivation of primary and secondary hues from key brand imagery, ensuring visual coherence across all design elements.
The WCAG 2.0 Level AA guidelines required a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to ensure accessibility. Additionally, WCAG 2.1 mandated a minimum 3:1 contrast ratio for graphics and user interface components, such as form input borders, ensuring key functional elements were easily distinguishable. For an even higher level of accessibility, WCAG Level AAA required a 7:1 ratio for normal text and 4.5:1 for large text, benefiting users with more severe visual impairments.
To ensure the Clancy Nook website met these accessibility standards, I tested various color combinations using Contrast Checker. This analysis allowed me to determine which color pairings were suitable for different design elements.
- High-contrast combinations (4.5:1 or higher) were reserved for body text and critical information to maximize readability.
- Moderate contrast ratios (3:1 - 4.5:1) were used for larger text elements, such as headings and section titles.
- Lower contrast colors that do not meet accessibility thresholds for text were applied to decorative or background elements, ensuring they do not interfere with readability.
The background color for the website was set to Cream (#F3EED8) to provide a warm, neutral base that ensured readability without overwhelming users. Dark Brown (#3C331C) was chosen for the primary text color, as it maintained a contrast ratio above 4.5:1 against the cream background, meeting accessibility standards for normal text. This pairing ensured that content remained legible across various devices and lighting conditions.
For key navigational elements and interactive components, Dark Blue (#2B4A4A) was selected as the navbar background with Cream (#F3EED8) text, ensuring an at least 7:1 contrast ratio, compliant with WCAG AAA standards.
Accent colors were incorporated to highlight interactive elements without sacrificing accessibility.
- Caramel (#EDC479) served as a warm highlight color, providing contrast in call-to-action elements and the footer background.
- Light Blue (#7EA5A2) added a cooler accent for visual balance, applied in secondary design elements such as cards and form backgrounds.
The final palette was tested using Chroma Tool for deuteranopia (red-green deficiency), protanopia (red blindness), and tritanopia (blue-yellow deficiency). This ensured that all critical UI elements maintained clear visual contrast across different types of color blindness. This commitment to accessibility aligned with WCAG 2.1 best practices, reinforcing readability and usability for a diverse audience.
When designing the Clancy Nook website, I aimed to replicate the original typography used in the Clancy Nook Facebook banner. However, as the exact font was unknown, I turned to Google Fonts to find a close match. After thorough exploration, I selected IM Fell Double Pica, a historically inspired serif font that aligned with the brand’s heritage-driven aesthetic.
IM Fell Double Pica offered several advantages:
- Legibility
- Moderate x-height and well-proportioned letterforms improve clarity.
- Sufficient spacing between characters enhances readability.
- Clear differentiation between characters prevents misinterpretation.
- Readability
- Works well for long text passages, maintaining a comfortable reading flow.
- Suitable for captions and digital displays, preserving clarity even in smaller sizes.
- Visual Fatigue & Adaptability
- While its traditional design can lead to visual fatigue in extensive reading, limiting its use to headings and navigational elements ensures a balanced user experience.
- Adaptable across different devices and languages, maintaining legibility and aesthetic appeal.
This font is exclusively used for headings and navigation, and to optimize readability, it is applied in UPPERCASE. This decision was made to reinforce Clancy Nook’s historical aesthetic while ensuring that text remains legible and impactful, providing:
- Improved clarity
- Enhanced visibility in navigation
- Stronger branding presence
To complement IM Fell Double Pica’s ornate, old-world feel, I used FontForge to identify a modern, highly readable sans-serif for body text. Montserrat was chosen for its clarity, versatility, and strong visual contrast, ensuring readability without detracting from Clancy Nook’s period-inspired branding.
Montserrat offers several key benefits:
- Legibility
- A clean and crisp design ensures clear character differentiation, even at small sizes.
- A generous x-height improves clarity, making it easier to distinguish similar letters.
- Well-spaced letterforms contribute to optimal readability in diverse text settings.
- Readability
- Works well for long text passages, captions, and digital displays.
- Ensures consistent clarity across devices, preventing strain in prolonged reading sessions.
- Its modern aesthetic makes it highly effective for both digital and print media.
- Visual Fatigue & Adaptability
- Montserrat’s design minimizes visual fatigue, making it suitable for extensive reading.
- Adaptable across various devices, screen resolutions, and languages, ensuring a universal reading experience.
- Its multiple font weights allow for hierarchical structuring of content, guiding users through the site.
Visual storytelling played a crucial role in shaping the Clancy Nook website, immersing users in rich historical narratives while enhancing engagement. Carefully curated imagery, subtle overlays, shadows, and dynamic elements worked together to create an authentic and visually compelling experience.
Hero images served as focal points across the website, immediately setting the tone for visitors. These visually striking elements were positioned near the top of pages, often spanning the full width. They provided visitors with an immediate introduction to the brand while shaping their first impression and overall user experience.
An effective hero image should:
- Capture attention instantly
- Visually communicate the brand’s value proposition
- Guide users toward relevant content or actions
The homepage hero image, featuring a historical Manchester street in Ancoats, was designed with complementary colors to draw users into the site. A semi-transparent overlay was applied to these images, ensuring text readability while preserving the atmospheric depth and vintage aesthetic.
The hero image for the Tours page captured the intrigue of Clancy Nook’s storytelling. A moody Manchester street scene in the city center was selected, featuring the same overlay to maintain visual consistency and enhance the immersive experience.
Throughout the site, full-width background images complemented key pages, such as the reviews and contact page. They provided a strong sensory connection to the service being offered without overwhelming the content. Light blue was selected as the background for the sectional elements containing content, such as the review cards and contact form, ensuring accessibility for all users.
Key considerations for background imagery:
- High-resolution & optimal sizing (< 2048px x 1536px)
- Brand alignment & authenticity
- Readability & accessibility
- CSS implementation & responsiveness
- Static backgrounds for immersion
- Performance optimization
The reviews page featured a historic building with ornate windows and an external fire escape, reinforcing Clancy Nook’s connection to Manchester’s industrial and architectural heritage. The design ensured that user testimonials remained the focal point while maintaining visual harmony, using a light blue overlay on the review cards.
The contact page background featured the Thirsty Scholar pub, a well-known Manchester landmark, directly linking to the city's vibrant history and Clancy Nook’s tour locations. The consistent light blue overlay was applied with slight transparency, while opaque, muted cream input fields provided subtle contrast. This design choice created a vintage yet accessible feel, ensuring both usability and aesthetic cohesion.
The Clancy Nook website incorporated historical imagery from the Manchester Local Image Collection, a public domain archive documenting the city's evolution. These black-and-white photographs of Victorian streets, industrial districts, and historic landmarks established a strong sense of place and authenticity, immersing users in the setting before they even stepped onto a tour.
Black and White Images in Web Design:
- Lessened distractions
- Offered a minimal aesthetic
- Provided a sophisticated look
- Focused on light, form, and texture
- Did not detract from the color palette
This approach aligned with Clancy Nook’s historical branding, which was drawn heavily from Victorian-era newspaper reports from the 1800s and early 1900s. This choice evoked the feel of archival materials and historical publications, reinforcing the tours’ connection to the past.
Additionally, group photos taken by tourists were been edited into black and white to maintain visual consistency across the website. These images, originally shared by visitors, were used with full consent for business purposes, ensuring that prospective customers see real tour experiences while preserving the historical aesthetic.
To enhance user engagement and create an interactive experience, the tours page featured image carousels, allowing visitors to scroll through a curated selection of historical and contemporary images. These carousels visually previewed key locations, historical sites, and moments from past tours, striking a balance between historical authenticity and modern storytelling.
NN/g UX Experts suggest carousels should:
- Include 5 or fewer frames
- Ensure that navigation controls appear inside the frame
- Use crisp-looking images
The carousel format was chosen to keep the page structured and visually engaging while avoiding excessive imagery that might overwhelm the Tours page layout. This ensured a smooth user experience, allowing visitors to explore different aspects of each tour at their own pace.
The gallery page was intentionally the most colorful and visually rich section of the website, contrasting with the muted, vintage tones used elsewhere. While other sections focused on historical authenticity with black-and-white images, the gallery embraced full-color photography, emphasizing the vibrancy and energy of the tours.
A well-designed website gallery should have:
- High-quality, authentic images
- Cohesive layout
- Immersive experience
- Diverse perspectives
The gallery prioritized high-resolution photos to maintain clarity and professionalism. The borderless, collage-style arrangement ensured that images flowed naturally, immersing visitors in the tour experience. This approach minimized visual clutter and enhanced the feeling of continuity between moments.
A mix of candid group photos, architectural shots, and historical landmarks created a balanced visual representation, allowing potential customers to envision themselves on the tour, engaging with the locations and narratives.
Most images in the gallery were taken by Louis Cane or were shared by tourists with explicit consent for business use. To maintain transparency and ethical integrity:
- Some images were sourced from free-use libraries, ensuring copyright compliance.
- Third-party photos were used with permission, properly crediting contributors where needed.
- Some photos were color-edited using Photokit to match the site’s palette aesthetic.
The button design across the Clancy Nook website prioritized usability, accessibility, and aesthetic consistency to maximize user experience.
To ensure clarity and usability, button design followed web accessibility and UI/UX best practices:
- Consistent Sizing & Placement
- High Contrast for Readability
- Large Clickable Areas
- Clear Visual Feedback
These buttons maintained uniform spacing and dimensions across pages, improving clickability on both desktop and mobile. Text was always easily legible, avoiding low-contrast combinations. Buttons had ample padding, making them easy to tap on mobile devices.
- Light Buttons: A cream background with dark serif typography, maintaining readability and an elegant vintage feel.
- Dark Buttons: A deep green background with contrasting cream text, offering an alternative for varied visual appeal.
Both button types changed to a warm caramel tone upon hover or interaction. This aligned with the call-to-action overlays and footer, reinforcing branding consistency.
- Navbar Tabs: Styled without borders, these buttons used a simple underlined effect on hover to maintain a clean, vintage aesthetic.
- Logo Home Button: Designed in Canva based on Louis Cane's specifications, this logo replicated a wax seal style with Clancy Nook’s initials encircled by cotton flowers, symbolizing Manchester’s industrial heritage. On hover, the logo turned light blue, offering subtle interaction feedback.
Icons played a vital role in enhancing navigation, accessibility, and user engagement across the Clancy Nook website. The use of Font Awesome ensured a consistent and visually appealing icon set that aligned with the site's historical theme while maintaining modern usability.
To maintain usability and consistency, best practice includes:
- Simplicity & Recognition
- Consistent Styling
- Hover & Click Effects
- Mobile-Friendly Scaling
The following design choices are:
- Minimalist & Monochrome Icons styled in a dark tone that complements the site's muted color palette, ensuring clarity without overwhelming the design.
- Social Media & Contact Icons easily recognizable symbols for email, phone, and social platforms (Instagram, Facebook, LinkedIn) make contacting Clancy Nook intuitive.
- Tour Information Icons small but sensible icons for distance, duration, and cost improve readability, quickly conveying essential details without excessive text.
- Footer Navicons secondary navigation bar utilises simple, intuitive icons for home, profile, tours, gallery, favorites, and reviews, offering a streamlined browsing experience.
- Hover Feedback interactive icons, such as social media links and navigation buttons, slightly enlarge when hovered, providing a tactile, user-friendly experience.
The development process prioritized core features essential for navigation and site functionality, followed by specific content elements that enhance the user experience.
The navbar is the main navigation tool on the website, allowing users to quickly access different pages. It appears at the top of every page and includes links to the Home, About, Tours, Gallery, Reviews, and Contact sections.
The navbar ensures visitors can easily move between different parts of the site. On larger screens, the menu is displayed across the top of the page, while on smaller screens, it collapses into a hamburger menu, which expands when tapped. This keeps the interface clean and uncluttered on mobile devices.
- The logo is positioned on the left and also functions as a home button.
- The navigation links are displayed in a row on large screens but are hidden in a dropdown menu on smaller screens.
- A dedicated contact button makes it easy for users to reach out, standing out from the other links.
- On mobile, once a user clicks a menu item, the dropdown automatically collapses, making it more user-friendly.
- The navbar uses fixed-top, meaning it remains visible as users scroll, making navigation more accessible.
- Consistency & Visibility: The navbar remains fixed at the top of the page so users always have access to navigation.
- Dark Color Scheme: This gives the navbar a modern and professional appearance while ensuring good contrast for readability.
- Hover Effects:
- The contact button changes color when hovered over, making it clear that it is an interactive element.
- The other navigation links underline on hover, providing a subtle visual cue.
- The logo changes slightly on hover, simulating a color shift that adds a small interactive touch.
- Mobile-Friendly Adjustments: The menu collapses into a hamburger icon on smaller screens to save space and keep the page looking clean.
Additional Information
Collapsible Menu for Mobile Users:
- The navbar-toggler button is used to collapse and expand the menu when clicked, ensuring a clean and uncluttered interface on mobile devices.
- This functionality is built into Bootstrap, allowing for smooth transitions between expanded and collapsed states.
- Uses a JavaScript snippet from Code Institute’s Boardwalk Games Project to improve usability.
- The script ensures smooth scrolling when navigating to different sections of the same page.
- On mobile devices, selecting a menu item automatically collapses the dropdown, preventing unnecessary clutter.
- Responsiveness and Styling
The footer ensures that users can easily find contact information and social media links while also offering mini navigation buttons for quick access to key pages.
- Contact Details Section
- Displays the phone number and email in a clear, easy-to-read format.
- Includes social media icons for Instagram, Facebook, and LinkedIn, allowing users to connect via external platforms.
- Website Attribution
- Shows the copyright notice with the website author’s name.
- Mini Navigation Buttons
- A set of icon-based buttons that provide a fast way to navigate between important sections.
- Includes home, about, tours, gallery, reviews, and contact buttons, making it easy for users to jump between pages.
- Clear and Organized Layout
- The footer is structured to separate contact details, social links, and navigation for better readability.
- Mobile Optimization
- On smaller screens, the elements stack vertically to keep everything easy to read.
- On larger screens, the layout spreads out horizontally for a balanced look.
- Hover Effects on Icons:
- The social media icons subtly change on hover, reinforcing their interactivity.
- The mini navigation buttons have a slight hover effect to make them feel more engaging.
- Soft Colors & Shadows: These design choices make the footer feel integrated with the rest of the site, maintaining visual harmony without being overwhelming.
Additional Information
Responsive Structure:
- Bootstrap Grid for Alignment
- The grid system ensures balanced spacing, keeping the footer elements evenly distributed.
- On large screens, contact details, social icons, and navigation are arranged in a horizontal layout, providing a structured, easy-to-read format.
- On smaller screens, elements stack vertically, forming two columns for better readability and accessibility.
- Flexbox for Adaptive Layouts
- Flex properties control the arrangement of footer elements, ensuring alignment across various screen sizes.
- On wide screens, elements are positioned side by side for a balanced layout.
- On narrow screens, Flexbox dynamically shifts elements into a column format, reducing clutter and improving usability.
The hero banners serve as the visual introduction to key pages, creating an immediate impact while maintaining clear messaging and branding. These sections are designed to be fully responsive, ensuring they adapt to different screen sizes while maintaining their readability and visual appeal.
These Features were designed to:
- Provide a strong first impression
- Reinforce branding
- Ensure readability
- Adapt dynamically
- Background Images
- The banners use full-width background images to create a visually immersive experience.
- The images adjust proportionally to different screen sizes, preventing stretching or cropping.
- A subtle overlay effect is applied to enhance text visibility against complex backgrounds.
- Typography & Readability
- The main heading (h1) uses a large display font to stand out.
- The secondary heading (h2) is slightly smaller to maintain a clear hierarchy.
- Text is center-aligned to keep it balanced within the banner.
- Responsive Design & Layout
- On small screens, text scales down and remains centered for easy readability.
- On larger screens, text scales up to fill the space proportionally without overwhelming the design.
Additional Information
Setting the Background Image:
- The background image is applied using the background-image property in CSS, ensuring that it covers the entire section without distortion.
- The background size, cover, property ensures the image scales dynamically to fit different screen widths while maintaining its proportions.
- The background position, center, keeps the most visually important part of the image in focus, preventing unwanted cropping. Overlay Effect for Readability
- To ensure the text remains legible over the background image, an overlay effect is used.
- This is implemented using an additional ::before pseudo-element, which sits on top of the background image.
- The overlay uses rgba(237, 196, 121, .75):
- The rgba function applies a yellow overlay.
- The 0.75 value keeps it semi-transparent, allowing the image to remain visible while improving text contrast.
The About Section provides visitors with background information on Clancy Nook, his journey, and his passion for storytelling through historical tours. It creates a personal connection with users, reinforcing authenticity and credibility. The section features a profile image, a brief biography, and a signature element that enhances branding.
This Feature utilises:
- The inclusion of a profile image to add human touch, making Clancy’s tours feel more personal and engaging.
- The small biography giving insight into Clancy Nook's credibility, helping potential customers feel a stronger connection to his work.
- The section is divided into two primary parts
- A circular profile image representing Clancy Nook.
- It features a circular crop, creating a polished and professional appearance.
- A text block containing a header, descriptive paragraphs, and a signature image.
- A circular profile image representing Clancy Nook.
- The biography is structured into two key paragraphs:
- The first paragraph introduces Clancy Nook’s background, his move to Manchester, and his historical studies.
- The second paragraph emphasizes his approach to storytelling, focusing on personal narratives and historical connections.
- A transparent signature image is placed at the bottom of the text block to reinforce Clancy Nook’s branding.
- Clean and Balanced Design
- The circular profile image keeps the section visually appealing while maintaining a sense of professionalism.
- The structured layout ensures that the text and image are proportionally balanced, preventing excessive whitespace or clutter.
- Readability and User Experience
- The text is center-aligned on small screens for easy reading but shifts to a left-aligned format on larger screens for a natural layout.
- The use of Bootstrap’s responsive typography ensures that the content remains legible across all devices.
Additional Information
- Grid Expansion and Responsiveness
- On smaller screens (col-12), the profile image and text stack vertically, ensuring that the section remains easy to navigate.
- On medium screens (col-md-6), the section shifts to a balanced two-column layout.
- On larger screens (col-lg-4 for the image and col-lg-8 for text), the grid expands while maintaining proportional spacing.
- Text Adaptability
- The text dynamically shifts from center-aligned (text-center) to left-aligned (text-lg-start) based on screen width.
- Spacing and margins are adjusted through Bootstrap’s responsive classes to prevent crowding on smaller screens.
The Tour Overview Section serves as an introduction to the service, so users can explore the different walking tours available. Each tour is presented as an interactive card, allowing users to click and navigate to a dedicated tour page for more details.
- Each tour is presented as a clickable card, allowing users to access more information.
- The cards follow Bootstrap's card component, providing a structured, visually balanced layout.
- Clicking on a card redirects users to the dedicated tour page, making navigation seamless.
- Each card contains:
- A historical black-and-white image representing the location.
- A card title displaying the tour name.
- A brief description summarizing the tour experience.
- Styling Enhancements for Readability & Engagement
- Min-height rules are applied at different breakpoints to prevent misalignment due to varying text lengths.
- Subtle hover effects improve interactivity:
- Cards slightly enlarge when hovered over, with a soft shadow effect to enhance engagement.
- Smooth transition effects allow images to resize fluidly, preventing abrupt layout shifts.
- Optimized for Readability
- Text sizes adjust dynamically using CSS media queries, ensuring they are neither too small on mobile screens nor too large on desktops.
- A muted background enhances contrast, making the black-and-white tour images and text stand out clearly.
Additional Information
Responsiveness:
- Bootstrap Grid Classes for Adaptability
- col-12: Ensures that each card takes up the full width on small screens, stacking vertically.
- col-md-6: On medium screens, two cards are displayed per row, making better use of available space.
- col-lg-3: On large screens, all four cards are displayed in a single row, creating a symmetrical and well-balanced structure
Consistent Card Heights
- Min-height rules were applied at different breakpoints to prevent cards from being misaligned due to varying text lengths
The Tours Section presents each guided tour in a visually structured and engaging way, allowing users to explore different options and access relevant details at a glance. Each tour has its own dedicated section featuring a carousel of historical images, a detailed tour description, and a structured display of key tour details.
This design:
- Allows users to quickly scan and compare different tours.
- Creates a visually appealing layout that is easy to navigate.
- Keeps multiple images in one place, reducing clutter and preventing long scrolling sections.
- Each tour section consists of:
- A heading displaying the tour title.
- A descriptive paragraph providing a brief overview of the experience.
- A list of key details outlining the tour duration, distance, meeting location, and cost.
- Each tour section is designed using Bootstrap’s grid system, allowing for flexible and adaptive layouts across different screen sizes.
- The tour details (cost, duration, distance, and meeting location) are presented in a structured group of cards, ensuring consistency across all tours.
- These details are formatted using Bootstrap’s card group template, which ensures that all cards maintain equal height and alignment.
- Each tour detail is displayed inside an individual card, making it easy to read and well-organized.
- The alternating layout on larger screens helps break monotony and enhances visual interest.
Additional Information
- The content for each tour is divided into two primary columns:
- A Bootstrap carousel inside a figure element to showcase multiple historical images.
- A div containing the tour description and key details for easy reference.
- Image Carousel Functionality
- The Bootstrap carousel (figure class="carousel slide") allows users to scroll through multiple images associated with each tour.
- The carousel-inner class ensures that all images are contained within a slideshow, improving navigation.
- The carousel-item active class ensures that the first image loads by default when the page is opened.
- Left (carousel-control-prev) and right (carousel-control-next) navigation buttons enable manual scrolling between images.
- Alternating Layout for Better Visual Flow
- As the screen size increases, the tours align differently using Bootstrap’s column ordering system.
- On medium screens, images and descriptions are side by side in a straightforward two-column layout.
- On larger screens, an alternating margin alignment technique is used to create a staggered visual effect:
- Odd-numbered tour sections have their content aligned to the left using order-lg-1, while even-numbered tours align to the right using order-lg-2.
The review tiles section showcases customer testimonials to build credibility and trust. It is structured to ensure easy readability and engagement, encouraging potential users to learn from past experiences. Each review is presented as a card-style tile, making them distinct yet part of a cohesive design.
- This section is positioned within the main element, reinforcing its importance as part of the core content.
- Each review tile is built as a Bootstrap card, ensuring a consistent design across different screen sizes.
- Every review card includes:
- Review source (TripAdvisor) at the top for authenticity.
- Tour title in a heading to specify the relevant experience.
- Tour category (e.g., "True Crime in Ancoats") displayed below the title.
- Star rating using icons to provide a visual representation of the review score.
- Review text, styled in italics to differentiate user-generated content.
- Date of review at the bottom for context.
- The background color of the review section contrasts with the rest of the page, making it stand out while maintaining readability.
- The cards have a modern, structured appearance with:
- Minimalist rounded borders to maintain a clean aesthetic.
- A clear typographic hierarchy, ensuring the tour title and review text remain the most prominent elements.
- Each card has a slight hover effect, where:
- The background subtly changes.
- A shadow effect appears, making the card stand out.
- Grid Adaptability
- On small screens, the review tiles stack vertically, ensuring easy scrolling.
- On medium screens, the grid shifts to a two-column layout, making better use of available space.
- On larger screens, the layout transitions into a three-column arrangement, ensuring a balanced distribution.
Additional Information
-
Bootstrap Grid System
- The Bootstrap grid system is used to structure the layout, ensuring the review section adapts to different screen sizes.
- The class row d-flex justify-content-between ensured even spacing and alignment.
- Bootstrap’s col-12, col-md-6, and col-lg-4 classes ensure the reviews display appropriately based on available screen width.
-
Consistent Card Heights
- min-height rules are applied at different breakpoints to maintain uniform card heights, preventing misalignment due to varying review lengths.
- The CSS flexbox properties are used to distribute the cards evenly, preventing excessive white space.
The contact form allows users to submit inquiries, book tours, or leave reviews. It is designed for ease of use, with dynamic fields appearing based on user selections. The form is structured to be fully responsive.
- The form collects essential user details, structured with Bootstrap grid classes for responsiveness:
- Required Fields:
- Forename and surname.
- Email address.
- Message subject.
- Message.
- Submit button.
- Optional Fields:
- Phone number.
- Pronouns.
- Image upload (only for review submissions).
- Required Fields:
- All text inputs, dropdowns, and the message field are styled with a custom box class, ensuring:
- Consistent padding and border radius.
- Smooth transitions when focused.
- High contrast for readability.
- An overlay background effect enhances contrast and readability.
- Labels are hidden for a cleaner layout but remain in the HTML for screen readers.
- Placeholders inside fields guide users without adding unnecessary clutter.
- The button features a dark theme to contrast against the lighter background.
- On hover, the button subtly changes color, improving interactivity.
Additional Information
-
Dynamic Field Behaviour (CodePen Snippet by Dustin Horstmann)
- A JavaScript function ensures that additional fields appear only when necessary, keeping the form uncluttered and intuitive.
- When "Booking a Tour" or "Private Booking" is selected, the tour selection fields appear.
- When "Leave a Review" is selected:
- A star rating slider and an image upload option are displayed.
- These fields are required only when visible, preventing unnecessary inputs.
-
Star Rating Slider (CodePen Snippet by Fajar Nur Whid)
- Users can rate their experience using a slider with an animated star icon.
- How it works:
- As users adjust the slider, the star icon moves dynamically along the track.
- A numerical scale (1-5) is displayed below, ensuring clarity.
- A 93% movement restriction prevents overlap with slider edges.
- A +0.5rem offset ensures the star remains visually centered.
The gallery provides a visually engaging display of images from the tours, capturing key moments and historical locations. Designed to be fully responsive, it ensures a strong viewing experience across all devices. The layout dynamically adapts to different screen sizes, making use of Bootstrap’s grid system and flex properties to create a balanced and aesthetically pleasing design.
- To achieve full responsiveness, the gallery was divided into three separate sections, each tailored for a specific screen size:
- small screens – a single-column stacked layout for smooth vertical scrolling.
- medium screens – a two-column structured grid layout to balance image placement.
- large screens – a multi-column flexbox layout that maximizes space for an engaging display.
- The structured placement ensures that images remain aligned while maintaining a natural, varied presentation.
- Images are strategically placed to create a balanced visual flow, with:
- larger images emphasizing key moments (such as group shots and historic buildings).
- smaller images interwoven to add variety while maintaining consistency.
- Horizontal and vertical images are cropped to uniform sizes, ensuring a cohesive and polished layout.
- The gallery background is neutral, allowing images to stand out clearly without distraction.
- The color contrast ensures visibility, making sure the images remain clear and vibrant across different lighting conditions.
Additional Information
- Three Separate Sections for Different Screen Sizes
- Due to the complexity of ensuring images were arranged optimally for all devices, the gallery was divided into three separate sections.
- Each section contains the same images but uses different layouts that are only displayed at certain breakpoints using Bootstrap’s responsive display classes (d-block, d-none, etc.).
- This approach allows full control over how the images are displayed at different screen widths, rather than relying solely on CSS media queries.
- Image Sizing and Positioning
- Gutter and padding were set to 0, removing unwanted spacing between images.
- The object-fit: cover property ensures images maintain their aspect ratios without distortion while filling their assigned space.
In addition to the core and content-specific features, several supplementary sections were implemented to enhance user guidance, accessibility, and user feedback collection.
- The section is divided into two key parts:
- The main booking instructions explaining the booking process.
- A call-to-action button linking to Eventbrite for direct reservations.
- Eventbrite Integration
- The Eventbrite booking system is linked via an anchor tag, ensuring users can quickly access the ticketing platform which opens in a new internet tab.
- Contact button
- The button links via an anchor tab to the contact.html page which contains the contact form.
- Responsive Layout
- On smaller screens, the booking instructions stack vertically, keeping text and buttons clearly visible.
- On larger screens, the content is divided into two columns, allowing instructions and the Eventbrite button to appear side by side.
- Call-to-Action Buttons
- The contact button is styled to:
- Center-align on small screens.
- Align to the right on larger screens.
- Eventbrite button
- Contains an Eventbrite logo.
- The button includes a hover effect, where the image changes color when hovered over.
- The contact button background changes color on hover, making it stand out and encouraging user interaction.
- The contact button is styled to:
- The section includes:
- A TripAdvisor logo for visual branding.
- A h2 element prompting users to leave a review.
- A paragraph explaining review submission options.
- A contact button
- A Trip advisor button
-
- Tripadvisor Integration
- The Tripadvisor booking system is linked via an anchor tag, ensuring users can quickly access the ticketing platform which opens in a new internet tab.
- Contact button
- The button links via an anchor tab to the contact.html page which contains the contact form.
- Adaptive Layout Across Screen Sizes
- On mobile screens, the section is stacked vertically.
- On tablet screens, the text size gets scaled up and the content stretches to take up the container width.
- On larger screens, the TripAdvisor logo moves to the left size using flex classes and the text moves to the right and scales up in size.
- Background and Layout -The background applies a linear gradient overlay, ensuring readable contrast against the image and text color.
- Interactive Hover Effects
- The TripAdvisor logo changes on hover, swapping to a different-colored version and a larger size.
- The contact button background changes color on hover, making it stand out and encouraging user interaction.
The Clancy Nook Walking Tours website was a user-centric, fully responsive, and visually engaging platform designed to showcase historic walking tours in Manchester. The goal was to provide an intuitive and accessible experience for both tourists and locals, ensuring ergonomics navigation, efficient booking options, and an engaging presentation of the tour offerings.
This section outlined the step-by-step approach during development, the website features, challenges and solutions along the way, and the technologies used to bring the project to completion.
The development process was a structured, incremental approach, emphasizing responsiveness, accessibility, and clean code.
Industry best practices in front-end web development include the use of:
- Mobile First
- Minimum Viable Project Model
- SMART Objectives
- Semantic HTML
- Modular CSS
- CSS specificity principles
- Code documentation through comments
- Git Version control
- Regular deployment and testing
The project was followerd with these industry standards for front-end web development in mind.
- Established a GitHub repository for version control and collaboration.
- Organized a structured folder hierarchy for assets, CSS, images, and pages.
- Created a standardized HTML boilerplate for consistency across all pages.
- Included essential meta tags for SEO and accessibility.
- Integrated Bootstrap 5, Font Awesome, and Google Fonts to streamline design and enhance functionality.
- Implemented Bootstrap’s navbar component for uniform navigation across all pages.
- Followed a mobile-first design for responsiveness.
- Used CSS variables for fonts and colors to ensure consistency.
- Created global styles** to define colors, typography, and spacing, improving maintainability.
The sequence followed in developing the website at a page level:
Home Page → Tours Page → Reviews Page → Contact Page → Success & 404 Page → Gallery Page
The development process was also guided:
- Wireframes to guide the development process, working sequentially from top to bottom.
- Styled each section for responsiveness and visual consistency before moving forward.
- Used DevTools for testing and refinement to ensure alignment with the intended design.
The dropdowns provided explain the order in which features on each web page were created.
Homepage
-
Hero Banner
-
About Section
-
Featured Tours
Tours Page
-
Hero Banner
-
Main Tour Content
-
Additional Sections
Reviews Page
-
Background Image Implementation
-
Header
-
Review Cards
-
Review Guidance Section
Contact Page
-
Background Image Implementation
-
Form Container Structure
-
Form Development
-
Dynamic Form Functionality
Success and 404 Pages
-
Header Section
-
Thank you Message
-
Error Message
Gallery Page
-
Add all Images
-
Mobile Gallery
-
Tablet Gallery
-
Laptop Gallery
The website was subjected to extensive manual and automated testing to ensure usability, functionality, responsiveness, accessibility, and performance. Manual testing was conducted across multiple devices, screen sizes, and browsers using DevTools and BrowserStack, while automated validation tools such as Lighthouse, WAVE, W3C Validators, and AccessibilityChecker were utilized to confirm compliance with web standards.
Key testing areas included:
- Responsiveness: Ensured the site adapts smoothly to various screen sizes.
- Browser Compatibility: Verified consistent functionality across Chrome, Firefox, Edge, Safari, and Opera.
- User Stories & Features: Tested real-world user scenarios to ensure the site meets expectations.
- Accessibility: Implemented fixes based on WAVE and Lighthouse reports to enhance usability.
- Performance & SEO: Used Lighthouse and PageSpeed Insights to optimize speed and search rankings.
For a detailed breakdown of tests conducted and their results, please refer to TESTING.md.
During the development process, several bugs and unexpected issues arose, requiring investigation and troubleshooting. Below is a breakdown of the main bugs encountered, their causes, and how they were resolved (or why they couldn’t be fully fixed).
During the development of my website, I wanted the navbar to remain fixed at the top of the screen while scrolling to improve navigation. To achieve this, I used the Bootstrap class fixed-top in my nav element:
However, this introduced an issue:
- The start of the body content was cut off, hidden beneath the navbar.
- This happened because the navbar was removed from the normal document flow, causing the rest of the page to ignore its height.
- This issue was most noticeable on anchor links, as they scrolled to a position that placed sections behind the navbar.
Cause of the Issue
- The fixed-top class fixes the navbar to the top of the viewport, meaning it no longer occupies space in the document layout.
- The page content started at the very top, effectively underneath the navbar.
I made the following adjustments:
- Move body element down.
- To ensure the body content was fully visible and not hidden by the navbar, I added padding-top: 86px; to the body element, where 86px is the height of the navbar.
This simple fix pushed the content down, ensuring it started below the navbar.
After setting my navbar to be fixed (fixed-top), I noticed a problem when clicking anchor links (e.g., "About" in the navbar). Instead of scrolling neatly to the section, the page would scroll too far up, hiding the start of the section behind the navbar.
Cause of the Issue:
- Since the navbar was fixed, it no longer occupied space in the document layout.
- Clicking an anchor link scrolled the section to the top of the viewport, placing it behind the navbar.
- The first few lines of content were obscured, making navigation confusing.
To prevent this, I implemented a hidden anchor div that acted as an offset:
- Created an empty div element with id="about-anchor" before the About section:
- This invisible div serves as a new anchor point for the link.
- Updated the navigation link to scroll to #about-anchor instead of #about:
- Styled the #about-anchor div to create an offset equal to the navbar height:
This simple but effective trick significantly improved usability and ensured a polished scrolling experience across my website. This solution was inspired by web design tutor @dereksiuau, whose method of using an offset anchor div provided an elegant and effective approach.
During the development of the website, I implemented a mini navigation bar in the footer to provide quick access to key pages. Initially, this component was structured using a div, but after further evaluation, I recognized that a more semantically accurate approach would be to use the nav element, aligning with accessibility and best practices.
Upon switching the div to a nav, I noticed that the styling I had previously applied was no longer functioning correctly.
The primary issues included:
- Unexpected layout changes: The icons became misaligned and displayed in an unintended order.
- Loss of background color and box shadow: The originally styled navigation box lost its intended background color and box shadow.
- Spacing inconsistencies: The previously well-spaced icons were now too close together.
- Responsiveness issues: The mini navbar did not maintain its intended compact form, particularly on larger screens.
I made the following adjustments:
- Updated the CSS Selectors:
- Since nav has different default styling behavior compared to div, I explicitly targeted #footer-navigation and .footer-nav-box to ensure the new structure was styled consistently.
- Restored the Grid Layout for Icons
- By using display: flex and flex-wrap: nowrap on .footer-nav-box, I was able to keep the icons in a single row by default, ensuring they didn’t stack unintentionally.
- Enhanced Responsiveness with Media Queries
- On small screens, the mini navbar remained in a horizontal row.
- On larger screens, a grid-based layout was implemented (grid-template-columns: repeat(2, 1fr);), making the navbar more compact and readable.
- Fixed the Background Transparency
- The .footer-nav-box had lost its intended transparency due to inheritance differences in nav. Adding background-color: transparent !important; ensured the footer’s design remained visually appealing.
- Adjusted the Icon Spacing and Hover Effects
- Using gap: 12px; and restoring the transform: scale(1.2) hover effect, I ensured that the icons had sufficient spacing and smooth interactions.
- Ensured Accessibility Compliance
- The aria-label attributes for each link were checked to confirm that they provided descriptive, screen-reader-friendly navigation.
After implementing these fixes, the mini navbar in the footer correctly displayed in its intended format across all devices, maintained accessibility standards, and functioned smoothly while keeping its original styling.
While working on the footer section, I noticed that the social media icons (Instagram, Facebook, LinkedIn) were not aligning properly with the phone and email icons on the left side. This created a visual inconsistency, making the layout feel unbalanced.
The key issues were:
- The social media icons were slightly higher than the phone and email icons.
- The phone and email icons aligned perfectly with the text, while the social media icons did not.
- The difference was more noticeable on smaller screens, where the misalignment became more pronounced.
After inspecting the CSS and HTML, I found that:
- Font Awesome icons have different default sizes and alignment properties, depending on whether they are solid (fa-solid) or brand (fa-brands).
- The phone and email icons used fa-lg or fa-xl, which slightly adjusted their vertical alignment with text.
- The social media icons were inside anchor elements, which introduced inline styles that modified their positioning.
- The default height and margin-bottom values were not the same across the icons, causing them to shift out of alignment.
I made the following adjustments:
- Standardized Icon Sizes
- I made sure all icons used consistent Font Awesome classes to match their size.
- Applied Explicit CSS Rules
- I added the following styles to ensure uniform height (24px), bottom margin (8px) and lafter padding (0):
- Aligned Icons Using Flexbox
- To further refine alignment, I updated the social media row to use flexbox: display: flex; align-items: center; justify-content: space-between;
- Checked for Responsive Behavior
- I tested the fix on various screen sizes to make sure the alignment remained consistent across different breakpoints.
The phone, email, and social media icons now align perfectly, the footer section looks visually balanced across all screen sizes and the icons scale correctly, and there is no noticeable misalignment anymore.
When designing the hero banner for my homepage, I wanted it to be fully responsive while maintaining a consistent visual appearance across different screen sizes. I took inspiration from the Love Running Project, which demonstrated how to structure a hero section effectively.
Initially, when adjusting the page for different screen sizes, I noticed that:
- On smaller screens, the entire image would shrink, reducing its impact.
- On larger screens, the image stretched, sometimes losing focus on key visual elements.
- The hero section wasn't behaving consistently, making the layout appear unpolished.
Key Causes of the Problem:
- Default Scaling Behavior – Without specific styling, the hero image scaled proportionally with the width of the screen. This meant:
- On smaller screens, the entire image shrank down, reducing its visibility and impact.
- On larger screens, the image stretched wider than intended, sometimes shifting the focus away from key elements.
- Lack of a Fixed Height – Since images typically resize based on their container, the height of the hero image was changing dynamically, which caused inconsistent results across different devices.
- Background Image Properties – By default, if background-size is not explicitly set, the browser may either:
- Scale the image down to fit smaller screens.
- Expand the image width on larger screens, causing unwanted distortion or loss of key visual details.
To resolve this, I applied CSS background properties to ensure the hero image maintained its size while adjusting dynamically to different screen widths:
- background-size: cover; ensures the image fills the section without stretching.
- background-position: center; keeps the most important part of the image visible.
- height: 400px; guarantees a consistent height across all devices.
- position: relative; sets the element's positioning relative to its normal position in the document flow.
After implementing the responsive hero image, I encountered a new issue The title and subtitle within the call-to-action (#call-to-action) were not centrally aligned.
The key issues were:
- The text was shifting inconsistently across different screen sizes.
- On smaller screens, it appeared too high or too low.
- The overlay wasn't staying centered, affecting readability.
- The call-to-action wasn’t positioned correctly over the hero image, making it look disjointed.
Key Causes of the Issue
- Default Document Flow and Positioning Conflicts
- The #call-to-action overlay was inside the #homepage-hero section but was not positioned explicitly.
- Since block-level elements (like h1 and h2) follow normal document flow, they were shifting based on content and screen size changes, making alignment inconsistent.
- Lack of Defined Positioning
- The #call-to-action overlay initially relied on automatic alignment, which caused:
- On smaller screens, the text appeared too high or too low.
- On larger screens, the overlay wasn’t centered, affecting readability.
- The #call-to-action overlay initially relied on automatic alignment, which caused:
- Parent Element’s Default Behavior
- The #homepage-hero section was positioned relatively, but the call-to-action overlay needed explicit absolute positioning to stay aligned inside the hero banner.
To ensure the call-to-action overlay remained consistently positioned, I applied absolute positioning within the #homepage-hero section:
- position: absolute; ensured that the #call-to-action overlay was anchored inside the #homepage-hero section instead of moving with the page content.
- top: 25%; placed the text in the upper third of the hero section, making it visually balanced.
- z-index: 100; ensured the text overlay stayed visible on top of the hero image.
One of the biggest challenges I faced while designing the About section was ensuring that it had a responsive layout that looked good across all screen sizes:
- On smaller screens (mobile and tablets): The layout needed to be vertically stacked, with the image appearing above the text for a natural reading flow.
- On larger screens (laptops and desktops): The layout needed to be horizontally aligned, with the image on one side and the text + signature on the other side to create a visually balanced structure.
At first, my attempts did not scale properly across devices:
- The text and image alignment was inconsistent.
- The image would sometimes overlap the text.
- The signature positioning felt awkward in some cases.
To resolve these issues, I structured the section using Bootstrap’s grid system for flexible, responsive positioning:
- Wrapped everything inside a .row so that Bootstrap automatically handled column layouts:
- This ensures responsiveness without needing complex media queries.
- Defined column behavior for different screen sizes:
- col-12 for mobile: Image and text are stacked vertically.
- col-lg-4 for larger screens: Image takes up 4 out of 12 columns, placing it to the side.
- col-lg-8 for larger screens: Text takes up 8 out of 12 columns, ensuring alignment next to the image.
- Used Bootstrap’s text alignment classes (text-center, text-lg-start, text-end) to control text alignment dynamically:
- On mobile screens, the text remains centered.
- On larger screens, the text aligns left (text-lg-start) to match the horizontal layout.
- Positioned the signature (#signature) correctly using Bootstrap’s flex utilities:
- On mobile screens, the signature appears below the text.
- On larger screens, the signature is aligned to the right, complementing the horizontal layout.
By making the most of Bootstrap’s grid system and text utilities, I was able to achieve a fully flexible and visually appealing About section without requiring excessive custom CSS.
When creating the Tours Overview section, I noticed an inconsistency where the tour cards were displaying at different heights. This created a misaligned and unpolished appearance, particularly on tablet and desktop screens.
This was a problem I had encountered before in the Boardwalk Games walkthrough project, so I knew what was causing the issue and how to fix it.
The root cause of the issue was:
- The card height was being determined by the text content inside .card-body.
- Cards with shorter descriptions had a smaller height, while those with longer descriptions expanded.
- This caused the tour cards to misalign in a row, creating an uneven and visually unbalanced layout.
To ensure all the tour cards maintained a consistent height, I applied a minimum height (min-height) to the .card-body section at different screen breakpoints:
- Applied min-height to .card-body to keep all cards uniform.
- Adjusted min-height at different screen sizes to maintain responsiveness.
This meant all cards were the same height, creating a clean, professional layout. It prevented cards from collapsing when content was shorter than others and maintained responsiveness by adjusting min-height at different breakpoints.
When designing the featured tour sections, I wanted the title of each tour to adjust dynamically based on the screen size:
- On mobile screens, the title should appear above the carousel for a stacked layout.
- On small laptops (medium screens), the title should be positioned above the carousel but in a wider format.
- On large desktops, the title should be beside the carousel and above the description, creating a more balanced and visually appealing layout.
However, the titles were not behaving as expected across breakpoints, caused by:
- Bootstrap’s default grid behavior, which stacked elements unpredictably across breakpoints.
- Lack of explicit positioning for the title at different screen sizes.
- Misalignment of flex properties, which caused inconsistencies in spacing and placement.
To ensure the title adjusted correctly for all screen sizes, I:
- Used Bootstrap utility classes (d-flex, d-none, d-lg-flex) to dynamically display the title in different positions.
- Placed one h2 element above the carousel for mobile screens and another inside the text container for larger screens.
- Applied custom CSS margin and alignment adjustments at different breakpoints.
The titles now adjust for a polished, readable layout. On mobile, they stack above the carousel; on medium screens, they stay above with proper spacing. On large desktops, they align beside the carousel and above the text, ensuring a cohesive design across all devices.
When designing the tour details card group using the Bootstrap Card Group template, I encountered issues with alignment and responsiveness across different screen sizes. The details (price, duration, distance, and location) were not aligning evenly and were shifting inconsistently depending on the screen size. Sometimes, they would appear misaligned or too spaced out, making the layout feel unpolished.
The misalignment stemmed from Bootstrap's automatic column wrapping behavior combined with differences in text length. Specifically:
- Unequal text lengths in the tour details (e.g., "Free" vs. "Thirsty Scholar, M1 5NP") caused height variations, making some cards appear taller than others.
- Bootstrap’s default flex behavior was causing elements to shift into an uneven grid structure, especially on medium-sized screens.
- Lack of a defined structure in how elements distributed within the .row class resulted in cards collapsing or stretching unevenly.
- The absence of a fixed height for the .tour-details elements meant that smaller cards would shrink while longer text elements would expand, throwing off the overall alignment.
I applied Bootstrap flex utilities and column sizing. The final solution involved:
- Applying Bootstrap’s row and col classes to maintain a two-column layout on smaller screens and a four-column layout on larger screens.
- Utilizing justify-content-md-center and justify-content-lg-start to ensure cards aligned properly at different breakpoints.
- Adding a .tour-details class with a fixed width to keep uniform spacing between elements.
- Using align-content-xl-between to ensure that on extra-large screens, the content distributed evenly without overlapping or excessive spacing.
- Fine-tuning spacing via media queries, adjusting margins and paddings for large desktops to prevent inconsistencies.
The tour details cards now maintain even spacing across all screen sizes. On mobile screens, they stack neatly into two columns, while on medium screens, they stay balanced and centered. On large desktops, the cards align in a structured four-column layout, creating a polished and visually cohesive presentation.
When coding the gallery section, I initially used a masonry-style layout, similar to the approach in the Love Running project. This provided responsiveness but resulted in an unstructured look at the bottom of the page. The varying heights of different columns caused an uneven, jagged appearance, making the layout feel messy rather than polished.
To address this, I first ensured that all landscape images shared the same aspect ratio and all portrait images maintained a uniform size. However, this only partially improved the issue—while it helped with visual consistency, the gallery still didn't align neatly across different breakpoints.
Failed Attempts to Fix the Issue:
- Using grid-auto-flow: dense; in CSS: I attempted to control image arrangement, but it still led to uneven column heights.
- Setting fixed heights for images: This resulted in some images being awkwardly cropped, which disrupted the natural aspect ratio.
- Forcing equal-height columns: This caused distortion in some images, reducing the overall aesthetic quality of the gallery.
To achieve a clean and structured gallery layout, I implemented separate gallery designs at different breakpoints:
- The key to this structured layout was using div elements strategically to control the flow and organization of images, particularly in the tablet and laptop versions of the gallery.
- Tablet View
- Instead of a simple stacked list of images, I used div containers to create structured row groupings.
- Within each row, images were either placed side by side (landscape images) or arranged in a stacked column (portrait images).
- Laptop/Desktop View
- Here, div containers defined specific columns within the grid, ensuring the layout remained balanced.
- Some div elements spanned multiple rows to fill space naturally, while others contained stacked portrait images to maintain a structured feel.
- Using d-flex and align-items-stretch, I ensured the images adapted dynamically without breaking the layout.
By utilizing div-based grouping, I eliminated jagged edges at the bottom of the gallery, prevented uneven columns, and maintained a crisp, well-structured grid system across different screen sizes.
I encountered an issue where the background images on both the Reviews and Contact pages scrolled along with the content, rather than remaining static. This disrupted the intended aesthetic, making the pages feel less polished and reducing the immersive effect.
Cause of issue:
- By default, the background property in CSS applies an image relative to the element’s content.
- As users scrolled down, the background moved along with the content.
- The .container and other sections had their own height properties.
- This caused the background to shift instead of staying fixed in place.
To fix this, I:
- Fixed Background Issue:
- The key fix was applying background-attachment: fixed;, ensuring the background remained static while content scrolled over it.
- Structural Adjustments:
- Used position: relative; to maintain content alignment.
- Set height: 100%; and width: 100vw; to ensure full coverage.
- Responsive Design for Different Screens:
- Implemented media queries to swap background images for medium and large screens.
- Prevented image distortion by selecting appropriately sized background images.
- Ensured clarity and visual consistency across all device sizes.
The solution was found on MDN Web Docs, which recommended using background-attachment: fixed; to keep the background in place. Implementing this ensured the background remained fixed on both the Reviews and Contact pages, creating a more polished effect.
Even after implementing Bootstrap’s grid system to keep input fields aligned on larger screens, I encountered an issue where some fields were unexpectedly pushed onto a new line. This disrupted the intended layout, making the form appear uneven and less structured.
Cause of the Issue
- The default Bootstrap column spacing (gutter) added unintended margins.
- When a row’s total column width slightly exceeded 100%, it forced elements onto a new line.
- This was especially problematic on mid-sized breakpoints where field widths fluctuated.
As a solution I:
- Refined Column Sizing
- Adjusted column sizes proportionally to ensure they fit within a single row.
- Used col-md-4, col-lg-3, and col-xl-3 to better distribute space without exceeding row limits.
- Made Margin & Padding Adjustments
- Manually reduced margins on input fields to prevent them from exceeding the row width.
- Applied margin: 0; to affected fields to override Bootstrap’s default spacing.
- Used row w-100 on the form’s container to ensure a consistent structure across breakpoints.
The input fields now align correctly on all screen sizes, preventing unexpected breaks. Bootstrap’s responsive classes function smoothly without margin conflicts.
While using Bootstrap’s default input styling, I noticed inconsistencies in how the fields appeared across different browsers. Borders, background colors, and padding were not uniform, leading to a lack of visual consistency in the form design. Additionally, some inputs appeared slightly misaligned, disrupting the overall structure.
Cause of the Issue:
- Bootstrap’s built-in form styling varies slightly across browsers.
- Default styles didn’t match the aesthetic of the rest of the form.
- Inconsistent padding and borders made input fields look uneven.
To ensure all input fields had a uniform and professional appearance, I created a custom .box class with the following styles:
- Consistent dimensions: Set width: 100%; height: 40px; to ensure uniform sizing.
- Matching background color: Applied background-color: var(--primary-color--); for integration with the page design.
- Uniform borders: Used border: 1px solid var(--tertiary-color--); for a subtle but clear separation.
- Subtle depth effect: Added box-shadow: inset 0 0 1px 1px #af9f80; to create a slight inset effect, improving contrast and visibility.
Input fields now appear consistent across all browsers, maintaining a polished and accessible design. Credit: The box-shadow technique was inspired by a Stack Overflow post by Zoltan Toth.
When designing the contact form, I wanted specific fields—such as Tour Selection and Review Options — to appear only when relevant, based on user input. However, implementing this functionality from scratch was beyond my current development capabilities, so I looked to CodePen for assistance.
Cause of the Issue:
- By default, all form fields were displayed at once, making the form cluttered and overwhelming.
- There was no logic to dynamically show or hide sections based on user choices.
- I needed a way to keep the form clean and intuitive, ensuring users only saw relevant inputs.
I found a CodePen demo by, which demonstrated how to toggle form fields:
- Implemented JavaScript with the toggleFields() function to show or hide fields based on selection.
- When users selected "Booking a Tour", the tour selection radio buttons appeared.
- When users selected "Leave a Review", the rating slider and file upload became visible.
- Enhancing the User Experience:
- Used .classList.add("hidden") and .classList.remove("hidden") for smooth field transitions.
- Ensured hidden fields didn’t disrupt the form layout when inactive.
The form is now cleaner and more intuitive, showing only relevant fields based on user input. The logic for conditionally displaying form sections was inspired by Dustin Horstmann’s CodePen demo on dynamic form fields.
To enhance user experience, the rating slider needed a star icon that moved dynamically as users selected a rating. I used Fajar Nur Wahid’s CodePen project on interactive sliders to help me style the slider. However, the star initially failed to align properly with the selected value, making the interaction feel imprecise.
Cause of the Issue:
- The star’s position was not dynamically updating in sync with the slider value.
- The percentage offset applied wasn’t correctly scaled to the slider’s length.
- CSS positioning and margins were not optimized for accurate alignment.
To resolve this, I:
- Implemented JavaScript to track slider movement and dynamically adjust the star’s position:
- The 93 value in the calculation represented the percentage range for mapping slider movement but needed fine-tuning to prevent the star from moving too far to the right.
- The +0.5rem adjustment was necessary to keep the star visually centered, preventing it from appearing too far left at lower values or too far right at maximum values.
- Tweaked CSS margins and left positioning to further refine alignment.
The star now moves smoothly in sync with the slider, staying correctly centered over each rating. Inspired by Fajar Nur Wahid’s CodePen project on interactive sliders and Josh Collinsworth's Emoji Slider.
6.17. Hidden Form Labels
While testing the contact form with the WAVE accessibility tool, it flagged that my labels—set to be hidden for visual purposes—weren’t correctly connected to their corresponding input fields. This could make the form less accessible for screen readers and assistive technologies.
Cause of the Issue:
- I had labels for each input field but used display: none;, which removed them entirely from the document flow.
- This meant screen readers couldn’t associate the labels with their respective inputs.
- Without properly connected labels, users relying on assistive technology would struggle to understand form fields.
I found a Bootstrap solution that maintains accessibility while keeping labels visually hidden:
- Used the visually-hidden-focusable class instead of display: none;.
- This ensures labels remain in the document for screen readers but don’t disrupt the visual design.
- When users navigate via keyboard, the labels become visible, improving usability.
The contact form is now accessible while maintaining a clean design. Hidden labels are readable by screen readers, resolving WAVE’s flagged issue. Solution inspired by Bootstrap’s visually-hidden-focusable class.
All identified bugs and issues encountered during development were successfully resolved. Through thorough manual and automated testing, the website now functions as intended across all screen sizes, browsers, and accessibility tools. No known unresolved bugs remain, ensuring a polished, fully functional, and user-friendly experience.
To deploy the page, I used GitHub Pages and followed these steps:
- I navigated to the project's repository and opened the Settings tab.
- In the left-hand menu, I clicked on the Pages section.
- Under the Source section, I selected the Main branch from the drop-down and clicked Save.
- A confirmation message appeared, indicating the deployment was successful, along with the live link to the website.
Additionally, I will fork this repository so that it can be cloned for future use and development.
While the current version of the Clancy Nook website is fully functional and optimized, there are several enhancements planned for future iterations. These improvements will address performance concerns, enhance accessibility, introduce new interactive features, and improve overall functionality.
During performance testing with Google Lighthouse, several key areas were identified for potential improvement:
Eliminating Render-Blocking Resources
- Lighthouse flagged Bootstrap CSS and Google Fonts as render-blocking resources, which slightly delay page rendering.
- While I have looked into using cdnjs.com to help mitigate this issue, addressing render-blocking resources effectively is beyond the scope of this project.
Largest Contentful Paint (LCP) Optimization
- Since this project is intended to be a fully professional site, I do not want to compromise on image quality or change any of the images.
- In the future, when I am working with a graphic designer, I would like them to optimize and resize the images within the flow while maintaining their intended visual impact.
Reducing Unused CSS
- As Bootstrap and FontAwesome include many unused styles, I have looked into the following solutions but have been unable to fully address this during this project window:
- Using purgeCSS to remove unused styles in production.
- Exploring a custom Bootstrap build to include only the necessary components.
Currently, the contact form is static, meaning user submissions do not send messages to the website owner. A key goal for future development is to make this form fully functional.
In the short term, a simple Email Service API would be an effective solution:
- Using an external API service such as Formspree.
- Allows form data to be emailed directly to the site owner.
- Does not require backend hosting, making it easy to implement.
However, in the long term, I want to develop a custom backend solution as I advance my skills in future modules:
- Implementing a server-side application.
- Handling form submissions securely and efficiently.
Once video content becomes available, I plan to integrate it into the website to enhance engagement and provide a richer user experience. Potential uses include:
- Embedding short promotional videos on the homepage to give visitors a preview of the tours.
- Including tour highlight videos on the relevant tour pages to give users a visual introduction.
- Providing behind-the-scenes footage or interviews with the tour guide for added storytelling.
For improved accessibility, I plan to offer downloadable PDFs of the tour details. These will serve multiple purposes:
- Allowing users to access tour information offline.
- Providing an accessible text-based alternative for those with visual impairments or reading difficulties.
- Serving as a printable guide for visitors who prefer physical copies.
Currently, the project is hosted on GitHub Pages using the default .github.io subdomain. To make the website more professional and easier to share, I plan to:
- Fork the repository to create a new version with refined features.
- Purchase a custom domain name (e.g., clancynooktours.com).
- Link the custom domain to GitHub Pages using DNS settings.
- Bootstrap 5.3 – Provided a responsive front-end framework with pre-designed components.
- CSS 3 – Styled and structured the website.
- Git – Managed version control, allowing efficient tracking of changes and deployment.
- HTML 5 – Structured the content of the website.
- JavaScript ES6+ – Added interactivity and functionality.
- GitHub – Hosted the project repository, enabling version control, sharing, and deployment via GitHub Pages.
- Gitpod – Provided a cloud-based coding environment - first half of project.
- Visual Studio Code – Served as the primary code editor - latter half of project.
- Code Spell Checker – Helped catch typos and spelling errors in code, improving readability and professionalism.
- Emmet Keybindings – Provided quick and efficient coding shortcuts for HTML and CSS, boosting productivity.
- File Icons – Added distinctive icons for different file types, making navigation easier in the VS Code workspace.
- HTML/CSS/JavaScript Snippets – Provided useful code snippets for faster development in HTML, CSS, and JavaScript.
- HTML CSS Support – Enhanced autocompletion and IntelliSense for HTML and CSS files, improving coding efficiency.
- HTML Tag Wrapper – Allowed quick wrapping of selected text with HTML tags, speeding up structural edits.
- Prettier – Served as a powerful code formatter that ensured consistent styling and readability across all code files.
- GitHub Projects – Facilitated project organization, task management, and progress tracking throughout development.
- Google Keep – Served as a quick and accessible tool for jotting down ideas, to-do lists, and project notes.
- Inspiration 10 IE – Assisted in brainstorming, mind mapping, and visually structuring ideas during the planning phase.
- Jamie AI – Used to record and take notes during mentor meetings and weekly tutor group sessions.
- Adobe Color – Assisted in selecting and generating the color palette for the project.
- Balsamiq – Used to create wireframes to plan the website layout.
- Canva – Used to design the navbar logo.
- Chroma.js – Used to check color palette accessibility for color blindness.
- Color Contrast Checker – Ensured accessible color combinations for readability and WCAG compliance.
- Favicon – Used to generate the navbar logo, ensuring a recognizable and polished website branding.
- Font Awesome – Provided scalable vector icons used throughout the site for enhanced UI.
- FontForge – Assisted in finding complementary fonts for a unique typographic style.
- Google Fonts – Supplied web-friendly fonts.
- Image Resizer – Optimized images for faster loading times and better performance.
- Photokit – Used for editing and enhancing images to maintain high visual quality.
- Pixlr Editor – Provided an online tool for quick image adjustments and edits.
- RedKetchup – Assisted with image compression, metadata removal, and other optimization tasks.
- ColorZilla – Used for picking colors from web pages to maintain design consistency.
- Detailed SEO – Helped analyze on-page SEO elements for optimization.
- PageSpeed Insights – Assessed and improved website performance and loading times.
- Pesticide – Provided a visual overlay to debug CSS layouts more efficiently.
- Gitpod – Enabled quick access to cloud-based coding workspaces directly from GitHub.
- WAVE – Evaluated web accessibility and helped ensure compliance with WCAG guidelines.
- Am I Responsive – Tested the website’s responsiveness across different screen sizes for documentation.
- Auto Open Preview Panel – Automatically opened the Markdown preview panel in VS Code for real-time formatting checks.
- Grammarly – Assisted in proofreading and refining the README for clarity and professionalism.
- Markdown Guide – Served as a reference for writing and formatting Markdown correctly.
- Table to Markdown – Converted tables from spreadsheets into Markdown format for easy inclusion in the README.
- AccessibilityChecker – Evaluated the website’s accessibility and ensured compliance with WCAG standards.
- BrowserStack – Tested cross-browser compatibility by simulating different browsers and devices.
- DevTools – Used for debugging, inspecting elements, and optimizing website performance.
- Lighthouse – Assessed page speed, SEO, accessibility, and overall performance.
- W3C CSS Validator – Checked for CSS errors and ensured compliance with web standards.
- W3C HTML Validator – Validated HTML structure to ensure proper syntax and accessibility.
- Alamy – Provided high-quality stock images used on Gallery Page.
- Manchester Libraries – Sourced historical and local images relevant to tours.
- Pngtree – Provided high-quality stock images used on Gallery Page.
- Unsplash – Supplied free, high-resolution images the hero banners.
- Eventbrite Page – Provided event listings, descriptions and booking details for Clancy Nook tours.
- Facebook Page – Used for gathering social media engagement and community interactions.
- Grammarly – Assisted in proofreading and refining written content for clarity and professionalism.
- Instagram Page – Supplied visual content and promotional material for the website.
- LinkedIn Page – Provided professional networking content and business-related updates.
- Tripadvisor Page – Sourced customer reviews and ratings to highlight user experiences.
- Autoprefixer – Ensured CSS compatibility across different browsers, adding vendor prefixes.
- Bootstrap Documentation – Provided official guidance on implementing Bootstrap components and utilities.
- cdnjs.com – Research into open-source libraries for integrating scripts and stylesheets efficiently (for future enhancements).
- Codecadamy – Offered interactive coding tutorials and learning resources.
- Codepen – Served as an open-source platform for finding solutions to coding issues and tasks, as well as testing and sharing front-end code snippets.
- Codepip – Provided coding-based games for learning and practicing programming concepts.
- Dev – Served as a valuable platform for reading articles, engaging with the developer community, and finding solutions to coding challenges.
- Formspree – Research into form submissions without backend development.
- MDN Web Docs – Offered web development documentation and best practices.
- Mimo – Provided beginner-friendly coding lessons and interactive exercises.
- Nielsen Norman Group – Provided insights into research-based UX design principles and insights.
- PurgeCSS – Research into optimizing CSS by removing unused styles, improving performance.
- Replit – Provided an online IDE for running and testing code in various programming languages.
- Slack Community – Provided solutions and insights for debugging and coding challenges.
- Stack Exchange – Provided solutions and insights for debugging and coding challenges.
- Stack Overflow – Provided solutions and insights for debugging and coding challenges.
- W3Schools – Offered tutorials and references for various web technologies.
- Web Accessibility Initiative – Provided resources for improving web accessibility and WCAG compliance.
- WebAIM – Assisted in evaluating and improving accessibility for an inclusive web experience.
- Jesse James Garrett – The Elements of User Experience: User-Centered Design for the Web (2002) – Provided foundational insights into user experience (UX) principles and user-centered design.
- Eric A. Meyer – CSS: Pocket Reference (2018) – Offered guidance on CSS properties, selectors, and layout techniques.
- Jennifer Niederst Robbins – HTML5: Pocket Reference (2013) – Served as a quick reference for HTML5 syntax, structure, and best practices.
- Richard E. Silverman – Git: Pocket Guide (2013) – Helped reinforce version control concepts and efficient Git usage.
- Boardwalk Games – Served as a reference project for implementing structured front-end development techniques.
- Course Content – Provided learning materials, lessons, and guidance throughout the development process.
- Love Running Project – Used as a foundational example for structuring and styling a multi-page website.
- README Template – Provided a structured format for documenting the project clearly and professionally.
- Repository Template – Served as the foundation for setting up the project repository with a pre-configured development environment.
- Anna Blades – Provided imagery and designed the logo for the project.
- Louis Cane – Contributed written content and imagery, shaping the visual and narrative identity of the website.
- Derek Siuau – Provided solution in YouTube Tutorial using an offset anchor div for exact anchor link scrolling.
- Dustin Horstmann – Created a CodePen demo on dynamically toggling form fields based on user input.
- Fajar Nur Wahid – Developed a CodePen project featuring interactive rating sliders.
- Josh Collinsworth – Designed an interactive emoji slider, which influenced the project’s slider functionality.
- Nehal Ahmad – Provided a solution for ensuring the footer stays at the bottom of the page on Dev Community, improving layout consistency and user experience.
- Zoltan Toth – Contributed insights via a Stack Overflow post that informed form styling adjustments.
- Gabe Ison – User stories.
- Georgie Thomas – User stories and cross-browser.
- Isaac Derbyshire – User stories and responsiveness.
- Louise Nicholson-Smith – Content.
- Louis Cane – User stories and content.
- Loe Darcy – User stories.
- Luca Johnson – User stories.
- Luke Bradshaw – User stories.
- Macsen McKay – Cross-browser and Responsiveness.
- Max Ashton – User stories and content.
- Nel Lane – User stories and features.
- Poppy Horwood – Cross-browser.
- Sam Spedding – User stories and features.
- David Bowers – Personal mentor, providing guidance, feedback, and support throughout the project.
- Marko Tot – Group tutor, leading weekly sessions and offering insights into project planning and development.
I’d like to acknowledge my entire tutor group and the Slack community for help and suggestions throughout this process. However, a special thanks to:
- Ethan Skidmore – For offering solutions he discovered during his own project development, helping to troubleshoot and refine ideas.
- Wallace Green – For sharing his workflow process, providing insight into effective project management.
- Gareth Whitley – For sharing his initial ideas, which helped set the pace for my own project organization.
- Seren Hughes – For offering feedback and sharing her own project development experiences, contributing to group learning.
Louis Cane:
The mastermind behind Clancy Nook! Watching you go all-in on your passion and turn it into something real was a huge inspiration for me to do the same with this project. It’s been an absolute honour creating this site for (and with) you—your enthusiasm made it what it is. Having the opportunity to build something real, on a subject that’s been genuinely fascinating, and for someone I care about, has made this an incredibly rewarding experience.
Isaac Derbyshire:
Not only did you keep me caffeinated and fed, but your insistence on a healthy workspace, hydration, and (begrudgingly) occasional fresh air probably saved me from having a hunched back and square eyes. Without you, this project might have derailed into sleep-deprived chaos. And when disaster struck at the worst possible moment—my charger breaking just before submission—you literally ran to get a replacement, saving the day in true hero fashion. More than that, you’re my partner in all things, embracing every part of me—my focus, my chaos, my excitement, my deep dives into whatever I’m obsessing over. I couldn’t have done this without you.
David Bowers:
Being matched with a fellow AuDHD-er as my mentor was pure luck. You’ve mastered the balance of pushing me while knowing when to tell me to slow down. Your insights—both from completing this course and understanding my neurodivergence—have been invaluable. Your top-tier advice on accessible tools, productivity hacks, and working with my brain rather than against it has been fantastic.
Georgie Thomas:
The voice of reason who fought to make me take breaks (even when I resisted with all my might). Your commitment to hard work and dedication to your own passions has been incredibly encouraging. You have a way of reminding me of the things I need to hear when doubt creeps in or when things get heavy. Your patience, care, and refusal to let me burn myself out mean more than I can put into words, and I’m endlessly grateful for you. I always look forward to time spent with you. I hope you embrace these words as a reminder of your strength. You work so hard, and you deserve to have fun, look after yourself, and be confident in what you do.
Gilly Hsu:
The person who gave me the push I needed to start this course, embarking on a similar journey yourself. You’ve always believed in me, and seem to think far too highly of me. Your confidence in my abilities has been a source of motivation, and I can’t overstate how much that has meant. You are the cleverest person I know, and I feel incredibly lucky to have your support and unique friendship.
Nel Lane and Gabe Ison:
The dynamic duo who made sure I didn’t turn into a hermit. Balance achieved! Dragging me away from my screen, making sure I actually existed outside of work has been invaluable, even if I have discovered I am terrible at Skittles in the process. The occasional late rise and slow start to my workday because of time spent laughing, adventuring, or just unwinding with you was more than worth it. A special shoutout to Nel for all the amazing times spent cooking together—turning mealtime into a joyful experience where I could be calm. And to Gabe, for embracing silliness, keeping things exciting, and making me laugh.