Cases

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.
2020
Design
Marketing
Branding
Bitrix
Internet store
Integration
Interface design and development of an online shop for the company<span> Amarylis</span>
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

Summary

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.

Development
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.
Prototype of the site pages for the online store Amarilis

Development
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 .
Prototype of the site pages for the online store Amarylis

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.
Mobile versions of the online store Amarylis
Website
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.
Layout for the online store Amarylis

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.
Working baskets for the online store Amarylis

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
Integration for the online store Amarylis
Integration for Amarylis

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

Developed
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.
Chain of letters for Amarilis

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”
3,2%
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
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

Contact us and we will share our experience and help with the implementation!

Write
Order a project
Кейсы
See
similar cases
Web-AR for GaussWeb-AR for Gauss
Web-AR
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
2022
Rack BuilderRack Builder
Marketing
Design
Frontend
more ...
3D modeling
One Page Store
Rack Builder
Developed a cool online calculator for warehouse racks.
2020
Pro-CosmetikPro-Cosmetik
Marketing
Branding
Design
more ...
Bitrix
SMM
Advertising
Printing
Internet store
Integration
Pro-Cosmetik
Internet store for
professional
cosmetics chain.
2018
B.Billionaire / OpiumB.Billionaire / Opium
A photo
Advertising
B.Billionaire / Opium
Photo support for
luxury segment stores.
2019
Stella TechStella Tech
A photo
Stella Tech
Photo accompaniment of our friends
Stella Technic
2020
NoirotNoirot
A photo
Advertising
Noirot
Together with Nuaro LLC, our team did product photography for the catalog and advertising.
2019
Cut&GoCut&Go
Marketing
Branding
Design
Frontend
more ...
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
CronwoodCronwood
Design
Frontend
One Page Store
Quiz
more ...
Cronwood
A brief excursion into the furniture world of Sevastopol
2019
Ostrich HouseOstrich House
Marketing
Design
Bitrix
more ...
A photo
SMM
Business card site
Printing
Online store
Ostrich House
Marketing and service positioning
2018
Panam PizzaPanam Pizza
Design
Layout
Frontend development
more ...
Creating Presentations
Panam Pizza
We developed a set of promotional materials for the franchise of the Panama pizzeria network.


2022
Premium TechnologiesPremium Technologies
Integration
Advertising
one page store
more ...
Promo page
Development
Marketing
Design
Layout
Landing page
Premium Technologies
We developed a promotional website and advertising campaigns to promote retail and small wholesale sales of Schüco products and additional services of Premium Technologies.
2021
ANO DPO RIPKiPMRANO DPO RIPKiPMR
Marketing
Branding
Design
Bitrix
more ...
Advertising
Internet store
End-to-End Analytics
ANO DPO RIPKiPMR
We created an online store of educational programs for medical workers and an advertising campaign at the federal level.
2018
PelmenikiPelmeniki
Marketing
Design
Promo page
A photo
more ...
Printing
Internet store
Pelmeniki
Creative and marketing
accompanying of the Pelmeniki project.
2020
Oscar-Et-ValentineOscar-Et-Valentine
Marketing
Design
Integration
more ...
Bitrix
Oscar-Et-Valentine
It happens that after the launch of the site, its redesign is immediately required. This is exactly what happened to the Oscar Et Valentine website.
2020
Show more