Daily UI - 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 about 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.

Low-Fidelity Wireframe

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 making the decision, I completed the wireframe as follows:

High-Fidelity Wireframe

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.