A responsive website redesign for a local nonprofit, to improve user experience, ensure brand alignment, and increase site traffic.
Objective: Responsive website redesign
Role: Product Designer, Product Researcher
Timeline: 2 weeks
Tools: Figma, Figjam, Google Meet
THE MIX Church is a local church community located in the city of Baltimore. Their mission is to encourage people to live a life of purpose and passion. The church also prioritizes serving the local community with the Baltimore Dream Center, giving out free food, clothes, and resources to those in need.
Background
The church is currently rebranding; updating the logo, font library, and marketing styles, but their website is not reflective of the new changes.
They have also noted that there is a significant drop in activity beyond the home page, which may be due to a poor user experience with the current design of the site.
There is a concern that, with the current design of the home page, users are not leaving the site with adequate information about the church.
Problem
A redesign of THE MIX Church website with a fresh and updated UI design that reflects the church’s new branding.
Optimize the home page to have key information about the church readily available for the user
Offer links to the services that are provided by the church.
Clean, consistent responsive design throughout all website pages
Invite the user to increase their engagement with the church.
Solution
Process
Empathize
First, I needed to get a firm understanding of the potential issues with the website. I knew that the church highlighted some issues, but I also needed to know what problems users were running into, and take a closer look at the industry as a whole.
Determine user’s needs, expectations, and pain points when navigating through THE MIX Church website
Discover current statistics, marketing updates, and business goals for THE MIX Church
Analyze strengths and weaknesses of competitors
Goals
Competitive Analysis
Stakeholder Interview
User Interviews
Methods
I went through the site, taking note of some key pages and their current problems.
Initial Assessment
I started my research by reviewing 4 direct competitors to analyze how other churches were designing their websites and get a better sense of what my designs should include.
Competitive Analysis
Ensure that key information, such as the location of the church, Sunday service times and church beliefs are easily accessible
Maintain a consistent design language throughout the website
Ensure that users are able to easily access many of the services (ex. Outreach, Events, etc.) that the church offers from the home page
Design a simple but brand-distinct UI
Key Takeaways:
I scheduled a meeting with a representative from the church to identify the website problems they have noted, as well as their goals for the website redesign and their branding guidelines.
Stakeholder Interview
Key Takeaways:
PROBLEMS
There is a stark decrease in the amount of hits on the site beyond the home page
The site is not reflective of the new branding, and the personality of the brand is not adequately portrayed on the website
GOALS
Attract their target demographic (young, vibrant, urban young adults and young families), resulting in increased attendance and engagement with the church
Increase site traffic
Ensure that users feel inspired, seen, and represented on the church website
Ensure that the site reflects the church’s branding changes
IMPORTANT INFORMATION
About 80% of users access the site on a mobile device
TIMELINE
Flexible, but the church would like to have the new designs launched by September 2024.
I conducted 5 interviews with people ages 23-54, both virtually via Google Meet and in person. These interviews allowed me to assess user’s current opinions on the website, as well as their needs, pain points, and desires when accessing a church site.
User Interviews
I analyzed the data from my user interviews with affinity mapping. Afterwards, I noticed some clear patterns based on user feedback.
Affinity Mapping
Key Takeaways:
NEEDS
Easily accessible key information present upon opening the home page, such as location, service times.
Easy ways to get involved in community at the church, and get integrated into the church
Easy ways to find out more about the different ministries offered at the church, such as childcare, outreach, baptism, etc.
PAIN POINTS
The website feels outdated, and doesn’t reflect the personality of the church
The use of the brand colors and fonts are distracting
There is not enough information presented for key ministries, such as childcare and outreach
DESIRES
Brighter, updated photos and graphics
More information about ministries in general and how to get involved
Streamlined process of obtaining key information about getting into community at the church
Updated UI to feel more modern and urban
Define
Design Opportunities
Based on my research, I defined the two major problems that I would be designing solutions for.
I defined my target users by creating primary and secondary user personas. I referred back to these personas when designing, in order to ensure that my designs were intentional and impactful.
User Personas
I defined my user, business, and technical goals, in order to ensure that all needs would be met with my design solutions.
Product Goals
Ideate
I spent time thinking about potential solutions to my design problems. I narrowed down my options, and chose the most user friendly and intuitive solutions.
Brainstorming
Before I started designing, I prioritized the most important features to focus on, based on research and product goals. Ultimately, the entire website will be redesigned, but I focused on Must Haves for this phase of the project.
Feature Roadmap
I created a proposed sitemap to suggest a new way of organizing the vast amount of information being presented on the site. The sitemap was discussed with the stakeholders, who considered it and would update me if it was approved.
Sitemap
I developed a user flow for a new or existing churchgoer looking to sign up for a MIX Group as a way of getting into community within the church.
User Flow
Prototype
Low-Fidelity Wireframing
I started by sketching some ideas for the design of the home page and the MIX Groups page, as these were key screens for my user flow, which are highlighted below. I also sketched some ideas for the other “Must Have” pages on my feature roadmap.
I focused on mobile first, since roughly 80% of users that access themixchurch.com are doing so on a mobile device.
Mid-Fidelity Wireframing
After sketching my ideas, I digitized them to get a better idea of spacing, sizing, and formatting, keeping my user personas and product goals in mind.
The church provided me with branding guidelines to refer to when designing, complete with typography, color palette, logo and tagline designs.
Branding
High-Fidelity Wireframing
I went on to high-fidelity wireframing, applying the brand colors, fonts and updated photos. I aimed for an urban and welcoming feel, while maintaining a clean UI.
Before mocking up my desktop designs, I set up a meeting with the church to discuss the designs with them, and ensure that their vision and needs were being met. Overall, the designs were met with approval. There were a few changes that they wanted me to implement.
Add an events section, MIX Teens section, and more information at a glance about the pastors.
Restructure the “Get in THE MIX” section to “Do Life With Us”, featuring these 4 tenants:
Know God - attend a service
Find Freedom - join a MIX Group
Discover Purpose - attend Growth Track
Make a Difference - join the Dream Team
Change the title of the outreach section to “Serve Our City”
Remove “Baptism” and “Prayer” buttons
Stakeholder Meeting
High-Fidelity Desktop Wireframes
After solidifying my mobile designs, I created my desktop versions.
Test
User Testing
After finalizing and prototyping my designs, I conducted 5 moderated user tests virtually with Google Meet and the Figma Prototyping tool. I asked the participants to complete the tasks, explain their thought process, and discuss their overall impressions.
Share opinion of home page redesign - including menu design and comprehension of “Do Life With Us” headings
Sign up for a MIX Group
Tasks
Success/failure to complete the task
Level of difficulty to complete the task
Total time required to complete the task
Metrics
Overall, feedback was positive. Users noted that the new design felt clean, urban, and attractive. They enjoyed the use of the brand colors, and the vibrant photos and videos featured. Completion of tasks was easy and quick.
Users who are familiar with the current church website design stated that the new design was much more interesting and engaging, enjoying the increased information accessible from the home page.
There were some concerns about the “Do Life With Us” headers, the design of the hero section, and the menu. I also noticed some minor accessibility concerns.
Results
I prioritized my changes based on user feedback using an affinity map. I made a few iterations to address the most important concerns.
Iterations
2 users mentioned that they would expect to see the church name, location and service time on the desktop hero section as soon as the page opens.
Inserted the location and service time within the hero page for easy access on both mobile and desktop
Added a clear CTA button to encourage users to visit the church, or to stream the service online, as church attendance is one of the most important business goals.
Changed the wording from “watch” to “stream” to be more inclusive language for those who are visually impaired.
Hero Section
2 users mentioned that the desktop opening video was too large.
Reduced the size of the desktop video, freeing up more space for the location and service time.
“Do Life With Us” section
All users understood the headings, however, 3 users mentioned that the language may not translate well for users who are new to attending church, or new to the religion.
Added some clarification copy that will help inform the user how the heading correlates with the service being provided.
Mobile Menu
2 users mentioned that the menu was overwhelming, 1 user suggesting drop-down menu options to help with organizing the menu items.
Created a menu with suggested hierarchy*
*This is a suggestion - the church has not confirmed menu organization structure at this time
Accessibility
1 user mentioned that the white text on the yellow background for the MIX Groups button was harder for her to read.
Darkened the yellow on the MIX Groups button to make the text easier to read.
1 users suggested adding an icon to the App store buttons, as he is less inclined to read words on a button.
Added more descriptive and action-oriented app CTA buttons with icons, to be more accessible and reduce ambiguity
As I was designing, I noticed that the orange buttons with white text were not meeting accessibility criteria for color contrast.
Changed all buttons to have black text on an orange background, which meets contrast criteria.
Final Product
This was my first time working as a UX Designer with a real client, which was exciting! It was a great opportunity to learn how to balance user needs and business priorities, and find solutions that work for all parties involved. It is also the first time that I will be able to see the real-life impact of my designs, once they are implemented in September.
Final Thoughts
TAKEAWAYS
Bigger isn’t always better - I found myself scaling down many of my desktop elements so that they would not be so overwhelming to navigate.
Give frequent updates - if I could go back in time, I would present my mid-fidelity screens to the stakeholders for feedback, rather than waiting until my high-fidelity screens were done. The iterations that I had to make after that meeting took me more time than anticipated, and my design process would have been smoother if I had received the feedback sooner.
NEXT STEPS
Continue designing the screens for the rest of the website, for both mobile and desktop.
Design screens for tablet viewport
Analyze metrics, and continue iterations as needed