Daily UI Challange - Shopping Cart

1. Overview
  • My Role: UI Designer (low and high-fidelity wireframing)

  • Timeline: 13th July 2018

  • Tools: Figma

As a part of rapid prototyping practice, I have started daily UI challenge and created wireframes of a shopping cart screen. Through this project, I could consider the methods to keep the important elements more visible and easier to find.

2. Low-Fidelity Wireframe

Firstly, to get an idea how to display each element, I created a low-fidelity wireframe by paper sketching. Here, I decided the title of the screen, and the price and photos of each product must be included - to show the users that they have chosen the right products and how much amount of money they will need to spend.

3. High-Fidelity Wireframe

Based on the paper wireframe, I moved onto high-fidelity wireframe creation using Figma. As I planned to create a single screen, there was a challenge whether or not to include the subtotal and total price that the users need to pay. However, in this stage, I decided to let users move onto next screen (for checkout) and available to see the prices, paying for the products at the same time.

After the decision, I completed the wireframe as follows:

4. Lesson from the Project

By implementing this project, I could learn how to catch the important elements of interfaces and display the elements properly. In addition, I could practice to develop visual hierarchy within the interface by using semibold/bold fonts and point colours. Most importantly, I will continue to do the challenge to for the improvement my design skill set.

© 2018 YESEUL SEO. This website is optimised for desktop.

This site was designed with the
website builder. Create your website today.
Start Now