IA Reboot
OVERVIEW
An evaluation and restructuring of an Episcopal parish’s website information architecture.
METHODS
Stakeholder Interview | Heuristic Evaluation | Open Card Sort Competitive/Comparative Analysis | Tree Testing | Site Mapping
Wireframes | Prototypes | Usability Testing
TOOLS
Miro | Squarespace
Figma | Photoshop
Illustrator | G Suite
ROLE
UX/UI Designer | UX Researcher
TIMEFRAME
Part-time, 6 weeks
INTRODUCTION
The Problem
This project’s focus was to evaluate and improve the information architecture (IA) of the Cal/St.G website, elevate the site’s usability, and highlight the parish’s unique personality throughout the entire digital experience.
The Opportunity
Calvary-St. George’s is a vibrant, active, and growing Episcopal parish, that uniquely blends historically-grounded thinking with creative expression to proclaim a both relevant and orthodox Gospel message.
APPROACH
Discover
Stakeholder Interveiw
Heuristic Evaluation
Competitive Analysis
Comparative Analysis
Define
Open Card Sorts
Tree Tests
Data Analysis
Proposed Site Map
Design
Design Studio
Mid-Fi Wireframes
Mid-Fi Prototype
Usability Testing
Deliver
High-Fi Wireframes
High-Fi Prototype
Usability Testing
Stakeholder Presentation
STARTING
Stakeholder Interview
Two key themes that emerged during my stakeholder interviews were: 1) the site should be easy to use and present frequent and infrequent content to users intuitively, and 2) effectively capture and communicate the parish’s unique personality.
Heuristic Evaluation
A heuristic evaluation of the existing site revealed several structural flaws, specifically: 1) the site’s current IA made locating information and content difficult and confusing, and 2) the site’s overall visual hierarchy had typographical irregularities and lacked brand logic.
Competitive/Comparative Analysis
Looking at the competition, I evaluated the IA & UX design of other New York area churches (Redeemer, Hillsong, and The Cathedral of the Incarnation), as well as a comparator organization with parallel goals and constraints of the parish (The Metropolitan Museum of Art).
RESEARCH
Open Card Sorts
Because of the existing site’s disorganization, I conducted open card sort sessions with stakeholders in order to gain insight into how they perceived the parish’s many programs and ministries, looking for patterns I could use to inform a new site IA.
Tree Testing
After synthesizing the card sort results, I tree-tested two proposed IA’s with two user groups (new users & supers users) to evaluate their intuitiveness. Both tests consisted of 20 users, and I adjusted the second tree test’s IA to reflect insights gained from the first.
INSIGHTS
New Site Map
To best illustrate the tree test results, I crafted a new site map, eliminating and shortening several of the existing primary navigation categories, while introducing three new ones: “Worship,” “Music,” and “Partners.”
DESIGN
Mid-Fi Prototype
Guided by the new sitemap, I created a mid-fi prototype using traditional drop-down menus for the primary navigation. For the page content, I cropped and rearranged screenshots of the existing site, overlaid new heading and body text, and introduced more branding color and photography.
Hi-Fi Prototype
Though largely effective, two themes emerged from the mid-fi tests (largely from new users): 1) the drop-down menus felt overwhelming, and 2) the parish’s personality still felt opaque. Seeing an opportunity to address these results in one move, I scrapped the drop-down menus and replaced them with photo-driven, clickable tiles.
USABILITY
The Test
Testing the hi-fi prototype with both user groups, I found:
8/10 users were successfully able to complete the test’s six tasks: 1) reserve tickets for a concert 2) inquire about film rentals, 3) download an online service bulletin, 4) register for in-person services, 5) donate to the parish, and 6) locate the parish’s blog
The Verdict
Overall, users rated the prototype’s ease of use as 4.5 out of 5, and their satisfaction level as 4.3 out of 5.
These scores were felt great, but I decided to make one last adjustment to the prototype based on feedback from the tests, narrowing the masthead and hero image of each page to make scrolling down for further content more intuitive.
PROTOTYPE
CONCLUSION
So What?
By thoroughly gathering information from stakeholders, and testing proposed site maps and prototype designs with two user groups throughout the entire project, I feel confident that I was able to significantly improve Calvary/St. George’s website usability and emotional communicability for new users and current users alike.
What’s Next?
As there are always additional ways to improve and further develop designs, for this project I see future opportunities to:
Integrate Google Maps where location plays an important role in communicating information to the user (most relevant after COVID-19 risks are reduced, and restrictions are lifted).
Further develop the site’s visual experience and delight by introducing both still and animated illustrations
