Interfaith America Responsive Website Redesign

Project Overview
Interfaith America is a non-profit organization dedicated to promoting religious inclusion in public life while operating in higher education, civic and corporate spaces.

Goal
Our goals are bring design solutions of desktop and mobile screen to a stakeholder based on user research. How might we make Interfaith America’s website easy to navigate and more actionable so that HR decision makers can find workplace Interfaith DEI training?

The Process

User Research Plan
We like to understand how human resources decision makers understand a variety of religious traditions, and how they seek this information.

Target Users:

HR Professionals and Managers

Research Question:

What level of importance/value do companies place on supporting religious diversity and practices in the workplace?

User Research Finding

Empathy Map:

User Persona:

We created a user persona to help clearly understand users’ considering frustration and try to find a solution to their problem.

Competitor Analysis:

Major Learnings:

Interfaith DEI training is not very common.
Some sites had a lot of videos but information was confusing and hard to decipher.
Many sites did not have direct staff to contact, which made it hard to determine interfaith expertise and establish trust from web presence.

User Journey Map

UX Scenario:

Farah wants to hold an employee forum/workshop focusing on religious inclusion in her company, but does not feel comfortable creating it entirely on her own. She needs to seek an outside resource for guidance and turns to the internet for help.

Usability Test Result of the Current Website
We conducted 3 usability tests of Interfaith America website to find how easily users can identify Interfaith America’s services and obtain them.

I Like, I Wish, What If

Feature Prioritization Matrix

Three Possible Solutions
Following our test sessions and competitor analysis we came up with three possible solutions to solve users’ confusion and design issues.

Current Website

Balance images and font sizes for easier browsing
Make navigation attractive and easier on the eyes
Shorten pages to reduce workload in finding information user seeks

Card Sorting
Since we decided to create a new navigation, we conducted 3 card sorting exercises for the navigation of the website to organize, design and improve the information architecture of the site.

New Sitemap

Sketch and Wireframe

Low-fidelity Usability Test
After we made the wireframe, we performed 2 in-person tests with 2 tasks to see how informative and accessible the site is for our user. The key findings of the user tests were that we need to change the layout of the page to provide a clear path for the navigation, and highlight the “Contact” button or placing contact CTA in the hero section. Also, we decided to create two most important screens, landing and Interfaith Religion at work screen with respect to our user flow.

Style Guide

High-fidelity Prototype Usability Test Analysis
After through 5 high-fidelity usability tests, we iterated the second item of the Interfaith at work to Diversity, Equity and Inclusion. We observed users love most of the new navigation and design.

Hi-fidelity Prototype Live Preview

Navigation

Mobile High-fidelity Prototype
Live Preview

Final Thought

We set out to make the Interfaith America website:
More functional/easy to navigate
More consistent with stronger brand identity through the logo, animation, graphics, typography, color

Next Steps
Work on creating a flappable pdf magazine for all Interfaith America Magazine articles