PaySchools Central App

  • Client: PaySchools®
  • What They Do: PaySchools products “handle payments and associated data for lunches, fees, donations, tickets, registrations, and more.”

Our 10+ year relationship with school payment processing app, EZpay, made us well acquainted with this unique niche. The brand has to appeal first to school district administrators and then to the parents who will use this type of product throughout their child’s school years.

With that rich experience in hand, we were approached by PaySchools to collaborate on a total recreation of their marquee product, PaySchools Central.

Over the years, PaySchools Central had been “designed” in the two worst ways a product can be developed: Reactive for problems logged by customer support, and “design” work led by the DevOps Team — not actual UX and UI design pros. The PaySchools team knew that the entire product needed to be recreated and had a reasonable and realistic outlook on what would be needed to make it right.

The process we created and implemented was one that deviates from our normal process for digital products, but the original timing, size, and scope warranted a special approach.

Here’s the process we used…

We heard directly from users.

The successes of a new PaySchools Central hinged on hearing from users of the now old product. We needed to hear the problems and what they liked. The project manager we worked closely with provided documentation directly from tickets in the customer support logs, allowing us to hear directly from the users. The quality of this documentation throughout this project was second to none. We have never experienced such excellence, attention to detail, and organization in documenting a product like what we were provided. It made us able to work smart and fast.

We started where users start and set a creative process from it.

Starting with onboarding allowed us to work through a new PaySchools Central from the perspective of the end-user. We began with pencil and whiteboard sketches to fill out a flow of the UX. Then we build digital wireframes to create the UX architecture to get users from Point-A to Point-B to Success. Branded screen design was then applied to bring in the power of PaySchools’ typography, colors, and imagery. Using this process for onboarding, and having a sub-process for each of these steps, allowed us to then apply it to the entire app.

We designed like the UX architects we are. (Even if the DevOps Team hated it)

As mentioned before, the timing was originally very tight for this project, so we decided to scrap a normal process of creating everything in Adobe Xd or Sketch, and instead, we did this: Using the onboarding flow, we knew we could create digital wireframes that DevOps could follow, and because we also had created a robust style sheet from the onboarding flow, the devs could continue using it throughout the app. Therefore, to meet original timing, we created wireframes, refined them until finalized, then provided them to the DevOps team to build and then style according to specs provided at the start.

In full honesty, the DevOps team sorta hated this process. It was not ideal and we understood the frustration, yet a deadline was in place and if we were bending our process to make it happen, we required that same level of bending by the devs to make it happen.

We provided a process framework for all of PaySchools’ products.

Overall, the outcome for PaySchools was that we provided them both a recreated Central app, as well as a process framework that was later applied to several products we continued to work on but cannot yet share due to privacy agreements. The processes we created and implemented allow PaySchools to make UX as the vital component to great product design that it is, and then apply it to any product moving forward.


Postscript: Where improvement is needed.

One big area of improvement that we see now that we did not anticipate at the start is how our role as Brand Shepherds would cease once the designs were handed over to DevOps. Because we were not part of seeing what the devs actually created from our work, we did not see that they were making design decisions that were directly undoing solutions we had put in a lot of time to solve. The result is that PaySchools Central launched and went from a 1-star rating on Apple’s App Store to a 2-star rating, with user feedback highlighting problems that Brand Shepherd actually solved but the devs changed during production. We could not be more frustrated by this.

So if you have found this by searching for information about PaySchools, and wondering why anyone would want to proudly say, “We created this!” then here’s your answer: We did create an app you would love to use, but a lot of it was changed by non-UX professionals.


A silver lining: Our actual process prevailed.

While PaySchools Central may have been a bit wonky to produce, the process was the real star, and we have gone on to create several PaySchools products that we cannot wait to share with the world! And these products are following our normal process which makes it extremely hard for devs to undo what we create, which will lead to our true expertise working to its full strength for all of PaySchools’ products. We look forward to sharing that with you soon.

  • UX & UI Development
  • Product Wireframes
  • Screen Design for iOS, Android, and Web App
  • Asset Coordination with DevOpps Team

“[Brand Shepherd] has helped set the course for what we have and what we will accomplish.”

— Hume Miller, CEO, PaySchools

Our UX Process Overview

Below is a basic overview of the process we used to recreate the UX and UI for PaySchools Central, an app and web app used by hundreds of thousands of parents across the USA.

This product consisted of creating over 120 screens and so it would be impossible to capture all of our work here. Instead, we aim to show the diligent process we developed for this and all of PaySchools’ product suite used in schools nationwide.

Phase 1: Discovery & Sketches

After a thorough discovery phase, we start with pencil sketch wireframes.

Pencil and whiteboard wireframes allow us to work fast and capture ideas of UX flow rather than being tied to pixels and screens.

Pencil sketches of PaySchools Central app UX and UI, 2 of 2

Phase 2: Wireframes

With sketches approved, we then move on to digital wireframes to build out the overall architecture.

For PaySchools Central, specifically, we used a customized process that is different from our normal process. Reach our Scope Of Work section above in the accordion menu for the full details of this unique process.

Wireframes for PaySchools Central app UX and UI, 1 of 2

Phase 3: Screen Design

Wireframes lead us to screen design where we apply brand standards and use color, typography, and customer feedback to help us create the best UX for parents using PaySchools Central.

Screen design for PaySchools Central UX and UI, 1 of 2
Screen design for PaySchools Central UX and UI, 2 of 2
120+

Screens Designed for PaySchools Central UX

PaySchools Central app in use on a mobile device

Additional Case Studies