Interface design and development of an online shop for the company Amarylis

In 2019, the company restarted the online store, and, faced with the task of designing the interface and creating design, turned
to us for help.
Internet store
Amarylis has been engaged in wholesale supply of foreign cosmetics to the Russian market for 25 years. The assortment of the company is the cosmetics of the average price segment of the production of 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 customers (AMARYLIS beauty school).
In 2019, the company launched an online store, and faced the task of designing the interface and creating a design, for the solution of which they turned to our team.After we did the interface project and the design, the contractor who was responsible for layout and programming the site lost the project, and our team implemented the project to the end.

The task set by the customer

Develop a modern and beautiful design for an online store


Preparation for work:
2 month
Beginning of work:
January 2020
Delivery of work:
March 2020

What tools we used

Excel for designing a catalog, confluence for documents, jira for setting and tracking tasks, figma for prototypes and drawing.Taxi for meetings with the customer.

The structure of the catalog
Amarylis goods

As part of a preliminary study, we found out that the company plans to use a nomenclature catalog from 1C as a basis for the catalog of an online store.As often happens, the structure of nomenclature reference books was created as new positions arrive.The properties and characteristics in the 1C database were absent.
Our team has developed an assortment matrix in the tabular format: we have significantly simplified the structure of the reference books, created the structure of the properties of commodity positions and their intersections, based on several parameters for the website of the site.

user roles and designing
user paths

We have developed several user roles that we designed in the form of the Customer Journey Map .The assortment of Amarilis is focused on women, the company offers an average price segment for different age groups.We have made a segmentation of the assortment by age and price.They provided for the possibility in the interface to optimize the frequency of purchases, their average check.
For each role, they calculated the number of actions until the goal was achieved, then they made all the necessary ways to the map and made the necessary through elements and screens.

The company decided not to abandon the standard Bitrix algorithm for the basket and place the order, but they provided for the possibility of purchasing inOne-click at each stage.
Prototype of the site pages for the online store Amarylis

Development prototypes

After the preparatory work, we developed prototypes in FIGMA, to visualize and coordinate development 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 of personal accounts with the history of orders.

For the project, they developed 52 prototype .This work took our team 8 days .

Interface solutions

The site has provided no more than 3 levels of investment for the menu.The control elements were placed in two menu: one for goods and a catalog, which contains the most popular sorting, the other for the administrative and information part.
On the right, the main buttons are always in the visibility zone: the basket, the chosen, personal account.

In the mobile versions, the menu of 5 buttons , which is located at the lower boundary of the screen.This allows you to simplify the interface due to the low screen of the screen.

We have deeply worked out the basement of the site: social networks, news subscription, information sections are very convenient.
Interface solutions for the online store Amarylis

Design solutions

They introduced color differentiation of labels on goods cards: discounts, new goods and popular goods - Each type is reflected in its color : this is how it stands out when viewing the list of goods.
The product of the goods is drawn in such a way as to look good in the photo with a margin (without a background).This is an additional load in the preparation of content, which must be provided for by internal regulations.

developed the rules for designing banners for the site: they described security fields, the number of text and the recommended palette.This is convenient for the company's content managers.
Design site web shop Amarylis

Mobile versions

The design was prepared and transferred to the HTML version in three sizes: for desktop computers - 1920PX , tablets - 768PX and mobile phones - in the amount of 320px.
For tablets and mobiles, they separately developed the site menu, provided a simplified layout of goods and catalog cards.

For each version, they developed their own size of design elements (buttons, forms, links, menu items).

onWe spent the development and approval of the design about 1 month.
Flashed and
programmed the website
Traditionally, lay out project layouts using a methodology BEM.
An important detail: for Bitrix (and other systems using Server Side Rendering, for example Mod-X), layout layouts are necessary taking into account their further template.This significantly reduces the time to connect the layout to CMS.

before connecting the layouts to the templates, the speed of complete the page drawing in the 0.9 seconds.

The store is implemented on CMS Bitrix , the reduction of business.

The product catalog is updated on the basis of integration with 1C enterprise.

Study baskets

The basket of the site deserves a separate mention of
in our story.

We have developed the option of simplifying the stages of placing an order in the store and fitting it into one screen.In a single interface, the buyer can change the quantity of goods in the basket, choose a delivery option and address, issue and pay for an on-line order.
During the implementation, they were faced with difficulties: the work of built -in delivery models significantly slowed down the basket.3 modules on average loaded for 6-8 seconds, with a high load up to 20 seconds.The change in the order led to the expectation of the user.

We changed the script so that the delivery of delivery modules occur after the user's work with the stage.Thus, we increased the speed of about 3-4 times, and the waiting time was reduced to 2-4 seconds.

Integration of
Amarylis stores

The online store Amarilis works with 5th delivery services: SDEK, BOXBERRY, Russian Post and pickPoint and grastin .All services are connected to the site in such a way that for each of them in the basket, the user receives an incredited, but accurate delivery price to his address or the order issuing item chosen by him.
In the basket, the GO-Coding system Dadata is connected: it helps the user with prompts when entering the address and normalizes it to send a request to payment systems.The system of the user itself determines the system on the basis of the IP address of the user.It is a pity that it works only in Russia.

To receive payments in currency, we connected a separate acquiring fONY : connected and set up the exchange of commodity residues of the store.For Yandex, they also made an automatic creation of turbo. The pages

Additional modules

Since the store accepts payments online connected the online cash cash office of Evotor.

At the request of the company's marketers, we connected the 1C -Bitrix - Scoder : buy more - pay less.The module allows you to implement more complex marketing offers than in the standard Bitrix configuration: for example, discounts on an increasing outcome, alternating discounts, goods as a gift from the conditions and many other options.
Since the store is integrated with the accounting system, we set up the agent mechanism on the crown of the Bitrix.It allows you to maintain the speed of the site during the update of the catalog.
Additional modules on Amarylis

chain of e-mails

We faced the problem of user reactivation and an increase in the number of live reviews on the site.To solve it, we developed a trigger newsletter.
7 days after payment of the order, the user receives a letter, with the offer to leave a review and receive a personal discount of 10% for the next order.The reviews that users leave are left before publishing a manual check.After the publication, users receive a letter with a notification of the discount provided.It acts within 30 days from the date of publication of the user's review.

Letters for mailing are made in the corporate style of the site, flashed and debugged to work in all browsers.

Landing pages for individual
directions and promo pages

One of them is promo -page we created for the work of marketing managers.The promo page allows you to connect the categories and subcategory of goods from the site catalog.The company's managers collect such a page in a separate section of the site:
Promo page for Amarylis
In addition, we have developed landing pages for wholesale customers of the company.When designing, the page provided two segments of buyers: a segment with a small check (for example, private masters of manicure) is processed automatically.Segment with large checks - we direct to manual processing of managers.
Here we have such a page:
Landing pages for Amarylis
Together with the page, developed for the
sales department offer.
That's how it succeeded:
Commercial offer for Amarylis

Conversion from a visit to the application by source
“Contextual advertising”
    contextual advertising

    Fitting room
    nail polishes

    The main assortment of the company Amarilis - nail goods.To promote the category of solid varnishes, we designed and implemented the fitting room for varnishes.It allows you to choose the finished design of the plate and see how it will look on the arm.
    Select the color of the varnish:
    Wanting varnishes Amarylis

    Some numbers

    We always think, but not all numbers can show.
    But some can be a little!
    12 people
    Design team
    52 layouts
    Designed and put on the design
    12 services
    Integrated and work with cms bitrix
    Order a project

    Do you have a similar task? Contact us and we will share our experience and help with the implementation!

    similar cases
    3D modeling
    Business card site
    Web-AR for Gauss
    Made a small promotional site and a decision with augmented reality on Web-A for the company Varton
    Еще ...
    Hotel Paradiso is located on a mountain slope in South Tyrol and offers its guests winter and summer leisure programs
    Show more