Interactions

When building a new e-commerce website, interactions can enhance the user experience by guiding the user through the buying journey. Whether an added interaction is standard in e-commerce web design, or one that enhances the user experience, they can help a business be more successful by increasing click-through, conversion and purchase.

Interactions

When building a new e-commerce website, interactions can enhance the user experience by guiding the user through the buying journey. Whether an added interaction is standard in e-commerce web design, or one that enhances the user experience, they can help a business be more successful by increasing click-through, conversion and purchase.

Recommendations & Favorites
When acquiring new customers, it's important to provide necessary information for the buying process. 
One feature in Tea Leaf Creation's Menu Page is the ability to heart drinks so they can easily be saved on a
favorites page. This can help the ordering flow if the customer buys the same drink again by offering a fast check-out experience. Another feature on this page are icons that recommend popular drinks. This aids any indecisive customer or someone new who doesn't know what to buy.
Below you can interact with both of these features in the prototype.
Hearts - mark your favorite drink by clicking on the hearts and they will be saved to your favorites page.
Recommendations - hover-overing a thumbs-up icon lets you know the drink is recommended.
_____________________________________________
Pop-up Modal
Pop-up modals are a common interaction in web design. It offers a better user experience by not having to take you
to a new page. When a user is browsing through the web-site, they can log-in or sign-up anytime without having to leave the page or section they were looking at.
Below is an example of logging-in on the homepage. You can click the Log-in/Sign-in text link to see the pop-up modal in action! The pop-up modal also features a checkbox to remember user information for a faster log-in. 
_____________________________________________
Dropdown Menu
When a page has multiple sections, it might be a good idea to add a sub-category dropdown menu to the navigation bar. For Tea Leaf Creations, this will help provide new users a list of drink offerings and returning users a faster way to get to the type of drink they want.
Click the Menu text link in the navigation bar to see the dropdown. You'll also notice a hover over effect as you scroll through the drink options.
Back to Top