Projects | Hospital Website Design

I have been fortunate over the last 2 years to serve as a freelance designer for a company called Medseek who provides enterprise and web solutions to hospitals and healthcare organizations all over the country. My role has primarily been contributing design concepts for consumer websites. Medseek works with several designers on any given project and each site goes through many rounds of revision, testing and evolution before it finally launches to the public. I thought it might be interesting to share a bit of that process for a hospital site that recently launched based on my design.


My initial homepage design concept:



... and showing Flash marquee interactivity:




After several rounds of revision, final art-directed design with additional colors, rearranged and edited content, and details optimized for production in proprietary CMS system:




After user testing of the above design, additional specific design and layout changes were requested:




This is a screenshot of the final site in the browser—client loves it, but to me it's amazing to see how different it looks from the initial concept!




And just for fun/reference, here's the client's previous "before" site:

Process | Creative Briefs Made Simple

Recently I found myself halfway through a web design project only to realize that I was just NOT on the same page with the small agency I was sub-contracting for. I the past, this agency hadn't ever given me a ton of direction but had always been happy with my first attempt at a design, so the unequivocal thumbs down surprised me. We worked it out, and came up with a strong design in the end, but it took a solid sit-down to really discuss the goals for the site, end-users' needs, and the client's existing branding. If we'd worked these things out up front, the first round of design would have been much more focused and effective. For me, the process reinforced the need for a solid and well-thought-out creative brief, even for the "simple" projects, and even if, as a designer, you sometimes have to write it yourself.

So what goes into a good creative brief? Simply put, the document should "put down in writing" the project scope, goals, and anything that might influence your design decisions. I've seen creative briefs that spanned over twenty pages with a thorough market analysis and long-term brand strategy, but most web projects don't require anything that dense. In my experience the basics should include:

1. wireframes for the site's homepage and typical lander and body pages, and for any additional pages that feature specialized functionality or content such as galleries or forms (for simpler sites, a wireframe may not be necessary—an overview of planned pages, what they contain, and how they're linked, may suffice).


2. a snapshot of the target audience(s), what they are expected to do with the site, and any special needs or factors such as physical impairments, typical education level, internet connection speed, level of familiarity with web standards, etc.


3. a list of adjectives that describe the personality and emotional tone of the client's brand (ie. professional, high-tech, high-touch, warm, compassionate, expert, educational, helpful, gentle, soft, authoritative, strong, bold .... that kind of thing). Sometimes this is best broken into two lists: "What we are to our current audience," and "What we'd like to be."


4. brand standards—vector logo(s), color, font and photo styling specs.


5. examples of stationery, brand collateral, print materials, advertising, TV spots, whatever the client feels best embodies their brand's current look and feel.


6. examples of and responses to competitors' sites—how does the client feel about design, color, use of photos, fonts, white space, and usability of things like interactive homepage marquees or tabbed content?


7. some sites or brands the client likes that may not have anything to do with their industry at all. It helps to have some description of why they like them, and what details they may not like.

Once a good creative brief has been compiled, ask all project stakeholders to agree to it, in writing. When you present your designs, you can refer back to the fact that in the brief, everyone agreed that X, Y and Z were the most important functions of the site, and point out how you've matched the design to their existing brand. This should focus your decision-making and cut down on requests to change the color scheme or add unnecessary elements to the homepage, or worst of all, start over with a new design.

Process | Portland Buy Local Directory Covers

Background

Portland Buy Local is a campaign of the Portland Independent Business & Community Alliance. When my friend and oftimes employer, Steve at Tugboat Creative, took on the job of art directing and layout for their first annual printed directory of local businesses, he approached me to design or illustrate an eye-catching cover to bring to life the title, "Find Your Independents." The job was totally open-ended—I could choose the concept and execute it any way I'd like. The only restriction was that the final design be confined to 2-color, cyan and black, for affordable printing to match the organization's logo.


Year 1: 2008-2009 Directory

The concept that I presented in my rough sketch, and that the Buy Local board agreed to, was an illustrative image that would capture the essence of a whole area of town, but without favoring any specific building or business. I wanted to point out that local businesses are all around you—you simply have to look. I chose to render the Old Port area, which is known for its eclectic array of local restaurants, shops, and galleries, as well as for its historic 19th century architecture and cobblestone streets.

To prepare, I wandered the streets, taking lots of photos of architectural details. I wanted the image to feel true to this part of the city, but without being identifiable as a specific location, so in my drawing I combined and recombined details from different buildings and street corners in the area.

To execute the final image, I scanned my drawing and used Illustrator's Live Trace tool to convert it to a vector, black & white image. I then added simple, blocky color behind the drawn layer. I was hoping to achieve a style reminiscent of the limited-color children's books I remember reading as a child.

Here's the progression from sketch to drawing to final cover:



Much of the hatching and shading details of the pencil drawing are lost or distorted in the tracing process, but those that remain help to give the final image a richer character than if they'd been left out in the original drawing.




Year 2: 2009-2010 Directory

Since downtown and the Portland peninsula tend to be the most obvious hub of the city's economic activity, the many businesses located off the peninsula can sometimes feel as though they are unfairly overlooked in conversations about local economy. Portland Buy Local has tried to combat this by regularly talking about and featuring these businesses alongside their downtown neighbors.

With a great response to last year's directory cover, but a feeling of being "left out" resonating from the farther reaches of town, the goal this year was to keep the theme and style going, but highlight a drastically different part of the city. The board agreed upon showing a mixed-use area typical of Brighton, Forest and Washington Avenues.

For me, this presented an interesting challenge simply because the local businesses in those parts of town are much more spread out geographically; it was a struggle to fit in enough distinctive details to make the place feel authentic and vibrant, and to simultaneously avoid highlighting the non-local chain businesses that share these landscapes.

To speed up the drawing process, I began the initial drawing at full size and presented it in its rough form as a sketch. The board asked for only a few minor changes. The final, traced and colored image is now completed and in the approval proess. The new directory comes out next month—look for it at over 200 locally-owned businesses all over Portland.

Client Profile | Blush Imagery

Blush Imagery is a boutique New England wedding photography company specializing in a natural, photojournalistic style. Owner, award-winning photographer Beth Fitzgerald, has a fun and spontaneous approach to wedding events that leads to relaxed images full of personality and life.

Background
When Beth came to me she was looking to redesign her branding materials from the ground up. She had just moved to Maine and was looking to redefine and freshen her clean and crisp, but somewhat stale, company identity as she entered the competitive New England wedding market. As the face of the company, she hoped that the new identity would express her own fun, lively personality and her knack for capturing her subjects' lovable, if quirky, traits. At her price point, she also needed to exude enough professionalism and class to appeal to a relatively well-to-do clientele.

Evolution

LOGO
The Blush brand identity began with logo concepts. The final logo design came extremely quickly and easily. Beth wanted to avoid cliché wedding imagery, like cakes, presents, and dresses. She has a strong background in photojournalism, so I based many of the logo concepts on abstractions of camera shutters, which happen to look a lot like asterisks when simplified to this extent. Surprisingly, Beth seized onto the second concept she saw and has loved it ever since, even when I tried showing her additional variations—I just couldn't believe the final design could come about so easily! The somewhat muted color palette was chosen as a more sophisticated, modern twist on traditional pastel wedding colors.



STATIONERY
From the logo, we moved on to stationery, which was printed on bright white smooth stock with rounded corners for a touch of the different.
We also designed a series of promotional postcard mailers:

E-MARKETING
Beth has a great design sense and has been able to design and maintain her own website to match the brand collateral design. However, when she needed a PDF e-brochure almost two years after the launch of her new identity, she asked me to dive into it. This was a great opportunity to continue to refine and revise the brand and bring in some exciting new elements to keep it looking fresh. A new san-serif font and round-edged box elements were introduced to echo the logo and organize information, and the color palette was expanded slightly. Since this is a selling tool, Beth's best photos were prominently featured, and the final page is an editable PDF to make signing their contract super easy for potential clients.



MAINTAINING RELATIONSHIPS
Following the e-brochure came the design of two additional e-tools to help Beth maintain relationships with existing and prospective clients—a blog and e-mail newsletter. These echoed and expanded on the visual design elements of the e-brochure.




What's Next?
Blush is all booked up for the 2009 wedding season and 2010 bookings are going strong, thanks in part to the new e-brochure. Beth is committed to blogging fairly regularly and just signed on to Twitter (http://twitter.com/BlushImagery). She is constantly revising the way she presents her clients' photos, albums and account info online to optimize the experience for them. These digital and interactive tools let her propel and market a great brand both online and off. And of course, her personalized service and beautiful images continue to delight her clients and their guests at wedding events most every weekend, all spring, summer and fall.

A bit of a nip and tuck for the website

I've been working on a new website for some time, but in the meantime, I took an hour or two today to give the old site a mini-facelift. I added links to this blog and my favorite networking sites to the nav, updated my "logo" to match what I'm using on new stationery, and added a visual (with rollovers) to the list of recent work that tops the page.

See the before and after below:

BEFORE:




and AFTER:

Retro-/steampunk-influenced calling cards

I'm always excited when good friends ask me to design things for them. Usually they come to me not just because I'm a designer who is their friend and so might give them a deal (though I will), but because they share my design sensibilities and want to give me the chance to do my thing, my way, without any creative interference. That means I get to explore things I wouldn't for regular, full-paying clients.

I just wrapped up a quick little project like this for my friend Andy. He's transitioning out of ownership of a local coffee chain and not really sure what he wants to do with his career next. He was looking for a calling card that he could use to share his vital contact info with both personal and potential business connections. It needed to speak to his technical and mechanical aptitude and interests without implying that he was seeking any particular type of job position. He's a huge fan of steampunk design and collage art (a la Dave McKean), so I asked him to send me some stuff he'd seen that he liked the look of—an impromptu inspiration board of sorts. Here's what he sent over:




Comps

I leaned heavily on his inspirations for my first round of comps, scanning some mechanical bits from one of my favorite sources of copyright-free imagery, JG Heck's The Complete Encyclopedia of Illustration, and some ornate initial caps from an encyclopedia of general knowledge from the early 1900's. Here are the ideas I sent him:




We met and discussed the first round, deciding to avoid the overly feminine flourishes and veer toward more structure and solidity. We decided on a font and color palette and on generic gear imagery:



Final Design

Option 3 from the second set of designs was the unanimous favorite, and needed to evolve only slightly more. We decided to print the card both front and back, so I wrapped the background imagery seamlessly on all four edges and tweaked the placement of everything just a touch, and here's the final: