About
Mahima is an emerging womenswear brand. The main features are an affordable price, high quality service and stylish products.
Context
A client came to me with an idea. There was no structure, no product. My main task was to make a website design for all devices that would give users a positive experience, as well as to prioritize the site functionality in terms of development cost and importance. Also important was the desire of the client to test different advertising sources.
The main insights of competitor website analysis:
1. Competitors use a lot of discounts. An excellent move is to give a discount for an action (for example, a subscription to news or downloading an application. In addition to the fact that this affects future purchases, a person feels the individuality of this discount).
2. Market flagships do not use video on product pages. Most likely due to the heavy load on the site, respectively, the long loading of pages.
3. The surveyed respondents considered the site lamoda.ru the most convenient and beautiful, therefore, in many moments it is logical to rely on their decisions.
4. Everyone except ZARA has reviews on each product. (During the following steps, you will find that feedback is very important)
5. All competitors use email collection for newsletters, so they still work.
The main Google Play review analysis insights:
1. Long delivery and getting the wrong size or an uncomfortable product are the biggest fears when shopping for clothes online.
2. Payment only by card online is inconvenient, as you need the opportunity to measure and check the quality, and the refund is long and complicated.
3. Users need different shipping methods.
4. Free shipping is a great value for users.
5. Some people need a photo of the clothes without the model. Among such people there may be stylists (a very valuable audience) who make up sets of different types of clothing.
6. On the product cards in the first photo, you need a general outline of the clothes, not a part of it, so that the user does not have to go to each product.
6. On the product cards in the first photo, you need a general outline of the clothes, not a part of it, so that the user does not have to go to each product.
7. Frequent pain - lack of size in the filter. Especially when the price depends on the size, as the price filter becomes almost useless.
User interviews
I conducted 15 interviews in which I confirmed and refuted hypotheses and immersed myself in the thinking of the people for whom the site is being made. Then I clustered the main insights (which were voiced by more than 10 respondents and may affect the experience of the site) and collected the user persona.
Interviews insights
For a simpler perception of research, I made a persona. It's also a great tool for increasing empathy in the design process.
Persona
Structure and prototypes
I made a large structure with a news portal to test various marketing channels (contextual advertising, SEO, targeting, and others).
Prototypes
Design
For a quality design, I used more than two hundred references for different elements. Created a library of components for the convenience of programmers and described the vertical and horizontal indents on all(5) adaptives.
Style Guide
Filters are moved to the top because their implementation on the left takes up too much space throughout the entire use of the catalog, which complicates visual perception. Combined with pagination, they will never be too high.
Catalog page
All pages have breadcrumbs. I made a large content area that you can just scroll, and not click on the arrows. The block with information and buttons will float on the scroll. Based on previous research, we decided to add reviews.
Product Page
The block with the price and buttons floats on the scroll on the wide screen version. On the mobile version, the checkout button with an anchor link has been moved to the very top so that it is easy for a person to proceed to checkout. Product cards look minimalistic, although on the other hand they contain all the necessary information.
Cart Page
The blog section is paginated for easy use. Since a small number of articles is planned, it was decided to make large article cards and only 4 cards on one page.
Blog
Thank you for your attention 💙
