始まりはただのバナーデザイン

私はAutomatticにてプロダクトデザイナーとして、日常WordPress.comの機能やUI、UX等のデザインをしているが以前に少し違う物をデザインする機会があり、それを経験した上で感じたことを話したいと思います。

その「物」とは、簡単に言えばWordPressアプリの広告バナーであり、すでにCalypsoを使っているユーザーに向けてのものである。「広告バナー?そんなの簡単だよ!インターフェイスの一部とうまいキャッチコピーを載せれば良いんだよ。」なんて声が聞こえそうだが、実は私も最初はそのように考えていたため、さっと作ったものを会社内で見せたところ同僚からの評判も良かったので、仕上げに掛かろうとしていた時、John Maeda (Global Head, Computational Design and Inclusion; aka: Head of Design at Automattic)から興味深い質問を受けました。

この広告で、Alice Leeが手がけたイラストレーションを使えないか?このイラストが素晴らしいのは、様々な体型、年齢層、髪や肌の色が描かれており、様々な幅広い層の人に話かけるからだ。

多様性を受け入れる事で差別の壁を壊すと言われるインクルージョン。Automatticのインクルージョンへの取り組みを喜んで見ていたものの、これが初めての機会でもあったためどう実行すれば良いのか分からなかった。Alice LeeがWordPress.comのために描いたキャラクター達は多様な文化や個人的特質をカバーするのだが、限られた広告スペースの中にどのキャラクターを選べば良いのか?「選択」するということは勿論その他を「除外」することであり、それがインクルージョンと真っ向から矛盾するように思え、戸惑った。広告スペースがもし無限大であったとしても、全ての文化や個人的特質を載せることはもちろん不可能であり、「除外」することを避けることは出来ない。いったいどうすれば良いのか?

このように煮詰まった時こそ、Automatticで働いている事が素晴らしく思える時でもある。困っている私の元に、Johnの呼びかけに集まった同僚達から様々な素晴らしいアドバイスを頂いた。そして最終的にはバナーの大部分はJoan Rhoからの助けによって出来上がったが、それを通じて感じたことは全ての文化や個人的特徴を一つの広告に含めるのがゴールでは無く、普段スポットライトが当たらない文化や個人的特徴を持ったキャラクターを意識的に前面に出す取り組みが根本であり、その努力がWordPress.comのブランドとプロダクトに反映することによって、差別の壁を壊すことがゴールなのではなかろうか。あくまでも、これは未熟な私の個人的な見方であり、間違っているかもしれない。でもはっきり言えることは、私はこれからもこのような機会を探し、この努力をデザインを通じて続ける事は確かである。


I, as a product designer at Automattic, usually design features, UI, and UX for WordPress.com, but recently I had an opportunity to design something a little different, and I’d like to talk about what I realised during the experience.

The “something” was basically an ad banner for the WordPress app, and that’s for the existing Calypso users. I can almost hear someone saying “Ad banners? That’s easy! You just put a piece of the interface and a good copy, and that’s done.” Since I thought the same thing, I quickly put something together and showed it internally to get some feedback. The feedback was good, and I moved on to finishing up the design. But then, I received an interesting question from John Maeda (Global Head, Computational Design and Inclusion; aka: Head of Design at Automattic).

Can the banner use the illustrations made by Alice Lee? The great thing about the illustrations is that they show a wide range of body types, hair types, age ranges, and skin tones. And they speak to a lot of people by being inclusive.

“Inclusion” is said to knock down the wall of discrimination by embracing diversity. Although I’ve been pleased to watch Automattic’s efforts of inclusion, I wasn’t sure how to practice inclusion because this was the first time for me. The characters Alice Lee drew for WordPress.com cover diverse cultures and personal attributes—but which characters should I choose to include in the limited space of the ad? I was confused because to “choose” means of course to “exclude” everything else, and that feels like it directly contradicts the idea of “inclusion”. Even if the ad space was infinite, obviously there would be no way to include every single culture or personal attribute, hence I wouldn’t be able to avoid exclusion. What do I do?

When I feel that I hit a wall is also when I realise how great it is to work here at Automattic. I received lots of advice from my colleagues who gathered in response to John’s call for help. In the end, the majority of the banner was done with help from Joan Rho, but what I realised was that the goal isn’t to include every single culture or personal attribute. The goal is to deliberately bring the cultures and the personal attributes to the front that normally don’t grab the spotlight, and to make the WordPress.com brand and our products reflect that effort. However, this is just how I currently see it, and it might be wrong as I’m not yet an expert on this topic, but what I can say for sure is I will carry on looking for opportunities and practicing inclusion in design.

wordpress-app-banner

banner-stats

Grey coloured hand.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s