Back Home

YOFFC

Experience community and connection with fellow Christian youth in a welcoming and wholesome space designed for fellowship.

Timeline: April - August 2022

My Role: Product Designer, Researcher

Design Tool: Adobe XD

Goal

Craft a vibrant mobile app that fosters genuine social connections among youth, enabling them to share and experience life and church events together in real-time, all within a clean and secure environment.

Process

Background Story

How it all started

In 2011, YOFFC, short for Youth On Fire For Christ, came to life as a web application, instantly capturing the hearts of 30+ active users upon its debut. Originally crafted for the exclusive embrace of Lighthouse Gospel Ministries, YOFFC was a beacon of success from the start. As we embark on this new chapter, YOFFC is set to broaden its horizons, opening its doors to a wider community, ready to forge connections that span beyond the initial vision.

Competitive Analysis

In the quest to shape YOFFC's features and functionalities, I delved into the realms of giants like Facebook and Instagram, seeking inspiration yet mindful of their pitfalls. What I discovered was a digital landscape where security often took a backseat, where content roamed unguarded, and profanity filled the air without check.

Armed with these insights, YOFFC charted a different course. We instituted a cadre of vigilant moderators and fortified our platform with robust security measures, ensuring that profanity and unclean words find no harbor in our community. Furthermore, we committed to a meticulous review of all uploaded videos, upholding a standard of cleanliness and safety that sets YOFFC apart, making it a haven for positive, meaningful interactions.

User Research

I embarked on a journey of discovery, reaching out to the vibrant youth who breathe life into our website. I was eager to hear their stories—what captivated them, what fell short, and what dreams they harbored for this digital space we share. A chorus rose among their voices, a longing for freedom from the chains of stationary screens. They envisioned a future where they could roam, connected and unbound, their community always within reach.

And so, the decision was as clear as the call of adventure: An app it will be—a new chapter where our users carry the essence of connection in their pockets, ready to explore, share, and engage with the world around them, anytime, anywhere.

Certifications

In this journey of creation, I stand as the lone architect, weaving both design and code into the fabric of our project. Embarking on a quest to master the mysteries of mobile development for both iOS and Android, I seek knowledge not just for the sake of learning, but as a beacon guiding my design decisions. With this newfound understanding, each choice is crafted with the nuances of each platform in mind, ensuring a seamless and intuitive experience across all devices. This is my path—to design and develop with insight, creating a world that resonates with every touch and swipe.

Process

Let's Dive Deeper...

Ideation

I kicked off this project with two goals in mind: give the current website a fresh look and whip up a brand new mobile app. I started simple, sketching out rough ideas for the website's redesign. These early sketches were like the first draft of a story, which I then polished into detailed, high-quality designs for the mobile app. This approach helped me make sure that both the website and app would not just look good together but also offer a smooth, user-friendly experience.

Ideation

Lo-Fi Mockups

Web

Profile
low fidelity web mockup of YOFFC friend profile page
Home
low fidelity web mockup of YOFFC dashboard page
Youthflix
low fidelity web mockup of YOFFC Youthflix page
Message
low fidelity web mockup of YOFFC Message page
Sign In / Register
low fidelity web mockup of YOFFC Login Screen
Feed
low fidelity web mockup of YOFFC News Feed Screen
Photos / Videos
low fidelity web mockup of YOFFC Photos page
Community
low fidelity web mockup of YOFFC community page
Onboarding
low fidelity web mockup of YOFFC Onboarding Lear more page

Ideation

Hi-Fi Mockups

Mobile

1st Iterations

2nd Iterations

3rd Iterations

1st Iteration

Profile

2nd Iteration

Profile

3rd Iteration

Profile

1st Iteration

Youthflix

2nd Iteration

Youthflix

3rd Iteration

Youthflix

1st Iteration

Menu

2nd Iteration

Menu

3rd Iteration

Menu

Process

User Testing

In the heart of my journey, I embarked on a mission of discovery, orchestrating two unmoderated user tests. Participants navigated through a series of tasks, their interactions unfolding like chapters in a book, each move telling me more about their experience. This exploratory adventure brought to light invaluable insights, painting a picture of how I could further refine my design. The feedback was like a compass, pointing me toward the additional tweaks needed to ensure my creation not only meets but exceeds user expectations. Through this process, every step I took, every adjustment I made, brings me closer to a design that truly resonates with its users.

Findings + Insights

Round One

Heading into the first round of user testing, I was curious about one thing: Could users easily find their profile page tucked away in the "Menu" instead of sitting upfront in the primary navigation? Turns out, it was a bit of a challenge for them. This insight was a lightbulb moment for me, highlighting a key area where I could make the journey smoother and more intuitive for everyone.

“Difficulty finding the profile page”
“Confused and hard to navigate”

50% Direct Success

43.8% Indirect Success

6.3% Give-up / Bounce

Screenshot of the primary navigation where community icon and text was removed Screenshot of the primary navigation where profile icon and text was added
Second Round

This time around, things looked up—80% of users found their way to the profile page with ease, a big leap from the first round. Yet, this victory shone a light on new challenges that needed my attention. It was clear there was more work to be done, but I was ready to tackle these issues head-on, ensuring every user's journey was as smooth as possible.

“Confusing and hard to navigate”
"Notification button should be the go-to place
for creating posts, adding calendar events, and more."
“..some of the icons for options aren’t clear at first..”
Color Scheme and Font Type
“How does it differ from all the other social apps?”
A image of a User Persona Nadia Adkins quoting I want  to be around more people like me

Process

User Persona

Target Audience

Persona

Name: Nayla Adkins

Age: 35

Title: Youth Worship Leader

Church: Lighthouse Gospel Ministries

Wants & Needs
  • To invite youth to worship events

  • Spiritual Growth and Development

Fustration

When she shares her love for Christ
in a post, she's met with negative comments.

Survey

In the midst of reshaping our approach, I reached out to the vibrant community of Facebook's Christian Youth Leader groups with a survey. My mission? To dive deeper and gather real, actionable insights. Armed with valuable feedback from both our user testing and this new survey data, I was able to craft a user persona that truly reflects the needs and aspirations of our audience. This persona became my north star, guiding every decision with clarity and purpose.

Process

Design Implementation

Based on findings

With a sharp focus on enhancing user navigation, clarifying icon functions, and refining our color scheme and font—while staying true to our signature purple and white—I've tailored some key design upgrades. These changes are deeply rooted in what our users need, ensuring YOFFC unmistakably stands out as a vibrant space for the youth in Christ. Here's a rundown of the impactful enhancements inspired directly by our user data.

An image showing design updates made to mobile application based on the findings: Home Screen, Post Screen, Profile Screen, Friend Profile, and Group Screen
Design Library image showing color and typography, typeface, buttons and vector images

Final

Outcome

Deliverables

I've crafted and prototyped a suite of screens that guide users seamlessly through their app journey, showcasing the ease and intuition of navigation.

Value

As a Christian, I recognize the importance of persevering in sharing Christ's love, even when faced with challenges. With YOFFC, I'm proud to offer a platform where believers can freely express themselves, nurtured by a safe and positive community.

What's Next?

The journey continues as I dive into the development phase of the YOFFC app, set to light up app stores on both Android and iOS. Excitement is in the air, and the launch is just around the corner. Stay tuned for what's coming your way!