If you've been poking around my website you'll have noticed that this BHN client is a big one for me, I used it a lot in my examples and like so many businesses right now affected by COVID 19, they have had to roll out some really rapid changes in order to continue serving their clients. While this COVID biz is a pretty extreme case, it really represents well why designing and building modular components is so important.
I mean, I've been on this planet for over 40 years now and I have never seen anything like this so I've certainly been seeing new challenges everywhere that would have been hard to predict and varying degrees of success in addressing them. We're all in this great big unknown boat ride to... somewhere? But I'm not here to wax philosophical. Suffice to say, changes are needed in many places and the window to do them is very small. This here little blog post is about a rapid, and I do mean RAPID, response for my client BHN in helping them adjust to the changes this pandemic has brought about. This reinforces my approach to designing and building everything modularly so I can deploy a rapid response, a rapid prototype, a rapid development and rapid rapid rapid... phew. Let me catch my breath a minute.
The big problem here is that this client had a thriving calendar of groovy events they would sponsor or put on throughout the year. Those events were being fed into the home page in a slick little carousel widget. Life was good, we were out there, taking in the sunshine, going to movies, having an espresso in a coffee shop... but uh yeah. All that stopped and thus we were left with this massive hole with no events.
Additionally, when I designed and built this site they had very limited publishing calendar. the organization itself has since hired a PR person who is now interested in increasing the amount of blog and news posts they would be publishing. So the singular "featured news" post was also not suiting their needs, you can see two stacked up here in the screen shot next to the big ol' blank.
Not very cool or chill looking... as you can see here.
I was tasked with coming up with a solution for them to feed more news into the home page, do away with the events altogether since well... they're done with events most likely for the duration of the year.
My absolute directives were...
- We need more news items.
- Remove events.
- Make it look a little different but still blending well with the existed UI kit / Elements but...
- Don't rock the boat too much because...
- We need it a week before yesterday. But for real, I had a 3 hour budget and less than a day to turn this around.
Thankfully when I designed and built this site I was very modular in my approach. My UI Kit is built off a custom setup I developed which reflects the same process one goes through building a bicycle. Basically, you have a frame and then all the components you attach to the frame. Sometimes components come together to form elements, like the groupset, for non-cyclers, that is the crank, shifters, cassette, derailleurs and so on. Essentially the drive train. So I break my elements down into similar buckets.
The frame in this case is the base document and resets. Everything else like grid systems, buttons, calls to action, grid items and so on are components. A groupset would be the combination of say, several grid items coming together to become a carousel of items. Sitting at the top of that is a build sheet where base values are determined like brand colors and fonts.
I've been using this approach for many years and it's really served me well. This was inspired by Brad Frost's atomic approach but... I didn't really excel in science class. I am however very hands-on and mechanically inclined so breaking it up into bicycle parts made a lot more sense to me.
For this task I had to extend the UI Kit with a new groupset because they wanted something that looked just a little different but still matched the overall style. If it wasn't for that, I would have just gone right into a "design in the browser" approach. But I went to Adobe XD to flesh out my approach.
So this is where I ended up after a sprint in Adobe XD land. There were a couple things bothering me about the original site that I could now address with this task too.
- Fixed the gutter between the featured and carousel area to match the same gutter width used elsewhere and align it so it matches up with the action tiles above it.
- I wanted to extend some functionality to this news feed by session tracking when a visitor has read the article. So in the carousel, those items will be flagged read / unread respectively.
Over-delivery and thoughtfulness goes into just about everything I do and despite the speed of this little project I knew these items could be done very quickly. This task had no time allocated for proofing, I had to deliver PDQ.
The entire CMS runs in a MVC (Model, View and Controller) format. This works very well with my groupset approach, and so I went about developing the changes for this new "block" in my local environment. The model and controller part of this whole thing were really done already since the news/blog engine was there, working... groovy. I did extend the blog post controller however to utilize Web API localStorage to flag when a visitor has been on the page. This is how I am tracking the read / unread utility.
Once dev and QA was done locally, I deployed to the server. Here's the final result.
I'm glad for my original approach in keeping things modular or I would have had a much harder time designing and developing this out so fast. I was able to come up with a UX plan, including some concepts for improvements and adding functionality and crank out the dev / QA and deploy all well within the 3 hour budget timeframe.
Now, this client is well versed on tracking behavior and metrics on their site so I'll be looking back in on them to see how things are performing long term. It's possible down the road we'll have to re-introduce events feed somewhere but hey, same approach. But yes, major reinforcement of my methodology here. Design / build modular and flexible and it saves hours and hours of noodling down the road. It also provides a good solid foundation for decision making. At a glance knowing what is in the library of UI elements allowed me to make a fast and informed choice to head into UX exploration rather than try and chug through it with a "design in the browser" response. Had I gone the other way I could have easily blown the budget. Now they're back up and running, keeping their peeps informed and moments after I pushed my changes to production their PR person was pumping out new content.
Boom, boom, boom. Done. Thanks for coming along on this journey!