Expertises
Branding
E-commerce
UX/UI Design
À travers ce projet, j’ai conçu une expérience e-commerce pensée pour faire découvrir la marque, donner envie et accompagner l’utilisateur jusqu’à l’achat, sans jamais perdre de vue la simplicité et la gourmandise.
Claire, 34 ans, découvre Pot-pote via une story sponsorisée Instagram.
Le post raconte la rencontre improbable entre les deux ingrédients phares de la tartinade : un pois chiche et un citron confit. Au fil de la story, une histoire se crée, jusqu’à révéler le produit dans son bocal. L’approche intrigue, surprend et donne envie d’en savoir plus. Sans parler directement du produit, la marque réussit déjà à exprimer sa personnalité : simple, chaleureuse et légèrement décalée.
En cliquant sur la story, Claire arrive sur le site de Pot-Pote. Elle retrouve immédiatement l’univers aperçu sur Instagram : une marque chaleureuse, simple et gourmande. La homepage lui présente une gamme courte, pensée pour être comprise d’un seul regard. Chaque produit semble avoir sa place, sans surcharge ni navigation complexe.
Très vite, Claire se projette. Les recettes ne sont pas là pour impressionner, mais pour montrer à quel point les produits peuvent s’intégrer facilement dans son quotidien. Une tartinade mélangée à des légumes rôtis, une sauce tomate versée sur des pâtes, un coffret imaginé pour un dîner entre amis. La marque ne vend plus seulement un produit, mais une idée simple de ce qu’il pourrait devenir.
Une fois séduite, Claire cherche à être rassurée. Les ingrédients, le savoir-faire et les informations pratiques apparaissent naturellement dans le parcours. Rien n’est caché, rien n’est surjoué. Le ton reste sincère, accessible et suffisamment clair pour lui donner confiance.
Arrivée sur la fiche produit, Claire retrouve tout ce dont elle a besoin pour se décider. Le produit, son prix, les ingrédients et les idées recettes sont réunis dans une interface simple et directe. Quelques instants plus tôt, elle découvrait une histoire sur Instagram. Désormais, elle est prête à passer commande.
👁️ Voir → 🧠 Comprendre → 🍝 Se projeter → 🛒 Acheter
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M 0 2.413 C 0 1.08 1.08 0 2.413 0 L 31.587 0 C 32.919 0 34 1.08 34 2.413 L 34 31.587 C 34 32.919 32.919 34 31.587 34 L 2.413 34 C 1.08 34 0 32.919 0 31.587 Z" fill="rgb(31, 29, 28)" height="33.99995px" id="TQjFhDkQE" transform="translate(7 7)" width="34px"/><path d="M 2.949 5.899 C 4.578 5.899 5.899 4.578 5.899 2.949 C 5.899 1.32 4.578 0 2.949 0 C 1.32 0 0 1.32 0 2.949 C 0 4.578 1.32 5.899 2.949 5.899 Z" fill="rgb(255, 255, 255)" height="5.899000000000001px" id="AF_I1kH70" transform="translate(11.682 11.66)" width="5.898999999999999px"/><path d="M 0 0.414 L 4.888 0.414 L 4.888 2.653 C 4.888 2.653 6.215 0 9.824 0 C 13.044 0 15.711 1.586 15.711 6.42 L 15.711 16.615 L 10.645 16.615 L 10.645 7.656 C 10.645 4.804 9.122 4.49 7.962 4.49 C 5.555 4.49 5.142 6.567 5.142 8.028 L 5.142 16.615 L 0 16.615 Z" fill="rgb(255, 255, 255)" height="16.6147px" id="OuQ0bh_QM" transform="translate(20.282 19.325)" width="15.7106px"/><path d="M 0 0 L 5.142 0 L 5.142 16.201 L 0 16.201 Z" fill="rgb(255, 255, 255)" height="16.200999999999997px" id="XZAtypVaJ" transform="translate(12.06 19.739)" width="5.1423000000000005px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M 17.455 0 C 12.715 0 12.12 0.021 10.259 0.105 C 8.4 0.191 7.132 0.485 6.022 0.916 C 4.874 1.362 3.901 1.959 2.93 2.929 C 1.96 3.899 1.363 4.873 0.916 6.021 C 0.483 7.131 0.189 8.4 0.105 10.257 C 0.022 12.119 0 12.714 0 17.455 C 0 22.195 0.021 22.788 0.105 24.65 C 0.191 26.508 0.485 27.776 0.916 28.886 C 1.363 30.034 1.959 31.008 2.929 31.978 C 3.899 32.949 4.873 33.547 6.02 33.993 C 7.131 34.424 8.399 34.719 10.257 34.804 C 12.119 34.888 12.713 34.909 17.453 34.909 C 22.194 34.909 22.787 34.888 24.649 34.804 C 26.507 34.719 27.777 34.424 28.887 33.993 C 30.035 33.547 31.007 32.949 31.977 31.978 C 32.948 31.008 33.544 30.034 33.991 28.887 C 34.42 27.776 34.715 26.508 34.802 24.65 C 34.886 22.788 34.908 22.195 34.908 17.455 C 34.908 12.714 34.886 12.119 34.802 10.257 C 34.715 8.399 34.42 7.131 33.991 6.021 C 33.544 4.873 32.948 3.899 31.977 2.929 C 31.006 1.958 30.035 1.362 28.886 0.916 C 27.773 0.485 26.504 0.191 24.646 0.105 C 22.784 0.021 22.192 0 17.45 0 Z M 15.89 3.145 C 16.354 3.145 16.873 3.145 17.455 3.145 C 22.116 3.145 22.668 3.162 24.508 3.246 C 26.21 3.324 27.134 3.608 27.749 3.847 C 28.564 4.163 29.144 4.541 29.755 5.152 C 30.366 5.763 30.744 6.345 31.061 7.16 C 31.3 7.774 31.585 8.698 31.662 10.4 C 31.746 12.24 31.764 12.792 31.764 17.451 C 31.764 22.109 31.746 22.661 31.662 24.501 C 31.584 26.203 31.3 27.127 31.061 27.741 C 30.745 28.556 30.366 29.136 29.755 29.747 C 29.144 30.357 28.564 30.736 27.749 31.052 C 27.134 31.292 26.21 31.576 24.508 31.653 C 22.668 31.737 22.116 31.755 17.455 31.755 C 12.795 31.755 12.243 31.737 10.403 31.653 C 8.701 31.575 7.777 31.291 7.162 31.052 C 6.347 30.735 5.765 30.357 5.154 29.746 C 4.544 29.135 4.165 28.555 3.848 27.74 C 3.609 27.125 3.325 26.202 3.247 24.5 C 3.164 22.66 3.147 22.107 3.147 17.446 C 3.147 12.785 3.164 12.235 3.247 10.395 C 3.325 8.693 3.609 7.77 3.848 7.155 C 4.165 6.34 4.544 5.758 5.154 5.147 C 5.765 4.536 6.347 4.158 7.162 3.841 C 7.777 3.601 8.701 3.317 10.403 3.239 C 12.013 3.167 12.637 3.145 15.89 3.141 Z M 26.772 6.044 C 25.616 6.044 24.678 6.981 24.678 8.137 C 24.678 9.294 25.616 10.232 26.772 10.232 C 27.929 10.232 28.867 9.294 28.867 8.137 C 28.867 6.981 27.929 6.043 26.772 6.043 Z M 17.455 8.491 C 12.505 8.491 8.492 12.504 8.492 17.455 C 8.492 22.405 12.505 26.416 17.455 26.416 C 22.406 26.416 26.417 22.405 26.417 17.455 C 26.417 12.504 22.405 8.491 17.455 8.491 Z M 17.455 11.636 C 20.668 11.636 23.273 14.241 23.273 17.455 C 23.273 20.668 20.668 23.273 17.455 23.273 C 14.242 23.273 11.637 20.668 11.637 17.455 C 11.637 14.241 14.242 11.636 17.455 11.636 Z" fill="rgb(31, 29, 28)" height="34.909040000000005px" id="DbZ_sxphO" transform="translate(6.545 6.545)" width="34.907630000000005px"/><path d="M 17.455 0 C 12.715 0 12.12 0.021 10.259 0.105 C 8.4 0.191 7.132 0.485 6.022 0.916 C 4.874 1.362 3.901 1.959 2.93 2.929 C 1.96 3.899 1.363 4.873 0.916 6.021 C 0.483 7.131 0.189 8.4 0.105 10.257 C 0.022 12.119 0 12.714 0 17.455 C 0 22.195 0.021 22.788 0.105 24.65 C 0.191 26.508 0.485 27.776 0.916 28.886 C 1.363 30.034 1.959 31.008 2.929 31.978 C 3.899 32.949 4.873 33.547 6.02 33.993 C 7.131 34.424 8.399 34.719 10.257 34.804 C 12.119 34.888 12.713 34.909 17.453 34.909 C 22.194 34.909 22.787 34.888 24.649 34.804 C 26.507 34.719 27.777 34.424 28.887 33.993 C 30.035 33.547 31.007 32.949 31.977 31.978 C 32.948 31.008 33.544 30.034 33.991 28.887 C 34.42 27.776 34.715 26.508 34.802 24.65 C 34.886 22.788 34.908 22.195 34.908 17.455 C 34.908 12.714 34.886 12.119 34.802 10.257 C 34.715 8.399 34.42 7.131 33.991 6.021 C 33.544 4.873 32.948 3.899 31.977 2.929 C 31.006 1.958 30.035 1.362 28.886 0.916 C 27.773 0.485 26.504 0.191 24.646 0.105 C 22.784 0.021 22.192 0 17.45 0 Z M 15.89 3.145 C 16.354 3.145 16.873 3.145 17.455 3.145 C 22.116 3.145 22.668 3.162 24.508 3.246 C 26.21 3.324 27.134 3.608 27.749 3.847 C 28.564 4.163 29.144 4.541 29.755 5.152 C 30.366 5.763 30.744 6.345 31.061 7.16 C 31.3 7.774 31.585 8.698 31.662 10.4 C 31.746 12.24 31.764 12.792 31.764 17.451 C 31.764 22.109 31.746 22.661 31.662 24.501 C 31.584 26.203 31.3 27.127 31.061 27.741 C 30.745 28.556 30.366 29.136 29.755 29.747 C 29.144 30.357 28.564 30.736 27.749 31.052 C 27.134 31.292 26.21 31.576 24.508 31.653 C 22.668 31.737 22.116 31.755 17.455 31.755 C 12.795 31.755 12.243 31.737 10.403 31.653 C 8.701 31.575 7.777 31.291 7.162 31.052 C 6.347 30.735 5.765 30.357 5.154 29.746 C 4.544 29.135 4.165 28.555 3.848 27.74 C 3.609 27.125 3.325 26.202 3.247 24.5 C 3.164 22.66 3.147 22.107 3.147 17.446 C 3.147 12.785 3.164 12.235 3.247 10.395 C 3.325 8.693 3.609 7.77 3.848 7.155 C 4.165 6.34 4.544 5.758 5.154 5.147 C 5.765 4.536 6.347 4.158 7.162 3.841 C 7.777 3.601 8.701 3.317 10.403 3.239 C 12.013 3.167 12.637 3.145 15.89 3.141 Z M 26.772 6.044 C 25.616 6.044 24.678 6.981 24.678 8.137 C 24.678 9.294 25.616 10.232 26.772 10.232 C 27.929 10.232 28.867 9.294 28.867 8.137 C 28.867 6.981 27.929 6.043 26.772 6.043 Z M 17.455 8.491 C 12.505 8.491 8.492 12.504 8.492 17.455 C 8.492 22.405 12.505 26.416 17.455 26.416 C 22.406 26.416 26.417 22.405 26.417 17.455 C 26.417 12.504 22.405 8.491 17.455 8.491 Z M 17.455 11.636 C 20.668 11.636 23.273 14.241 23.273 17.455 C 23.273 20.668 20.668 23.273 17.455 23.273 C 14.242 23.273 11.637 20.668 11.637 17.455 C 11.637 14.241 14.242 11.636 17.455 11.636 Z" fill="transparent" height="34.909060000000004px" id="AvudU5IQm" transform="translate(6.545 6.545)" width="34.907630000000005px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M 28.137 1.465 C 25.296 -1.375 22.263 0.463 20.364 2.362 L 2.427 20.299 C 0.529 22.197 -1.459 25.082 1.531 28.071 C 4.52 31.061 7.405 29.073 9.303 27.174 L 27.24 9.238 C 29.138 7.339 30.977 4.305 28.137 1.465 Z" fill="rgb(31, 29, 28)" height="29.601923597347753px" id="eCIKygm5L" transform="translate(9.063 8.964)" width="29.601652422196935px"/><path d="M 0.871 4.695 L 4.669 8.492 L 8.535 4.626 C 8.797 4.363 9.064 4.119 9.332 3.889 C 8.927 1.847 7.761 0 4.667 0 C 1.567 0 0.403 1.854 0 3.901 C 0.29 4.151 0.578 4.402 0.871 4.695 Z" fill="rgb(31, 29, 28)" height="8.4924px" id="QONGvtqmg" transform="translate(19.192 5)" width="9.331700000000001px"/><path d="M 8.52 3.864 L 4.657 0 L 0.861 3.796 C 0.573 4.084 0.286 4.348 0 4.595 C 0.435 6.677 1.667 8.584 4.655 8.584 C 7.651 8.584 8.881 6.667 9.314 4.578 C 9.048 4.349 8.782 4.125 8.52 3.864 Z" fill="rgb(31, 29, 28)" height="8.584400000000002px" id="YkA4BG354" transform="translate(19.205 34.042)" width="9.313600000000001px"/><path d="M 13.452 0 L 6.13 0 C 3.445 0 0 0.846 0 4.862 C 0 7.859 1.918 9.089 4.007 9.521 C 4.255 9.236 13.452 0 13.452 0 Z" fill="rgb(31, 29, 28)" height="9.5215px" id="Nc1WuHv0t" transform="translate(5 18.901)" width="13.452200000000001px"/><path d="M 9.449 0 C 9.217 0.27 0 9.529 0 9.529 L 7.218 9.529 C 9.903 9.529 13.348 8.894 13.348 4.667 C 13.348 1.567 11.495 0.402 9.449 0 Z" fill="rgb(31, 29, 28)" height="9.5288px" id="n0zP7efbW" transform="translate(29.278 19.096)" width="13.348300000000002px"/><path d="M 11.789 7.532 L 13.097 6.224 L 9.302 2.428 C 7.403 0.529 4.519 -1.459 1.529 1.531 C -0.663 3.723 -0.176 5.856 0.987 7.588 C 1.341 7.562 11.789 7.532 11.789 7.532 Z" fill="rgb(31, 29, 28)" height="7.587915401610578px" id="owqr43KvI" transform="translate(9.062 8.966)" width="13.097383847964434px"/><path d="M 1.311 0.054 L 0 1.365 L 3.866 5.231 C 5.765 7.13 8.799 8.968 11.639 6.128 C 13.758 4.009 13.271 1.783 12.1 0 C 11.723 0.027 1.311 0.054 1.311 0.054 Z" fill="rgb(31, 29, 28)" height="7.593054464973303px" id="HwJkVLvUA" transform="translate(25.558 30.975)" width="13.103342793267782px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M 10.526 0.002 C 11.508 -0.016 12.489 0.085 13.448 0.302 C 14.254 0.478 15.02 0.806 15.705 1.268 C 16.337 1.727 16.837 2.345 17.155 3.059 C 17.521 3.937 17.697 4.882 17.673 5.833 C 17.715 6.876 17.448 7.909 16.907 8.803 C 16.337 9.646 15.55 10.32 14.628 10.753 C 15.879 11.09 16.968 11.862 17.7 12.931 C 18.403 14.063 18.756 15.377 18.715 16.709 C 18.739 17.771 18.519 18.824 18.073 19.789 C 17.662 20.63 17.058 21.363 16.313 21.929 C 15.544 22.489 14.68 22.903 13.762 23.152 C 12.811 23.415 11.828 23.547 10.84 23.545 L 0 23.545 L 0 0.002 Z M 9.9 9.524 C 10.672 9.556 11.432 9.325 12.055 8.869 C 12.354 8.603 12.586 8.271 12.734 7.899 C 12.881 7.527 12.94 7.126 12.904 6.728 C 12.924 6.263 12.832 5.8 12.634 5.378 C 12.467 5.042 12.207 4.762 11.884 4.57 C 11.558 4.358 11.191 4.217 10.807 4.154 C 10.391 4.073 9.967 4.037 9.543 4.045 L 4.911 4.045 L 4.911 9.545 L 9.9 9.545 Z M 10.17 19.547 C 10.637 19.553 11.103 19.503 11.557 19.397 C 11.973 19.305 12.367 19.135 12.718 18.895 C 13.063 18.655 13.341 18.332 13.527 17.956 C 13.743 17.476 13.842 16.952 13.816 16.427 C 13.863 15.948 13.8 15.465 13.631 15.015 C 13.462 14.565 13.193 14.159 12.843 13.829 C 12.102 13.283 11.193 13.012 10.273 13.064 L 4.911 13.064 L 4.911 19.547 Z" fill="rgb(31, 29, 28)" height="23.544625147698735px" id="cPaQ8DViC" transform="translate(6 11.998)" width="18.718630709494654px"/><path d="M 5.554 13.449 C 5.94 13.806 6.394 14.082 6.889 14.258 C 7.384 14.434 7.91 14.508 8.434 14.475 C 9.266 14.496 10.081 14.243 10.755 13.755 C 11.303 13.399 11.718 12.872 11.935 12.255 L 15.852 12.255 C 15.434 14.01 14.415 15.563 12.972 16.644 C 11.587 17.563 9.95 18.029 8.289 17.976 C 7.103 17.992 5.926 17.769 4.828 17.321 C 3.835 16.906 2.944 16.28 2.218 15.486 C 1.495 14.654 0.939 13.69 0.582 12.647 C 0.18 11.481 -0.016 10.254 0.001 9.021 C -0.006 7.809 0.197 6.605 0.601 5.462 C 1.144 3.854 2.183 2.459 3.568 1.478 C 4.953 0.498 6.613 -0.019 8.31 0.002 C 9.562 -0.025 10.801 0.269 11.91 0.854 C 12.911 1.403 13.775 2.172 14.437 3.104 C 15.114 4.081 15.599 5.178 15.867 6.336 C 16.16 7.58 16.265 8.861 16.177 10.136 L 4.512 10.136 C 4.417 11.333 4.791 12.521 5.554 13.449 Z M 10.672 4.496 C 10.346 4.169 9.953 3.916 9.521 3.754 C 9.088 3.592 8.626 3.525 8.166 3.557 C 7.554 3.533 6.948 3.669 6.405 3.95 C 5.974 4.187 5.594 4.506 5.286 4.889 C 5.012 5.248 4.809 5.655 4.686 6.089 C 4.574 6.451 4.505 6.824 4.479 7.202 L 11.704 7.202 C 11.641 6.217 11.282 5.275 10.675 4.497 Z" fill="rgb(31, 29, 28)" height="17.980155708143766px" id="bZh9uQzN8" transform="translate(26.156 18.009)" width="16.20705215584976px"/><path d="M 0 0 L 9.054 0 L 9.054 2.315 L 0 2.315 Z" fill="rgb(31, 29, 28)" height="2.3145000000000007px" id="me169TsjZ" transform="translate(29.703 13.572)" width="9.053999999999998px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M 8.979 1.618 C 11.165 0.55 13.567 -0.004 16 0 C 19.806 0 23.3 1.33 26.047 3.547 C 25.259 4.635 24.036 6.085 22.484 7.509 C 21.243 8.659 19.881 9.671 18.421 10.526 C 15.331 6.555 11.589 3.445 8.979 1.618 Z M 5.837 3.643 C 5.836 3.644 5.835 3.645 5.835 3.645 C 5.834 3.645 5.833 3.644 5.832 3.643 Z M 5.835 3.645 C 7.968 4.985 11.908 7.972 15.18 11.963 C 12.572 12.777 9.473 12.967 6.561 12.832 C 4.519 12.738 2.486 12.489 0.482 12.087 C 1.319 8.774 3.195 5.815 5.835 3.645 Z M 6.408 16.258 C 9.626 16.407 13.313 16.203 16.542 15.127 C 16.795 15.043 17.047 14.953 17.296 14.857 C 18.151 16.21 18.907 17.624 19.559 19.086 L 19.072 19.269 C 16.263 20.347 13.372 22.318 11.009 24.281 C 9.135 25.838 7.482 27.481 6.408 28.807 C 2.227 25.68 -0.163 20.707 0.009 15.488 C 2.12 15.901 4.259 16.159 6.408 16.258 Z M 13.201 26.917 C 15.422 25.072 17.984 23.358 20.299 22.471 L 20.848 22.265 C 21.809 24.897 22.552 27.603 23.069 30.357 C 20.937 31.408 18.537 32 16 32 C 13.648 32 11.411 31.493 9.397 30.578 C 10.566 29.259 11.838 28.035 13.201 26.917 Z M 24.137 21.278 C 26.891 20.597 29.514 20.283 31.448 20.176 C 30.58 23.384 28.734 26.242 26.168 28.354 C 25.755 26.434 25.09 23.929 24.137 21.278 Z M 22.857 18.064 C 22.146 16.453 21.328 14.846 20.395 13.344 C 21.973 12.395 23.45 11.287 24.802 10.037 C 26.148 8.804 27.383 7.454 28.493 6.005 C 30.922 9.032 32.163 12.842 31.983 16.72 C 28.902 16.846 25.843 17.296 22.857 18.064 Z" fill="rgb(31, 29, 28)" height="31.99999980323294px" id="aJ3SDiay8" transform="translate(8 8)" width="32px"/></svg>)