Clayo
Clayo
Clayo
Clayo is an e-commerce site for handcrafted ceramic tableware.
The goal was to create a visually pleasing and functional shopping experience across both desktop and mobile.
Clayo is an e-commerce site for handcrafted ceramic tableware.
The goal was to create a visually pleasing and functional shopping experience across both desktop and mobile.
Clayo is an e-commerce site for handcrafted ceramic tableware.The goal was to create a visually pleasing and functional shopping experience across both desktop and mobile.
Tools
Tools
Tools
Figma
Figma
Figma
Industry
Industry
PROJECT
E-commerce
E-commerce
E-commerce
YEAR
YEAR
YEAR
2024
2024
2024
Challenges
Challenges
Challenges
Problems
Problems
Difficulty finding high-quality products quickly.
Limited variety within specific product categories.
Lack of trust in online shopping experience.
Difficulty finding high-quality products quickly.
Limited variety within specific product categories.
Lack of trust in online shopping experience.
Difficulty finding high-quality products quickly.
Limited variety within specific product categories.
Lack of trust in online shopping experience.
Solutions
Solutions
Implemented intuitive filtering and clear categorization to
streamline product discovery.
Showcased a relevant and diverse selection within each category.
Integrated customer reviews and secure checkout to build trust.
Implemented intuitive filtering and clear categorization to
streamline product discovery.
Showcased a relevant and diverse selection within each category.
Integrated customer reviews and secure checkout to build trust.
Implemented intuitive filtering and clear categorization to
streamline product discovery.
Showcased a relevant and diverse selection within each category.
Integrated customer reviews and secure checkout to build trust.
Competitor Analysis
Competitor Analysis
Competitor Analysis
I analyzed two ceramic e-commerce platforms - Nowpottery and 1220c – focusing on filtering, product display, and checkout flow to identify usability gaps and design strengths.
I analyzed two ceramic e-commerce platforms - Nowpottery and 1220c – focusing on filtering, product display, and checkout flow to identify usability gaps and design strengths.
I analyzed two ceramic e-commerce platforms - Nowpottery and 1220c – focusing on filtering, product display, and checkout flow to identify usability gaps and design strengths.
User Research
User Research
User Research
To gain user insights, I used an AI-based simulated survey to explore shopping behavior around handcrafted ceramic products.
To gain user insights, I used an AI-based simulated survey to explore shopping behavior around handcrafted ceramic products.
To gain user insights, I used an AI-based simulated survey to explore shopping behavior around handcrafted ceramic products.
Top insights that emerged:
Top insights that emerged:
Aesthetic design of the product, is the most important factor (32%),
followed by quality (28%).
44% of users highly value the ability to see products before purchase.
Customer reviews influence trust more than any other source (40%).
Aesthetic design of the product, is the most important factor (32%),
followed by quality (28%).
44% of users highly value the ability to see products before purchase.
Customer reviews influence trust more than any other source (40%).
Aesthetic design of the product, is the most important factor (32%),
followed by quality (28%).
44% of users highly value the ability to see products before purchase.
Customer reviews influence trust more than any other source (40%).
Wireframing
Wireframing
Wireframing
I focused on key wireframes that shaped the product structure and logic. These wireframes helped ensure clarity and usability across key screens like homepage, product, cart, and checkout-on both desktop and mobile.
I focused on key wireframes that shaped the product structure and logic. These wireframes helped ensure clarity and usability across key screens like homepage, product, cart, and checkout-on both desktop and mobile.
I focused on key wireframes that shaped the product structure and logic. These wireframes helped ensure clarity and usability across key screens like homepage, product, cart, and checkout-on both desktop and mobile.
Desktop Screens
Desktop Screens
Home Page
Home Page
Home Page
The page allows quick access to key content like product categories, brand highlights, and social proof. Designed to guide users naturally into the shopping flow.
The page allows quick access to key content like product categories, brand highlights, and social proof. Designed to guide users naturally into the shopping flow.
The page allows quick access to key content like product categories, brand highlights, and social proof. Designed to guide users naturally into the shopping flow.
Product Page
Product Page
Product Page
Includes product images, color and quantity selection, clear call to action, key info in accordions, and related product suggestions - encouraging continued browsing.
Includes product images, color and quantity selection, clear call to action, key info in accordions, and related product suggestions - encouraging continued browsing.
Includes product images, color and quantity selection, clear call to action, key info in accordions, and related product suggestions - encouraging continued browsing.
Cart & Checkout
Cart & Checkout
Cart & Checkout
A short prototype showing the transition from cart to a step-by-step accordion checkout.
A short prototype showing the transition from cart to a step-by-step accordion checkout.
A short prototype showing the transition from cart to a step-by-step accordion checkout.
Mobile Adaptation
Mobile Adaptation
Key screens were adapted to mobile to ensure clarity, usability, and a consistent visual language across devices.
Key screens were adapted to mobile to ensure clarity, usability, and a consistent visual language across devices.
Home Page
Product Page
Cart
Checkout
Check out the next project
AgriTrack
Smart agritech monitoring system
Check out the next project
AgriTrack
Smart agritech monitoring system
Check out the next project
AgriTrack
Smart agritech monitoring system
Mobile Adaptation
Key screens were adapted to mobile to ensure clarity, usability, and a consistent visual language across devices.
Home Page
Product Page
Product Page
Checkout