Pavot – Handmade soaps online shop

Pavot- Featured image with mockups

What & why

Pavot is a single-handled business that sells natural, handmade soaps. The client, the funder and soap maker, needed a website both to gain visibility and increase the sales.

For Pavot I designed a brand new, mobile first e-commerce for handmade, 100% natural, and beautiful soaps.

My role

  • Identification of the problem.
  • User research.
  • Feature ideation.
  • Workflow.
  • Sketches.
  • Low Fidelity prototype, iterate.
  • Style guide, Pattern library and accessibility standards.
  • Content.
  • High Fidelity prototype.
  • Usability test and iterate.

Design tools

Design tools

Design process

Design process

1• Research

Client’s needs & goals

The owner of Pavot is not only a single handed entrepreneur, but also the artisan and designer of the soaps she sells locally. She normally does it through word of mouth, but she desires as well a digital “show room” to gain more loyal customers and to increase her sales.

  • Digital show room to increase visibility and to reach more customers;
  • Online shop to increase sales;
  • Create a tighter relationship with the customers through the newsletters.

User Persona

User Persona

Adel contributes to sustainability taking responsible choices also when it is time to self’-treat. She found the online shop of Pavot while browsing with her mobile and started her customer journey.

2• Define

Brand philosophy

Artisanal, natural, vegan, local, clean.

100% natural, vegan soaps for anyone looking for self wellness in harmony with the nature.


Competitive analysis

Competitive analysisLush.chiHerbEtsy
Search barYesYesYes
Add favoritesYes, but then are findable only after login NoYes, need access
Product suggestionNoYesNo
Continue shoppingYesNoYes
Create accountYesYesYes
Guest checkout YesNoYes
Order historyYesYesYes
Apple payNoYesYes
Competitive Analysis

3• Ideate

Features ideation for Pavot

  • Product categories;
  • Product search;
  • Product suggestion;
  • Product details;
  • Product reviews;
  • Add product to favorites;
  • Login/Sign up or
  • Checkout as a guest;
  • Account;
  • Order history;
  • Help & contacts.

User flow

User Flow from the moment the user lands in the Pavot’ s homepage until the place of the order.



Design Decisions

When the user lands to the Pavot homepage can:

  • Search using the search bar. Autocomplete, predictive text.
  • Add product to favorites: this action is possible also if not logged. The favorites are stored in cookies;
  • Add products in basket: here the user is asked to login or to sign up/ continue as a guest. The “continue as a guest” feature is the reason for allowing the users to save products in “favorites” without signing in.

4• Prototype


Low fidelity wireframes

Style guide

Style Guide

High fidelity wireframes


Navigation bar with hamburger menu, Pavot’s logo, search bar, favorites and basket.

An horizontal line always highlights where the user is.

Hero image with value proposition message.

Scroll down to browse products in product categories. Products slide to left.

Product details page

  • Hero image and 3 miniatures;
  • product details;
  • reviews;
  • CTA to add to basket: rounded button and big button;
  • more suggested products.

New customer registration

  • Short form with the essential required data to proceed to create the account or
  • continue as a guest; tertiary button.
  • Term & Conditions plus privacy policy agreement checkbox;
  • Newsletter checkbox.

Other frames