Labochema case study

Transcription

1 Labochema case study

2 Usually scientific websites looks outdated, messy and user unfriendly. Most often it associates with a lots of text information, slow page loading and complicated search. Our mission was to challenge these myths. 2

3 About the client Labochema company operates in the Baltic states for more than 15 years and is the biggest company in the region, selling top quality chemical reagents, consumables, laboratory equipment, furniture and implementing individual laboratory installation projects. Most of Labochema clients are university scientists. Company also sells their production to private owned laboratories, always seeking to meet the customer s expectations in case of any issues. Labochema company has accumulated vast experience in co-operation with partners. Labochema represents Sigma Aldrich, Leica, VWR and others. 3

4 Challenges We started from analysing current system. Besides aforesaid drawbacks it also had some some really complex challenges: Complex pricing system; Complex product indexing; Non-standard functionality (quotes, products from contracts, different catalog for customer groups). Why Magento? Firstly, because Magento is highly scalable and flexible open source platform. It can be customized to serve any business model. Magento has wide integration options with custom ERP or supplier s systems as well as rich extension store. Magento has native connectors to catalog management systems Akeneo and Mag-Manager. 4

5 Solutions The main challenge of the project was Searchable product catalog with more than items. For this challenge we used SOLR - standalone enterprise search server. Usually SOLR performs on e-shops from 10 to 100 thousand products, therefore we faced several problems. Firstly, we had to optimize SOLR and adapt to the project scale. Secondly, we implemented a total count function that customer will be able to see how many specific products (search results) there are. 5

6 Due to the content-heavy system we implemented Varnish HTTP accelerator. Varnish stores data in virtual memory and leaves the task of deciding what is stored in memory and what gets paged out to disk to the operating system. This helps avoid the situation where the operating system starts caching data while it is moved to disk by the application. Varnish is used by a great number of online sites, such as Facebook, The New York Times, Wikipedia. Labochema e-shop has 3 stores (Lithuanian, Latvian and Estonian) and every store has different customer groups with specific content (different categories, products and prices). We have expanded Varnish functionality by implementing some Varnish crawler upgrades. Every customer group has a Varnish crawler user - this user checks all available categories so for the real customers the categories and product pages loads quickly. Tools like Varnish and Solr helps to accelerate system s performance and search. However, the system has a lot of dynamic content, which is specific for each user. For this reason, system s speed will be strongly reduced and standard Varnish and Solr functionality is no longer suitable for individual adaptation. Therefore we had to make custom changes according to system s architecture to reach the desired speed. Project manager Aurelijus Jakas 6

7 Extensions Our team integrated several third-party modules to make development process faster. Amasty Customer Group Catalog module is used to hide prices and set access to catalog pages on Labochema s needs. Our team extended this module s functionality by implementing dynamic categories - adjust menu to every customer group terms. Cart2Quote module helps to create, send and manage customer s quotes in Magento. Labochema team can easily organize quotes, manage discounts, assign sales representatives and manage relations through the s and quotes/order statuses. 7

8 Customer groups Labochema sells their production only to business and academic institutions, laboratories and public sector. Every organisation has its own customer group with different prices. Also, some organisations have special prices on existing agreements. We implemented agreement functionality, which helps Labochema managers to create agreements and assign products and customers which receive special prices. When searching for products, user has an opportunity to filter products that fits in particular agreement. 8

9 Specific software and hardware requirements At least 8 GB RAM; Zend, Memcache, PHP OpCache or HHVM ; APC -replaced by opcache/hhvm; NGINX, HHVM; MySQL (with Percona patches) No stored procedures. 9

10 The Content is the Interface The main inspiration for the e-shop design was Swiss design, often referred to as Typographic style. Our design team instead of adding more elements to work with, prefered to remove as much as possible. 10

11 Look and feel The main source of information was Labochema brandbook. The client s request was to use as little as possible colors and shades. Because of this reason, our designers choose typeface as instrument of visual communication. Typeface is able to deliver message in very precise, clear and unobtrusive way. Different font sizes frames the hierarchy of the presented data. The largest font size is dedicated to display top-level elements in the content s information architecture and page s hierarchy. This kind of visual impact helps to guide user s eyes through the page more efficient. 11

12 Search and navigation Search box is the most frequently used function in Labochema e-shop. The main goal was to make search box clearly visible, quickly recognizable and easy to use. Search box fits the website s overall design perfectly and manages to stand out slightly when users need it. Because of extremely high amount of products it is necessary to have search among categories. User can choose the category in the drop-down menu. Also, there is an autocomplete functionality which accelerates shopping. Over the last decade, the magnifying glass has become a conventional icon for search and it communicates search function better than submit button. 12

13 Content One of the biggest challenges was to display content. Different types of results require different layouts. With Labochema e-shop we decided to use detail oriented search view. 13

14 Log in and Register Labochema e-shop is only for registered users. New customer ought to create an account and receive confirmation in order to see prices and buy products. We aimed to provide this page well-structured and balanced. Log in section has greater visual weight as it is the dominant element. The amount of data is not overwhelming since it s clearly separated in manageable chunks. The items are well-organized, the interface elements and the typography provide a clutter-free overview. Buttons Log in and Sign up are the focal points. These elements do not overwhelm each other. Preferably, they create harmony. 14

15 Help Labochema company offers high quality and reliable customer service. This is why in every top of the page we created additional header with contacts, how to order?, help and FAQ information. 15