For this project, I designed an e-commerce website that sells preloved toys. In this project, I focused UI elements for users to sort, filter and make payment. I applied at least three Heuristic principles for the design, apply three design patterns and interactions.

I conducted desktop research on different companies that sells toys and preloved items. What I have noticed is that they categorize their items according to brands and age. Additionally, preloved websites are categorized into different conditions. Both have similarities of sorting by price, name and availability.

The journey is similar across all companies which are adding to cart (adding quantity), proceed checkout and make payment (apply codes, provide personal information from contact details and shipping).

The colors I used are complimentary colors of blue and yellow. They are soft yet bright which exude fun for visitors to purchase despite it being preloved. The fonts are Darmadrop One for logo which is cartoonish and Lexend for descriptions.

• Match between system and real world

In physical shops or stores, after we have put an item in our cart, we either continue shopping/looking for other items or straight away proceed with payment.

Just like in physical shops, users have the option to continue shopping, or checkout after adding an item into their cart.

• Error prevention

On Creating Account and Log in pages, the placeholder shows the requirement to enter password

• Feedback

To keep users informed of their actions, there will be a visual feedback that shows options like continue shopping, checkout, or exit the pop-up message when they click “Add to cart” button on the product page, and a visual feedback that informs their order is successful and will update on their email when they click “Pay now” on the checkout page.

• Picture manager

On the product page for each item, there are small thumbnail images beside the main image of the item. Users can click on different thumbnail images to view different parts of the same item.

• Grids of equal

The images that show the items available including the brand name, item name, and price for all categories pages have the same width and length of 360 pixels and 510 pixels respectively, the spaces between the images are 10 pixels.

• Sitemap footer

Users can easily access different pages of the website by clicking any link on the footer

• Carousel

On the home page, users can interact by clicking on the arrows, next or back to view the latest items

• Hovering

On the checkout page users will know the reason for them to input their contact number when they hover the information icon.

• Transition

When users click on the buttons (CTA, checkout, send message, and pay now), it will transition the next page by pushing the next page in.

Alignment, have a page to track orders, decrease footer's height.