CENTRAL PRESBYTERIAN APP
UX / UI Design
THE PROJECT
Central Presbyterian Church was established in 1821, beginning a historic legacy in New York City. The congregation grew rapidly, and the organization’s site moved several times throughout Manhattan. In 1922, American financier John D. Rockefeller, Jr. principally funded the permanent home of Central on Park Avenue. As decades passed, the organization went through many changes in community demographic and attendance. Under the guidance of Pastors Jason Harris and Ed Sirya, Central grew into a safe haven for 500 families, students, and young professionals. Central’s team approached Pushpay with the desire for an extensive app filled with resources, media, events, and fundraising campaigns on restoring their historical building.
TEAM & ROLE
Project Manager
Built customer relationships and handled communication
App Designer
Created visual designs and set up the CMS
Content Manager
Content strategies and releases
Technical Team
Developed the app, managed submissions to the App Store (iOS) and Google Play Store (Android)
PLANNING
Central first established contact with Pushpay’s sales team. Once introductions had been made, a project manager and I were assigned to the client. We worked together to get information from the client, such as:
App Content
App Branding and Style
Target audience demographic and size
As a well-established organization with their own marketing and communications team, Central had specific colors, fonts (Gotham Book), and communication tone that made up their branding kit. Based on their website and media, I created a style guide with unique branding elements for the app. Their rich history was infused with New York’s culture, providing a powerful story waiting to be told.
APP USERS
DESIGN Process
The project manager created a design brief for Central.
I analyzed the client’s branding resources and visuals.
I drafted a sitemap for app content and user navigation.
I sketched wireframes for main navigation screens.
I designed the app according to the client’s preferences.
The app would go through several QA checks before final sign-off.
SITEMAP
Drafting a sitemap is a preliminary step in my design process.
Past the Discover screen (a news feed), I designed the Home screen to host a variety of content welcoming newcomers to the church and their chamber music concerts. The Sermons screen contained all of Central’s media feeds and extensive service schedule for regular attendees. The Events screen was home to calendar feeds and events for both Central and Central Chamber Series.
SKETCHES
WIREFRAMES
THE CHALLENGES
The client needed a comprehensive app for both Central, and Central Chamber Series. Distributing the content evenly across three main screens reduced the chances of users feeling overwhelmed or lost in the resource-heavy app. In addition to content for two organizations, Central had several community events on a weekly basis. Designing the app to host all their calendars was important for users to access information easily. It also enabled users to get involved directly from the app. Lastly, their fundraising campaign needed to be featured in a prominent place. This would keep users updated on the client’s progress towards their goal, as well as encourage more donations.
INTERFACE DESIGN
Central’s rich history spanned almost 200 years, with a beautiful neo-gothic building to prove it. It was nicknamed “the little cathedral,” by locals, and became an architectural landmark throughout New York city. I chose to feature the historic building on the app’s home screen, as a way of honoring that legacy. Designing a dark overlay on their opulent pictures, with san-serif white text above it, allowed a delicate balance between traditional and contemporary. The rest of the app’s design was also kept simple, complementing the client’s brand colors of blues, greys, and white.
FINAL DESIGNS
USER EXPERIENCE
Once the final design was complete, I submitted the application to my team for internal quality assurance (QA) tests. Teammates would evaluate the content, creative direction and execution, along with checking if the app followed App Store and Google Play store app standards. After receiving feedback and a performance score, I made iterations as needed.
The application would undergo another round of reviews by our technical team to ensure the app was ready for roll out. They were responsible for building the app and submitting it to the app stores.
KEY DECISIONS
HISTORY
Built in 1922, Central’s neo-gothic building was an architectural wonder within the heart of Manhattan, New York city. Preserving the historic landmark was an important part of preserving the organization’s identity. Encouraging online donations contributed to Central’s continued posterity.
HERITAGE
With a vibrant, multicultural community, and an elegant space to call home, Central’s photos and visuals didn’t need a boost. Designing the app around their rich heritage meant downplaying other graphic elements. In this way, their brand identity could take centerstage.
HOME
Central’s building was home to both the 500+ member organization and their chamber orchestra (Central Chamber). The client expected the app to be used by both organization members and visitors alike. Distributing content across 3 screens reduced the chances of users feeling overwhelmed.
THE PLATFORM
Central’s app was designed to operate on any iOS or Android device. With the mobile framework written in React Native (React.js), the developers utilized Flux application architecture for state management.
The app's backend was controlled by an in-house content management platform. It used service workers for daily synchronization and offline storage. Users could save device-specific data to their phones, or share it with other applications.
The in-house CMS was able to push updates to the app using React Native bundle dropping. This meant the app didn’t need to be resubmitted to app stores every time a change was made.
