Nuno Coelho Santos

インスタ Threads LinkedIn Eメール

Nuno(ヌノ)と申します。ベルリンをベースとして活躍している商品デザイナーです。

Nuno(ヌノ)と申します。ベルリンをベースとして活躍している商品デザイナーです。ヒューマンインターフェイスデザインを専門としており、趣味としても自身のアプリ制作をしております。

現在、WhatsApp勤務しており、世界中の2億人以上いる個人ユーザーのコミュニケーションを円滑にしています。

Nuno Coelho Santos, portuguese graphic and product designer at Facebook WhatsApp, Google, DeepMind, Thread, ustwo.

2020 演説者 Adobe MAX 2020
2020 ディスカッションパネル Zen and the Art of Design Systems
2019 面接 Interface Lovers
2018 演説者 DIGICOM
2018 演説者 Queen’s Young Leaders
2017 演説者 Escola Artística de Soares dos Reis
2016 面接 iClub
2015 特徴 httpstr
2013 特徴 SiteInspire

Streams(ストリームス)では医師看護師が迅速に、患者の状態悪化を対応するサポートをしていました。

役割

UX デザイナー

日付

2017年〜2020年

ウェブサイト

health.google

Streams App Icon

Streamsイギリスの医師看護師のためのiOSアプリケーションです。急性腎臓損傷のリスクのある患者の警報を送ったり、患者の健康記録データを見やすくしたりします。

Streams for iPad
Streams App Icon

2018年の初期には、Streamsでは製品のデザインを直す仕事に取り組んでおり、新しいマーケットに出す製品計画を立てる準備で、マテリアルデザイン使用しました。私のチームは、既存の材料部分と何を置き換えるか、全サービスを届けるために新開発べき所は何かを知るために既存のUI(ユーザーインターフェイス)の審査を行いました。僅かな顧客要素パターンでマテリアルデザインを拡張しました。詳細は下記でご紹介します。

Before After Streams Patient Profile Overview Streams Patient Profile Overview

デザイン直したインターフェイスはより鮮明かつ、明確さを目指し、マテリアルデザイン言語を追求しています。

Before After Streams Patient Profile Observations Streams Patient Profile Observations

アクセスのやすさはデザイン直す仕事の最先端でした。全コンテンツを2本のキーラインで揃え、圧倒的な読みさすさを確保し、読込をする際に、画面上で左から右への目の動きを回避することに成功した結果となりました。コンテンツも主に、リーディングアイコンと予算別でグループ化されています。

Before After Streams Help Streams Help

2本のキーラインのレイアウトは変更可能なテキストサイズも簡易化しました。遂に、一定の口調に拘りつつも簡潔な全てのUI(ユーザーインターフェイス)コピーを書き終えました。

発注された構成要素を制作する際に、レイアウトと仕草のアウトラインとスペックを組み合わせました。下記はNEWS(イギリス国内の早期警告スコア)のレベルの具体例です。NEWSは患者の疾患バイタルサインに基づいた数値検測器です。数値が高ければ、危険です。

Streams Badge Component

Streamsのもう一つのパターン機能は患者特定です。ひと目で、名字・名前・生年月日・年齢・医療履歴ナンバー(Medical Record Number)・場所などの多くの情報を提示します。これらは明確に患者特定するのに必要です。ユーザーが適した患者を見つけ、記録を読み通したら、私たちが識別設定を変更します。

Streams Identifiers in Patients List Streams Patient Header Streams Short Patient Header

試作品も開発しました。これはSwiftUI(Swiftを使用UIを構築するフレームワーク)を用いて制作されたサンプルです。

Streams Poster

2020年6月にStreamsでは、コロナ(Covid-19)の患者のテスト結果を表示するという新システムを導入しました。コロナの意識感を広げるために、NHS Trustのヘルスケア工部大学(Imperial College Healthcare NHS Trust)ともビジネスを着手しました。

DeepMind HealthGoogleで働きながら、Streamsで行ったNHS(イギリスの国民健康保険サービス)のための全業務を大変誇りに思っています。将来、Google Healthでの仕事に関しても共有したいと思います。

Currency(カレンシー)はiPhone用の簡易的な通貨換算のアプリケーションです。

役割

商品デザイナー&iOS開発者

日付

2016年1月〜3月

ウェブサイト

currency.nunocoelhosantos.com

iOSの発達を学ぶサイドプロジェクト。2ヶ月間に渡り、自身でデザインと開発をしました。

iOS用の様々な通貨換算のアプリケーションの使用後、複雑で、直感性がなく、時代遅れだと感じました。試行錯誤・不必要なナビゲーション・多数のオプションに対して多くの時間を費やしていました。私はCurrencyを最も簡易化し、アプリストア(App Store)で最も直感的かつ簡便な操作で使用できる通貨換算機にしました。

目的:
使い勝手の良さ
旅行者のためのデザイン
不要な試行錯誤なし

Currencyの最もユニークな所はどの様に数字を方式化するかという点です。正確な通貨象徴、小数部分の桁数、小数点、グループ分割などです。これらは旅行中にお店マーケットでお客にどの様に数字を見せているかを左右しています。

最終的なデザインは仕事をこなす事を表しています:海外通貨をカスタマーの自国の通貨に換算すること。通貨変動グラフ・アプリ内の設定・通知といった機能は通貨換算には必要ではありません。

Currency for iOS App Icon, work by Nuno Coelho Santos

アイコンはCurrencyがオペレーションシステムの一部であると象徴しており、iOSと完璧に一致したデザインにしました。

Currency for iOS glyphs and icons, work by Nuno Coelho Santos

ほとんどの通貨アプリは通貨を分かりやすくするために国旗を使用します。しかし、ビットコインユーロなどといった通貨は特定の国に属してはいません。その代わりに、通貨コードを使用することにしました。

Currency for iOS Design Process, work by Nuno Coelho Santos

初期のスケッチは、通貨の選び方通貨導入の換算方法に全うしていました。初めてのバーチャルデザインの方針は現在の物とはかけ離れた、黒を基盤としたバーチャルスタイルでした。フィードバックを求めているうちに、どの数字を編集すればいいの顧客が困惑している様だったので、テキスト入力に点滅するカーソルを加えました。

最終デザインは鮮やかで、為替レートが変動した際にアクション表示をします。多くのフィードバックと要望を受け取り、iOS設定アプリ内で、設定のオプションを追加しました。

Currency for iOS Development Process, work by Nuno Coelho Santos Currency for iOS Xcode Storyboard, work by Nuno Coelho Santos Currency for iOS Xcode Exploded UI View, work by Nuno Coelho Santos Currency for iOS Source Code Screenshot, work by Nuno Coelho Santos

これはiOS用に開発した初めてのアプリで、Swiftというプログラミング言語を使用しています。iOS用の開発方法を学ぶことが何年間の個人的な目的でした。ApressのiOS Development(初心者用のSwiftのiOS開発)」を読み、Jonathon Toon(ジョナサン・トーン)とTiago Alves(タイゴ・アルベス)、二人の友人から助言をもらいました。

GitHub初期バージョンのソースコードが見れます。

Currency for iOS localization screenshots, work by Nuno Coelho Santos

アプリケーション・ウェブサイト・マーケティング材料はアメリカ・イギリス・日本・中国・香港・台湾・南米・スペイン・ポルトガルで地方か(ローカライズ化)します。リリース1年後で、ダウンロード数の76%はアジア太平洋地区のユーザーでした。

Currency for iOS downloads per region, work by Nuno Coelho Santos
Currency for iOS reviews, work by Nuno Coelho Santos

リリース4年後には、Currencyは2万8千以上のダウンロード数を誇り、アプリストア(App Store)で平均評価レートは4.6星です。

現在もiOSで最新の技術と向上するためにCurrencyを更新続けています。アプリストアで120円でダウンロードできます。

Currency for iOS dark mode, work by Nuno Coelho Santos

Thread(スレッド)は一対一の個別スタイリングでとても説得力があり、お勧めの服を推奨してくれるエンジンを提供しています。

役割

商品デザイナー&フロントエンドのウェブ開発

日付

2014年〜2016年

ウェブサイト

thread.com

Threadはオンラインのスタイリングサービスで、現在はイギリス男性のみが対象となっています。ファッションスタイリストと機械学習の双方を使用し、無料でユーザーにハイクオリティーの個別スタイリングを提供します。Threadは Kieran O’Neill(キエラン・オネイル) とBenjamin Phillips(ベンチャミン・フィリップス)とBen Kucsan(ベン・ククザン)によって設立されたYC’11(2011年のYコンビネータ)という会社スタートアップサービスです。

挑戦:
どのようにしてモバイル体験を改善するのか。

ほとんどのユーザーはデスクトップのブラウザーを介してオンライン注文をするにも関わらず、Threadユーザーの大多数はモバイルブラウザーを使用します。ベン(Ben K)はモバイル体験に注目し、モバイルプラットフォームでのオンライン注文拡大のために本来のモバイル体験に事業に取組始めました。

Thread V2 iOS wireframes, work by Nuno Coelho Santos

私たちの商品をデスクトップ上の第一ウェブサイトからモバイル上の第一アプリケーションに移動せることであり、ユーザーインターフェイスの再構成に導きました。

Threadのために「スレッドホワイトチャペル(Thread Whitechapel)」と呼ばれる新しいデザインシステムを開拓しました。このデザインシステムはタイピングスタイル・タッチ相互作用・ページコンテンツフローのガイドライン・構成要素を新しくしました。バーチャルの言語と両立しながら、より良いモバイル経験の結果をもたらしただけでなく、デザイン開発も早く機能するよう改善した。

Thread V2 modals redesign, work by Nuno Coelho Santos Thread V2 modals redesign, work by Nuno Coelho Santos Thread V2 component library, work by Nuno Coelho Santos

挑戦:
スタイリストが不在時にどうやってThreadのサービスを提供するのか。

Threadは説得力のある推奨エンジンで、各ユーザーの予算・素材の好み・ブランド・スキンカラー・体型・その他の要素を作成し、ユーザーの服装スタイルスタイリストを見事に一致せます。

パーソナルタッチはThreadのオリジナルで、目玉商品です。しかしスタイリストが不在の時はアクティビティが停止します。スタイリストの都合がつかない時に、どのように個別推奨サービスを提供するべきでしょうか?

Thread Browse icons, work by Nuno Coelho Santos

服のショップの中を歩いているような、好みの新アイテムだけを見ているような体験にしたかったです。この望みがThreadブラウザーになりました。

オンラインストアを創設する所の少し先を行き着きました。「アウトオブボックス」というブラウザー経験を作成し、これは予算内かつ在庫があるサイズの中で、ユーザーのカスタマイズされたアイテム(商品)をおすすめしてくれます。

Thread browse desktop design, work by Nuno Coelho Santos

Threadは近年安定的に成長しています。私たちがやり遂げてきた全ての仕事を大変誇りに思っています。し、Threadで働くことに興味がありましたら、こちらをご覧ください。Threadの求人募集もし登録を希望でしたらこちらからthread.com

他のプロジェクトはブランド力・フォトグラフィー・イラスト・ソフトウェア発明に関わっています。

A set of icons for Big Sur, a project by Nuno Coelho Santos
BigSurアイコン

macOS新しいアイコン。ここからダウンロードWebサイト見る

Opening photo from “15 Days in Japan”, a project by Nuno Coelho Santos
日本での15日間

私の最も人気なサイドプロジェクトの一つです。自分自身だけの力で、言葉が通じない国への旅行経験を記録した自旅行ブログ。全写真はFuji X100で撮影しました。旅行記録はこちらから見れます。

Photo taken inside of the ustwo London office
ustwoブランド

ustwoのブランドはスナップ写真斬新な会社の文化に刺激を受けています。新しいロゴ・ウェブデザイン・書体・口調など。ここから見る。

インスタグラムのデザインの直し

ustwoでの研修の一部であったバーチャルデザインエクササイズ。研修過程はこちらから

一読頂き、ありがとうございます。もっとお話ししたい方・フィードバック・質問がありましたら、ご連絡ください。

Nuno Coelho Santos

インスタ Threads LinkedIn Eメール