Lokaal 47
Designing and developing a website for a company offering rentable space for team collaboration and connection.
Overview
I was tasked with creating a website from scratch for a new local company providing a collaborative space for teams. The project involved both design and development, including a booking system, event management, and multilingual support. The goal was to create a user-friendly website that effectively communicated the company's unique offerings and values while providing easy content management for the client.
Note: This case study describes an ongoing project. While the core functionality and design are complete, some content (some text and all of the images) are currently placeholders pending final materials from the client.
Research
Interviewed client to gather requirements, company details, and design preferences.
Planning
Collaborated with the client to plan and organize website content.
Design
Created initial designs and refined them based on client feedback.
Development
Developed frontend and backend, integrating databases.
Delivery
Launched the website, ensuring efficient handover to the client.
Considerations
Based on my analysis of the client requirements and the project goals, I identified several key areas to focus on:
01
User-friendly Interface
Design intuitive interfaces for both end-users and the website owner, ensuring easy navigation and interaction with the site's features for all parties.
02
Booking & Event Systems
Create seamless booking and event registration systems that are easy to use for customers and simple for the client to manage through Notion databases.
03
Multilingual Support
Implement seamless bilingual functionality (English and Dutch) throughout the website, ensuring content is accessible and accurate in both languages.
04
Content Management
Leverage Notion databases to create an easy-to-use content management system, allowing the client to update and maintain the website effortlessly.
05
Brand-aligned Visuals
Develop a consistent visual style throughout the website that accurately reflects the company's values, atmosphere, and unique offering.
Design
Live Website
(Still in production)
Lower, you can find some samples of the screens that I have designed for the project. For a better viewing experience, I recommend accessing the live website. This will provide a more interactive and convenient experience.
Technical Stack
I utilized a diverse range of technologies to build and deploy this project. Key components included:
- Frontend Generation: 11ty (Eleventy) generated the static website, dynamically inserting content from Notion databases into predefined variables and templates.
- Content Management: Notion served as the primary database and content management system, storing multilingual content, booking and event details, and other dynamic data.
- Backend (Node.js):
Played a crucial role in maintaining security and functionality:
- Handled Notion API calls, protecting API keys from client-side exposure.
- Triggered website rebuilds when content was updated in Notion.
- Managed email functionality, keeping sensitive information server-side.
- API Integration: Custom integration with the Notion API facilitated secure data flow between the backend and Notion database.
- Build Automation: Implemented to regenerate the static site upon content updates in Notion, ensuring the website always reflected the latest information.
- Containerization: Docker was used to encapsulate the application and its dependencies, ensuring consistency across development and production environments.
- Utilities: UUID library generated unique identifiers for bookings and events, enhancing data management and tracking capabilities.
This architecture ensured a secure, efficient, and portable system where content updates in Notion seamlessly propagated to the live website, while maintaining consistency across different environments and providing robust data management capabilities.
Notion Integration
A key feature of this project was the extensive use of Notion databases, which provided a flexible and user-friendly content management system:
01
Multilingual Content Management
Created a Notion database for English and Dutch versions of each text element. Utilized 11ty to dynamically insert the correct language version based on user selection, ensuring seamless bilingual functionality.
02
Dynamic Booking System
Implemented a Notion database for managing bookable services. The client can easily add, remove, or modify booking options without code changes. When bookings are made, a separate Notion database is automatically updated, allowing real-time reservation tracking.
03
Automated Event Management
Designed a Notion database for managing public events. 11ty generates event pages and registration forms automatically. When users register, their information is instantly added to the Notion database, providing real-time attendee tracking for the client.
04
Content Tracking and Collaboration
Used a Notion database to track needed website content and its status. This enabled seamless collaboration with the client on content creation and approval, ensuring all necessary information was included and up-to-date.
Learning on the Job
As a designer expanding into development, this project presented an opportunity for significant growth:
- Started with basic HTML/CSS/JS knowledge and progressively learned more advanced concepts.
- Learned 11ty for templating and static site generation.
- Gained hands-on experience with API integration and database management.
- Developed problem-solving skills by tackling complex features like the booking system.
Conclusion
This project allowed me to apply my design skills while significantly expanding my development capabilities. By creating a comprehensive solution that met the client's needs and provided an engaging user experience, I delivered a website that effectively communicates the company's offerings and values. The project demonstrated my ability to learn and implement new technologies to solve real-world business challenges.
Key learnings include the importance of effective client communication, the value of flexible content management systems, and the power of integrating various technologies to create a cohesive solution.