Illustration + Interactive: A Fetching Trend

HIDC-600x50-banner


CulbrethBlair_SpeakerPhoto_2015HIDCBoston.pdfIllustration has earned a starring role across the Web and is increasingly being integrated into apps and interfaces. This trend is good news for designers who like to flex their fine art muscles. Blair Culbreth, a graphic designer and illustrator working at Viget, believes that illustration can be a powerful tool for communicating ideas, connecting emotionally with users, and creating a product or service that feels truly unique. At Viget, she works with clients ranging from startups, big brands like Shure Inc., and nonprofits such as EarthEcho International, World Wildlife Fund and The Lupus Foundation of America.

At next month’s HOW Interactive Design Conference in Boston, Culbreth will be teaching attendees about how illustration can fit tasks big and small; sharing ideas for how to adjust your illustration style to fit a site’s UI and appropriately reflect its content and audience; and revealing how to find small opportunities to start incorporating illustration into your work immediately.

Here, she shares the backstory behind a soon-to-be-released project called PowWow, an internal tool for Viget that makes it quick and easy to schedule multiple appointments.

brand-guidelines-core-personality

What was your role with the project?

We launched the initial version of PowWow back in 2013. It was the dream of our UX designer, Laura Sweltz, to have a tool that made scheduling usability tests easier for herself and all UX kind. At Viget we have Pointless Corp, our innovation lab for working on non-client ideas and experiments together. Laura suggested her idea for PowWow as a quick Pointless Corp project and rallied a team together to build and design it.

It’s been a big hit with designers and researchers and is now used by some pretty awesome companies. So earlier this year we initiated a new round of work to go back and give PowWow the attention and love it deserved. The all-new version will launch later this year! For both this round of work and the initial 2013 design, I was the lead designer on the project. I’m in charge of the branding, visual design and even pitch in with copywriting sometimes.

brand-guidelines-mascot

What was the objective of this iteration? Why was it initiated?

PowWow was in need of a head-to-toe revamp. We wanted to adjust the messaging and start targeting users outside of UX and usability testing to emphasize that PowWow’s a perfect solution for others, like professors scheduling their office hours with students, realtors arranging house showings and appointments, and really anyone who coordinates lots of appointments with different people. We also wanted to take what we’d learned from user feedback in the past two years to make pow wow easier to use and more intuitive, and add features they have been asking for.

Design-wise, it also needed a lot of attention. In 2013, I’d made a fun but somewhat rigid design for this quick, simple calendar tool. I need something that is flexible enough to scale as we continue to add new features. We also learned since the initial launch that some of our bigger users needed to re-skin the tool to match their own company branding when they sent out calendars. The old design had a quirky, complicated color palette that was just way too rigid to re-skin. The new design uses one warm, distinct pink that makes PowWow memorable and stands apart from dry, impersonal looking competitors (I may have had the movie “Her” on my mind when I picked it) but also can easily be switched out for re-skinning purposes without compromising the rest of the design.

And then PowWow itself simply needed better branding to stand out from ever-growing competition. It needed a strong personality, polished visuals and a cohesive brand to feel like a professional, reliable tool.

calendar-creation

What was the turnaround time for the project. How did that impact your approach or the outcome?

Since PowWow’s an internal project, it didn’t have a strict deadline like our client projects. Which is a good and bad thing. The good part is that we could put in extra work to make it really special when we were light on client work. The downside is the timeline has gotten dragged out and the re-launch has been delayed since our developers have had to jump onto more pressing projects.

For me, the extra time and loose deadline has given me the ability to really think through my decisions and revise and polish them more than I could on a tight timeline. Creating custom icons and illustrations is the kind of thing that gets pushed off on a tight project, so it felt downright luxurious to have the time to design a cute mascot and even illustrate little variations of the mascot for fun touches throughout the site. Just a few weeks ago, I completely redesigned a section of a page I’d made a few months ago because I’d had time to let the problem percolate and come up with a better solution. (Of course the challenge now is to stop continually picking at it like that and just let the darned thing get built already!)

calendar

What were the challenges associated with the project? Any unforeseen bumps in the process?

The delays in the timeline have been a bit of a bummer. Front-end developers at Viget do awesome work and have plenty of client projects to keep them busy. Consequently, the new design has, so far, been built in fits and starts by a couple different developers. The biggest lesson to take away from that process has been to write down and document every.thing. as the lead designer. When the new developer asks me why I made a layout decision four months ago, I wouldn’t remember if I didn’t have it written down somewhere. And it’s a huge help to have details, files specifications, animation ideas and all the little, random fun ideas we’ve all had throughout the project written up for reference. If we had only talked through them in a meeting or mentioned them in passing, they would’ve been long forgotten by now.

homepage walkthrough

emailWhat was the client and/or end-user response to the project?

Since we are our own client in this case, I can say the project team is psyched about the new design and re-launch planned for later this year. It’s a project we’re all attached to, and everyone’s proud of the work we’ve done to make it bigger and better. It’ll be exciting to share that work with users soon.

 

What was your favorite thing about working on or about the outcome of the project?

Creating an adorable puppy mascot! Being able to focus so much energy on a fully thought-out brand and personality was one of the biggest differences between now and the initial 2013 design. Cute animal logos and mascots aren’t the perfect solution for all products (even though it would be adorable if they were). But for PowWow, it made perfect sense. The puppy is modeled after a herding dog, so it reinforces the idea that PowWow “rounds up” or “fetches” your appointments for you. It makes the name more memorable and gives it some context, since it’s close enough to “bow wow” that you can connect it to a dog. And with the focus of the new design being about warmth, feeling personable and connected, a cute animal face embodied those things. Users have written in with such love and enthusiasm for PowWow, we wanted to have a design that was just as lovable.

And selfishly, a cute mascot also made the rest of the branding and design work, the stuff that would usually feel like a chore, a million times more enjoyable. Social media assets? Apple touch icons? Put a puppy on them. An email template for sending out appointment confirmations and reminders? Make them look like the puppy sent them. Making promotional items like stickers, shirts and cups? Puppy, puppy, aaand puppy.

If you’re an interactive designer with an affinity for illustration (or puppies!), you’ll want to check out Blair Culbreth’s session, “Illustrate a Better Web,” at the HOW Interactive Design Conference in Boston November 5-7. Register by October 8 to save $200!


WebA logo is one of the most important aspects of any business, and most designers have spent a fair share of time creating effective, cool logo designs for clients. HOW Logo Design Competition & Awards began in 2008 and quickly erupted as a prestigious contest that recognizes great logo design. The HOW Logo Design Awards are presented by HOW Magazine and F+W Media, publishers of Logo Lounge 9. Enter now.

COMMENT