FOOTHILLS CHURCH APP
UX / UI Design
THE PROJECT
Foothills Church began in 1925 as a humble mission-driven organization, dedicated to community service in Boise, Indiana. They expanded through outreach efforts (clothing, food drives, foster care) for the local community. By 2018, the organization grew to 750 people, and they had a mobile app with a competitor (Subsplash). Organization leaders Pastors Doug and Kim Peake wanted more control over their fundraising efforts (donations, online gifts) and stronger creative visuals that would more accurately reflect their brand identity.
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
Foothills’ team 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
The client actively communicated what they wanted and didn’t want, helping me form a better understanding of their preferences. Based on their resources and visual examples, I created a style guide with unique branding elements for the app. Their website aesthetic and social media platforms also gave cues to their tone of voice, and who their users were.
APP USERS
DESIGN Process
The project manager created a design brief.
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
Sketching out a sitemap is a preliminary step in my design process.
The client’s previous app lacked creative direction and unique brand elements. Considering how important music and performing arts was to the client, I chose their Livestream content to be the app’s focal point. It would dictate the rest of the design, and how the brand visuals were communicated.
The Home screen hosted a variety of media collections. It would be the center of user activity and resources (playlists, user notes, blog feeds). I then organized the Connect screen functions according to most-used to least-used, with Give having its own screen for online donations.
SKETCHES
WIREFRAMES
THE CHALLENGES
The client was not new to the scene of custom apps. They had an existing app with a competitor agency and were very tech-savvy. They had a good idea of what they wanted, and what wasn’t working for them. Their priorities included:
a bigger media library
Their current app hosted limited media content. Their website, Youtube, and Vimeo collections had scattered content, with some videos included in one account, but not another. Collections were disorganized across platforms.a donation portal
Many payment portals required users to sign in or complete several account creation steps; this app would lead straight to a donation transaction page with a single click.
an app re-design
Beyond the client’s logo, there was little else to indicate their existing app belonged to the organization. Brand visuals were lacking and images were static.
INTERFACE DESIGN
Foothills’ brand kit emphasized clean and modern designs. They wanted a subtle and sophisticated look. Their brand colors were white, grey, with orange as the accent.
However, I noticed their media told a different story. The pictures they shared with our team were colorful, with varying degrees of contrast. Several shades of dark blue and teal could be found throughout the photos, with warm undertones.
I chose to use the client’s photos as they were - designing the app with simplcity in mind. White space and a translucent white overlay provided an easy transition from the colorful photos. The client’s naturally vivid aesthetic was able to shine, and their media content could take center stage.
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
COLLECTION
Housing the client’s media content in one space allowed a unified, seamless entertainment experience. They had collections categorized by series, topic, time, and community groups.
IDENTITY
Beginning with research on the client and their target audience, I let content dictate the design. Innovative use of white space complemented their vibrant personality, allowing their true self to shine through, unobstructed.
CONTRIBUTION
Choosing ‘Donate’ to be a primary icon on the navigation bar improved ease of use. However, it was also the last spot on the bar, so as not to disrupt the flow of user interaction on a daily basis.
THE PLATFORM
The Foothills 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.
