Prince of Peace Lutheran Church

Website redesign | Domain migration | Custom tutorials

Screenshots of a church's website, the Prince of Peace Lutheran Church, featuring information about worship services, community programs, and church events with various images of people, worship, and church activities.

Prince of Peace Lutheran Church is a contemporary and welcoming institution located in Seatac WA. They had a website that was quite out of date and were managing the updates themselves. The hosting tools for their website weren’t user friendly and costing a lot of money.

Over time, different people managed the website and along the way, the branding and functionality got lost. It worked best on mobile but didn’t adjust well to larger screens, the entire website was one very long page, and the content and styling didn’t reflect their modern energy.

The new website needed to allow for easy, weekly content updates that didn’t compromise the layout and structure.

Overview


The goal was to completely overhaul their website (content, layout, responsiveness and navigation) and establish tools for easy updates even for individuals with little website editing experience.

I began with clarifying the content needs and information hierarchy to ensure their message comes though immediately to visitors. I expanded the one run on page into a strategic multi-page website with clear menu titles. Since this website is content heavy, the right organization is key for visitors to find the specific information they need with the home page acting as topic overviews.

The visual identity was inspired by their existing logo. I defined a streamlined color palette and selected modern fonts for cohesive styling throughout.

I built the website in Squarespace which has the best balance of modern, responsive design and usability for novice website editors. I recorded specific tutorials based on the exact content they need to update. This allows for the website management to be passed onto new staff seamlessly and the design and functionality remains secure.

The final solution delivered a streamlined, responsive website built with Squarespace, empowering the church to confidently manage their content while presenting a clear, inviting, and relevant online presence.

Project Goals

→ Complete content and layout refresh

→ Revamp the home page to be an organizational overview with intuitive navigation for depth of information

→ Redefine the visual styling for brand alignment and cohesive aesthetic across the website

→ Have one place to manage the domain and website content which requires domain migration

→ Create customized tutorials for easy updates

→ Cost savings with a new hosting platform

Before


The entire website was one long page that housed all the content. It lacked clear informational hierarchy and came across as overwhelming. The menu jumped to sections of the page rather than a new page, this structure meant it was difficult to provide in depth information without losing the attention of visitors.

The website viewed best on mobile devices but when viewed on larger screens, some elements were cut off and located outside of the viewing window. Some external links were broken or difficult to find as they weren’t defined with a button but rather an image.

The visual styling felt dated and lacked consistency. Various colors, fonts, and borders were used randomly and at times the text was difficult to read

A church website homepage featuring menus, schedules for adult education, youth Bible study, worship services, information about the church's mission, ways to get involved, donation options, mission opportunities, and church calendar visual.
A church website homepage featuring menus, schedules for adult education, youth Bible study, worship services, information about the church's mission, ways to get involved, donation options, mission opportunities, and church calendar visual.
A church website homepage featuring menus, schedules for adult education, youth Bible study, worship services, information about the church's mission, ways to get involved, donation options, mission opportunities, and church calendar visual.

Process


Research + Content Development

The project began with a detailed analysis of the existing website. This led to a clear understanding of the content development needs and how to organize it.

I then developed the overall structure of the website, specifically which pages to define the navigation and how the content would flow on each page.

The structure of the website needed to provide clear pathways for users to quickly find key information while reducing cognitive load.

A presentation slide titled 'Home Page' with a layout of a website structure for Prince of Peace Lutheran Church, including sections for navigation, hero, mission, ministry preview, contact, current events, financial gifts, and footer, described with bullet points.

Visual Styling

I developed web friendly logos from their existing logo. This included their logo mark paired with a clean font. For text on the website, I utilized Poppins and Urbanist which are modern and easy to read.

I also utilized the colors from their logo for the color palette

The logo mark for Prince of Peace Lutheran Church that includes a cross, an outline of a dove, and several circular shapes in shades of blue.
The logo mark for Prince of Peace Lutheran Church that includes a cross, an outline of a dove, and several circular shapes in shades of blue plus Prince of Peace Lutheran Church in horizontal sans serif font

Tech Support

I spent time interviewing the people who would be managing this website upon hand-off. This led me to choose Squarespace as the best option for content hosting.

Once the website was built, I coordinated with their existing domain host to update the registration, unlock the domains, and successfully transfer them to Squarespace.

They need to update a variety of content on a weekly basis and felt a bit concerned about learning a new tool. I created a series of video tutorials targeting the exact processes they’ll need to make easy, frequent updates without the guesswork.

After


From one run-on page to a robust series of informational pages with intuitive navigation. This website showcases the welcoming energy of this organization along with the variety of activities available for all ages. While this site contains ample information, it is organized in a way that makes it available while reducing the cognitive load required from the visitor. The refined color palette and updated fonts are soothing to look at and easy to read, for all ages.

Screenshot of Prince of Peace Lutheran Church website homepage with information about worship times, church programs, recent events, and location.
Screenshot of Prince of Peace Lutheran Church website homepage with information about worship times, church programs, recent events, and location.
Screenshot of the Prince of Peace Lutheran Church website homepage featuring service times, community events, ministry programs, and church location details.
Screenshot of the Prince of Peace Lutheran Church website homepage featuring service times, community events, ministry programs, and church location details.
Screenshot of the Prince of Peace Lutheran Church website events page featuring an embedded calendar, links to more information and a photo of a worship band and people singing
Screenshot of the Prince of Peace Lutheran Church website events page featuring an embedded calendar, links to more information and a photo of a worship band and people singing
Screenshot of the Prince of Peace Lutheran Church website Giving page with information about different types of donations, a description of what the donations go for and their organizational partners
Screenshot of the Prince of Peace Lutheran Church website Giving page with information about different types of donations, a description of what the donations go for and their organizational partners
Screenshot of the Prince of Peace Lutheran Church website, showing sections for Ministries + Outreach, Children + Youth, Adult Ministries, and Church + Community, with images of church interior and community events.
Screenshot of the Prince of Peace Lutheran Church website, showing sections for Ministries + Outreach, Children + Youth, Adult Ministries, and Church + Community, with images of church interior and community events.

Results


Modern Showcase

The staff and member of Prince of Peace Lutheran Church now have a website they are truly proud of that welcomes all people to their organization.

The content is current and reflects who they are now. It is a vital information source for the wide range of members and new visitors that need to find information specific to them.

Easy to Manage

This website is easy to manage in all aspects. With the right tools and support, the website is easy to update and can be managed by the current staff or volunteers.

Custom tutorials provide specific resources for anyone needing to make updates, regardless of technical abilities.

If you’re ready for these type of results, lets talk

I want to know your business goals and website pain points. Book your completely free, no pressure discovery call to see if we are a good fit to collaborate.