top of page

St. Stephan's Parish

Desktop version
Mobile version
Problem

​

A Catholic Church located in a Boston suburb was in dire need a website makeover. Outdated and organized more like a newspaper rather than a website, it was an unreliable source of information for parishioners.

​

Solution

​

Create an effective website that provides parishioners a way to easily access relevant information.

​

My Role
​

This was a freelance project. I took on initial interviews, wireframing, usability testing, prototyping, information architecture and responsive design.

​

Duration

​

2 months

Initial Research

I spoke with a few members of the community to discuss their feelings about the current parish website:

 

  • How do they feel about the current website?

  • What information do they feel is missing or superfluous?

  • What other resources are available besides the website?

  • No mobile version
  • Difficult to navigate
  • Too much extraneous information
St. Stephan's Parish

Before

Personas

Martha persona

Martha is a dedicated mass attendee who needs an easy way to look up information so she doesn't forget.

Walter persona

Walter is a church volunteer and guitar player who needs an easy way to obtain schedule information because he needs to know when his services are needed.

Sitemap

To create the sitemap, I scoured through the current website to I determined what information to keep versus discard. I then organized everything into categories.

Sitemap

Wireframes 

  • Mobile-first approach as many people in the community primarily access the internet via cell phone

  • In-demand information is on the homepage or linked from the homepage

  • Ability to switch languages given bilingual services

  • Responsive design

Mobile wireframes
Desktop wireframes

Usability Test

I took both the desktop and mobile wireframes and created low-fidelity prototypes to test with users. The desktop version was used with two users while the mobile version was tested with three.

​

​

Research Questions

  • Are there any information or functions missing from the website and, conversely, is anything superfluous?​

  • How easy is it to locate schedules, services, and events?

  • Is the method of contact easy to find and sufficient?

Conducted onsite

Moderated study

5 Participants

30 minute duration

Findings

1

Create method of booking appointments online instead of having to call during limited business hours.

2

Include multiple points of entry to access contact information.

3

Reorder schedules so the complete set is entirely visible. 

UI Design

Mobile mockups
Desktop mockups

  • Used color scheme from the archdiocese website in order to create cohesiveness between sites

  • Expanded view of videos and images in desktop view; hidden in mobile view

  • Created logo to help create brand identity

bottom of page