E-commerce Mónaco

Case Study

BACKGROUND

Monaco is a departmental brand with 10 physical stores in Spain, which aims to become a benchmark. Currently, it wants to optimize its product cards to offer its customers the best online shopping experience.
Design Thinking methodology, because it is to generate innovative ideas, and focuses its effectiveness on understanding and providing solutions to the real needs of users.

Time: four days.

RESEARCH

I investigated e-commerce product sheets by looking at and analyzing: their content and functionalities, strengths and weaknesses, strategy, design, usability, accessibility and innovation. I investigated possible solutions to present and manage this information through a visual interface.

CONCLUSIONS
A data sheet is the key piece of our website, this is where the user decides whether or not to buy the product, increasing or decreasing our conversion. Important factors:
Effectiveness: Being able to access every corner without any problem.
Efficiency: We will reduce to the maximum the number of steps.
Satisfaction: A factor where the user will have a positive attitude towards the ecommerce, for example one of the key points to take into account is the loading speed.

EMPATHIZE with users

Online surveys, a quantitative method that will give us a collection of user data where we can extract insights. Results:

71% — The price with the expenses included.
58% — Being able to see several images of the product.
54% — Security when buying.
51% — Other people’s reviews of the product.
41% — To see the different options of the product.
32% — Small description.
29% — Longer description.
19% — Product video.

INSIGHTS
Would like to see the estimated delivery time / View the payment methods / It is very important the security both at the time of payment and money back / Knowing that the product is of quality / The speed of delivery / The comments of other buyers / That you can return / Tracking the item.

USER PERSONAS and PROTO JOURNEY

DEFINE

I would like to be like

POSITIVE

Hunterboots Accessibility, usability, feedback and menu
OnePlus simplicity.
Lacoste for its simplicity.
Nike for its design and simple interface.
Santaeulalia minimalist design.
MVMT design and qualification.

NEGATIVE

ekseption bad structure.
Deporvillage cognitive load.
Samsung too much information at first glance.
Nordstrom page poorly structured.
Amazon in the use of colors and too many suggestions.
Modaoperandi low contrast in typographic color.

How we differ:

It is simple, intuitive, functional and innovative, with good accessibility and usability. With coherent and easy to interpret content for all users, using the user’s language.

Gives confidence and security

It must have :
Main image / Gallery with product images from different angles / Zoom / Product name (keywords to increase visibility in search engines) / Total price (including VAT) / Product options / Help / Description / Technical specifications / Stock / Estimated delivery time / Payment methods / Reviews / Opinions / Delivery and return / Product code / RRSS / CTR / Buy button / Breadcrums / Shopping cart / Wish list button / Feedback / Language / User / Effective search engine / Chatbot / Product suggestion module with IA.

INFORMATION ARCHITECTURE

It depicts two flowcharts that start from the product page to make the purchase. One performs the simple purchase, and the second displays more information.

Prototype

The first visual impact before scrolling, is the picture, followed by the buy button (CTA), and then the reading order would be; the price, the product name, product options, ratings, etc… Everything is studied to have a reading order. The chatbot also has a visual impact, but it is less than the product and the CTA, due to its location and size. But it is visible enough in case the user needs help.

The typography has high qualities of legibility with a design that transmits quality, seriousness and confidence, with adequate size to meet the minimum accessibility standards.
It is a design that reflects the quality of the product and creates confidence.
Icons do not create confusion, and for less digital and inexperienced users, when hovering, the action to be performed is written.
A clean design will also have an effect on the loading speed of our page.

How do I get it?
Because it is a clean and consistent design without any cognitive load, hence its ease of understanding at first glance.
The photographs are of quality and have a neutral background to emphasize the product.
For the arrangement of the elements. As I mentioned before, the reading order in Europe is from left to right and from top to bottom.
By the use of neutral colors to give priority to the product since it is the protagonist, the desired object.
Using different weights in typography and contrasts with color. For example in the case of the CTR, used the strongest black to give it a greater contrast and weight, as a result gives us the second place of visual impact.
Using different sizes for the elements and typography.
For the main menu I use capital letters to give it more visibility. The legibility of capital letters in the reading of a single word is good, except when it is used in a paragraph or sentence, which is when it loses that quality.

Testing

After testing, I have found that the impacts of the users are as expected to make the purchase of the product. In the future with the feedback functionality, users will tell us possible errors, so we can iterate.
It is also essential to make a Responsive design.