Splash Screen

Splash Screen

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

Main Navigation

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.

Product Detail A: Snapshot

Product Detail A: Snapshot

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 Page

Product Page

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

Product Detail B

Product Detail B

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.

Product Detail C

Product Detail C

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.

Wishlist

Wishlist

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.

 

Checkout Process: Shopping Cart

Checkout Process: Shopping Cart

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 ”

Shopping Cart (scrolled)

Shopping Cart (scrolled)

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.

Calculate Shipping

Calculate Shipping

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

Confirm Shipping Cost

Confirm Shipping Cost

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

Account Information + Recipient Details

Account Information + Recipient Details

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

Account Information + Recipient Details

Account Information + Recipient Details

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

Happy Moment Discount:  Refer-a-Friend Incentive

Happy Moment Discount: Refer-a-Friend Incentive

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”.

What’s the most important phase in creating an e-commerce site?

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.