This is a personal project based on an Adobe XD Daily Creative Challenge to design and prototype an e-commerce web experience. I expanded the exercise to include design on branding and 3-D rendering.
the basics
Bloom is a skincare brand I envisioned that focuses on natural ingredients with some emphasis on botanicals. To lessen the time spent on branding and instead focus more on web experience, I came up with a simple logo and labels but ventured into Adobe Dimensions to create 3-D renders of product images. I looked at brands like Philosophy, Origins, and Tatcha for inspiration in the way they present the information on their websites and how they use differing methods to show hierarchy.
Credit: Philosophy, Origins, and Tatcha
the content
With the daily challenge as a guide, I created assets and a simple template in Photoshop that was then carried over to XD. The user goal is to browse and add a product to the cart and manage the cart. After comparing experiences on other retail sites, I fleshed out the project with more pages, splash screens, and pop ups. This design utilizes XD's grid functions and global asset styles.
the Prototype
Click below to watch a prototype of Bloom's web experience. It shows a user's journey of browsing through products, adding an item to the cart from a product page and adding another item while managing their cart.