Basilica - Website Design

Project Overview

About the client

The Basilica of the National Shrine of the Immaculate Conception in Washington, DC, is the largest Roman Catholic church in the United States and North America and is one of the ten largest churches in the world. This architectural wonder is the home to over 70 chapels and oratories from many different cultures around the world, as well as houses the most extensive collection of contemporary ecclesiastical art in the world. The Basilica attracts close to one million visitors per year of locals, pilgrims, and tourists. Its mission is to provide patrons a place of worship, pilgrimage, evangelization, and reconciliation, as well as spread the word of God.

Summary

OPUSfidelis — a communication and marking agency — brought me into their team to work with their client on developing the Basilica's new branding and website overhaul. The project consists of multiple phases, and each stage requires specific skillsets and teams to accomplish. My role in this phase was to design the new web site's user interface that bridges the gap between the client's needs as well as the user's.

Objective

The objective of this form is to use the data collected by OPUSfidelis during the discovery phase (user research, messaging, brand identity development, etc.) and develop a comprehensive structure and design the website. This includes aligning the client's objectives with the user's goals, create the user persona and journey to efficiently map out the site, and structure the information for usability and accessibility. I also make recommendations on the technology needed to develop specific features and design the website's interface and pages with the brand's identity guidelines.

Project Year

2018

My role

User Experience Designer
Product Designer
WordPress Developer

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator
Axure RP

Team (OPUSfidelis)

Eric Streiff - Project Manager
Aubrey Lindberg - Digital Engagement Director

Discovery

The first thing I did in our kickoff meeting was to understand the main objective and also what we're working on. We went over the project's aim, requirements, features, researched data, and timeline to determine the direction or our best course of action. I also did my own research on top of theirs and made recommendations on the technology, app, plugin, framework, etc. that could be used to efficiently develop the requirements or features.

Gather Website Content Requirements

The new website's requirements are a combination of their current features and content that they used to have on their previous website, as well as the new features and content they want to have on the new site. Gathering the initial requirements gave me the initial idea on how to structure the new website.

Mass

Special events

Music

Donate

Shop

Cafe

Volunteer

Rector's Message

Email newsletter

Pilgrimage

Tours

History

Spiritual support

Direct mail

Social media

Mass broadcast

Community

Blog

Identify Main Tasks with Required Content

After gathering requirements, the next step was to analyze and group them according to their type of action or task. This organization helped simplify the process for later development.

Expand and Group Content

With the help of the team, we were able to break and expand the content requirements down to make them more specific. This process will help keep the content pages too broad and too large.

User Persona Development

Once we had a clear understanding of the project's features and content, we then turn into an agreement that the users are and their needs.

Identify User Types

Before joining the team, the team already conducted user research, interviews, messaging, and brand identity design. Using their collected data and their identification of the user types, I was able to understand and further expand on the user's primary interests in alignment with the content requirements and tasks.

Identify Engagement Opportunities

In addition to identifying the user types, we also identified their areas of interest and potential interests in alignment with the website's content requirements.

Develop User Personas

Building the persona for each user type enables us to better understand their needs, primary goals, and areas of interest.

User Tasks Flow

After developing the user personas and their areas of interest, the next step was to identify the natural flow or series of steps the users need to take to access certain information from the website.

User Journey and Mapping

Using what we've learned after developing the user tasks flows, we were able to merge them into groups of actions or tasks and map out their journey from start to finish.

User Journey

After understanding the user task flows, the next step was to merge them into several groups of actions or tasks to better understand how to map out the website.

Develop the Sitemap

After developing the user journey, I was able to create the sitemap that combines all of the possible or potential pages and their groups. However, the sitemap doesn't reflect how the user interacts with the site but the organization in the backend.

Design the Navigation

Combining what we've learned from the development of the user journeys and the sitemap, the next step was to design the navigation map. This design creates a clearer picture of how the user interacts with the information on the site. It also leads to how to structure the pages.

Wireframe

Designing the wireframe allows us to focus on the basic structure of the site without the distraction of the aesthetic elements.

Sketching Wireframe Modules

Since the website was estimated to have hundreds of pages with content that was still unknown to me then, I figure that the best approach was to create a more modular design that can be reused throughout the site. Doing a rough sketch of the wireframe modules allows me to understand what and how many varieties I need to design.

Digital Wireframe Modules and Pages

After sketching the wireframe modules, it made it easier for me to get a clear picture of what I need to design digitally. Doing so, I was able to quickly build the wireframe of the pages by reusing the modules in different sections of the page based on their content.

Visual Elements

Before I joined the team, the brand identity design and the messaging was already established. Reading the brand guidelines, it made it easier for me to understand the direction on what type of visual elements I need to use to design the website. However, the challenge here was that there were no guidelines on how to create the website. I had to really understand the messaging and what elements to use (and not use) to effectively integrate the brand with the website's design.

Mockup Design

Using the visual elements created by the brand identity designer, I was able to integrate their brand guidelines into the wireframes of the site. This adds colors and life to the design of the pages.

Designing Responsive Modules

To improve the website's usability, it was important for the modules to be responsive. This is to ensure that they're accessible in any device.

Designing the Pages

One of the last steps of this phase was to design the website pages. The process was built up from ideation to develop using every element and knowledge we gathered and learned throughout.