Daily UI - Shopping Cart
- 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.
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:
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.