E-Cart Redesign
Personal Project
Scope: UI Design, UX Design, Prototyping, Adobe XD
Timeline: One Week (August 2020)
Overview/Background:
This is a personal project that was inspired while I was shopping online. I noticed that in most online shopping websites and applications, the cart is on the upper corners of the screen. I have large hands so reaching the corner with one hand to check my cart or purchase my items isn't too much of a problem, but I realized this design wasn't ergonomical for users with smaller hands. They might accidentally drop their phone trying to reach the cart button or they might not have a free hand to press the button. My redesign aims to solve the problems associated with the location of the cart function.
The Problem:
There are two problems with the current design implemented in most if not all online shopping websites and applications. One is that to access the cart, one must stretch their hand in an uncomfortable position in order to reach the cart and risk dropping their phone or be forced to resort to using two hands, which is not convenient if the user doesn't have a free hand available. The other problem is that accessing the cart usually navigates to a new page, which takes away from the shopping experience if the user only wanted to check what they have in the cart and get right back to shopping.
Design Inspirations:
I thought that Apple did a great job condensing quick navigation to essential phone features through their AssistiveTouch feature. I liked how it didn't get in the way of day to day usage and it came in handy when the user needed to get to a certain location of their phone quickly.
I also thought Samsung's quick menu tab did a great job keeping their menu minimal and completely out of the way of the user's workspace. I decided to take the positives from both designs to maximize the user friendliness of the cart relocation.
Paper Prototype:
I designed a paper prototype with rough ideas on the functionality of the redesigned cart. The cart button will at default be on the lower right hand corner of the screen. If the user feels that this is too intrusive on their space, they can drag the button over to the side and hide it into the sidebar. If they need it again they can drag it back out. Furthermore the cart opens an overlay that will display all the contents without navigating to another page, allowing the user to quickly come back to the shopping area.
Low Fidelity Prototype:
For the low fidelity prototype, I designed the rough layout of where I wanted to place the elements. I also decided on the shapes for the containers as well as the paths of how I wanted the cart to animate.
High Fidelity Prototype:
In my High Fidelity Prototype, I designed a mock online shopping application and implemented my E-Cart redesign ideas. I decided to keep the current cart design in the top corner as well in case there are people that are more comfortable with that function. I also didn't think it would take away from my redesign. I finalized how I wanted the animations of the overlay to function and designed how it will blend in with current online shopping applications.
Prototype Demo:
Reflection:
This was a redesign project that I decided to do for fun to practice using Adobe XD, so I did not conduct any needfinding, user research, or user testing. My main focus for this project was to learn how to fully utilize Adobe XD's tools to create a functional prototype of an innovative idea. However, if this was a serious project, I would definitely have user research and testing.
During the process of designing this prototype, I learned how to draw inspiration from other designs and implement them into a situation where it would perform very well. I also learned many functionalities of Adobe XD and how to efficiently use its tools in conjunction with one another to efficiently create prototypes.