Artesastore

Project Overview

Artesastore is an e-commerce website created for a client selling Colombian artisan products.

The main goal was to design a clear shopping flow that leads users to complete purchases through WhatsApp, instead of a traditional in-site checkout.

I designed the full UI and prototype and implemented it using custom CSS and JavaScript.

Problems Detected

Expectations Mismatch

The main CTA used the label “Buy”, which implied an in-app checkout. However, the actual flow redirected users to WhatsApp, creating confusion and breaking user expectations.

Conversion Friction

Redirecting users to WhatsApp without clear context introduced hesitation and reduced trust, potentially causing users to abandon the process before contacting the business.

Ideation & Direction

Early explorations considered adding notifications and group features to increase engagement. However, due to the simplicity of the product and the external WhatsApp flow, these options risked adding unnecessary complexity.

The focus shifted toward clarity and a linear flow that clearly communicates the next step to the user.

Information Architecture

The information architecture was designed around a simple and linear user journey, focused on reducing friction and making the purchasing process feel clear and intuitive.

Since the final transaction happens outside the platform through WhatsApp, it was important to guide users step by step without creating false expectations of a traditional checkout experience.

The experience begins with a hero section that introduces the brand and sets the context. From there, users are led into the product catalog, where they can explore available items in a straightforward way. Once a product is selected, the product detail page provides the necessary information to reinforce purchase intent and build confidence.

Finally, instead of a conventional checkout, users are directed to WhatsApp to complete the process. This transition is intentionally supported throughout the flow to ensure users understand what will happen next and feel comfortable taking that final step.

The overall structure avoids unnecessary features and prioritizes clarity, ensuring each section naturally leads to the next.