LG Skin Care

LG Skin Careは、専用デバイスで取得した肌の測定結果や履歴、環境情報をモバイルアプリ上で可視化するプロダクトです。性質の異なる情報を、スコアやグラフ、履歴表示など、それぞれに適した形で整理し、GUIとして具体化しました。

プロダクト全体のUXフローとワイヤーフレームは企画チームから共有され、その構造をもとにGUIを制作しました。グラフの種類やデータの表現方法を決め、イラスト、アイコン、モーションも制作しました。2017年に製品としてリリースされました。

測定データを読み取れる形に整理する

結果画面には、総合スコア、部位別の測定値、肌年齢、肌タイプ、ケアレベルなど、性質の異なる情報が混在します。総合値は数値、部位ごとの比較はバー、複数の指標はレーダーチャートというように役割ごとに表現を分け、画面内の情報に優先順位をつけました。

実際の製品向けに制作した、測定結果のデータ表現と状態変化のモーション。2017年。

LG Skin Careの測定結果データ表現デモ

総合スコア、Cheek・Under Eye・Foreheadの測定値、6項目のレーダーチャート、肌年齢・肌タイプ・ケアレベルを一画面にまとめ、3つの例示結果状態に応じてスコア、バー、レーダーチャート、肌年齢、ケアレベルが連動して変化するポートフォリオ用再構成デモ。

ポートフォリオ用に再構成したデータ表現デモ

一回の測定結果だけでなく、スコアの推移、ケア時間、日付ごとの測定・ケア記録など、時間軸を持つ情報もありました。現在の状態と過去の記録を区別して確認できるよう、トレンドグラフ、日付、記録カードをそれぞれの役割に合わせて構成しました。

実際の製品向けに制作した、ケア時間と履歴データの変化を示すモーション。2017年。

UVと湿度は同じ環境情報でも、状態や変化の見せ方は異なります。UVは光線と時間帯ごとの状態、湿度は液面と推移グラフで表現し、データの性質に合わせて視覚表現を分けました。