RediSite SaaS for School Websites

RediSite is a k-12 school responsive website platform built on top of the popular Concrete5 CMS. This web SaaS tool was conceptualized, visually designed, user experience designed and developed by me during my prior agency experience.

Challenges

  • No dev budget. Everything had to be done in-house with me taking lead on all planning, design and development.
  • No time. The first version had to be ready within a month's time and I was actively still fulfilling all other duties designing and building custom websites for clients.
  • Be highly usable and stable for schools to self manage in the CMS.
  • Guide schools as seamlessly as possible to making good choices so their sites would be usable for their visitors.
  • Ensure ADA compliance as much as possible.
  • Create all sales, support and training materials.
  • Maintain and Support entire eco-system of packages in a version controlled enironment.
Expand Content
Languages & Tech Used
  • HTML
  • CSS / LESS
  • JavaScript / jQuery
  • PHP / Doctrine / Symfony / MVC
  • MYSQL
  • REST / JSON API
Expand Content
Tools & Frameworks Used
  • Balsalmiq Mock-Ups
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • Notepad++
  • Bootstrap
  • FontAwesome
  • Concrete5 CMS
  • Airtable
  • GIT / Bitbucket / Sourcetree

Packaged and Guided Delivery System

RediSite has 3 different service levels (basic, advanced and district) which required 3 different packages and can all upgrade seamlessly from their lower service tiers for a fully servicable and upsell-able product line. Partially a "white-glove" service for Schools in that trained staff would help them get going on best practices for their website which included migration, branding and typography help. RediSite also featured integration points with Rediker Software who is the software partner. Rediker's school administration software has several API connections which allowed me to pull data like events, news and staff through to this forward facing product. Schools using this product are able to control their own content utilizing the powerful Concrete5 CMS tools as well as control their theme settings utilizing customizable dashboard screens. This product is currently on its 3rd generation and it used by hundreds of schools all over the world. 

More Than a Theme. A Full Ecosystem of Powerful CMS Editing Tools

Along with the base theme packages, there are around 35 supporting packages that extend the functionality of Concrete5 and give schools the ability to easily drop in elements like slideshows, collages, galleries, social network feeds, news, events, buttons, accordions and more that I also designed, developed and maintained. These supporting packages of "blocks" had to be user friendly for both the school's using them in the CMS tools but also for the end-visitors using the website. These blocks also had to merge seemlessly with the available UI Kits in the theme and backend of the CMS as nearly everything had 2 interfaces to design and sometimes more depending on custom templates and options.

I'm Really Proud of Them

All finished examples of school websites you see here are fully maintained by their respective schools and by a vast majority they have all done a stellar job of doing so thanks in large part to my painting defined lanes that give the impression of a lot of creative freedom and control for them but not allowing them to go completely off the rails and break their website beyond usability standards. By understanding and investing heavily in the strategy of building foundations in palette, brand and typography. 

Before this product, many of these schools ran their sites out of a very legacy product that had little to no customization options for them and no mobile support at all. Considering the seemingly large technical leap to RediSite, even less savvy admins were able to maintain their sites with relative ease.


Dashboard Pages for Theme Design Controls

All dashboard pages tapped into the popular Bootstrap 3 UI kit since Concrete5 already has the assets built into the core and it was important to make this look like a unified experience. All front end themes utilized a UI Kit I developed called Bicycle UI and maintained seperately. My UI Kit is inspired by the components and process of building a bike, attaching elements to a frame, influenced in part by an Atomic Design approach. Along with the UI kit on the front end, all logic gates for switching and controlling of theme settings were also coded and maintained by me.

Much of my conceptual and planning work I did directly in a coded prototype because I was under incredible time constraints and had minimal time for a wireframe or full discovery process. Also for dashboard pages as I mentioned, utilized the native Bootstrap library allowed me to rapidly prototype what I needed and extend with some "material-esque" elements like shadowed boxes for samples and specimens used for guiding users with their design choices. I had to work very reactively to new data and reasearch, be agile in all phases of this project. For data and research, I relied heavily on the expertise of Rediker and what they know about schools in order to develop towards meeting their needs. They've been developing software for schools for decades and so they really know their market well which helped immensely. Even so, we onboarded a few willing schools to demo and beta test the product and provide feedback over the course of one generation to the next which allowed for a continuous cycle of product refinements, improvements, and bug fixes.

Main Menu of Settings Dashboard Pages

On the menu screen here, I broke the theme elements into configurable areas so it was easy for the user to understand which element they were making changes to at any time.

I was able to really isolate regions by observing what schools were doing or were trying to do with their existing websites. I was also able to identify common pitfalls in places, like their logos often looked ill-fitted in the header or they had no font / typography standards. I roughly mapped out regions just sketching and making organized notes to come up with this approach as well as my own typical approach of working modularly.

The red colored panels at the bottom were closed off sections not available to regular users but were accessible by support staff in our agency and also at Rediker.


Global Settings

These global theme options controlled overall settings on brand colors of which 5 options were available.

Tapping into Google fonts also allowed for multitudes of flexible font choices for clients to pick and choose from. A sample could be generated on the fly to give them a sense for what their typography would look like.

Schools are generally not the most creative of clients however they have very strong feelings about their colors and their font choices so it was important this be very flexible for them.

It helps that color and typography are also the core foundational ingredients to most website builds and play in conjunction with branding. I have never found it acceptable to fully separate UI/UX from Branding, despite the compartmentalization of those things within many organizations. All elements can be unified in order to provide a TRUE user experience that reflects and speaks brand recognition. In my world that is branding but in the school world they often refer to this as "spirit."

So this first step is about encouraging schools to think about unifying their brand colors and fonts with the overall theme of the site and build their own strong foundation they can be proud of.

I should also note here again that part of the RediSite delivery process with these sites was that we would get them going by pre-loading their school colors and the closest matching fonts to their brand or at least what we thought looked good so since we were delivering hundreds of these websites this had to be a fast process for us too. 


Header Configuration

Headers could come in many different configurations. By utilizing MVC format for also the theme, I could offer a multiple header styles here through multiple view layer templates. Some with more configurable options than others.

Also in some cases, like a seamless header with a big splash cover image would cause changes to take place in other dashboard pages. For example a giant splash image with the header overlaying would mean that a full width splash image area would only be used and someone wouldn't try to cram like a news feed under it causing text to overlap text. There were a lot of considerations throughout this entire process which became sort of a game of whack-a-mole. Trying to keep one step ahead on anything that might break or anticipate ways a user might break the theme.

So there was a process of information architecture here to map which headers would cause changes in options I'd need to address elsewhere. This work was overwhelming at times as I was working alone pioneering this product but I managed to keep pace by relying heavily on good organization.

Along with the basic overall look of the header, it had configurable regions which allowed for text or image based logos, social media links and so on. School logos are a weird mix of actual branded logos or official looking seals and sometimes just plain text and frankly, many of them are quite asthetically ugly. There is no standard so this had to be incredibly flexible to accomodate anyone and anything.


Home Page Configuration

Home pages were broken up into "tiers" like a big layer cake. This allowed for a lot of flexibility but again, encouraged schools to make good and orderly choices about the hierarchy of "things" they wanted to push to their home page.

Some schools focus was primarily on outgoing communications and some other schools, like private schools, wanted to focus on encouraging admissions. 

Each tier could be configured with background colors, textures and even some lazy-load style animations as users scroll the page.

They could also be configured into columns. Since Concrete5 utilizes a block-based CMS interface, there wasn't much to get hung up about in the contents of these tiers as users could drop any blocks of content they liked into front-end editing regions. Those blocks are part of the 35-ish supporting packages that I mentioned at the top of this page.

Block development was extensive and featured news feeds, accordions, event feeds, promotional features and calls to action. These were often designed and built in conjunction and based on feedback and data provided by Rediker.


Footer Configuration

Footers operated much the same as headers did. Several different layout options to accommodate just about any kind of content you can imagine. This included things like affiliations and accreditations logos, social media and utility links. Appearance controls on colors of course also. Repeating again the mantra... giving the illusion of many flexible choices but always guiding them to make good choices with invisible limitations.

This is achieved by a process of guiding the user to focus on what matters. Their messaging and their brand. This approach has been very successful, a vast majority of the schools using the product used it very well and only a small handful really went off the rails but the tools are so easy to use it was easy for support to help them get back a cohesive design.


ADA Compliance Configuration / Testing

In the education space, ADA / 508 Compliance is of the utmost importance which is where these settings come into play. Allowing users to show missing alt tags on images or run a WAVE scan to test compliance.

Even before the rise of schools being served with angry lawyer letters about their non-compliant websites, I was making it happen. From our very first generation to the most recent, progressive enhancements, tab-enabled navigation and clear contrast and legibility has been a top priority. As mentioned, these school websites are all over the world, and especially are in some lesser developed regions. Schools would demand a modern and clean looking website while also serving a community where a high percentage of their users were still running very old hardware/software. It took five or more years before we saw those older user agents drop off so I could safely implement newer techniques like flexbox and more javascript friendly interfaces. With so much talk about react, angular, vue and so on these days, I think we generally move on while a lot of the world is still back a ways. This process was always an eye opening experience to me and I learned a lot about usability for all people. Right up until my last days with the agency, we were still occasionally getting reports of people having trouble with their website to find they were literally using IE6 or worse and unable to install firefox or chrome due to internal network requirements.

New tech is cool and all but I will never forget that the internet is for all people and exclusivity on a public service is not ok or acceptable.


Internal / Support Settings

This here is a closed off settings page for Rediker support staff to configure that shows a place to even store some DNS settings for future reference. It also stored API key / ID for accessing the JSON data coming out of their system.

Along with that it also had an internal notes area for when a support agent needs to leave a message behind for another support person later. There is also a public facing notes field that would be fed to the school user in a separate dashboard welcome page.


Advanced Settings

Last dashboard page here is another private page available only to support staff. This one included some additional settings we wanted to control. This included the activation of Multi-Site which was a higher software tier for district school systems.

Also featured in-page editors for CSS/LESS and Javascript for additional customizations to the theme just for that extra level of flexibility for a client who might want something that was just outside the bounds of what they could do with the settings themselves.


Sales Demo Site

I designed and developed the responsive website for the standalone sales site. This site is largely maintained and operated by sales and operations staff and they did a stellar job with the content and utilizing the tools I provided. 

My overall approach was to keep the navigation simple and pages structured to allow maximum flexibility to guide visitors through the product features. The palette, typography and branding elements reflect the relationship with Rediker Software throughout to ensure the brand recognition.

Support

These school sites were 100% managed by their end user schools. Part of this hand-off process to the client involved a large amount of training and support materials. For the first generation of this product I also designed and developed the knowledge base website which integrated with the branding of the agency, as well as created all the support videos, video editing and training articles for the product. This site persisted for the entire first generation of the product and has since been decommisioned so unfortunately I no longer have the original assets, however much of my support videos can be found on Vimeo here.

By the second generation release of RediSite, Rediker had employed their own support staff who learned from my original materials and we were able to move on from there to keep pace with the product especially as more international schools were sold.


The Take-Away

Developing a product for the k-12 schools of the world really made me feel like I was living in the wild west. There seemed to be no rules and chaos among their internal staff. It was very challenging to find common threads to build a "one size fits all" framework and the goals of a public school were vastly different from a private school but the tools I was building had to serve both effectively. A private school would have clear marketing challenges with offering tours, and encouraging lead gen on admissions. A public school for the most part is like an outgoing communications machine and without a great sense of hierarchy for how and which messages take priority. The delivery process of these websites including some migration and fulfillment on our part so we often found ourselves guiding their choices and then letting them loose with hopefully good directions for self-management.

School administrators who were often put in charge of these sites were not a position without significant turnover however and so with each successive generation of this product there was a push to make it more user friendly, more self-sustainable and more feature driven so that new administrators could jump in and get going quickly.

It was an incredible amount of pressure for over 5 years with endless 80 hour / 7 day work weeks. Frankly, I learned a lot about how important a work/life balance is and should be to avoiding burn out and maintaining good health and design / dev. I  pushed through though it and so my own organizational, time and project management process had really become fine tuned because I had little to no room for error. New packages would go from concept to alpha to release within a day or less to meet the rapid demand, sales and delivery process.

Ultimately, it was some of the hardest work I've ever done in my 20+ years of experience. It was truly a trial by fire and I'm grateful for the experience as harrowing as it was because it has made me really unafraid to take on any new challenges down the road. 

Results

Sales from this product more than doubled the net worth of my former agency employer. It also doubled sales for Rediker in that school website category where they had previously not been competitive. This product is still actively sold and still continues to be deployed.

Gallery

The following is a small sampling of just the varied schools that utilize the product. Some schools would lean on a more beauty inspired approach and others were just outgoing communications machines. Trained staff would help them get going by doing partial or full migrations and getting the theme started with branding and colors. The theme framework in conjunction with the powerful CMS tools really allowed them to do whatever they wanted in their approach. Really striking a balance between a full "self-serve" product but with guidance for best practices and how to make their school look great and modern, be responsive and usable. 

Required
Required
Required