センセイシャ
センセイシャ
Redesign Outdated E-commerce for a Natural Skin
Redesign Outdated E-commerce for a Natural Skin
Role
Role
UI/UX Designer
UI/UX Designer
センシャティアについて
センシャティアについて
センセイシアボタニカルズはインドネシアの自然美容ケアブランドで、バリからのものです。この会社は、クリーンで効果的、かつ倫理的に生産された植物由来のスキンケアおよびボディケア製品を提供することに専念しています。
センセイシアボタニカルズはインドネシアの自然美容ケアブランドで、バリからのものです。この会社は、クリーンで効果的、かつ倫理的に生産された植物由来のスキンケアおよびボディケア製品を提供することに専念しています。
Background Story
Background Story
Sensatiaは古いeコマースウェブサイトを持っていました。UI/UXデザイナーとしての私の役割は、プロジェクトの最初のマイルストーンとして改良されたホームページを提供することで、コラボレーションの基盤となりました。その後、私のチームと私は残りのページの作業を続けました。
Sensatiaは古いeコマースウェブサイトを持っていました。UI/UXデザイナーとしての私の役割は、プロジェクトの最初のマイルストーンとして改良されたホームページを提供することで、コラボレーションの基盤となりました。その後、私のチームと私は残りのページの作業を続けました。
Main Goals
Main Goals
ユーザーがブランドとその価値をよりよく理解できるように、製品の探索を容易にし、全体的なエンゲージメントを高めるために、Sensatiaのeコマースウェブサイト全体を再設計します。
デザインは、製品とブランドの価値に焦点を当てながら、気を散らすものを避けるために、ダイナミックなビジュアルと動画を使ったクリーンでミニマリスティックなスタイルを採用し、エンゲージメントを高めるための微細なマイクロインタラクションでサポートされています。
ユーザーがブランドとその価値をよりよく理解できるように、製品の探索を容易にし、全体的なエンゲージメントを高めるために、Sensatiaのeコマースウェブサイト全体を再設計します。
デザインは、製品とブランドの価値に焦点を当てながら、気を散らすものを避けるために、ダイナミックなビジュアルと動画を使ったクリーンでミニマリスティックなスタイルを採用し、エンゲージメントを高めるための微細なマイクロインタラクションでサポートされています。
Objecttive: Redesign Outdated Ecommerce Website
Objecttive: Redesign Outdated Ecommerce Website
その時、Sensatiaのウェブサイトは、製品の品質やブランドの強さを反映していませんでした。いくつかの重要な問題が浮上しました: 探索が招待されるというより、努力を感じさせるナビゲーション。
製品情報は明確さや視覚的魅力に欠けており、レビューは購入決定を意味のある形でサポートするには短すぎ、ユーザーが前に進むために必要な自信を持てない状態でした。
これらの課題に加えて、Sensatiaはデジタルプレゼンスに対して明確な期待を持っていました。よりeコマースサイトでの時間の消費、自身のストーリーをより生き生きと伝えるためにビデオバナーコンテンツを展示できるプラットフォームが必要で、社会的証明としての本物の顧客の声を表面化させ、ブログコンテンツへの簡単なアクセスを提供することを長期的なブランディング資産として求めていました。
その時、Sensatiaのウェブサイトは、製品の品質やブランドの強さを反映していませんでした。いくつかの重要な問題が浮上しました: 探索が招待されるというより、努力を感じさせるナビゲーション。
製品情報は明確さや視覚的魅力に欠けており、レビューは購入決定を意味のある形でサポートするには短すぎ、ユーザーが前に進むために必要な自信を持てない状態でした。
これらの課題に加えて、Sensatiaはデジタルプレゼンスに対して明確な期待を持っていました。よりeコマースサイトでの時間の消費、自身のストーリーをより生き生きと伝えるためにビデオバナーコンテンツを展示できるプラットフォームが必要で、社会的証明としての本物の顧客の声を表面化させ、ブログコンテンツへの簡単なアクセスを提供することを長期的なブランディング資産として求めていました。
Key Contributions
Key Contributions
Collaborated on development and design of custom-built platform and design system
Tested and iterated on designs at a component and prototype level, ensuring the platform development enabled teams to achieve flexible use cases for all company website needs
Served as secondary UI/UX Designer working deeply within the product at a technical level; learned the ins and outs of the product as development progressed
Collaborated on development and design of custom-built platform and design system
Tested and iterated on designs at a component and prototype level, ensuring the platform development enabled teams to achieve flexible use cases for all company website needs
Served as secondary UI/UX Designer working deeply within the product at a technical level; learned the ins and outs of the product as development progressed
Approach
Approach
まず、Sensatiaのブランド特性を反映し、新しくデザインされたホームページとカラーパレットを一致させるボード（リファレンス）を作成しました。
その後、他のページも同じUIスタイル、レイアウト、コンポーネントシステムに従って、ウェブサイト全体で視覚的および体験的一貫性を確保しました。
まず、Sensatiaのブランド特性を反映し、新しくデザインされたホームページとカラーパレットを一致させるボード（リファレンス）を作成しました。
その後、他のページも同じUIスタイル、レイアウト、コンポーネントシステムに従って、ウェブサイト全体で視覚的および体験的一貫性を確保しました。
Homepage: Capturing the Brand Essence
Homepage: Capturing the Brand Essence
Sensatiaのホームページは、ユーザーがブランドとその価値を理解するための最初の接点です。それは彼らの店舗と同じです。
すべてのSensatiaの最初の印象は、クリーンでユニーク、便利です。Sensatiaのeコマースサイトを作成するために、私はブランドとその価値をコア要素に詳述しました。レイアウトとビジュアル要素は、クリーンでミニマリスティックなデザインからインスパイアされました。製品におけるエレガントなモーションデザインは、リラックスした店舗体験を創出します。
私は、クリーンでミニマリスティックなデザインを通じてブランドと価値提案を際立たせることに焦点を当て、没入型のスクロール、ユーザー生成コンテンツ、およびビデオバナーを組み合わせました。
Sensatiaのホームページは、ユーザーがブランドとその価値を理解するための最初の接点です。それは彼らの店舗と同じです。
すべてのSensatiaの最初の印象は、クリーンでユニーク、便利です。Sensatiaのeコマースサイトを作成するために、私はブランドとその価値をコア要素に詳述しました。レイアウトとビジュアル要素は、クリーンでミニマリスティックなデザインからインスパイアされました。製品におけるエレガントなモーションデザインは、リラックスした店舗体験を創出します。
私は、クリーンでミニマリスティックなデザインを通じてブランドと価値提案を際立たせることに焦点を当て、没入型のスクロール、ユーザー生成コンテンツ、およびビデオバナーを組み合わせました。
Review: Seamless Input Experience
Review: Seamless Input Experience
短く、スカンブル可能な推薦文は、肌の懸念、質感、そして結果を日常的な言葉で強調し、ユーザーが適合性を評価しているまさにその瞬間に信頼を再確認します。
評価、レビュー内容、そして微妙な視覚的階層をPDPに統合することで、Sensatiaは社会的証明を静かでありながら説得力のある推進力に変え、摩擦を加えたりインターフェースを圧倒させることなく購入決定をサポートします。
短く、スカンブル可能な推薦文は、肌の懸念、質感、そして結果を日常的な言葉で強調し、ユーザーが適合性を評価しているまさにその瞬間に信頼を再確認します。
評価、レビュー内容、そして微妙な視覚的階層をPDPに統合することで、Sensatiaは社会的証明を静かでありながら説得力のある推進力に変え、摩擦を加えたりインターフェースを圧倒させることなく購入決定をサポートします。
Checkout: Feel Secure
Checkout: Feel Secure
“SSL暗号化保護”の追加コピーは、支払い選択の横に表示され、ユーザーにその個人情報および金融情報が保護されていることを確信させながら、完了への流れを中断することなく安心感を与えます。
重い技術的な説明に頼るのではなく、このシンプルで馴染みのあるシグナルは信頼のサインとして機能し、ユーザーが確定する直前のためらいを減らし、自信を強化します。センサーがチェックアウトインターフェースに直接セキュリティメッセージを埋め込むことで、潜在的な不安点を購入へ向かう静かで確信に満ちたステップに変えます。
“SSL暗号化保護”の追加コピーは、支払い選択の横に表示され、ユーザーにその個人情報および金融情報が保護されていることを確信させながら、完了への流れを中断することなく安心感を与えます。
重い技術的な説明に頼るのではなく、このシンプルで馴染みのあるシグナルは信頼のサインとして機能し、ユーザーが確定する直前のためらいを減らし、自信を強化します。センサーがチェックアウトインターフェースに直接セキュリティメッセージを埋め込むことで、潜在的な不安点を購入へ向かう静かで確信に満ちたステップに変えます。
Store Locator: Easy Way to Filter Location
Store Locator: Easy Way to Filter Location
Sensatiaのストアロケーターでは、都市を基にしたフィルターを使用して明瞭さと自信が確立され、かつては膨大で圧倒的なリストが、誘導的で安心できる体験に変わります。
ユーザーが自分の好きな都市に結果を迅速に絞り込むことを可能にすることで、このインターフェースは認知負荷を軽減し、店舗の正確性や関連性についての不確実性を排除します。
この構造化されたアプローチは、ユーザーが無限の情報ページをスキャンするのではなく、公式のSensatiaのロケーションを見ていることを知っているため、より自分にコントロールがあると感じさせます。
Sensatiaのストアロケーターでは、都市を基にしたフィルターを使用して明瞭さと自信が確立され、かつては膨大で圧倒的なリストが、誘導的で安心できる体験に変わります。
ユーザーが自分の好きな都市に結果を迅速に絞り込むことを可能にすることで、このインターフェースは認知負荷を軽減し、店舗の正確性や関連性についての不確実性を排除します。
この構造化されたアプローチは、ユーザーが無限の情報ページをスキャンするのではなく、公式のSensatiaのロケーションを見ていることを知っているため、より自分にコントロールがあると感じさせます。
Store Locator Details: Containment Content
Store Locator Details: Containment Content
この視覚的明確さは正当性と完全性を示し、ユーザーが情報を疑うことなく公式のSensatiaストアを迅速に認識できるように助けます。
微妙な境界線と構造化されたレイアウトを導入することで、体験はより意図的で信頼できるものに感じられ、あいまいさが減少し、ユーザーが訪れる場所や購入プロセスを完了する際の自信が高まります。
この視覚的明確さは正当性と完全性を示し、ユーザーが情報を疑うことなく公式のSensatiaストアを迅速に認識できるように助けます。
微妙な境界線と構造化されたレイアウトを導入することで、体験はより意図的で信頼できるものに感じられ、あいまいさが減少し、ユーザーが訪れる場所や購入プロセスを完了する際の自信が高まります。
Blog List: Mirroring The Brand Value
Blog List: Mirroring The Brand Value
The introduction of chip categories allows users to quickly filter articles by topic, such as skincare concerns, ingredients, or about the brand without leaving the page or resetting their context.
These lightweight controls encourage exploration by reducing the effort required to find relevant content, especially for users arriving with a specific question in mind.
By pairing clear categorization with a calm visual hierarchy, the blog turns into a navigable knowledge space, inviting users to stay longer, explore deeper, and engage with the brand beyond the product.
The introduction of chip categories allows users to quickly filter articles by topic, such as skincare concerns, ingredients, or about the brand without leaving the page or resetting their context.
These lightweight controls encourage exploration by reducing the effort required to find relevant content, especially for users arriving with a specific question in mind.
By pairing clear categorization with a calm visual hierarchy, the blog turns into a navigable knowledge space, inviting users to stay longer, explore deeper, and engage with the brand beyond the product.
Blog Detail: Familiar Layout
Blog Detail: Familiar Layout
豊富なホワイトスペース、バランスの取れた行の長さ、抑制されたタイポグラフィ階層により、ユーザーは注意を逸らされることなくコンテンツに集中でき、瞬時に認識できる安心感を生み出します。
同時に、Sensatiaのブランドプレゼンスは、そのシグネチャーカラーアクセント、画像、トーンを通じて微妙でありながら一貫性を保っています。
この親しみやすさとアイデンティティのバランスにより、ユーザーはSensatiaエコシステムにしっかりと根ざした最高の読書体験を楽しむことができ、思慮深い抑制を通じて信頼とブランド親和性を強化します。
豊富なホワイトスペース、バランスの取れた行の長さ、抑制されたタイポグラフィ階層により、ユーザーは注意を逸らされることなくコンテンツに集中でき、瞬時に認識できる安心感を生み出します。
同時に、Sensatiaのブランドプレゼンスは、そのシグネチャーカラーアクセント、画像、トーンを通じて微妙でありながら一貫性を保っています。
この親しみやすさとアイデンティティのバランスにより、ユーザーはSensatiaエコシステムにしっかりと根ざした最高の読書体験を楽しむことができ、思慮深い抑制を通じて信頼とブランド親和性を強化します。
Help Center List: Neat and Findable
Help Center List: Neat and Findable
コンテンツは、順序の問題、製品の使用、アカウントの懸念など、問題の出現によって整理されており、ユーザーは自分の状況をすぐに認識し、迷うことなく前進できます。
整然とした抑制のあるレイアウトと明確な視覚的グルーピングは、認知負荷を軽減し、回答がより近く、アクセスしやすく感じられます。構造をユーザーの意図に合わせることで、ヘルプセンターは問題を静かに解決しながら、Sensatiaブランドの穏やかで考慮されたトーンを保つシームレスなサポート体験になります。
コンテンツは、順序の問題、製品の使用、アカウントの懸念など、問題の出現によって整理されており、ユーザーは自分の状況をすぐに認識し、迷うことなく前進できます。
整然とした抑制のあるレイアウトと明確な視覚的グルーピングは、認知負荷を軽減し、回答がより近く、アクセスしやすく感じられます。構造をユーザーの意図に合わせることで、ヘルプセンターは問題を静かに解決しながら、Sensatiaブランドの穏やかで考慮されたトーンを保つシームレスなサポート体験になります。
Help Center Detail: Helping Through Clarity
Help Center Detail: Helping Through Clarity
Clarity and reassurance guide users toward resolution. Dropdown sections allow users to scan and expand only the information relevant to their specific issue, keeping the page concise while still offering depth when needed.
This progressive disclosure helps users stay oriented, reducing the effort required to find precise answers. When self-service is no longer enough, a clearly presented Contact Us card provides a direct path to customer support, positioned as a helpful next step rather than a last resort.
Together, these elements create a support experience that feels considerate and complete, ensuring users feel guided, heard, and supported at every stage.
Clarity and reassurance guide users toward resolution. Dropdown sections allow users to scan and expand only the information relevant to their specific issue, keeping the page concise while still offering depth when needed.
This progressive disclosure helps users stay oriented, reducing the effort required to find precise answers. When self-service is no longer enough, a clearly presented Contact Us card provides a direct path to customer support, positioned as a helpful next step rather than a last resort.
Together, these elements create a support experience that feels considerate and complete, ensuring users feel guided, heard, and supported at every stage.
Key results
Key results
Sensatiaのプロジェクトのピッチング、デザイン、プロトタイピングから、以下のいくつかの重要な結果があります：
Sensatiaブランドと目的に基づいて、ゼロからプロトタイプまでの新しい体験型eコマースページの基盤を成功裏に作成しました。
スケーラブルなデザインシステムを成功裏に作成しました；すべてのページに対応するコンポーネントライブラリのためのスケーラブルなデザインパターンを確立し、スムーズな引き渡しを実現しました。
Sensatiaのプロジェクトのピッチング、デザイン、プロトタイピングから、以下のいくつかの重要な結果があります：
Sensatiaブランドと目的に基づいて、ゼロからプロトタイプまでの新しい体験型eコマースページの基盤を成功裏に作成しました。
スケーラブルなデザインシステムを成功裏に作成しました；すべてのページに対応するコンポーネントライブラリのためのスケーラブルなデザインパターンを確立し、スムーズな引き渡しを実現しました。
Thank you
Thank you
Key results
Key results
Sensatiaのプロジェクトのピッチング、デザイン、プロトタイピングから、以下のいくつかの重要な結果があります：
Sensatiaブランドと目的に基づいて、ゼロからプロトタイプまでの新しい体験型eコマースページの基盤を成功裏に作成しました。
スケーラブルなデザインシステムを成功裏に作成しました；すべてのページに対応するコンポーネントライブラリのためのスケーラブルなデザインパターンを確立し、スムーズな引き渡しを実現しました。
Sensatiaのプロジェクトのピッチング、デザイン、プロトタイピングから、以下のいくつかの重要な結果があります：
Sensatiaブランドと目的に基づいて、ゼロからプロトタイプまでの新しい体験型eコマースページの基盤を成功裏に作成しました。
スケーラブルなデザインシステムを成功裏に作成しました；すべてのページに対応するコンポーネントライブラリのためのスケーラブルなデザインパターンを確立し、スムーズな引き渡しを実現しました。