Home

Live Project | Website Redesign | Focus on Navigation

Cathedral Website Redsign

The Problem

Working closely with The Cathedral of St John the Baptist in Norwich, I tackled redesigning their website to help increase visitor numbers, with a particular focus on navigation as this was highlighted as a key pain point in my research.

The Method

Existing site expert review
User testing current site & interviews
Card sorting task: considering navigation
Competitor analysis: exploring common themes
Design: site map, sketches and wireframes
User testing & iteration

Research:

Expert Review of the Current Site

I began my research by creating an expert review, analysing their current site, considering the usability heuristics, and pinpointing the main problem areas. Exploring each page of the Cathedral website helped me to thoroughly familiarise myself with the current flow and issues at hand.

Homepage: Where is the visiting information? Why would I visit? What is there to offer?
Visit Us: Only contains car parking information and difficult to find

Consistency and Standards: inconsistent hierarchy, layout and interactions
Overall frustrating and overly complicated user experience

User Testing & Interviews

I wrote a set of tasks for each user to run through on the existing Cathedral site, through this process it was shown that navigation was a key pain point for users. I tracked users navigation pathways as well as asking questions throughout to understand their perspective as well as their experience.

I split my insights into five key areas:

Mapping my user testing insights

How are users feeling?

"As a person that doesn't attend the religious side, I find it overwhelming, it feels like it's meant for a group of people I'm not a part of"

"Makes me think… could I possibly visit if I'm not attached to religion?"

"It was actually quite stressful to use, genuinely frustrating, I can't find anything"

Establishing Main Goals for Redesign

Create a welcoming environment: utilise inclusive and non-religious language, particularly in 'Visit Us'
Improve navigation & hierarchy: make it easy and intuitive to use & find visiting information

Card Sorting

Through the testing process I discovered the difficulty users were having with completing tasks due to confusions with navigation, often becoming incredibly frustrated or giving up altogether. From this I decided to look further into the navigation by running an open card sorting task.

Key Insights:

Users always grouped Tower Tours, Shop, Café, Library and Cathedral Garden but were unsure what to label this section
Users frequently asked questions about headings that utilised religious language

Frequently used headings & frequently grouped topics

Competitor Analysis

I completed an extensive review of other Cathedral and Church websites, particularly focusing on how they design their navigation and visiting pages.

Section of competitor analysis

Common themes in competitor analysis

I noted some of the successful elements that commonly appeared in my competitor research to help inform my design

Use of large imagery
Utilising the shapes and patterns of the Cathedral, clean but historic has the most impact
Key info for visiting on Homepage, include navigation to key pages
Simple interactions, don't overcomplicate, consider audience
Hierarchy and legibility of text, clear headings, text split into consumable sections
Essentials in the nav bar and more in menu, hover feedback for nav
Donation button visible on all pages
Scannable timetables for services

Design Process:

Site Map

Using what I had learned through user testing and card sorting, I created initial navigation groupings and a site map, which then developed throughout the testing and iterating process.

Initial Sketches

Sketching is an important part of my design process, noting any key visual ideas and features before beginning to work on wireframes

Wireframes

Interactive Prototype

Created in Figma

User Testing & Iterating:

User Testing

I conducted moderated user testing on my interactive prototype, running the same tasks I had set for the current site so that I could compare the navigation pathways, time spent on the site, and users overall experience completing these tasks

Iterating Based on Insights

An unexpected pain point that arose during testing was that users were missing the 'Donate' button in the Navigation bar, and that in highlighting it I had actually created an element users were overlooking as decorative. Users would often look instead to the 'Community' heading to find Donate. I worked to correct this by editing the display of the Donate button in the nav bar, and also adding it to the community tab, and then I completed further tests to evaluate whether these changes were successful.

How are users feeling?

"The website reflects the energy of the Cathedral. It's professional, but doesn't feel like a separate community I'm not a part of, it feels like I could be involved"

"I didn't know they did tours which is cool, it would be a good place to go with my family when they visit, I’m definitely more likely to visit now"

"Everything was easy to find, intuitive and straightforward"

Comparing Navigation Pathways: Existing Site vs Redesign

I compared the navigation pathways for users completing tasks on the existing site vs the redesign. As shown below, the time spent on the site, along with the amount of incorrect pathways followed, were both cut down by over half in the redesign.

Comparing navigation pathways for three of the tasks

Final Prototype

The Redesign, Diving Deeper:

Homepage

Current Site

Missing important information such as opening times
‘Welcome to all’ hidden in paragraph
Where to go if you want to visit? Why visit?
‘Visiting Us’ hidden at bottom of page, not in nav bar, users struggled to find it
'Visiting Us' only has parking info