Jaapi - Details

Overview

‍

After we implemented and shipped the overal design revamp it was now time to focus on the details.

‍

Employee Login

Same principles apply on login screen, which is the first screen employees will be presented to. How can we make it look and feel right for our clients, yet make sure the login screen is technically scalable for all our clients stores?

‍

‍

Cards

Based on my understanding of our audience, it was beneficial to surface more features currently available only in modals on the main page, to maintain the flow of product exploration without interrupting it.

• Hover interactions:
  • Hovering over the bottom part of the product card reveals the colour selector, allowing users to switch between available colours easily (second card in the attachement).
  • Hovering over the top part of the card brings up arrows for navigating between product images (like it is possible now but without the thumbnail to clarify the UI even more) as can be seen in the third card in the attachement and an interactive “quick add” button that shows the size selector (last card in the attachment). Clicking on a size adds the item to the cart in that size and colour.

‍

‍

Product Modal

‍

Icons