Sensatia
Sensatia
Redesign Outdated E-commerce for a Natural Skin
Redesign Outdated E-commerce for a Natural Skin
Role
Role
UI/UX Designer
UI/UX Designer
About Sensatia
About Sensatia
Sensatia Botanicals is an Indonesian natural beauty care brand from Bali, The company is dedicated to providing clean, effective, and ethically produced botanical skincare and body care products
Sensatia Botanicals is an Indonesian natural beauty care brand from Bali, The company is dedicated to providing clean, effective, and ethically produced botanical skincare and body care products
Background Story
Background Story
Sensatia had an outdated e-commerce website. My role as UI/UX Designer, I delivered a revamped Homepage as the first milestone of the project, serving as the foundation for the collaboration. Following this, my team and I continued working on the remaining pages.
Sensatia had an outdated e-commerce website. My role as UI/UX Designer, I delivered a revamped Homepage as the first milestone of the project, serving as the foundation for the collaboration. Following this, my team and I continued working on the remaining pages.
Main Goals
Main Goals
Redesign the entire Sensatia e-commerce website to help users better understand the brand and its values, make product exploration easier, and increase overall engagement.
The design adopts a clean, minimalistic style with dynamic visuals and video, supported by subtle micro-interactions to enhance engagement, while keeping the focus on the product and brand value, not distractions.
Redesign the entire Sensatia e-commerce website to help users better understand the brand and its values, make product exploration easier, and increase overall engagement.
The design adopts a clean, minimalistic style with dynamic visuals and video, supported by subtle micro-interactions to enhance engagement, while keeping the focus on the product and brand value, not distractions.
Objecttive: Redesign Outdated Ecommerce Website
Objecttive: Redesign Outdated Ecommerce Website
At the time, Sensatia’s website no longer reflected the quality of its products or the strength of its brand. Several key issues surfaced: navigation that made exploration feel effortful rather than inviting.
Product information lacked clarity and visual appeal, while reviews were too brief to meaningfully support purchase decisions, leaving users without the confidence needed to move forward.
Alongside these challenges, Sensatia had clear expectations for its digital presence. More time spent on the e-commerce site, need a platform that could showcase video banner content to tell its story more vividly, surface authentic customer testimonials as social proof, and provide easy access to blog content as a long-term branding asset.
At the time, Sensatia’s website no longer reflected the quality of its products or the strength of its brand. Several key issues surfaced: navigation that made exploration feel effortful rather than inviting.
Product information lacked clarity and visual appeal, while reviews were too brief to meaningfully support purchase decisions, leaving users without the confidence needed to move forward.
Alongside these challenges, Sensatia had clear expectations for its digital presence. More time spent on the e-commerce site, need a platform that could showcase video banner content to tell its story more vividly, surface authentic customer testimonials as social proof, and provide easy access to blog content as a long-term branding asset.
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
First, I created a board (refrences) that reflects Sensatia’s brand characteristics and aligns their color palette with the newly designed homepage.
After that, the other pages followed the same UI style, layout, and component system to ensure visual and experiential consistency across the website.
First, I created a board (refrences) that reflects Sensatia’s brand characteristics and aligns their color palette with the newly designed homepage.
After that, the other pages followed the same UI style, layout, and component system to ensure visual and experiential consistency across the website.
Homepage: Capturing the Brand Essence
Homepage: Capturing the Brand Essence
Sensatia’s homepage is the user’s first touchpoint to understand the brand and its values. Just like their stores.
Every Sensatia first sight is clean, unique, convenient. To create Sensatia’s e-commerce site, I detailed the brand and it's value to core elements. Layouts and visual elements inspired with clean and minimalistic design. Elegant motion design in product creates relaxing in-store experience.
I focused on highlighting the brand and value proposition through a clean, minimalistic design, combined with immersive scrolling, user-generated content, and a video banner.
Sensatia’s homepage is the user’s first touchpoint to understand the brand and its values. Just like their stores.
Every Sensatia first sight is clean, unique, convenient. To create Sensatia’s e-commerce site, I detailed the brand and it's value to core elements. Layouts and visual elements inspired with clean and minimalistic design. Elegant motion design in product creates relaxing in-store experience.
I focused on highlighting the brand and value proposition through a clean, minimalistic design, combined with immersive scrolling, user-generated content, and a video banner.
Review: Seamless Input Experience
Review: Seamless Input Experience
Short, scannable testimonials highlight skin concerns, texture, and results in everyday language, reinforcing trust at the exact moment users are evaluating suitability.
By integrating ratings, review content, and subtle visual hierarchy into the PDP, Sensatia turns social proof into a quiet but persuasive driver, supporting purchase decisions without adding friction or overwhelming the interface
Short, scannable testimonials highlight skin concerns, texture, and results in everyday language, reinforcing trust at the exact moment users are evaluating suitability.
By integrating ratings, review content, and subtle visual hierarchy into the PDP, Sensatia turns social proof into a quiet but persuasive driver, supporting purchase decisions without adding friction or overwhelming the interface
Checkout: Feel Secure
Checkout: Feel Secure
The addition of the “SSL Encryption Secured” copy appears alongside payment selection, reassuring users that their personal and financial information is protected without interrupting the flow to completion.
Rather than relying on heavy technical explanations, this simple, familiar signal works as a trust cue, reducing hesitation and reinforcing confidence just before users commit. By embedding security messaging directly into the checkout interface, Sensatia transforms a potential anxiety point into a calm, assured step toward purchase.
The addition of the “SSL Encryption Secured” copy appears alongside payment selection, reassuring users that their personal and financial information is protected without interrupting the flow to completion.
Rather than relying on heavy technical explanations, this simple, familiar signal works as a trust cue, reducing hesitation and reinforcing confidence just before users commit. By embedding security messaging directly into the checkout interface, Sensatia transforms a potential anxiety point into a calm, assured step toward purchase.
Store Locator: Easy Way to Filter Location
Store Locator: Easy Way to Filter Location
In Sensatia’s store locator, a sense of clarity and confidence is established through a city-based filter using chips, transforming what was once a long, overwhelming list into a guided, reassuring experience.
By allowing users to quickly narrow results to their preferred city, the interface reduces cognitive load and eliminates uncertainty about store accuracy and relevance.
This structured approach helps users feel more in control, knowing they are viewing official Sensatia locations rather than scanning an endless page of information.
In Sensatia’s store locator, a sense of clarity and confidence is established through a city-based filter using chips, transforming what was once a long, overwhelming list into a guided, reassuring experience.
By allowing users to quickly narrow results to their preferred city, the interface reduces cognitive load and eliminates uncertainty about store accuracy and relevance.
This structured approach helps users feel more in control, knowing they are viewing official Sensatia locations rather than scanning an endless page of information.
Store Locator Details: Containment Content
Store Locator Details: Containment Content
This visual clarity signals legitimacy and completeness, helping users quickly recognize official Sensatia stores without second-guessing the information.
By introducing subtle borders and structured layouts, the experience feels more intentional and dependable, reducing ambiguity and increasing user confidence when deciding where to visit or complete their purchase journey.
This visual clarity signals legitimacy and completeness, helping users quickly recognize official Sensatia stores without second-guessing the information.
By introducing subtle borders and structured layouts, the experience feels more intentional and dependable, reducing ambiguity and increasing user confidence when deciding where to visit or complete their purchase journey.
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
Generous white space, balanced line length, and a restrained typographic hierarchy allow users to focus on the content without distraction, creating a sense of ease that feels instantly recognizable.
At the same time, Sensatia’s brand presence remains subtle but consistent through its signature color accents, imagery, and tone.
This balance between familiarity and identity ensures that users enjoy a best-in-class reading experience while still feeling grounded in the Sensatia ecosystem, reinforcing trust and brand affinity through thoughtful restraint.
Generous white space, balanced line length, and a restrained typographic hierarchy allow users to focus on the content without distraction, creating a sense of ease that feels instantly recognizable.
At the same time, Sensatia’s brand presence remains subtle but consistent through its signature color accents, imagery, and tone.
This balance between familiarity and identity ensures that users enjoy a best-in-class reading experience while still feeling grounded in the Sensatia ecosystem, reinforcing trust and brand affinity through thoughtful restraint.
Help Center List: Neat and Findable
Help Center List: Neat and Findable
Content is organized by problem appearance such as order issues, product usage, or account concerns allowing users to quickly recognize their situation and move forward without second-guessing their path.
A neat, restrained layout and clear visual grouping reduce cognitive load, making answers feel closer and easier to access. By aligning structure with user intent, the Help Center becomes a seamless support experience quietly resolving issues while preserving the calm, considered tone of the Sensatia brand.
Content is organized by problem appearance such as order issues, product usage, or account concerns allowing users to quickly recognize their situation and move forward without second-guessing their path.
A neat, restrained layout and clear visual grouping reduce cognitive load, making answers feel closer and easier to access. By aligning structure with user intent, the Help Center becomes a seamless support experience quietly resolving issues while preserving the calm, considered tone of the Sensatia brand.
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
From pithcing, designing, and prototyping the Sensatia's project, here are several key result:
Successfully created foundation of new experience e-commerce page: From scratch to prototype based on Sensatia brand and objective.
Successfully created a scalable design system; Established scalable design patterns that supported all page with component library for seamless handoff
From pithcing, designing, and prototyping the Sensatia's project, here are several key result:
Successfully created foundation of new experience e-commerce page: From scratch to prototype based on Sensatia brand and objective.
Successfully created a scalable design system; Established scalable design patterns that supported all page with component library for seamless handoff
Thank you
Thank you
Key results
Key results
From pithcing, designing, and prototyping the Sensatia's project, here are several key result:
Successfully created foundation of new experience e-commerce page: From scratch to prototype based on Sensatia brand and objective.
Successfully created a scalable design system; Established scalable design patterns that supported all page with component library for seamless handoff
From pithcing, designing, and prototyping the Sensatia's project, here are several key result:
Successfully created foundation of new experience e-commerce page: From scratch to prototype based on Sensatia brand and objective.
Successfully created a scalable design system; Established scalable design patterns that supported all page with component library for seamless handoff