Drag & Drop App Builder

Project Overview

Role: UI/UX Designer, Full Stack Developer
Date: 2020
Tools: Adobe XD, Visual Studio Code, Skype
Technologies: JavaScript/Vue.js, HTML, CSS/SCSS, Node.js, Express.js, MongoDB

ChurchOrbiter is a WYSIWIG app designer for churches. Churches can style their apps with custom colors, create posts and events, send push notifications to their congregation, and embed rich content onto pages in the app.

Problem Statement

Existing app builders for churches are bloated, hard to use and navigate, and not flexible enough to visually customize to match the church’s identity.

Mobile App

Church members can easily search for their churches by name, zip code, or city.

ChurchOrbiter Builder

The ChurchOrbiter Builder shows you exactly how your app looks as you're building it.

Builder Palette

The Builder Palette follows you everywhere, so all your elements are easily accessible.

Drag & Drop

It's easy to tell where you're about to place an element, with a blue placeholder indicating where it'll be dropped.

Users & Audience

Church Leadership

Church leaders often have lots of responsibilities, so they don’t have a lot of time to fiddle with difficult to use software.

Church Members

Church members tend to be of an older age demographic, so making the app easy to access and understand is a huge priority.

Roles & Responsibilities

I was the sole contributor to the research, prototyping, and front end development on this project. I prototyped the product in Adobe XD, and implemented the frontend utilizing Vue.js.

Scope & Constraints

With a small team, a very small budget, and having to create the product from scratch, we kept the scope small; deciding to focus on the basics of what churches needed from their apps.

Process

Research

Early in development, we researched existing solutions and found that churches just wanted a product that worked. From there, we decided the product needed to meet the following criteria:

Must be extremely simple to drag and drop elements onto the app pages.
Must function identically on all screen sizes, so that church leaders could easily access the product from any device.

Prototyping

With our 2 main goals in mind, we were immediately drawn to a simple layout that doubled as a preview of the app and as the editor itself. It featured a palette of elements that users could drag and drop into their app, with simple buttons to rearrange, delete, and edit elements.

Outcome

With a small team and a small budget, we were able to create a WYSIWIG app builder for churches that performed well and provided a great experience on all screen sizes. We conducted customer interviews with a select number of users and were given glowing reviews about the simplicity and flexibility of the app builder.

Takeaways

Small budgets, time constraints, and small teams are not hindrances when developing new experiences. I have learned that they are simply motivators, and drive you to be creative in the solutions you provide for complex problems.