UX - Planning Center Services Mobile

Planning Center Services Mobile Wireframes

Background

In 2012, Planning Center was beginning to explore how Services—already a popular tool for scheduling, planning, and coordinating volunteers—could extend to mobile. At the time, the company had not yet adopted wireframes as part of its product development process. Most design work was handled through direct implementation, meaning ideas were often tested by building them into the product itself.

Recognizing the need for a more iterative, user-centered approach, I introduced wireframing to the team and created the very first mobile flows for Services.

Challenge

The challenge was twofold:

1. New platform: Services had proven successful on desktop, but a mobile version meant rethinking how people interacted with plans, schedules, and media on smaller screens.

2. No design precedent: Wireframes weren’t part of Planning Center’s workflow. I had to both establish the practice and demonstrate its value in helping the team align on flows and structure before committing engineering resources.

Process

I started by identifying the core use cases that users would need most urgently on mobile:

• Viewing and managing plans
• Accessing order of service
• Scheduling and resolving conflicts for people
• Viewing and attaching media files
• Editing personal profiles

Using these priorities, I sketched out low-fidelity wireframes that mapped the entire user journey, from navigating plans to managing people with scheduling conflicts. Each flow (Plans, People, Media, Profile) was carefully considered to balance simplicity with the functionality needed for real-world ministry scenarios.

The wireframes included:

• People Flow: Handling volunteer scheduling, availability, and conflict resolution.
• Plans Flow: Creating and managing service orders, attaching notes, and editing songs.
• Media Flow: Selecting and attaching media assets to services.
• Profile Flow: Simple profile editing and account switching.

By visualizing these processes, I provided the team with a shared artifact to evaluate usability, catch friction points, and refine functionality before development began.

Outcome

These wireframes became the blueprint for the first version of Planning Center Services Mobile.

• Introduced wireframing as a design discipline: This project was the first time Planning Center used wireframes, laying the foundation for a design-led culture that would grow in the years ahead.
• Accelerated development: Engineers were able to work from a validated flow, reducing rework and increasing speed to launch.
• Improved collaboration: Product, design, and engineering could discuss ideas with clarity, using the wireframes as a reference point.
• Set a precedent: The success of these flows helped wireframes become a standard part of Planning Center’s product design process.

Reflection

Looking back, these wireframes marked a turning point for Planning Center. Not only did they shape the first version of Services Mobile, but they also introduced a design-first mindset that continues to influence how the company approaches product development today.

For me personally, it was an opportunity to pioneer a new practice, champion user-centered design, and translate a complex desktop application into a streamlined mobile experience that volunteers and staff could rely on anywhere.