MATTHIAS BRENDLER

A personal message from the owner in a clean layout with playful branded imagery in a decidedly simple visual style communicates ease of use.

Main Navigation: using photography in the main product navigation allows users to quickly identify age and gender. It targets user research showing frustration with the text-based drop-down “mega-menu” common in retail.

Clicking on the photograph with the desired age and gender, takes users to the product screen. Product search can be refined by using the filter tools located in the left side menu panel.

Mousing over products anywhere will display available sizes, colors and price as well as 3 circle buttons linking to “add to cart” (blue with shopping cart icon) or “add to wish list” (red with heart icon) and see product details (green with magnifying glass icon). 

Product search can be refined by using the filter tools located in the left side menu panel.

Clicking on the green button or in any product image  opens the product detail pop-up window with product specifications like:  a sliding size rule, available colors, different views and item availability.

On the upper right, users can “add to cart” (blue with shopping cart icon) or “add to wish list” (red with heart icon). 

Clicking the “> i” opens a collapsible slide panel from the right with more information about the product.

Clicking on the green button or in any product image  opens the product detail pop-up window with product specifications like:  a sliding size rule, available colors, different views and item availability.

On the upper right, users can “add to cart” (blue with shopping cart icon) or “add to wish list” (red with heart icon). 

Clicking the “> i” opens a collapsible slide panel from the right with more information about the product.  

Clicking on the area beyond this pop-up (and globally on the site) returns the user to the page on which they clicked the product detail button.

On this pop-up screen users can manage and edit items they have added as well as confirm desired quantity, gift status, price and then “Add to Cart” when ready.

Clicking “Buy” button begins the 3-step checkout process,  opening the pop-up “Check-out” screen.

Clicking on the area beyond this pop-up (and globally on the site) returns the user to the page on which they clicked the product detail button.

Users follow a linear 1-2-3 checkout process that occurs entirely in this pop-up window. 

At the end of the shopping cart (scrolling), users can proceed to the next 2nd step.

Users can go back at any time by clicking the number “ 1 | 2 |3 ”

To advance, users click the arrow “>” to the right of the subtotal at the bottom of their shopping cart (list of items).

Users can go back at any time by clicking the number “ 1 | 2 |3 ” by scrolling to the top of this shopping cart pop-up window.

Entering the Brazilian zip code or “CEP” returns the shipping cost and dynamically recalculates the total.

As soon as the shipping had been calculated the button to proceed saturates and the user may click to confirm and proceed to checkout.

The user chooses payment method, enters account information, adds information on the recipient and is asked to review and confirm all information submitted.

The user chooses payment method, enters account information, adds information on the recipient and is asked to review and confirm all information submitted.

Upon successful purchase (credit card verified and charge debited or posted), the user receives an offer to get 20% off their next purchase if they “refer a friend”.

Process: Ecommerce Product Audit + Taxonomy

This video below shows the early stage of my design process integrates organization + curation. 

By collecting the product inventory on a single collaborative platform, my team and I could more fluidly and coherently envision, develop and adapt the design for a children’s apparel e-commerce site.