Hogwarts HAVENGroup project • Two months • PC
Background
This brief group project was assigned in a college module in which HTML/CSS are taught. The project brief was to design a full fledged website from scratch in a group of four on any topic related to buildings.
What building could we focus on?
The ideation was done briefly orally during the first group meeting. With little time to spare for this project, reaching a decision fast was crucial. Other groups were aiming for creating websites around real buildings throughout Ireland, which gave us the idea to create our website on a fictional building: Hogwarts, from Harry Potter.
Deliverables for this project demanded we answer questions such as:
• Who is the target user?
• What is the website’s user value proposition?
• Who are the competitors?
When faced with these questions, the concept developed to targeting a real world issue faced by students in Dublin: dealing with the major housing crisis. Could we design a website advertising a utopian housing service (borrowing ideas from Hogwarts) that highlights real issues?
Ideate
A slide from a pitch deck presented as an early deliverable explaining some USPs
Ultimately the goal of the assignment was to demonstrate our HTML/CSS skills, and a housing website could do this quite well due to the menus, media, and structures of the pages required.
Define
Our research first revolved around a comprehensive competitive analysis, examining four leading websites in the housing domain in Dublin. We did a deep dive into their user interface structures and user experience flows. We paid close attention to their navigation schemes, functionalities, and the overall aesthetic appeal.
Beyond the surface-level features, we delved into the underlying strategies that made these websites effective. This included site mapping, content organization, the clarity of information presented, and the ways in which they engaged users. Accessibility and responsiveness were major factors as well.
The investigation identified what these competitors did well and conversely gaps or shortcomings in their approaches.
We sought to understand user pain points and frustrations, gathering insights from user reviews and our own experiences as each of us had also found housing via a student housing service.
Notes and observations for one popular housing website “Host”
This research lead us to create an extensive list of requirements, setting guidelines for what the site should contain. The soft requirements dictate “nice-to-haves”.
List of requirements created from research
Hogwarts Haven addresses the critical gap in the student accommodation market by offering high-quality and accessible housing options. Situated just outside Dublin, it provides affordable living spaces with convenient access to public transport. The unique application process assesses each student's individual needs, ensuring a diverse and equitable community that transcends barriers.
Information architecture
The research helped us create a sitemap loosely based on the competitor’s sites. We tested accommodation sites to find which elements lead to the best user flow.
After starting wireframing, this sitemap was iterated on for improvements. The wireframes also underwent several iterations, as in any design cycle.
Create
Prototyping
A wireframe was made for every screen in the sitemap and the user flow was then tested within Figma.
Ideating for the stickersheet, a similar color palette to the pitch slide deck was chosen. These colors had a high contrast. The main typeface used throughout the website was simplistic, and for headings a serif font was used. These points were vital for accessibility.
Common material design icons were chosen, but with slight stylistic changes to suit the Hogwarts theme.
Gathering content
The other groups completing this project used real buildings to base their websites on, and had plenty of source material to use. While there are images of Hogwarts online, it was difficult to find clear images of the housing to display on our site.
Using the computer video game Sims 4, I created several different types of rooms, and common areas such as a fitness suite, laundry room, and study areas as well as a reception using furnishings and decor to resemble Hogwarts depicted in the movies and books.
Several screenshots were taken of the inside environments as well as the outside that could then be displayed on the site.
Project requirements included the creation and management of an Instagram account to effectively market our website. Using a combination of the accommodation screenshots and online resources, we rapidly populated the account with promotional posts, drawing inspiration from the social media strategies of established student housing services.
Additionally, we developed a comprehensive slide deck which can be found here for our final presentation, meticulously detailing the site's functionality and its adherence to various industry standards.
Outcome
Watch a demo video to tour all features of the site or visit Hogwarts Haven yourself!
Site highlights
Advanced Code Structure: Implemented with HTML, CSS, JavaScript, and Bootstrap, featuring modular and maintainable file organization.
SEO Optimization with Semantic HTML: Extensively used semantic HTML tags like `<header>`, `<nav>`, `<main>`, and `<footer>` for SEO enhancement.
Uniform UI Components: Consistently designed navigation bar and footer across all pages, embedding brand identity and essential links.
Dynamic Chatbot Integration: A model chatbot implemented in JavaScript, located in the bottom-right corner for real-time user engagement, with show/hide functionality.
Responsive and Cross-Device Compatibility: Meticulously tested and optimized for mobile responsiveness, including compatibility with iPad mini, iPad Air, various Android and iPhone models.
JavaScript-Powered Google Maps Integration: Utilized JavaScript for the 'Get Directions' feature, leveraging the browser's geolocation API for user-centric navigation assistance.
Intuitive User Forms: Developed user-friendly forms for registration, login, and data collection, with additional specialized forms to align user preferences with appropriate housing options.
Interactive FAQ Section: Implemented an accordion-style layout with Bootstrap for streamlined user access to information.
Smart Link Management: Employed ‘target="_blank"’ attribute for social media links to enhance user experience and website retention.
Lighthouse Performance Excellence: Achieved high scores in Lighthouse for performance, accessibility, best practices, and SEO.
Accessibility Enhancements: Accessibility tested with tools like WAVE, striving for WCAG 2.1 Level AA compliance each time the site was updated
Enhanced Zoom Functionality: Enabled up to 200% zoom capability, ensuring greater accessibility for all users.
Reflection
This project represented a significant achievement, demonstrating both creativity and practical application. We developed a distinctive concept, blending imaginative freedom with real-world relevance. In-depth research, including an analysis of existing student housing sites in Dublin and incorporating our personal experiences, provided us with a profound understanding of the challenges students face and the existing market gap for quality student accommodations.
The development of the website from the ground up using HTML/CSS presented a formidable challenge. Learning how to use Bootstrap was difficult at first. We rigorously applied WAVE and various accessibility tools to ensure responsive design, adhering to stringent coding standards. Our commitment to organization and meticulous attention to detail from the project's inception was vital in achieving our successful outcome.
Trinity Tales
UI/UX • Game design • Interaction
Kaptis
Game design • Arduino • Research