A Parish Website Reimagined
A Parish Reimagined
How Can a Parish's Website Reflect the Community It Serves?
How Can a Parish's Website Reflect the Community It Serves?
Overview
Overview
This project showcases a custom-built website for the Mar Benyamin Parish of the Assyrian Community in Zeist, commissioned to replace the older site. The website is fully custom-coded (HTML/CSS/JS), with resources and features to serve existing parishioners and others interested in joining the parish.
This project showcases a custom-built website for the Mar Benyamin Parish of the Assyrian Community in Zeist, commissioned to replace the older site. The website is fully custom-coded (HTML/CSS/JS), with resources and features to serve existing parishioners and others interested in joining the parish.
Role
UI/UX Design
Front-End Development
Content Gathering & Formatting
Team
UX/UI Designer & Developer (Me)
Church Committee
Tools
Figma
VS Code (HTML/CSS/JS)
Google Calendar API
Netlify
Why
The parish website was built over 14 years ago and was static, outdated, and showing its age in both content and design. With a growing community in Zeist, the site no longer represented the parish well and a redesign was commissioned to give the parishioners a site that would better serve them.
The parish website was built over 14 years ago and was static, outdated, and showing its age in both content and design. With a growing community in Zeist, the site no longer represented the parish well and a redesign was commissioned to give the parishioners a site that would better serve them.
What
The result is a rebuilt Mar Benyamin Parish website that brings the parish's history, faith, and liturgy together in one place, with a modern interface designed to reflect the visual identity of the parish. Parishioners can browse recent photos, stay updated on upcoming activities, and prepare for the next Mass with the week's readings. A library of books and resources supports those looking to grow in their faith, and a contact page allows them to connect with the parish.
How
The design began with paper sketches, developed into Figma mockups, and refined over iterations. From there, I built the site entirely from scratch (HTML, CSS, and JavaScript), working with AI and building towards a complete, functional site.
The design began with paper sketches, developed into Figma mockups, and refined over iterations. From there, I built the site entirely from scratch (HTML, CSS, and JavaScript), working with AI and building towards a complete, functional site.
THE DESIGN & BUILD PROCESS
Brainstorming & Sketches
Brainstorming & Sketches
It started with a few paper sheets— first brainstorming what each page needed to contain (Home, About, Calendar, Resources, Contact), then sketching lo-fi wireframes for each, noting early what they'd require to build: PDFs, hyperlinks, a live calendar integration. This helped me understand the scope of the website and the features to be designed.
It started with a few paper sheets— first brainstorming what each page needed to contain (Home, About, Calendar, Resources, Contact), then sketching lo-fi wireframes for each, noting early what they'd require to build: PDFs, hyperlinks, a live calendar integration. This helped me understand the scope of the website and the features to be designed.
Figma & Design System
Figma & Design System
Figma & Design System
From there, the design continued in Figma, where a design system was defined around the parish's own visual identity, with purple as its defining color, Prata for an ecclesiastical tone, and Montserrat for clarity in the navigation. From this basis, the mockups were created page by page.
From there, the design continued in Figma, where a design system was defined around the parish's own visual identity, with purple as its defining color, Prata for an ecclesiastical tone, and Montserrat for clarity in the navigation. From this basis, the mockups were created page by page.
From there, the design continued in Figma, where a design system was defined around the parish's own visual identity, with purple as its defining color, Prata for an ecclesiastical tone, and Montserrat for clarity in the navigation. From this basis, the mockups were created page by page.
<— Swipe to see more —>
The Build
The Build
The Build
The mockup became the blueprint for the development. I used VS Code, which was a relatively new environment to me.
Learning different parts of website development (hosting, structuring, shipping) step by step pushed me to think in reusable components and building blocks. This line of thought has influenced the way I work.
The mockup became the blueprint for the development. I used VS Code, which was a relatively new environment to me.
The different parts of developing a website (hosting, structuring, shipping), and going through this step by step pushed me to think towards reusable components and building blocks. This line of thought that has influenced the way I work.
The mockup became the blueprint for the development. I used VS Code, which was a relatively new environment to me.
The different parts of developing a website (hosting, structuring, shipping), and going through this step by step pushed me to think towards reusable components and building blocks. This line of thought that has influenced the way I work.
Here is an excerpt of the VS Code environment behind the final site, and the building blocks in practice — one set of variables for color and type, reused across every page.
Here is an excerpt of the VS Code environment behind the final site, and the building blocks in practice — one set of variables for color and type, reused across every page.
Here is an excerpt of the VS Code environment behind the final site, and the building blocks in practice — one set of variables for color and type, reused across every page.
THE CONTENT & INTEGRATION
The Calendar
The Calendar
For the youth, it's a way to stay in touch — upcoming events, with contact details to sign up.
For the elderly, it's knowing exactly when and where the next Mass takes place, or whether a rogation, commemoration, or feast is coming up.
The calendar on the left is where one person may update these events as they would on a normal (Google) calendar. On the right, you find the implementation that extracts this data and displays it using color and text distinctions.
For the youth, it's a way to stay in touch — upcoming events, with contact details to sign up.
For the elderly, it's knowing exactly when and where the next Mass takes place, or whether a rogation, commemoration, or feast is coming up.
The calendar on the left is where one person may update these events as they would on a normal (Google) calendar. On the right, you find the implementation that extracts this data and displays it using color and text distinctions.
For the youth, it's a way to stay in touch — upcoming events, with contact details to sign up.
For the elderly, it's knowing exactly when and where the next Mass takes place, or whether a rogation, commemoration, or feast is coming up.
The calendar on the left is where one person may update these events as they would on a normal (Google) calendar. On the right, you find the implementation that extracts this data and displays it using color and text distinctions.
The implementation is built using FullCalendar, pulling directly from the parish's own Google Calendar via the API. A one-time login grants a token that never expires, so events sync automatically from then on; the parish only ever updates its own calendar, never the site itself.
The idea behind this is to make updating the events a simple and user-friendly process for the Parish, not requiring any elaborate technical changes of the sort.
The implementation is built using FullCalendar, pulling directly from the parish's own Google Calendar via the API. A one-time login grants a token that never expires, so events sync automatically from then on; the parish only ever updates its own calendar, never the site itself.
The idea behind this is to make updating the events a simple and user-friendly process for the Parish, not requiring any elaborate technical changes of the sort.
Readings
Readings
The same notion behind Assyrian Bible Daily shows up here again, i.e., reading the upcoming Mass's texts beforehand, to understand them better once you're in the pew. Behind the page sits a simple JSON dataset, one entry per date, each carrying the feast name and its four readings. A short script calculates the upcoming Sunday from today's date and matches it automatically — both here and as a preview on the home page — without anyone updating it by hand.
The same notion behind Assyrian Bible Daily shows up here again, i.e., reading the upcoming Mass's texts beforehand, to understand them better once you're in the pew. Behind the page sits a simple JSON dataset, one entry per date, each carrying the feast name and its four readings. A short script calculates the upcoming Sunday from today's date and matches it automatically — both here and as a preview on the home page — without anyone updating it by hand.
Library
Library
The library was included to bring the youth — and parishioners more broadly — closer to the literature of their own faith. It includes liturgical texts to follow and understand Mass, prayer books to learn and grow in prayer, and catechetical works to understand the faith itself.
As with linguistic resources, I noticed that religious works are hard to access online. This feature was a direct result of this need, and was a way to use the digital landscape to the benefit of the Assyrian diaspora.
VISUAL IDENTITY
Coherency in Languages
Coherency in Languages
Coherency in Languages
The color scheme reflects the parish's own liturgical color, paired with its existing logo. The fonts, as described earlier, were chosen to keep the Church's identity consistent throughout website.
The Syriac font (Estrangelo) is used for headers (pronounced shimane).
The color scheme reflects the parish's own liturgical color, paired with its existing logo. The fonts, as described earlier, were chosen to keep the Church's identity consistent throughout website.
The Syriac font (Estrangelo) is used for headers (pronounced shimane).
#502171
#502171
#672A93
#672A93
#2F2F2F
#2F2F2F
#333333
#333333
#FFFFFF
#FFFFFF
Color Palette
Names
Names
Prata
Prata
Montserrat
Montserrat
ܐܣܬܪܢܓܠܘ
ܐܣܬܪܢܓܠܘ
Purpose
Purpose
Headers
Headers
Menu bar
Menu bar
ܫܡܢ̈ܐ
The Fonts
The Logo
Button 1
Button 1
Button 2
Button 2
Buttons
POST
From One Parish to Eight
From One Parish to Eight
The site was fully built and working, though its content was still being finalized — some theological and historical topics needed to be written with care before the site could go live. A draft was sent to the Bishop of the Western Diocese, who requested a meeting shortly after. He was pleased with the result and saw an opportunity to take things further: centralizing it into one platform for all parishes across Western Europe. He asked if I wanted to lead that project. I agreed, and carried the visual identity, structure, and features from Zeist into the new environment.
The site was fully built and working, though its content was still being finalized — some theological and historical topics needed to be written with care before the site could go live. A draft was sent to the Bishop of the Western Diocese, who requested a meeting shortly after. He was pleased with the result and saw an opportunity to take things further: centralizing it into one platform for all parishes across Western Europe. He asked if I wanted to lead that project. I agreed, and carried the visual identity, structure, and features from Zeist into the new environment.
REFLECTION
Looking Back…
Looking Back…
What I would do differently is the way I approach the work. I'd like to think even more in components and work more structuredly from the outset.
I would also spend less time on heavy technical details like the Calendar API or the aesthetics of some features. Rather, I believe there's a fine balance between designing for functionality and validating those designs, before further exploring options for a finalized design. For example, I would have played less with the FullCalendar fills and borders before validating this with the committee for insights.
What I would do differently is the way I approach the work. I'd like to think even more in components and work more structuredly from the outset.
I would also spend less time on heavy technical details like the Calendar API or the aesthetics of some features. Rather, I believe there's a fine balance between designing for functionality and validating those designs, before further exploring options for a finalized design. For example, I would have played less with the FullCalendar fills and borders before validating this with the committee for insights.
What I would do differently is how I approached the work itself. I'd like to think even more in components and work more structured from the outset.
I would also spend less time on heavy technical details like the Calendar API or the aesthetics of some features. Rather, I believe there's fine balance between designing for functionality and validating those designs, before further exploring options for a finalized design. For example, I would have played less with the FullCalendar fills and borders before validating this with the committee for insights.