Wire framing the UI

The inspiration of this UX design, I got i got the idea when the grocery company Loblaw was dealing with criticism of their new self check out system. So what I ended up reverts engineering the functionally of their system and map out what was the problem user were having trouble.

What I discovers that shoppers were introduce to a new system that shopper were not familiar, which spark a lot confusion when they try to interact with the system.

So what changes I ended up making was taking the old layout that most shoppers were familiar with, but re-arranging and eliminating the issue from the original layout had.

Feature added 

-  revise the image to probably label the buttons.

-  adding text to define what the button do.

- adding a being able to "back" button to re-track any missed task.

I choose add a "back" button to give the shopper option to re-track any action they forgot do or not meant to do. Implementing this feature will reduce the stress of the customer shopping experience, and reduce the waiting time for customer service to attend the shopper issues.



The Finish Design

So how this UI was design was placing what are most important information should be display, fellow up certain symbols, text, shapes.

- Placement such as having a list displaying to the customer scan grocery at all times, this way customer can keep track of their purchases.

- Reducing the amount of search time, by organizing the function button into category

- Having text labeling some of the symbols

- Using familiar symbols

- Nice soft shapes to give a more welcoming theme.


Using Format