Raised Eyebrow Blog

I recently redesigned a website for a personal friend and although it wasn’t done under the official umbrella of Raised Eyebrow, I found that the project offered some interesting challenges I’d like to reflect upon briefly.

The friend in question is David Eaves, who has more trouble answering the question, “What do you do?” than just about anyone I know. He’s a prolific writer, public speaker and consultant who works in three areas of interest: public policy, open source, and negotiation. I never imagined those three things could overlap in such interesting ways until I met David & heard him wax poetic on subjects like open-source community management (bringing negotiation skills to online communities) and Government 2.0.

So there you go: You already know what David’s biggest communication challenge on his website is. It’s demonstrating what he does in a way that makes intuitive sense to people reading his popular blog. The previous iteration of his site was a pretty typical personal blog, with a long sidebar filled with links to this & that, and hardly a self-promotional word to be seen. It was a great demonstration of his brilliant mind at work, but a poor sales tool. (It didn’t even have a Contact page. I’m serious.)

Now, David isn’t really a sales-y kind of guy (in case the lack of a Contact page wasn’t your first clue), and he didn’t want his blog to transform overnight into the website equivalent of a flashing “Buy! Buy! Buy!” sign. He simply wanted to pare down the visual clutter, and make it easier for people who might want to hire him to know how to do that.

I took a simple approach: I interviewed David about the kind of work he does & organized it into three categories: public speaking, writing & consulting. The first two merited their own pages, and the third got folded into the About page (since his consulting services are a bit more amorphous & his consulting clients generally come to him via word of mouth). And the rest of the menu bar was filled out with a page of media appearances (since David appears frequently on television & radio as a commentator on current events) and a “What I’m Reading” page that lists some of the writing that’s inspiring his free-flowing pen (or rather, keyboard). (We hooked up the latter with his LibraryThing and Delicious accounts so that they can be kept up to date automatically, saving him the hassle of updating the page by hand.)

The design process posed an interesting challenge: David really liked his old minimalist, low-key blog design and didn’t want too radical a change. He also didn’t want the site to look too “designed,” because he feels that part of his brand is a kind of approachable, do-it-yourself style that doesn’t jive with anything too flashy or trendy. So I had to really rein myself in and keep it quiet, monochromatic, and simple. (I love simple design, but I didn’t allow myself any indulgences on this one.)

The header is very similar to what he had before, but the menu bar was a new addition, making his “sales” pages more prominent. The sidebar got hugely simplified, to focus the visitor’s attention on what’s relevant & important rather than cluttering up the space with superfluous content.

But where I pushed David to be bold was in two areas:

1. The home page now features a single, complete post. This is rather unusual (though not unheard-of) for a blog, but it really allows the visitor to fully absorb one piece of content before moving on to the next. The previous post is highlighted in a box directly below the most recent post, to encourage further exploration of the site.
2. The pre-footer area is large & prominent, and directs traffic to recent posts, popular posts, the “sales” pages and to David’s various social media accounts (Twitter, Facebook, etc. etc.).

These two design decisions go hand in hand. If the home page housed five or ten posts, the pre-footer area would be virtually invisible, so it wouldn’t merit special attention. But in this case, once a reader has absorbed the content on the page they are reminded of the various options they have to read further. A lot of websites ignore the footer area, but when your site attracts voracious readers (as David’s does), it pays to reward them by allowing them to navigate the site from the bottom of the page as well as the top.

A lot of bloggers wear multiple hats and have little time to build stand-alone websites for each of their endeavours, and I think David’s site is a good example of a middle ground: he shares information about how to hire him without presuming that’s the goal (or desire) of every visitor, while maintaining a familiar blog interface to those who simply want to read his latest post. If a highly promotional website is outside your comfort zone, this site may hold some lessons for you. In particular, I think I managed to convince David to:

• Stop withholding information about your services from people who want to hire you.
• Always, always, always have a Contact page.
• Consider that bringing in a designer can be helpful even if you don’t want anything “designed.”

What Video Games Are Teaching Me About Motivation and Behaviour

I have a terrifying confession to make: Until very recently, I didn’t play video games.

That may not be particularly appalling to many of you, but for someone in my industry, that’s pretty embarrassing. Game designers are an integral part of the interactive design community, and I’ve always felt an affinity with them, despite not really knowing their territory. In fact, one of my favourite blogs is written by Clint Hocking, a former creative director at Ubisoft (and high school friend of mine). But I have long been more than a little sheepish about publicly admitting to not having a clue about gaming, aside from what I’ve read on Clint’s blog.

That said, it’s always educational to be late on the uptake with a particular technology; as a web designer I feel like it can help me empathize with the people using my designs who might not spend even a fraction of the time I spend online. I’ve learned a few things from my experience that feel particularly relevant to the work we do with our clients.

First, I had valid reasons for not playing video games until now. I didn’t have access to a console; I didn’t feel like spending money on one until its value had been shown to me; I had seen a lot of games that didn’t appeal to my interests and sensibilities; and perhaps most fundamentally, I was so green that even working the controller was daunting to me — that is, the basics of navigation and control felt uncomfortable and clunky. All of these practical resistance points are also true for many website users; even now when those of us in the industry refer to ourselves as “veterans” and to the up-and-coming generation as “digital natives,” there are still huge swaths of people on the planet who simply don’t need to use the internet to get through their days — as my uncle Ken, a farmer & logger in Northern Ontario, reminds me regularly. For those people, the only thing that’s going to make them interested in the technology is for it to become relevant to their lives.

It wasn’t until I discovered a game that I truly fell in love with (more on that in a moment) that I became invested enough to want to work through my painful awkwardness with the controller and my hesitations about the financial investment. (I haven’t touched on the time investment required, which is significant — this was another fear I had about games, and one that proved well-founded as I have found myself losing all track of time while immersed in the gaming experience.) But once I found a game I connected with, the obstacles fell away and my desire to interact with the game overcame all resistance. Us web designers are fond of parroting the maxim that “Content is king,” but we haven’t always been good at practicing what we preach — this has been a good reminder to me that what’s inside really is what counts. And just as all websites aren’t created with equal amounts of attention to content, neither are all video games.

The game that stole my heart is Assassin’s Creed II, an action-adventure game set in Renaissance Italy. Your character is a young assassin from a noble family who is avenging a betrayal of his family — but it’s actually far more complicated than that. You’re actually a modern-day guy who’s been projected back into the body of this 15th-century assassin, and you’re trying to solve a mystery involving the Knights Templar that traverses centuries. In the process, you travel through the gorgeously-rendered streets of Florence, Venice, and points in between, running over rooftops, climbing church towers, dodging guards, exploring secret tombs, hiding in crowds, stealing treasure, and oh yes — hanging out with Leonardo da Vinci. There are puzzles to solve, swordfights, thieving missions, and even some economic development to manage in a small town where your uncle’s villa is located.

The premise itself appeals to me more than some other games, but the real genius of Assassin’s Creed II lies in its execution. Game designers clearly put an enormous amount of thought into human motivation, and there’s something in this game for just about anyone. The rewards that you earn over the course of the game are a mix of financial (good old-fashioned cash), status (your armour and weapons get progressively better — and pricier — as you progress), relational (you meet new characters & gain access to allies) and intellectual (solving puzzles). It’s been interesting to observe my responses to the various types of rewards and see how they correspond with my real-life predilections. I think the real hook for me has been the mystery-solving part, because it lends an over-arching mission and urgency to the game that I have only ever felt when reading a complex and layered page-turner of a novel.

I honestly never imagined that a video game could make me feel so immersed, and provide such a strong emotional connection. Now that I’ve had this experience I’m far more likely to explore the rest of the gaming world and see what else is out there. But it’s also got me thinking about the factors that shift behaviour and that motivate us — which makes me further resolved to focus my summer reading on those topics. I’ve picked up Switch and Made to Stick (both by Chip & Dan Heath) but I welcome other suggestions.

I spoke today at WordCamp Vancouver – a one-day conference for people who work with WordPress (including developers, designers and users). It was a great event, thanks to the hard work of the organizers. The presenters shared lots of very useful information on design and coding as well as about social media and web culture.

I chose to focus my 25-minute talk on what I think lies below the surface of the work we do as web designers and developers, and that’s a more consultative and strategic role that we can play if we choose to (and if our clients let us).

The session was recorded on video, and I’ll post that video when I get the link that video is posted below, but for now I thought I would at least share my slide deck – particularly for those in attendance who requested it.

Video from the event:

(Many thanks to Justin Carlson for recording & sharing the video.)

We’re often asked for recommendations on image editing software that doesn’t cost an arm and a leg. Photoshop is fantastic, but the price tag is steep, and in fact, its strengths can also be weaknesses in that it’s actually such a powerful program that it can overwhelm the novice or intermediate user.

So, where do you turn if your needs are relatively straightforward and your budget is limited? I would recommend one of the following tools:

Picnik

Picnik is a powerful online application that allows you to upload & edit images on the fly. There is a free version but the options are rather limited; however, it might do the trick for what your client needs. The premium version starts at $2.08/month. Picnik even integrates with Flickr, Picasa & Facebook, so if your client uses those tools that might come in handy. I find it a little slow, compared to Photoshop (mostly because of the time required to upload & download files), but it’s a very good tool for people with no/little budget.

Photoshop Elements

This is a stripped-down version of Photoshop that’s perfect for what most of our clients need, which is basic photo & image editing tools for web use. It’s under $100 and provides a good chunk of the core Photoshop functionality — in some ways I would recommend it over Photoshop for basic-level users, because with fewer options it’s less confusing.

Photoshop.com

Adobe’s answer to Picnik is an online editing toolset that you can use for free; the only limitation is file storage. The free accounts comes with 2 GB of storage space for your files, and beyond that you pay an annual subscription fee that varies (anywhere from $20-$500 USD) based on the amount of storage you need.

I’m writing this from Austin, TX, where I’m participating in one of the geek world’s biggest and best-loved festivals, South by Southwest Interactive (SXSWi for short). Yesterday afternoon, I had the great pleasure of co-facilitating a session with Leif Utne, VP of Community at Zanby, that was a group discussion on how design & tech geeks can make the world a better place while making a living.

When we were planning the session, Leif suggested we use a format I wasn’t familiar with — the Samoan Circle, a modified fishbowl process that encourages listening and made room for many of the attendees to come forward and speak. The chairs in the room were arranged in the round, and we pulled four chairs into the middle of the room, facing each other, so that everyone could see and hear the folks who were talking.

The theme of the session was “Socially Conscious Geek: making money while doing good,” and we provided some framing questions, but we knew that whoever showed up would have their own questions and goals for the discussion, so we tried to move quickly beyond our introductions and dive into the conversation proper.

I’m so glad we did, because as soon as we opened it up to the room, the conversation went in very interesting directions. Some of the themes that emerged were:

• Recruiting challenges for nonprofits: Someone asked how nonprofits can attract staff when the salaries are generally lower than they are in the corporate sector. Some great responses to this question emerged, including:
  • Explore what gets geeks interested, and offer up incentives that matter to them
  • Sell the lifestyle & “sleep better at night” benefits
  • Offer other benefits that provide competitive advantage with corporate positions, e.g. keep work hours reasonable, paid volunteer time, etc.
  • Someone mentioned that in the US, if you work for nonprofit organizations for 10 years after college, your outstanding student loans are forgiven. Given the size of the average student loan these days, that could provide a tangible financial benefit in the tens, or even hundreds of thousands of dollars.
  • Recognize that nonprofits can offer more opportunities for leadership & effecting change within the organization, because nonprofits often have leaner & more democratic structures. (I want to point out that this is definitely not always the case, though I do think it’s a valid point. However, I’ve seen some highly inefficient nonprofit organizations in my time.)
• There was some great discussion of how our definitions of sustainability must include financial sustainability; this is true for both for-profit and not-for-profit organizations. We need to both make money and do good; neither can be sacrificed. Some models put forward for this included:
  • Businesses can build charitable giving into their modus operandi, i.e. give x% of pre-tax profits to a particular cause or organization.
  • Design & tech agencies can offer discounts to nonprofit clients & stay profitable by engaging high-profit corporate clients.
  • Social enterprise models, e.g. nonprofits creating products & services people are willing to pay for.
  • Seed funding from progressive coalitions
• We also heard a number of people ask how we can collaborate better across movements and sectors – there is a real hunger for cross-pollination of ideas and learning from one another’s successes and failures.
• One women shared her story of working at a large, multinational corporation, feeling somewhat discouraged by said corporation’s lack of a formal social responsibility mandate, and responding by starting interest groups within her company. This has had the effect of both raising the profile of various causes, but also concrete changes in the business such as influencing purchasing decisions.
• Someone said they would love to see a crowdsourcing app that could leverage companies’ internal technical skills & resources and connect & share them with nonprofits who need them.

Those were my notes, but there’s plenty more available on Twitter — attendees tweeted their session notes using the hashtag #scgeek.

Two years ago, Emira & I went to South by Southwest (AKA SXSW) for the first time, and presented a panel called “Boss Lady” that featured tips for online business owners from several of the savviest women entrepreneurs we know: Vickie Howell, Jenny Hart & Alex Beauchamp, all of whom appear in the pages of our book, The Boss of You. We had such a good time that we knew we wanted to go back as soon as humanly possible, though last year we were too busy getting our book out the door to attend the conference.

But this year we’re back, this time with a panel that we hope will prove helpful to geeks of both the design and techie varieties – both camps are in full force at SXSW’s Interactive conference, which is a pure, 24/7, all-out geekfest – who are looking to bring their values into their paid work, whether it’s by learning to work with clients in the nonprofit sector, creating apps that help mission-driven organizations work more effectively, or infusing some environmental or social-justice savvy into their workplaces. The panel’s called “Socially Conscious Geek: Makin’ Money While Doin’ Good”, and it takes place Saturday, March 13^th.

The topic was inspired by a topic our friend Noah Scalin (of Skull-A-Day and Another Limited Rebellion fame) spoke about at the 2009 HOW Conference. His focus was more on graphic design, since that’s his area of expertise, but when I asked him about riffing on his ideas for an interactive design audience, he shared his materials with me with typical generosity. (This is a guy who lives and breathes a DIY, share-and-share-alike mentality that a lot of designers could learn from. But that’s a topic for another day.)

This time I’ll be attending the conference solo, while Emira spends some time with her new baby; my co-facilitator for the session is Leif Utne, a friend and colleague who works for Zanby, a software company that specializes in supporting online social communities for change. Leif’s background includes a stint as the publisher of Worldchanging.org, and lots of experience building online communities; he’s also a journalist, activist and social entrepreneur.  Zanby is used to support The UpTake, a web video community that among other things was heavily involved in documenting the RNC and DNC prior to the 2008 election, and was also engaged in citizen vote monitoring during the election. He brings both amazing facilitation skills as well as a solid understanding of how businesses and nonprofits can work together in mutually beneficial ways.

We’ll be conducting our session in a highly interactive, inclusive format called a Core Conversation: Leif and I will be kick-starting the discussion and planting some seeds, but the idea is that whoever shows up will have a chance to step forward and contribute questions and ideas – so I’m really excited to see how it develops.

We’re hoping to address questions like:

• What is a socially conscious geek?
• How can I specialize in socially conscious work and earn a living wage?
• What are some of the unique opportunities and challenges of specializing in socially conscious work?
• What is the difference between non-profit and no-profit clients?
• How do I make the transition from corporate work to working with non-profit and/or mission-driven clients?
• What is the “triple bottom line” approach to business?
• What are some examples of alternative business models that are emerging among socially conscious geeks?
• How is socially conscious work different than “green” work?
• What are some examples of clients I might be able to work with as a socially conscious geek?
• How should I market myself to values-driven clients? Is it different from marketing to corporate clients?

Ultimately, though, the decisions about what we cover will rest with whoever shows up. So please help us spread the word – and if you’ll be at SXSW, we’d love to see you there!

We are very proud to unveil a project we’ve been working on for several months now: a redesign of policyalternatives.ca, the online home of the Canadian Centre for Policy Alternatives. Canada’s leading progressive research institute, the CCPA is a prolific publisher of reports and studies, books, articles, commentary and fact sheets on issues ranging from income equality to environmental policy, privatization of public services, and beyond.

They are highly respected, but like many organizations working towards policy change, they don’t always reach as broad an audience as they might hope; not many people have the time and inclination to read an in-depth research report, so in recent years they have been creating more bite-sized, easy-to-digest content in both written and multimedia formats. As the range of content has grown, though, so has the need to cross-reference related materials — so the CCPA’s website needed to both invite visitors to browse through an extensive library in an intuitive and approachable way, but also allow people seeking more in-depth content to locate related materials quickly and easily. (One of our developers describes the complex interrelationships between the CCPA’s publications as “like Facebook for documents.”)

Their five year-old website, although rich in content and highly trafficked, didn’t offer visitors any way to easily share the CCPA’s content with their social networks, whether through Facebook or Twitter, or even through their own publications, blogs or presentations. Exchange of ideas is the CCPA’s raison d’etre, so it stands to reason that above and beyond extending the website’s “share this” features, the organization would benefit from encouraging online visitors to use and share its content — and they do, using a Creative Commons license.

This project was a complex one on several fronts, as we wrestled with improving navigation through the site (both via menus and site links as well as with improved search tools); updating the site’s look and feel; and migrating the extensive site content (along with the aforementioned relationships between content items) from a commercial CMS platform into Drupal.

Oh, and we also set up a shopping cart (for books, memberships, donations and journal subscriptions).

There’s a real sense of accomplishment here at Raised Eyebrow when we look at the final result, but of course on the web, there’s no such thing as a final edit. Our best hope, in fact, is that we’ve helped to create a solid platform upon which the CCPA can continue to build and extend over the coming years. So while right now we are celebrating the grand opening, the real fun in some ways is still to come. I’m sure we’ll see the CCPA continue to play a leadership role when it comes to presenting research online in accessible and innovative ways.

The past few weeks have been quiet here on our blog, and as often happens, that silence has been an indicator of just how busy things have been here at Raised Eyebrow headquarters. We’ve been putting the final touches on some exciting new websites that we’re very proud to share with the world. Two major redesigns have just launched – one for a wonderful nonprofit group here in British Columbia and the other for a foundation that’s changing the face of lung cancer research across the United States.

The Deaf Children’s Society of BC offers programs, support and resources for families of young children with hearing challenges that range from parent groups for new parents of deaf or hard of hearing infants, preschool and summer programs for young kids, to a library and bookstore where families can access print resources. Their small staff includes several speech-language pathologists and sign language instructors, and they came to us looking to extend the reach of the services they are able to offer through the web. We helped them extend their resources online through the use of instructional videos for new parents to learn sign language that can then be used with their children as they develop language and reading skills.

The new website is a clean but cheerful home for their fun, informative, instructional videos as well as detailed information about the society’s programs and services. Parents can learn sign language in child-sized portions – with signs grouped in themes like animals, colours, numbers, and of course the alphabet, which they can then use to help their young children with developing language skills.

Uniting Against Lung Cancer is a nonprofit foundation that formed in 2001 as Joan’s Legacy, in honour of 47 year-old New Yorker Joan Scarangello McNeive, who never smoked, but died after a valiant battle with lung cancer. Her family and friends rallied and established the foundation to fund research and raise awareness about the disease; over the years it has attracted partnerships with other family foundations, and now Uniting Against Lung Cancer serves as a connector for groups across the United States who are raising awareness and funds. To date, the foundation and its partners have awarded over $6 million in direct research grants in 20 different states.

We worked with Uniting’s staff and board to develop and implement a transition strategy for their online presence, as they re-branded from Joan’s Legacy to Uniting Against Lung Cancer. The new website better reflects the scope and reach of the foundation’s work, and showcases their mission, partners, and events in a design that evokes a deep breath of fresh air on a sunny day.

On a technical note: Both sites run on Drupal’s open-source CMS platform, which gives them a strong foundation on which to develop future site enhancements – something that’s increasingly top-of-mind for our clients. We’re finding that more of our clients are looking at an iterative approach to making site adjustments, and even after a major redesign such as these ones, there are often “wish list” items that we can add to a site over time. We find Drupal provides a robust framework that allows this iterative approach to work well.

We’re delighted to announce that the BC Centre for Disease Control has launched their new website. The BCCDC provides a wide range of services for British Columbians that extend far beyond the “hazmat” image many people have when they think about disease control. They offer STI testing clinics that are open to the public, critical information about diseases and conditions from Anthrax to Zoster, and leading-edge research and statistics on a remarkable breadth of topics.

The new website takes an enormous amount of information and makes it remarkably accessible and easy to navigate; and although we would love to take credit for that, it was Analytic Design Group who provided information architecture consulting on this project — and they did a fabulous job indeed. We provided the graphic design for the new site, which needs to balance the BCCDC’s position as a source of authoritative scientific information with its role in public outreach. Our design approach was therefore guided by the client’s vision of helping to make British Columbia the healthiest place on earth; you won’t see any glaring red or other “emergency” symbols (although we did work in a space for emergency alerts that can appear across the entire site at a moment’s notice), but rather a warm, welcoming, and accessible look and feel that reflects the BCCDC’s collaborative approach to public health.

We would also be remiss if we didn’t credit the technical team at the Provincial Health Services Authority, who really outdid themselves on this particular project. This was a major team effort and we are grateful to have played our part!

I’d been itching to try out Coda as my development tool, and their recent 3 day sale meant I got a copy for $45. It’s pretty good so far, I have a couple of issues with it that I’ll cover in a later post. One really nice thing about it is the Books feature. This allows you to add reference material to your Coda development environment and search it without having to go to a browser. I’m always needing the Drupal API, well I actually use this one http://drupalcontrib.org/, which is a brilliant Core and Contrib API, perfect for those tricky Views or Webform moments. Setting up a book is really easy, and here is a screen shot of the settings for a book for Drupal 5 and Drupal 6.

Drupal 5 Book settings

Drupal 6 Book Settings

I also created a nice little Drupal Book icon from the PSD that I found here which was linked to from here (tips on how to insert coda books).

Drupal Coda Book Icon

Direct link to book icon