The Tabernacle Church
Empathize.
The Project.
Create a video streaming responsive website for a local church.
There is a wide range of ages and ability for the users of this church. The website will need to accommodate a wide range of screen sizes, and a wide range of user ability.
Users need a way to watch sermons on the go or the comfort of their own home.
The Problem.
The Goal.
Create a responsive website for video streaming, that works for the users of the tabernacle church.
Role.
Lead UX Designer
Timeframe.
July 2022 - August 2022
Responsibilities.
User research, wireframing, user testing, high and low fidelity design, and prototyping
Research.
Judy is a retired nurse that wats to be invoved even when she isnt in the building so that she can still feel involved in the community.
Kyle is a busy college student who needs a way to watch sermons remotely so that he can listen on his own time.
The main theme I saw in the user journey map was the need for simple navigation throughout the site. Many churches have a lot of information that users want to know, but it can make it hard to sort through all the different things that the church offers on the site.
Wireframe & Mockups.
At this stage I am focusing on getting all my ideas out on paper and then gettting a final verson done digitally. One mistake I made at this stage was creating the digital wireframes with light colored boxes. This made it difficult for latter users to see the low-fidelity prototype while conducting usability studies. Now I know to create wireframes with high contrast in mind.
Mockups.
As I worked through the mockups I continually referred to the goal of the project to ensure that I was staying on track.
Going into this design I focused on three accessibility considerations:
Visual: This website is built so that there is a high contrast of color
Language: While the sermons are in English, there is a section of Creole and Spanish speaking members of the church. Using icons and logos will help them navigate the site.
Size: The titles were made so that they are easily seen by those who need increased visual accessibility.
Final Design.
“Designing from the biggest screen to the smallest screen helped keep the desktop website highly functional. ”
Learn.
I learned the difference between designing ‘top down’ and ‘bottom up’. This was my first time designing top down. Designing this way made it easier to utilize all the advantages of a responsive website. I will keep designing this way when the desktop version is the main way that users are expected to access the website.
Usability Study: I would recommend conducting a usability study on the high-fidelity prototype.
Iterate: I recommend using the findings of the study to iterate on the design.
Develop: I recommend sending the final version of the responsive website to developers to produce the site.