Web design: The EHR Group

I wrapped up a web design project a couple months ago for The EHR Group.

Mike Uretz, the Executive Director, came to me with a several-year-old FrontPage web site. Mike thought the web site looked dated and wanted something more contemporary. As his business consults with medical professionals about what electronic health record system would be best for them, he wanted his web site to appeal to both people who would be familiar with technology but also to be easy enough to navigate for people who weren’t very computer savvy.

I started out with some rough greyscale screenshots to provide different layout options. These are some of the ones that weren’t chosen:

The chosen design used tabs to help indicate the section and had both dropdown menus and left column submenu areas to provide obvious ways for a user to navigate the site.

I then started to work on some rough ideas for the home page layout, then worked on color schemes, shown in the screenshots below:

At this point, Mike still wasn’t sure exactly what he wanted on the home page. He had some ideas about the types of content areas he wanted but hadn’t yet pulled together the specific marketing text and messages that he wanted to convey. My initial round of screenshots had used a wireframe concept to lay out the content areas, using grey boxes and short placeholder text to delineate content areas. However, we hit an impasse as Mike expressed dissatisfaction with the direction of the design. Both Mike and I were still feeling each other out and trying to figure out how to best work together and communicate; it took a few phone conversations for me to realize that Mike was a very visual person and actually didn’t work well wireframes and content placeholders. So, I asked Mike to develop the specific content and wording he wanted for the home page while I built the HTML and CSS for the other pages. Then we went back to redesigning the home page, which went a lot better once he could see the actual content in the screenshot.

Below is the final result for the home page. Mike liked heavier use of graphics for the home page, including the two bottom left graphics, which we used in the other pages as well.

I had tried using smaller graphics to accent the pages initially, but Mike thought they were too artificially slapped into the content area. He liked it much better when I tried putting a larger graphic into the background behind the text. Each page has a different image related with the content.

By the end of the project, our working relationship had smoothed into a good flow. I understood Mike’s communication style; he was able to trust my design and working process. We were both very happy with the final result, which allows Mike to use Microsoft Expression Web to make minor changes to the wording himself. This is a project that I’m excited to add to my portfolio and which has taught me many valuable lessons about customizing my process to fit the needs and personality of the client.