Cases

Interface design and design for Amarylis online store

In 2019, the company launched an online store, and, faced with the task of designing the interface and creating a design, contacted us.
2020
Design
Marketing
Branding
Bitrix
Internet store
Integration
Amarylis company has been engaged in wholesale deliveries of foreign cosmetics to the Russian market for 25 years. The company's assortment includes cosmetics of the middle price segment produced in Korea, Great Britain, the USA, Switzerland and even Brazil. The company has a strong sales department and well-built sales support technologies, representative offices in Moscow, St. Petersburg and Kyiv, its own training center for clients - the beauty school Amarylis.In 2019, the company launched an online store, and, faced with the task of designing an interface and creating a design, contacted us.After developing user roles and design, we handed it over to Cetera specialists for layout and programming. Later on, we carried out technical supervision over the layout and programming work - we will tell you how they coped with the tasks.

Task set by the customer

Develop a modern and beautiful design for an online store

Project Summary

Preparing for work:
2 months
Get Started:
January 2020
Delivery of works:
March 2020

What tools did you use

Excel for catalog design, Confluence for documents, Jira for setting and tracking issues, Figma for prototyping and drawing.Taxi for meetings with the customer.
Catalog
Development of catalogue structure of Amarilis products
As part of the preliminary study, we found out that the company plans to use the item catalog from 1СУТ as the basis for the online store catalog. As often happens, the structure of the item directories was created as new items arrived There were no 'properties': and characteristics in the 1C database.
Our team has developed an assortment matrix in a tabular format: we have significantly simplified the structure of directories, created a structure of 'properties': of commodity items and their intersections, based on several parameters for the site's recommender system.
Look here:

Developing prototypes

After the preparatory work, we developed prototypes in Figma to visualize and coordinate developments with customer representatives. The company uses a lot of traditional marketing: the site has a section of its own school with a schedule, a news blog, a system personal accounts with order history.
52 prototypes were developed for the project. This work took our team 8 days.

Design solutions

Introduced color differentiation of labels on product cards: discounts, new products and popular products - each type is reflected in its own color.
The product card is rendered in such a way that it looks good on the photo with background clipping. This is an additional burden when preparing content, which must be provided for by internal regulations.
We developed rules for designing banners for the site: we described security fields, the amount of text and acceptable color solutions.This makes it easier for the company's content managers.
Design
Custom roles
Developing user roles
and designing the user path
We've developed some custom roles and made a Customer Journey Map. The Amarilis range is aimed at women, the company offers a mid-price segment of goods and is targeted at different age groups. We have provided an opportunity in the interface to optimize the frequency of purchases and the average bill.
For each role, we calculated the required number of actions to achieve the goal, then put all the necessary paths on the map and made through elements and screens.
The company decided not to abandon the standard Bitrix algorithm for the shopping cart and checkout, but provided for the possibility one-click purchases at every stage.Let's see if the programmers are up to the task.
Look here:

Mobile versions

The design was prepared and submitted to html in three sizes: desktop - 1920px, tablets - 768px and mobile phones - 320px.
For tablets and mobiles, we developed a menu for the site separately, provided for a simplified layout of product cards and a catalog.
For each of the versions, we developed our own size of design elements - buttons, forms, links, menu items.

Interface solutions

No more than 3 nesting levels for menus were provided on the site. Control elements were placed in two menus: one for products and the catalog, which contains the most popular sorts, the other for the administrative and informational parts.
On the right, always in the visibility zone, there are the main buttons: basket, favorites, personal account.
In the mobile version, we proposed a menu of 5 buttons, which is located at the bottom of the screen. This allows us to simplify the interface due to underused screen space.
The footer of the site /footer/ has been worked in depth: social networks, news subscription, information sections .
Interface

Technical supervision

After they posted the site, we conducted an audit and found 620 layout inconsistencies with layouts. The team was unable to layout the mobile and tablet versions of the site (if there were layouts for each page), failed to connect filters and modals, rolled out the site to production -server without prescribed meta tags.
According to the company itself, they took 1,700,000 rubles to develop the site. They spent 2 months on development.

Result of work

In 4 working weeks, our team designed, prototyped and drew the design of a large online store
5
Person project team
52
The layout was designed and dressed in design
3
We drank a liter of carrot juice at the stage of preparing project documentation
See
similar cases
Marketing
Branding
Design
Bitrix
Еще ...
SMM
Advertising
Printing
Internet store
Integration
Pro-Cosmetik
Internet store for
professional
cosmetics chain.
2018
A photo
Advertising
B.Billionaire / Opium
Photo support for
luxury segment stores.
2019
A photo
Advertising
Noirot
Together with Nuaro LLC, our team did product photography for the catalog and advertising.
2019
Marketing
Branding
Design
Еще ...
Frontend
Advertising
Printing
Landing page
Integration
Cut&Go
We put things in order in the marketing of a beauty salon
in Moscow. Beauty is such a beauty.
2018
Marketing
Design
Frontend
3D modeling
Еще ...
One Page Store
Rack Builder
Developed a cool online calculator for warehouse racks.
2020
Show more