User Research, Competitive Analysis, Heuristic Analysis, Information Architecture, Low Fidelity Mockups
Midway Baptist Church is a growing medium sized church in rural Pilot Point, TX. The last 4-5 years have seen big growth in church membership, but their website had not been updated to reflect the increased needs of their membership. Frustrations with the site had been growing for a while now, and the church reached to myself and another developer, who would be managing the mobile app development, to modernize their digital presence.
My Role
I was tasked to be the primary UX Designer, in charge of refashioning the information architecture, interactions, and UI of the church site.
The Challenge
Create a smooth and seamless experience that is inviting to new members by providing clear and easy access to important information.
Discover needs
My first task was to understand any issues with the flow, layout and design of the current website. I performed an informal heuristics review, and came to the following observations:
Visibility of Systems Status
Although each page was identified, it was not evident where I was at any given time because the page names were not visible.
Findability
The home page for the website was very bare, with no clear signifiers as to what the user’s next step needed to be. Any useful features were hidden behind an out-of-the-way Menu button.
Consistency
Although the navigation was not intuitive, it was consistently non-intuitive, so at least once the user remembered how to navigate the site, they wouldn’t be faced by a completely different interface or process.
Recognition, not Recall
I had to constantly remind myself to click the menu button to navigate to a different page. It was not an intuitive process at all.
Overall, the site felt clunky. The navigation process was disjointed and did not provide any sense of context or flow for the user.
Understand users
In order to identify the primary pain points for our users, I performed some guerilla testing by having several users navigate the site while I observed and asked contextual questions.
“Can you get back to the previous page without pressing the back button?”
“How would you find the church service times?”
This exercise confirmed my observations from the heuristic review, especially the lack of useful navigational context.
Gather user data
I gathered some more quantifiable data by devising and deploying a short survey that I emailed to one of the small study groups. I asked the members for consent to be surveyed, then sent the survey to the mailing list for the group. I received back 21 responses out of 60.
Some of the results surprised me:
Reasons for visiting the site centered around children’s events and ministry information.
However, this survey was completed by current members, so this data may not be quite as applicable to new or prospective members.
The question “If you have visited the site, did you achieve your goal for being there?” was answered “Yes” by over 68% of users. I expected the opposite.
I now believe that I did not provide all the appropriate answer options, as there was no “Yes, but it was difficult” option.
Overall, I learned that the quality of answer options can change the results of a survey. Also, I should have sent an alternate survey to non-members, but time constraints kept us from doing much more research. I plan on using these results to inform my next set of surveys.
Understand competitors
I performed some competitive analysis by navigating to the websites of several medium and large churches in the DFW area and analyzing what they were doing in terms of web presence.
I found that the majority of these churches were already utilizing responsive, Bootstrap-style designs that employed basic usability guidelines to ensure their users found the information they were looking for. The majority had three main items available on the home page: service times, weekly sermon theme, and a donate link.
...
Now that I had gathered this information, I felt prepared to begin designing the information architecture structure of the site.
Define priorities
During my research, I learned that Midway church is organized around 4 doctrinal tenets:
CONNECT
Social engagement within the church community
GROW
Small group bible studies and LifeGroups
SERVE
Volunteering activities, within the church and externally with partner agencies.
GO
Missionary activities, both national and international.
I wanted to make sure that these 4 tenets formed the core of the web user’s experience, because they were priorities to the leadership and mission of the church.
The majority of the current site content revolved around these 4 categories.
Define structure
One of the big issues with the site was the way in which content was organized. Using a highly siloed vertical structure, related sections were separated from each other, requiring the user to continuously click the “back” button to access the next related section.
After a thorough analysis of the site’s current information architecture layout, I created a site map that reflected the dysfunctional organizational scheme.
Since each page was loosely grouped within the four doctrinal sections, I created two related structures: the basic navigational menu and the pages related to the four tenets.
I sketched out my ideas using Paper by 53, then produced a high fidelity information architecture flowchart, using Sketch App, that displayed main functionality and content for each page, as well as several CTAs for key functions like joining an introductory meeting or registering for a class or study.
Initial IA sketch
Final IA sketch
I performed some quick guerilla testing on the final layout chart to validate section labeling and acceptance.
Interface mockups
At this point, I needed to present my designs and get buy-in for the structure from the primary stakeholders; our stakeholders preferred to see more polished versions instead of wireframes, so I made some home page mockups using Sketch 3. Adam and I iterated through several versions of the UI.
Next steps
My next steps for this project involve creating low fidelity mockups for the main pages and conduct usability testing to validate our decisions and help us fine tune the visual design.
The project has been currently placed on hold until completion and adoption of the mobile app.