OVERVIEW

My goal was to simplify the website's original design

Background

Shepherd LA is a ministry initiative of Bethany Baptist Church that aims to connect, support, and encourage LA pastors.

Recognizing the need for improvement, I decided to revamp their website as part of a student project for Designlab. The original website lacked the visual, hierarchical, and responsive organization that users expect from an informational website. This makes it challenging for users to effectively navigating through it.

My goal was to simplify the user's experience of learning more about Shepherd LA's vision and facilitate communication with the organization.

EMPATHIZE

People need bite-sized, digestible content at first glance

Usability Testing

I conducted four usability tests with individuals currently affiliated with a religious organization. My aim was to observe their interactions with the original design and gather their feedback, which would inform the redesign process.

I noticed a common behavior among all participants: they tended to quickly skim through the pages, seeking high-level takeaways. Additionally, they mentioned their inclination to skim through the home page and 'about us' content before delving deeper.

When users visit an organization's website for the first time, they seek to gain a solid understanding, even with just a quick skim.

However, my participants struggled to locate key information when quickly scanning the Shepherd LA website. This issue is evident in pages like the home page, which plays a pivotal role in shaping first impressions and facilitating deeper engagement.

Original home page

Users specifically pointed out the abundance of content on the home page, which made it difficult to discern the essence and mission of Shepherd LA due to the inconsistent visual hierarchy.

Affinity Mapping

Quotes from user interviews

After synthesizing my findings, it became evident that the overall sentiment regarding the original design was that the pages lacked visually consistency and did not present information in "bite-sized pieces".

DEFINE

Users typically skim through a website before proceeding with further actions

User Personas

Both these personas require concise, high-level information about the organization before taking further action, whether it be reaching out to the organization or telling others about it.

Phoebe's user persona

This is Phoebe. She represents individuals who are constantly looking for opportunities to better themselves and others, whether through organizations, conferences, or programs. They are always booked and busy, so they prioritize efficiency and simplicity.

Noah's user persona

And this is Noah. He represents those who have relocated because of a job and find the transition to be difficult due to a lack of connections in their new city. They are looking to connect with a club or organization whose members share his vision and values to build meaningful relationships.

IDEATE

Renaming and adding new navigation links to fit a user's mental model

Card Sort

To redefine the information architecture, I conducted a hybrid card sort incorporating both new and existing items from the current website's navigation. The results are as follows:

Results from card sort

Before performing the card sort, I made hypotheses regarding how my users would group items together (shown in burgundy). There was unanimous and strong agreement for all items except "Contact Us" and "Church Locations".

7/10 participants placed "Contact Us" under "About Us", which means that it fits within most users' mental models. Therefore, I decided to leave it as is.

5/10 participants placed "Church Locations" under "About Us". I agreed, since locations seems more like a description rather than a resource, so I made the change (shown in teal).

Sitemap

With the findings from my card sort, I created a sitemap.

New sitemap based on card sort findings

Breaking up the navigation in this manner supports the typical user flow, which involves initially browsing the home page, skimming through the 'about us' content, and then delving into other sections (in this case, events and resources).

DESIGN

Redesigning by retaining the original content but optimizing visual hierarchy

Below are a few of the low-fidelity desktop and mobile sketches that helped me build the foundation of the high-fidelity wireframes.

Home Page

"Contact Us" Page

Events Page Overview

Upcoming Event Page

Information About Co-op Page

TEST & ITERATE

My participants needed more clarification, context, and information

I conducted four usability tests on both desktop and mobile with my redesign. The following is more of what my users needed (irrespective of device).

"I need more clarification"

1 participant mentioned that, after scanning the home page, it was still not clear to them what Shepherd LA exactly was. This is crucial to fix, since we want users to be able to have a good understanding of the organization at first glance. I modified the copy to add more information and clarity.

I also moved the “contact us” CTA to the hero, since 1 participant mentioned that it was easy to miss. The ability to contact is the whole point of this website, so this was also important to fix.

Version 1

Version 2

"I need more context"

I added a short summary of the session, since users mentioned that they didn't want to skip through the entire video to find out what the conference was about.

I also added photos of the event so that users have a better understanding and visual reference of what the event entails. Photos are effective for quick scans of the page, which is what users do initially when trying to ingest information for the first time.

Version 1

Version 2

"I need more information"

The general consensus was that certain tidbits of information were missing that would be helpful — in this particular iteration, the dates and location. I added these to the hero section so that these are obvious at first glance. I also moved early bird pricing information to be sticky to make the hero section less cluttered.

Version 1

Version 2

THE FINAL DESIGN

A "before-and-after".

View desktop prototypes View mobile prototypes

I have chosen to demonstrate the "before" and "after" with desktop designs. The mobile designs are of similar nature. To view the wireframes and prototypes for mobile, please click the "View mobile prototypes" CTA above.

Home Page

Original

Redesign

Why this page?
It stems from my usability tests. I found that the home page is the first page that is scanned. The first impressions of the home page is what dictates whether or not a user will continue to click through the rest of the website.

Pages Under "About Us"

Original

Redesign

‍Why this "Foundation Statements" page?
It stems from my research. All my participants mentioned that, when first learning more about an organization, they look mainly at the mission statement and/or beliefs to get a better understanding.

Original

Redesign

‍Why this "Meet the Co-op" page?
During my usability tests, all participants expressed an interest in seeing the faces of the organization. Putting faces to the name "Shepherd LA" makes the organization seem more welcoming and personable.

Original

Redesign

‍Why this "Contact Us" page?
It addresses Noah's persona's needs of wanting to get in touch with an organization. Having people get in touch with the organization is also one of the main goals of the Shepherd LA website.

Pages Under "Events"

Original

Redesign

‍Why this event overview page?
This addresses Phoebe's persona's pain point of needing bite-sized information of events that an organization offers.

Original

Redesign

‍Why these event pages?
These address Noah's persona's needs of wanting to find out about events and conferences that are hosted in hopes of getting connected with other individuals who have similar beliefs.

REFLECTIONS

Visual and informational hierarchy really make a difference

What I learned

It was interesting seeing how much of an impact visual and informational hierarchy make on a user's ability and desire to navigate through a website. A lot of my participant's feedback were pretty consistent and similar across the board! This helped me to see how important designing with this in mind is, and gave me a greater appreciation and keener eye for clear, consistent hierarchy.

Next Steps

I plan on implementing these changes. And in the case that another developer can take on this task, I created a design handoff to seamlessly hand over this work.

View my design handoff here.