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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.