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.
to us for help.
2020
Address:
amarylis.ruthe site
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 tasks did we solve
in working with the company 'Amarylis':
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.
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.
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.
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 .
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.
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.
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.
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.
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.
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.
Website
Flashed and
programmed the website
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.
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.
Look:
amarylis.ru
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.
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.
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
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.
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.
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.
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:
Look:
amarylis.ru
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:
opt.amarylis.ru
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:
Some numbers
We always think, but not all numbers can show.
But some can be a little!
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
See
similar cases
similar cases
Web-AR for Gauss
Made a small promotional site and a decision with augmented reality on Web-A for the company Varton
2022
Noirot
Together with Nuaro LLC, our team did product photography for the catalog and advertising.
2019
Cut&Go
We put things in order in the marketing of a beauty salon
in Moscow. Beauty is such a beauty.
in Moscow. Beauty is such a beauty.
2018
Panam Pizza
We developed a set of promotional materials for the franchise of the Panama pizzeria network.
2022
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 RIPKiPMR
We created an online store of educational programs for medical workers and an advertising campaign at the federal level.
2018
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