BHN, inc.

Behavioral Health Network, Inc. (BHN) is a regional provider of comprehensive behavioral health services for adults, children and families. BHN began as the Child Guidance Clinic in 1938 and has grown into the largest behavioral health service provider in Western Massachusetts. Through my prior agency position I was hired to re-do their website as they were experiencing some difficulties with their exisisting website.

The Pain Points

  • Their website did not obey, enhance or work well with any of their branding guidelines.
  • It did not accurately present their mission and objectives.
  • It was difficult to self-manage and their vendor was very slow to make requested changes.
  • The programs were extremely difficult for users to find and had no relational connection to their locations.
  • The functionality pain points were causing a flood of customer service phone calls and emails.
  • They'd spent a significant sum of money to have this site developed and were feeling very jaded by the whole process.
  • They had a contract that was about to expire and needed to act quickly in order to move away from it.

No worries, right? Well, there was one...

I specialize in merging branding with user experience design. I knew I could deliver a website that builds upon their brand and provides a fluid user experience to their visitors and patients. I wasn't worried at all about addressing any of those pain points. I could see their business model, I could see their goals and I could see a path to getting there.

The biggest hurdle in this was going to be getting buy-in as they'd really been feeling spurned by their past experience. During initial proposal meetings it was clear that they all wanted and needed a new web presence but there was a lot of furrowed brows at those meetings and I knew it would be an uphill battle to win their confidence.

The Pitch

During our pitch, I constructed this pyramid as part of my proposal documents. This pyramid is based on the popular Psychology tool, Maslow's Hierarchy of Needs. Maslow's pyramid demonstrates that certain foundational elements must be in place at each tier in order to achieve and support the tier above it. I really love this hierarchal way of thinking, it very much flows in line with my own on user experience approach. I also knew that this would be a good way to connect to them being that they work in the behavioral health field and would be familiar.

In my pyramid I demonstrated that by building upon successful layers we can support and achieve their end goals by reducing their need to overstaff to accommodate an unusable website. I wanted emphasis here that while you can just skip to the top, you won't have the strong foundation to support it and that is sort of how they were positioned in their current web presence.

The pitch was successful and I got the initial buy-in I was looking for.

Low Fi Sitemap and Information Architecture

BHN is quite a large, multi-location organization with hundreds of programs. I needed to go through a process of IA and Sitemap development to best understand their offerings and needs. 

I knew a relational database was going to be key to making sure that no matter where a user landed, they could find their way to the program they were looking for. For example, a visitor who knows what they need might find themselves looking at locations and then discovering the programs offered at that location. Versus a less informed visitor who doesn't know where to begin but can start with a high level service page like "Mental Health" and then drill in to find specific programs and locations they are offered at. Both avenues had to be clear and cross referenced. This was a major feature that was missing on their current site and organizationally the biggest challenge to overcome.

Low Fi Wireframing

I had received SOME metrics data from BHN but it was really twisted up since their website was not serving their needs and it was hard to get any real reliable information from it about what people were doing. We knew for sure people were getting lost through because of the substantial call volume and verbal complaints from their patients. I was able to learn about the pages people were eventually finding their way to though and how quickly they may have bounced or got lost as well as which services were most popularly visited. This project did not have the time or budget for a full on data scientist so it was up to me to do the detective's leg work.

With some useful metrics data, feedback/wishlists from stakeholders, studying competitors organizations and my own process outlined in the pyramid, IA and Sitemap exercises I was able to flesh out wireframes. This included user flows on macro elements like headers as well as full page hierarchy for top level service landing pages and the home page. I also included generic page template layouts.

For at least the last 15+ years I have built websites on some kind of Content Management System. This one would be no different and during all of my visitor-facing work here, I was also always mindful that the client would be self-managing the website so usability certainly never ends with the end-user. Ensuring they will also be able to use the tools as I intended was part of this journey mapping too.

Hi Fi Proofs, UI Exploration and Artifacts

I set about developing proofs next. I kind of flip-flop between Adobe XD and Adobe Photoshop for this kind of work and I went with Photoshop this time. I had already demonstrated user flow in my wireframes and continued to get the client's buy-in at each step and build their confidence. The fact that we had very limited time due to their contract running out meant that I needed to react quickly. I knew I was building this in a really powerful and flexible CMS and that any prototyping could actually be done on the production alpha site. So a tool like XD with all that build in prototyping was not really necessary for this.

Hi Fi Proofs, UI Exploration and Artifacts Cont.

What I didn't have was buy-in on the visual design yet, so time to put some polish on these wireframes. I always work in a macro / modular fashion. I like to isolate elements, buttons, message boxes, headers, footers and so on in differing states. I use those modular components to construct the full page proofs. This client thankfully had a library of just fantastic images and photography to tap into that really helped the design shine through. I am a staunch supporter of blending branding to user experience. I believe weaving these things together in a seamless fashion helps users understand your business and organization and my approach was no different here. I utilized rounded shapes that echo the rounded swoop in the BHN logo as major calls to action to grab the users eye as they scroll the page.

Hi Fi Proofs, UI Exploration and Artifacts Cont.

I gathered with the stakeholders to reveal the final designs for them and I walked them through my presentation. When I glanced out over the group in the conference room, I could see a collective sigh of relief from them as they applauded. I was floored because I don't think I've ever gotten applause at a design reveal, but this was the buy-in I had worked really hard for. A real chance to un-furrow those brows and gain their full confidence.

It is easily in my top 5 most gratifying professional experiences of the last decade or more. 

Development

The website and relational database was all built on a powerful CMS. I utlized HTML, CSS/LESS and Javascript for the front-end. The back-end consisted of PHP/MYSQL.

This was a whirlwind process. We were running low on time until their contract would expire and I burned the midnight oil, running QA on the fly and coordinating with copywriters who were re-writing a lot of the program content as well as BHN stakeholders who were also restructuring their departments and providing new content. This was a bit like a mechanic working on a car while it's being driven down the highway at 100 mph. In pretty typical agile fashion, I would break portions up modularly for development and tackle them and check off milestones in project management.

Usability

Usability is a really big deal in any web project but I wanted to make sure to go the extra mile for BHN on this. Many of their clients can easily find themselves in a position where they cannot get to a desktop computer. Ensuring the very deep navigation and programs are as accessible on desktop as they are on mobile devices was of upmost importance. The off canvas main menu has all the functionality of the desktop mega menu to quickly get people where they need.

Mobile Usability

ADA Compliance

The content for this project ran very deep and a lot of content is generated from relational database entries. In many simple brochure sites I can usually take compliance one page at a time but I'd die of old age before finishing on a site this deep and ever-changing. Instead I built a "reader mode" switch that is among the first tab targets a user can hit. This switches off the stylesheets and restyles other areas to simplify the view greatly for screen readers and tab navigation.

Along with the hard switch for ADA compliance the standard site is fully tab navigation capable and all animations / interactions are soft eased to create a sense of calm.

ADA Compliant Healthcare Industry Website

The Take-Away

This project had many elements I was familiar with. I am an organizational wizard and I love solving problems but I knew all that about myself already and I was completely comfortable with addressing those issues. Where the monkey-wrench came in to play was the interpersonal issues and really having to push hard on my pitch process to get their confidence and buy-in. Let's face it, at the end of the day we're all in business to do business and a project that is stale-mated isn't really paying any bills. The ability to keep a project moving by answering any and all concerns through logical design choices is an important "soft skill" that plays in concert with any outgoing creative skills. I always say, it's never enough to just paint pretty pictures.

I found during my experience here that there's a sort of "magic zone" that happens between meeting the projects end goals and fulfilling the emotional needs of the client. Maybe it is pandering a little and that's ok, so long as the intentions are pure and are in line with expectations and goals.

Visit BHNinc.com

FloDesign Sonics
FloDesign Sonics
Links to: FloDesign Sonics
Required
Required
Required