Web Design and Development
I wireframed, designed, prototyped, and developed a website for The Torch, a local outreach ministry. They host free public events to share the gospel and encourage people through worship and teaching. I spent my Christmas break this year designing and developing a low-budget website to advertise the event and help connect people with resources. This project included logo design and branding for the site. I also assisted their team in setting up social media and communication methods to connect people with the ministry.
Project Type
Real World Client
Web Design
Date
Dec 2024-Jan 2025
(1 Month)
Role
Designer
Organizational Lead
Final Website Design
View the site online here: www.thetorchevent.com
My Design Process
The steps of my design process to create this site.
Empathize, Define, Ideation, Design, Development, and Next Steps.
Empathize
Understanding client and user needs through empathy mapping and client interview.
Interview
I started by interviewing the client to understand their needs. This interview set the foundation for the entire design process. I was able to gain insights on the target audience and site users. I learned about their events and the vision behind them so that this could be communicated through the words and visual elements on the site.
Empathy Mapping
I used this empathy map template from the Nielsen Norman Group. https://www.nngroup.com/articles/empathy-mapping/. This helped to organize insights I had about the different user groups to ensure that the site would meet all of their needs.
Define
Defining the target audience, needs to address, goals and features of the site.
Introduction
The Torch is an outreach ministry run by a small group of University students. They host public events to encourage the people of Christ and share the Good News of the Gospel through worship, testimonies, and teaching. The goal is to create a low-budget website that reflects the heart of the ministry, serves as a platform to promote and provide information, and connects people with resources and contact info for the ministry.
Problem Definition
The Torch team needs a better way to share information about their ministry and connect with event attendees. Currently the event is primarily advertised by word of mouth and posters. There is also an Instagram account and email address that provide more information. The Torch wants to launch a website as a centralized online presence to provide information and resources to people. The scope of this project is to create a low-budget multipage website. This will include designing the logo and branding for the organization. As well as setting up social media and contact methods. Designing a separate mobile version is out of scope.
Design Challenge: How might we create an informative low-budget website for the Torch that reflects the heart of the ministry, communicates the purpose and message, and connects people with resources and contact information to effectively encourage people to attend The Torch Events.
Goals
The goal of this project is to create a low-budget informative website for The Torch. The site will provide information about the event, history, and team members. It will provide resources and contact information. It will be a place to advertise upcoming events. The goal is to provide a centralized online location for easier connection with the ministry to increase event attendance and impact.
Users and Use Cases
The users will be anyone who is interested in learning more about The Torch. This will include students who are interested in serving at an event. People who are interested in attending an event. People who come across the event and are interested in learning more. People in attendance who would like to be connected with resources.
User Stories:
-
As a student at Northwest University, I heard about The Torch from one of my friends who served at the last event. I am interested in learning more about the mission and history to see if this is something that I would like to be involved in.
-
As a person in the park who sees a Torch Event happening, I am interested in learning more about who is behind the event and what their mission and purpose is.
-
As an attendee who just accepted Jesus, I am looking for resources and information for my next steps on the journey of faith.
-
As someone who is actively at the event, I would like to know what the lyrics are to the songs the worship team is playing so that I can join in worship.
Pitch
What will this do for end users:
-
End users will be able to understand the vision and history of The Torch.
-
People will be connected with resources and contact information for the ministry.
-
Event attendees will have more context and feel connected during the events.
How this benefits our organization:
-
More people will be aware of The Torch and will be interested in attending.
-
A means of communicating our mission, vision, and information about the team with people.
-
This will provide an easier way to connect people with resources,
Value Proposition
For people who are interested in learning more about the Torch or new Christians interested in accessing resources and information this website is a centralize online platform.
Key themes are:
-
Mission and Vision: This site will be the online embodiment of the mission and vision of The Torch.
-
Engagement: People will be able to connect with our team, engage with the event, and access resources.
-
Communication: This site will allow our team to effectively communicate and advertise information about upcoming events.
Project Requirements
Requirement #1: Home page
-
The home page will welcome people and effectively communicate the mission and vision of The Torch. This will be accomplished through text, photos, and video content.
Requirement #2: About Us
-
A page for information about The Torch, about the team, and to share the history of past events.
Requirement #3: Photos
-
This page will display pictures from our past events to capture memories and communicate the vision of the events.
Requirement #4: Resources
-
The resources page will have a link to the prayer request submission form, contact information, links to resources for new Christians, and a list of local churches that the team recommends.
Requirement #5: Next Event
-
A space to advertise the next event. This page will be updated periodically and will share the date and time, location, and details for the next upcoming event.
Requirement #6: Live Event
-
This page will only be active during an event and will provide a basic overview of information. It will also have a link to display song lyrics so people can join us in worship.
Requirement #7: Social Links
-
These need to be set up and then linked on the site. The team wants a link to the Gmail, YouTube, Instagram, Facebook, and Google Voice number.
Requirement #8: Logo and Branding
-
This project will include creating two logo designs from the art provided by one of the team members. Designing the branding for the organization including choosing a font and helping the team to finalize color choices for the site.
Ideate
Brainstorming, exploration, and incorporating client expectations. The ideation and design stages happened simultaneously for this project. I worked on some elements while waiting for information about others. This process allowed me to work efficiently and we were able to launch the site on time.
Emails
I completed this project remotely so most of our communication occurred over email. To stay organized, I would periodically send updated lists of what I had completed and what information I still needed from their team.
Design
Creating site map, wireframing site, branding, logos, prototypes, and edits.
Site Map
This is the final site map that displays all pages of the website.
.png)
Wireframes
I used Figma to design the general page layouts as wireframes first. These are the designs for the home page, about page, and resources page. These designs were reviewed by the client before proceeding with the project.
.png)
Branding and Logos
I worked with the team to design two logos using art that someone else had created. Selecting a font was a multistep process as we worked to determine the vision and message of the typography. They proposed a color palate which I adapted to fit Web Content Accessibility Guidelines (WCAG).
Prototypes
Next, I applied branding to the wireframes, incorporated the logo designs, and added photos from the client to create a prototyped version of the website. These page designs were reviewed by the client and I made adjustments as requested. Note these designs were created before the branding was finalized.
.png)
Development
Research and determining a low-budget solution for launching the site.
This was my first experience taking a site beyond the design stage and into development. I did a lot of research to understand the options for developing a site. I then shared these options with the client to determine which option would best meet their needs.
Priorities
-
Low-budget
2. Multipage design
3. Custom domain
4. Full customization
The Solution
We determined that the solution that would best meet the needs of their team would be developing the site using Google sites to meet the low-budget priority. We also would purchase a Dynadot domain and the set up a domain redirection. This avoids monthly payments and allows the site to be online for two years for a total budget of $25.
+
Next Steps
Plans for future updates to the site.
Update #1: Next Event Page
Once information has been determined for the next event and a poster has been created, I will add this info to the next event page to help advertise.
Update #2: Live Event Page
I created a live event page that will be updated with the latest lyrics and Spotify playlist before the next event. This page will go live the day of the event and will be accessed via the announcement banner button at the top of the site.
Update #3: Videos
My original design included video content on the home page of the site. One to communicate the mission and a couple to share testimonies from people who have been impacted by the events. Unfortunately, the team was not able to get these videos filmed and produced in time for the initial site launch. A future update will include embedding these videos into the site.
