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 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
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.
Pavot
Competitive analysis
| Competitive analysis | Lush.ch | iHerb | Etsy |
| Search bar | Yes | Yes | Yes |
| Add favorites | Yes, but then are findable only after login | No | Yes, need access |
| Product suggestion | No | Yes | No |
| Continue shopping | Yes | No | Yes |
| Create account | Yes | Yes | Yes |
| Guest checkout | Yes | No | Yes |
| Reviews | Yes | Yes | Yes |
| Order history | Yes | Yes | Yes |
| Apple pay | No | Yes | Yes |
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
Sitemap
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
Sketches
Low fidelity wireframes
Style guide
High fidelity wireframes
Homepage
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.
