Case Study

AdrienArt.com

A CONCEPT

Responsive e-commerce design for the
ceramicist Adrien Miller.

Product Designer
& Researcher
TOOLS
User Research & Personas
User Flows & Site Map
Mid-Fidelity Wireframe
High-Fidelity Prototype
Usability Testing
DELIVERABLES
ROLE
Whimsical
Goodnotes
Otter AI
Figma

The Client

Adrien Miller shapes clay into products, ranging from functional homeware to fine art sculpture. He has sold his products on Etsy for over fifteen years. His business is currently undergoing a transition due to recent media attention, expanding his audience across the globe. Pivoting from Etsy, which takes 6.5% from each purchase, my design is a place where he may fully showcase and amplify his “Potter’s-Wheel-To-Consumer” business model.

Discovery Phase

I conducted interviews of prior patrons, focusing my research on usability of the current site and overall experience of their interaction with the artist and his products.

Alternatively, I also interviewed users who had no prior knowledge of the artists’ work and I was able to harvest data through conducting usability tests.

• Design audit of the current site via SWOT analysis
• Competitive analysis

Synthesize Results

• Affinity Map  • User Personas  • Problem Statements

Solution

To help Adrien Miller sell independently, he needs a design centered around his artistic journey. Simplifying the categorization of his wide array of products, highlighting features such as the customizability of each purchase and the ability to contact him directly. My design allows him to display his products from all angles, showcase videos of the product creation as well as reviews of happy customers with pictures displaying their purchases.

Information Architecture

Using 3 Card Sorting activities I was able to identify product categories of:  

Homewares / Featured / Wall Art

                                          



Creating a Sitemap further displayed the internal structure I would create.

I also decided which features to initially build out via my User Flow and Task Flows

Sketches

Sketching some initial site designs helped me to develop a language of content layout, spacing & product image placement.

Low Fidelity Wireframes

Drawing from my research I kept my low-fi wireframes very minimal, focusing on impeccable spacing between elements.

Once I built out my wireframes, I was able to prototype the interactions involved with each frame. Prototyping also gave me the chance to conduct further usability testing, ensuing further iteration.

High Fidelity Mockups

I was able to bring the website to life by choosing a color palette, adding product images and images of the artist.