Company
JCMA Inc.
Role
WordPress Developer
UX Designer
Duration
2024, ongoing
Team
Software Development
Rita CMS is a WordPress App that connects with Microsoft Power Apps for back-end functionality.
This project originally started as a rescue mission. My boss belongs to our town's Kiwanis chapter. From a national organization level, their current platform was being shut down.
Joe (my boss) and I stepped in to migrate Kiwanis data to a Microsoft Power Apps environment with Dataverse and then build out a completely custom front-end web app tailored to this club's needs.
Serving as the pioneering user group, the Valparaiso Noon Kiwanis club of 300+ members were the first give Rita CMS life. Kiwanis engages in community outreach programs, fundraising, accessible platform construction, house rehab, and exciting things that give back. The club uses the app to share files, create events and meetings, manage membership, use internal messaging, and much more.
Most of the users of Rita CMS are older aged, like 55+ and some of the oldest in late 80s. With againg comes a different ocular and motor experience of technology. However, the age range is varied. There are also younger folks. Outside of Noon Kiwanis, the Disabled American Veterans Chapter 80 of Indiana also uses Rita CMS. These folsk as you can imagine have differences in user experience. These challenges present a unique design opportunity.
Rita CMS is built on a unique stack: Power Apps provides a friendly approach to database management. Using WooCommerce for user authentication, our team is able to extend this security level to develop cutom PHP endpoints inside. Using FetchXML and Twig templating, data is queried from Dataverse and then used to populate the WordPress front-end. I spent considerable time in this project working with all technologies listed and directly developing my wireframes with HTML, CSS, and PHP.
The app's user interface needed to be accessible by multiple different kinds of user groups with different needs. To accomplish this goal, I endeadvored to create a design system that was sleek, easy, and comfortable to use. The system employs comfrtable colors of light blues, navys, and whites. I avoided anything that would be hard to see or affect colorblindness. In addition, I used lots of rounded edges, largers buttons, and larger, bold fonts.
With lots of different users on different browsers, iPhones, Androids, PCs, Macs, and whatever else... I put forth a crazy attention to detail on ensuring that Rita CMS works in all these contexts. I employed flexbox, grid, and CSS media queries to endlessly polish smooth-flowing layouts that fit every context.
Given the nature of Power Apps and its friendly, approachable, low-code environment, those adminisators who need to access data and move things who have non-technical backgrounds have a powerful and easy approach to access and manage the data they need.
Most endpoints need to retrieve some kind of user-based data from Power Apps. A lot of my learning has been centered around to properly write and fromat FetchXML statements. Through, I've undesrstood how to pull in different Dataverse objects and find ways to filter them to pull the specific parameters or fields that I need.
Another key functionality of the app is the ability pull in paremeters from different data objects and pass them to other endpoints via HTTP requests. Using different GET and POST methods allows to create user functionality allows us to create different interface pieces that users can interact and create their own content.
Every endpoint in our app comes from a PHP WooCommerce rewrite. Inside of that app, Fetch statements and Twig blocks are passed as PHP variables through a DataPress shortcode processor. Using PHP gives me the basis for a powerful, endlessly flexible and customizable means of creating a web app.
Users can make use of a key container of powerful, specific actions from most screens. These forms exist throughout the app in different texts. A user can add events, add files, and more.
Users can fill out profile information to share with other club members. In addition, a club member can upload their beautiful photo.
By creating committees within your organization, you can effectively manage and host events for all of your volunteering needs. You can schedule events specifically for these moments, and reach out to all committee members inside.
"I spend more time completing work
and less time managing HOW to do that work."
active users across three different organizations
"Where projects and tasks are at on the pike is much, much clearer now."
This project in its infancy was my first foray into a major development app. Let's look back after all this time.
This has been a very fun project. Being so closely situated with the user groups has been awesome. I am also excited to learn more about server-side development with PHP, too.
It's hard to say what I would do differently because this work has been ongoing and a continuous educational journey. I am proud of my efforts to refactor. I think something that would have helped from the start was having properly scoped agile fatures around user stories and specific pull requests to help prjoct scope creeping.
Some current features on the horizon that I plan to implement are different functionalities to further aid the messaging and file sharing functions. I am also seeking new ways to aid the UX on the front end. I've already implemented modularization of refactored endpoints to help the developer experience. I am also using output buffering and per user transient caching in PHP to save API calls and query data less unnecessarily.
