UX Problem: Maì.com – Wireframes & Mock-ups

Solution A – Creating Info Dots

Sold out new.pngTo help the customer to know if a product will be available again, I decided to change the way to present the article status.

To begin, the SOLD OUT dot will be located on the top right corner to not hide the picture.
The image will not have a white filter because there will already be enough contrast between the background and the dot.

After that, it will exist 4 different dots for 4 different conditions:
full states.png

Each dot has already a different colour but I decided to add the status itself, written out in full, to be compatible with colourblindness issues:
coulourblindness.png
I made a complete test with the app Color Oracle for Mac.
For the Tritanopia, there is just a small difference which is difficult to discern.

For the Grayscale, we can see a difference of luminosity between the colours when they are placed side by side but it is difficult to recognize them in real conditions.

Thus, it is important to add the status inside the dots.

Wireframe

wireframe blank.png

Mock-up

page-wireframe.png

more from this collection.png

Solution B – Sending Emails

There is no way to receive notifications or emails about restocks on Maì.com.
So, I decided to add a form on every product page to give our email to stay informed about our favorite articles.

Here is the original page:Capture d_écran 2018-12-10 à 01.11.16

So I decided to move the description part to leave the space for the form.

Wireframe

wireframe email.png

Mock-up

send email

Capture d’écran 2018-12-10 à 01.31.22.png

Users just need to type their email address and to accept the conditions before being informed about a product.

 

Solution E – In Stock Products Page

It simply highlights products that are in stock.

Wireframe

wireframe in stock.png

Mock-up

in-stock-mockup.pngThe “In Stock” section from the “sort by” list helps to quickly find the products available from every category.mockup sort by.png

Solution F – Web Push Notifications

Mock-up

web push.png

The web push notification really initiates to return on the website.
Users directly receive the message when the restock is put online. Thus, they have more chance to find their favourite articles in time.

Solution H – “Next Restock” Section

Wireframe

wireframe next restock.png

Mock-up

next-restock.png

Clickable banner that is linked to the already created “Next Restock” page.bande

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

Create your website at WordPress.com
Get started
%d bloggers like this: