Today we're building websites inside really powerful content management systems. These tools give their users a lot of power over their content and that is honestly, really rad... sometimes.
For me, I tend to like to work in absolutes with rock solid data and research that allows me to paint a really clear picture. Is it realistic to assume that every project will launch with that kind of comprehensive groundwork behind it? Nope! Probably anyone who has worked in this field can tell you, you need gray area. There are obstacles and unknowns, missing data points and budget constrictions. You need to just be able to let something go at a certain milestone when you've made all the informed decisions you possibly can. You can try to lead your client to best practices afterwards with good training and tips for managing their own content and even sometimes elements of the design. It can be real shock to see how those tools got used months later and the process of unraveling and cleaning up has to be done.
Thankfully... we have an agile workflow process, some deep breathing exercises and some super chill music on the ol' Spotify.
Let's fix this thing.
Thankfully... we have an agile workflow process, some deep breathing exercises and some super chill music on the ol' Spotify. Let's fix this thing. I submit for your reading pleasure, a Valley Opportunity Council (VoC for the rest of this blog) website. This well-meaning client got their website re-done by yours truly about oh.... maybe 3 years ago now. It isn't super relevant to this blog, but their original site was not responsive or mobile friendly at all and lacked a lot of structure and modern CMS tools of course. So the focus of the initial build was entirely on just getting them up to speed with modern times and a usable website for both them and their clients.
They are a fast moving, constantly evolving kind of organization with lots of programs to manage. Their previous site had minimal data to use and my content strategy due to the unknowns and really budget considerations did not take me much further than the home page. I really just had to let them have a go at managing their own content so we could gather data and learn more about how they were going to use their website. So it made the most sense to give them the keys to handling their own content management.
When they popped back up recently with some concerns about their content not matching their branding and some other odd formatting and organizational things, well... Believe me, my intentions here are not to belittle or demean the content management they did on their own. In fact, I'm grateful in many ways to see how they used the tools available to them and this allowed me to document the fixes based on what I could learn based on their behavior and needs. As I said, they are well-meaning, good people and hey, things just went a little rogue. It's important to just park the ego and get down to work.
First, let's take a look at what even is VoC...
- A non-profit organization that offers all kinds of assistance programs for residents of Western Massachusetts a.k.a. "The Pioneer Valley."
- Some rapidly changing programs and some evergreen programs. Each program has different location and contact information.
- Two kinds of outward facing communications. The people looking for assistance and news / info for the people involved with the organization.
That doesn't seem so complex... so where did it go wrong?
They essentially had a blank canvas to develop their content, and things got a little weird.
- This is a standard "right sidebar" page template in the CMS. The downloads and info in the aside therefore would naturally fold under the main content in the left on a small screen. This would make it really hard for mobile users to find that info all the way at the bottom.
- General overall lack of focus and formatting, clean presentation of data in obvious "lanes" for ease of use.
- Non-centralized contact and location information is problematic because should any of that data change, they would now have to remember where those locations are referenced on each individual page of the site rather than a facility to change it centrally and have it reflect site-wide.
- Certain graphic elements with important call-outs like a phone number in a off-brand color starburst are not ADA Compliant. Most screen readers are not sophisticated enough to read text in images, although the technology exists, why tempt fate here? We don't need to do that.
- Images floating next to text elements like the "naeyc" logo can be problematic when on small screens because it may not snap the graphic to its own line making for illegible word wrapping.
- Not pictured on this example but other pages also had brightly non-brand colored boxes around blocks of text.
The navigational structure was also running a bit deep for what was really needed. Check out this screenshot if the sitemap, you can see immediately like I did that the first child page under "Early Education" was really not needed. This is just one section for example's sake, and admittedly these are are complex programs with multiple locations but again, in thinking about moving locations to a centrally managed database, we can eliminate a LOT of this child page navigation. Especially since most of those location pages were actually pretty light on content.
OK so I expected to have to maybe fix a few things back when we first launched this site but I was a little overwhelmed by the amount of data and lack of structure. So time to fix it up.
Fixing the sitemap / navigational hierarchy is easy. Really, they had good "buckets" for each of their programs it just needed some love to remove the unnecessary child pages where they existed. I wasn't worried about that and the CMS tools really make re-organization a breeze, it's possible to do that work on the fly if it's this obvious a thing to fix. Considerations were made for ensuring any eliminated "middle-man" pages here would re-direct to a valid page in case old links were hanging around out there.
UX/UI Sketches... old school but still cool to me.
A program landing page that works like a Swiss army knife.
One of my favorite things to do is to take a deep dive on content and come up with a clever way to present it in a still-flexible way for the CMS editor user but also be presentable for the end user browsing the site.
VoC's programs are kind of all over the place. Some have gobs of data, locations, contacts and others have a simple block of info.
Seen here, is a comprehensive program landing page that has configurable "switches" in the CMS to turn on / off different tiers keeping all the data structured and clean.
I achieved this by studying the most complex program I could find in their offerings. That ended up being the Farmers' Market program. It had the basic description info you expect but also, events, galleries, news, vendors, sponsors and more. By starting with the most complex program, I ensured that the page could be simplified via the above switches I mentioned earlier to show or hide only the areas needed for the less complex programs. Once I had road mapped the most complex route I got to sketching some layouts utilizing existing UI Kits and components that had been developed for this site to begin with allowing me to cut down on a lot of UI design time. For starters, I really just sketched layouts on graph paper. Yeah, that's old school... I know, but the client did not have a sign-off on this process with this work, they trusted in my approach so I could operate pretty loosely with my framework.
I also moved all events, contacts and locations to a centralized relational database that can be managed in the CMS' dashboard easily too. This included designing new view templates for the "blocks" that ouput that data, so a few new UI components here. Should they now have staff turn-over or a location needs to be changed or added, it is simple to do it in one place and have that reflect site wide. So the user experience here does not end with the end-user. It goes right into how easily the site is to manage for the editors too. That's a really big part of the work I've done in many web projects. It's important to me that the things I build be usable inside and out.
A big component here is also the "sticky" in-page navigation bar. This allows users to quickly jump to the different tiers in the page, even on mobile, to quickly access all the information they need.
Other Notable Improvements
Every program had at least one visual element which I've accomodated in a neat-o animated splash area at the top. All the in-page navigation elements will smooth-scroll to their destination for a nice clean experience.
As of writing this...
This work is still ongoing. In the spirit of an agile approach I am systematically taking apart one section at a time and re-grooming it to this new format. This has also been a process of undoing some of the off-brand elements such as colored boxes around text and so on. It also just so happens to be in the middle of this whole COVID-19 quarantine so there will be a centrally managed alerts system I am also working on. Looking forward to checking back in a future post about that perhaps.
Thanks for joining me on this journey to improve UX and Design for VoC.