The Heritage Cover Image

The Heritage



Overview


Roles

Tools Used

Duration

Credits

This project is a fictitious scenario, completed as a personal project.


Background


Goals


Deliverables


View Hi-Fi Mobile Prototype


View Hi-Fi PC Prototype



Market & Product Research


Skincare Market Research


Asian Ingredient Research




User Persona


Amie User Persona



Task Flow


Task Flow Key



Task Flow 1



Task Flow 2



Task Flow 3



User Flow


User Flow Key


User Flow



Application Map


The Heritage App Map



Low-Fidelity Prototypes


Homepage Prototype
Lofi Homepage Wireframe

For the lofi homepage wireframes, I took inspiration from well-known and user-friendly cosmetics brands to inspire my layout. On PC, a centered navigation bar with a shortcut to the homepage (via the clickable logo) and a cart icon was intuitive, impactful, and let users know exactly what pages are available to them. On mobile, I moved the logo shortcut to the center of the navbar to focus the eye and provide an easy way to get back to the homepage, while the page links were moved into a concise hamburger menu that is easy to use. The cart logo works the same and was located in the same place. I wanted to include many full-size images of our products to illustrate our brand identity, which would be placed throughout the homepage and alternate with helpful links. Additionally, I added a Bestsellers horizontal scrollbar to give new customers an easy way to find our most popular products right on the front page. Finally, during the lofi phase, I needed to decide what colors would best capture the essense of the brand while also maintaining contrast and readability. I decided on a shade of hot pink for the navbar and bottom bar, which would add a pop of color to the site, add an easily recognizable color to our UI kit, and remain readable and easy to use with a white text overlay.



Shop All Page Prototype
Lofi Shop All Wireframe

For the lofi Shop All page wireframes, I stayed consistent with e-commerce site design trends to ensure that the site was user-friendly and intuitive. Displaying 4 items per row for the PC version and 2 items per row for the mobile version was easily readable and avoided clutter. For each item, the price of the 'standard' size would be displayed on the ticket, in cases where there were multiple sizes of the same item (for example, trial size, standard size, and jumbo size). Additionally, a filters bar above the product would make it possible for users to filter products by three categories; presumably skin concern, ingredient, and collection, like on the main menu. The rightmost dropdown on the bar would enable product sorting by categories like Price: Low to High or Popular Now. These filters are still available on mobile, but it would be a horizontally scrollable bar. Apart from the content, the top navbar and bottom bar would be the same as that of the homepage for both PC and mobile.


These lofi wireframes helped me place where important components belonged on the screen while avoiding getting lost in details or worrying about color or icon choices. Though there would be some changes from now to the final iteration, the main idea of these wireframes formed the core of the interactive prototypes.




High-Fidelity Prototypes


Mobile Prototype

View Full HiFi Prototype

PC Prototype

View Full HiFi Prototype




Cart Flow