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:

Poster for Pinion Display Font

I recently had the honor of creating a few promotional pieces / type samples for Greyletter's new display face Pinion Display.

In the type designer's words:

"Pinion Display is a modern decorative typeface that is constructed using simplified mechanical ornaments blended with irregular curves and flared serifs. The result is a font with the consistent rhythm of a sans-serif and a touch of historical charm.

The goal of Pinion Display was to create a modern decorative face that is constructed as if using industrial techniques. Characters were fabricated, rather than drawn, by joining together a variety of components. Proportions and curved forms were then fine-tuned to achieve balance and approachability when characters are combined into words. Finally, capitals without ornaments and small caps were added to make the typeface more versatile."

Pinion offers language support uncommon to display faces, including Western, Eastern European, Baltic,and Turkish characters. This poster was inspired by Eastern European Art Deco-era advertising. The design is currently on display at TypeGallery2010, an unjuried showcase of new type design, presented by The Society of Typographic Aficionados (SOTA) as part of TypeCon2010: Babel.

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.

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.