Background
In this project, I helped redesign the Syro-Malabar Catholic Diocese of Chicago's website, which serves as the central informational hub for the entire U.S. Syro-Malabar community of over 87,000 members, spanning nearly 90 parishes and missions.
What is the Syro-Malabar Catholic Diocese?
The Syro-Malabar Catholic Church is one of the oldest Christian communities in the world, tracing its origins back to 52 AD in Kerala, India. Today, it has nearly 5 million members worldwide.
The Syro-Malabar Catholic Diocese of Chicago oversees the entire U.S. Syro-Malabar community of 87,000+ members.
Why this project was personal: Being Syro-Malabar is as much a cultural identity as it is a religious one. As a member myself, I wanted to do my part to help preserve my heritage and keep my community alive.
MY ROLE
UX/UI Designer
(Research, UI design, brand strategy)
TOOLS
Figma, Figjam, Figma AI, ChatGPT, Claude, Google Docs, Excel, Zoom, Heurio
TEAM
1 UX Designer/Project Manager
1 Full-Stack Developer
Timeframe
1 year (Part-time, Freelance)
The Problem
In the wake of the pandemic, the U.S. Syro-Malabar Diocese was struggling to re-engage members who had drifted from the community—especially post-college young adults and young families who had yet to build strong parish routines. The Diocese's outdated website had become a missed opportunity to digitally connect with its slowly fading community.
The Goal
Redesign the Diocese website as a modernized central hub for the entire U.S. Syro-Malabar community. Ensure the website helps members stay informed, connect with leadership, find local parishes, and feel genuinely welcomed back to the church.
The Results
Within 6 months of launching the new website, we saw:
📈 41% increase in total page views.
⏰ 52% decrease in bounce rate* — visitors were staying longer and exploring more content.
✅ Positive feedback from Diocese leadership and parishioners.*
*Sources: Google Analytics, in-person feedback, and on-site surveys.
The Impact:
The new website helped members—especially younger generations—engage with more community initiatives and events.
It also reestablished the website as a reliable communication hub, helping diocesan leaders share updates more effectively and strengthening their connection with the Syro-American community.
Phase 2
Discover
Community Survey
To better understand the community members we were designing for, we drew from a nationwide survey conducted by the U.S. Syro-Malabar Diocese in 2024, which received 5,337 responses from 86 parishes/missions across 26 U.S. states.
Key Survey Themes:
Youth Disengagement — Young adults (ages 18-35) were most likely to express skepticism about the church's future and leadership.
Leadership Disconnect — Members expressed a strong desire for better, more transparent communication from diocese leadership.
Poor Access to Resources — Parishioners wanted easier access to information, events, and faith formation content.
Key Survey Insights
Phase 2
Define
Personas: Our Target Audiences
We synthesized our research into two primary user types whom we were targeting:
Elsie Jacob — The Active Parishioner:
Regularly attends Mass and parish events.
Wants quick access to news, events, and leadership updates from the Diocese.
Justin Kurian — The Inactive Member:
Grew up in the Syro-Malabar community, but has drifted from parish life since entering adulthood.
Needs a welcoming entry point and a reason to re-engage in the community.
Site Map
My co-designer and I collaborated on a revised plan for structuring the new website, grounding our decisions in stakeholder requirements and user research insights.
Key changes from the old site map:
Consolidated all interest groups and missions under a single Ministries page.
Added a new Eucharistic Revival page — Part of a national multi-year outreach initiative started by the Vatican leadership.
Added a Child Safety top-level resource page — This met a regulatory requirement from the Vatican, while also serving as an important trust signal for families.
Removed old pages that hadn't been updated in 3+ years.
Phase 3
Visual Design
Mood Board
After several branding brainstorm sessions with my co-designer, I developed a mood board that became the visual foundation for our style guide.
Colors:
Green hues — Evoke the lush landscape of Kerala, the South Indian state where the Syro-Malabar church was founded.
Warm cream and gold tones — A reference to the gold-embroidered vestments worn by our priests.
Visual Motifs:
Jacquard textile patterns — Another nod to our priestly vestments.
Simplified line art of Christian iconography — Highlights core religious symbols while maintaining a modern aesthetic.
Using our mood board as a reference, my co-designer and I worked together on the new Diocese style guide.
Our Design Goals:
Achieve a clean, modern look that resonates with younger audiences, whileee still highlighting Syro-Malabar's rich cultural history and unique visual motifs.
How We Got There:
Since our developer planned to build the website using the Tailwind CSS UI library, we made sure to structure our custom styles to match Tailwind design system's conventions.
Earlier iterations of our style guide included many more typography and color styles (inherited from Tailwind CSS’s default theme), but we eventually realized it would be easier—both in terms of design consistency and code simplicity—if we reduced our list of styles to only what we would actually need.
Design System & UI Components
Our team used Tailwind UI as the foundation of our website's design system. My contributions included:
Adapting and customizing components from Tailwind's Figma UI kit to match our diocese website's intended style and layout.
Cross-referencing Tailwind CSS's documentation to ensure all our components and layers in Figma were structured and named in accordance with Tailwind's framework.
The Results:
The developer had a much easier time converting my final wireframes into the live website.
Using an existing design system saved us both design and development time, and helped us ensure our components had usability and accessibility standards—such as hover and screen-reader focus states—built in from the very beginning.
Phase 4
Deliver
I led the design of all final high-fidelity mockups and clickable prototypes in Figma, prioritizing high-traffic pages first (like the homepage) and working my way down to lower-traffic screens. Every page was mocked up in multiple breakpoints to ensure full responsiveness on all screen sizes and devices.
The content for each page was finalized by my co-designer, who sourced the content plan directly from clergy-members, ministry leaders, and other internal stakeholders.
The Design Handoff
I took ownership of preparing the design handoff, making sure it was detailed and thorough, so our design decisions wouldn't get lost or mistranslated in development.
To set the developer up for success, I structured the handoff as follows:
Delivered mockups in phases, so he could start building them right away.
Organized mockups into separate Figma sections per page, each one showing the screen across every major breakpoint.
Added annotations as tagged, timestamped Figma comments, covering details like: component behaviors, interaction states, and which specific Tailwind UI components to use.
Held a dedicated handoff meeting to walk the developer through the Figma file, address questions, and make a plan for how we'd communicate during the implementation phase.
The outcome:
A well-organized handoff that minimized confusion, and ensured our designs were successfully translated into the live website.
Conclusion
