Decoupled Magento B2C Ecommerce Website Helps European F&B Giant In Direct Consumer Relationship

Introduction

The client, a Europe based Food & Beverages giant, wanted to build a direct to consumer business for the first time. They wanted to speak directly and interact directly with their consumers. The project was conceptualised as an omnichannel experience in which the consumers could buy their amazing bespoke and hand crafted products and have them delivered to their homes. The consumer was being given the option to experiment with the flavours and personalise the confectionery as per their taste. They had around 1,500 combinations of ingredients and product types to create their own personalised product.The consumer also had the option of personalising the packaging and adding messages to the cover in case they wanted to gift the product. This was to be made available to the consumers from branded boutique confectionery stores, from an online portal and also from Kiosks placed in premium confectionery partner stores. The client had onboarded one of the world’s largest marketing and advertising firms to solve the primary problem of the lack of a direct to consumer touchpoints.

Objective

Setting up direct to consumer touchpoints was a challenge as they did not have the means to look at primary data on consumer behaviour. They were also trying to address customer shopping behaviour change due to the arrival of large online retailers. Spiralling marketing spend on various platforms was also a growing concern for the client.

The marketing consultants wanted to build a platform which could offer

  1. Fluid interface with an app like experience
  2. Unified customer profile management
  3. Frictionless onboarding of customers
  4. Online shopping
  5. Ability to update / revamp the user interface without reworking the e-commerce part
  6. A closed network of kiosks in an offline mode
  7. Detailed reporting capabilities
  8. Multi channel order notification including SMS
  9. Tracking of parcels on multiple service providers
  10. Validation of deliverability based on postcode
  11. DIsplay of Instagram feed on home page

The system should offer the ability to

  1. End-User
    a) Create a custom product based on type, ingredients and size
    b) Customise packaging and messages
  2. Administrator
    • Order moderation workflow
    • Order verification workflow
    • Generate job cards for kitchen staff
    • Ability to input ingredient and nutrition info
    • Print ready PDF

Solution

Zyxware was chosen for the project primarily because of our expertise in building e-commerce portals and experience of having delivered projects in a timely manner for our enterprise clients. Our history of working in tandem with branding and advertisement companies to engineer their vision also played to our advantage.

A tech stack of headless Magento to handle the eCommerce part and an Angular JS based front end UI was chosen for the project. The backend build is based on a KOT (Kitchen Order Tickets) workflow. It basically deals with transferring an order from the table to the kitchen. We have created a custom extension in Magento for implementing the same. It has been built with a drag and drop interface so that the kitchen and consumer can use it easily with a touch screen device.

SAP’s Customer Identity and Access Management software (Formerly Gigya) was chosen as the tool to build silo-less customer profiles which can provide customers with a seamless and personalized experience across all digital channels.

We have used ‘Worldpay’  as the payment gateway solution because of its state of art payment solutions. Worldpay offers quick checkout, easy order management and highly detailed and flexible reporting which made it a very easy choice. It did not have a Magento extension available at the moment and we have created a custom extension built for that.

Another service integration done was for Route Genie - a leader in carrier management service. They provide complete control and visibility over the management of carriers, optimising the processing of collections and labelling through to track and trace all the way to the final destination. Route Genie is integrated with the leading carriers and provides real-time consignment tracking of parcels from retailer to the consumer. Route Genie also did not have a Magento 2 extension which was custom built by us.
We’ve also integrated a solution to check the serviceability of the location to which the products are being shipped.

The client also wanted to promote its Instagram channel which was being used by them to communicate directly with their consumers. An integration was provided to showcase the instagram feed on the home page.
The project had multiple stakeholders for design, SEO compliance etc. So it is a complex project management environment.

Results

The website was launched to much fanfare and media publicity in the UK as a pilot in Q3 2019. Encouraged by the runaway success of the project, the client has replicated the same model in 5 more countries. The platform is now also being reused for another brand of the same client.


RELATED CASE STUDIES

/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 07th August 2020 / by webmaster
3ieimpact.org International Initiative for Impact Evaluation(3ie) focuses on creating positive impacts on real lives through research and evidence based development programs. Zyxware Technologies partnered with 3ie to sharpen their digital identity and make information easily available. Empathy 3ie creates programs to fund high quality evidence making research for various developmental programs.Under each of the programs, different knowledge products are created. All these products study the area identified in a certain research methodology. The outcomes of these products are in the form of publications or as a web page content and is available as a public good on the website. The collection of all these published products form the 3ie knowledge database. 3ie maintains databases for impact evaluations, systematic reviews and replication studies. A database of experts in the field of impact evaluation is maintained too. The strategy for 3ie was evolved based on the requirements captured during the discovery process done in collaboration with the 3ie team. Definition of 3ie Objectives and Goals 3ie wanted to rebuild their site to enhance brand identity and create high quality user experience. For this an elegant design with easy to access content layout and smooth navigation was planned so that the different stakeholders could quickly access their relevant content. Objectives of 3ie website A user centric home page which intuitively conveys the brand and identity of the organisation. Project 3ie’s focus on grant making and make the research community aware of latest grants. Visibly project the expertise and capabilities of 3ie by showcasing the work done & their success stories in a comprehensive way and in an easy to access manner Create an advanced searchable knowledge repository showcasing various product databases and resources to provide the necessary information to the decision makers. Provide information about 3ie’s members and showcase the activities it does in collaboration with its members. Create webpage templates so non-technical site admins can add, edit, approve and publish contents, that are necessary for the organisation. Implement a content management system (CMS) that is easily accessible by both humans and machines (search engines, screen readers etc). Stakeholders Based on the discussions about the website aspirations, the different stakeholder groups were identified along with their needs (while visiting the website) and the organisations’ content offering to these diverse groups.Below are the primary stakeholders identified. Decision Maker Group- Users of the website (and its contents), who use it to form decisions in terms of funding, management, membership, policy making or research. Researcher Group- Users who visits the site or follow it, in order to pursue grant opportunities for research in their chosen areas. Institutional Group- Institutions and agencies that wish to engage the expertise( professional services) of 3ie in order to design and manage evaluation programs for a fee. The website restructuring was done considering the needs and aspirations of these user groups and designs were developed based on this. The Website Blueprint Considering the nature of the business, the new corporate website is proposed to be built using Drupal 8, a Free and Open Source Software. It will be user-friendly. The easily customisable web page templates will allow users to get a preview of related and relevant resources. The new website would have an appealing design with responsive layout and improved and refined content management capabilities. Drupal 8 incorporates powerful features of a Content Management System (CMS) as well as extended digital marketing capabilities. Thus, the proposed 3ie website will have capabilities of a content management system as well as a global digital platform in keeping with its offerings. Visual Design To enhance 3ie’s brand identity and create high quality user experience, an elegant design with easy to access content layout and smooth navigation is used so that the different stakeholders can quickly access their relevant content. To achieve the key objectives of 3ie in building a website, we identified the primary navigation items. Based on the objectives of 3ie a list of sub-items which are similar in their nature of origin are grouped accordingly. All these are presented in the all too important Home page. Below are the navigation items. Who we are | What we do | Knowledge center | Get funding | Get involved The block labels, menu item labels and content are finalised after deliberations with the concerned teams. Home page: Home page, the primary landing page for anyone visiting the website is designed to communicate the objectives of 3ie using the home page elements. Also it showcases branding elements, sectoral work, professional services, latest events, new grant calls. It is also designed to display key elements which highlights the happenings in the form of announcements, blogs,members area, and performance matrices. Primary landing pages: This will be created for the corresponding publication product and will be linked in this program page. From the navigation point of view, this section will be accessible by type of work and by sectors. The landing page will also display the performance matrices, so that the users get a clear picture of work done by 3ie in a glance. A prominent display for the professional services 3ie offers will also be there. Implementation High Level Features   High Level Architecture The high level architecture include the following: Responsive UI Design and Theming The information architecture prepared was used to build the designs for the website. The design of the site is based on the Bootstrap platform, which is responsive and is adaptable to desktop, tablet as well as mobile platforms. Content Management System The latest Drupal version is used for the development of the new 3ie website. Drupal 8 provides better data-driven web, mobile and social experiences. Drupal 8 architecture supports mobile-first initiatives, enabling responsive experiences across screens and supports mobile applications. The out-of-the-box features of Drupal 8 transforms the 3ie website into a digital marketing platform. Content architecture is designed in such a way that it will help site visitors get a clear understanding of 3ie’s objectives and activities. Content Migration A study of the current content was carried out and based on this, a content migration plan was prepared. As the old website had more than 12,000 contents and was in Django framework, the content migration proved to be an interesting challenge. The plan was to move the existing website (http://www.3ieimpact.org ) from Django to an open source CMS platforms like Drupal, Wordpress or others. Drupal was chosen for its content rich capabilities. For smooth migration of the content from Django to Drupal, we created script to create CSV for the existing contents in the website and then CSV Migration was executed to migrate the content to Drupal website.For the migration the following modules were used: Migrate Migrate Plus Migrate Source CSV Migrate Tools Using these, we successfully migrated the full content from Django to Drupal. Google Translation We used Drupal 8’s default entity translation which allows adding contents in different languages. Full Site Search Apache solr search is used for search feature. For this, we installed Apache Solr and Tika on the server. Facets were created for the different categories. Different search pages were configured to show the number of results and option to filter the results. Search is enabled for the contents as well as for the documents uploaded.Drupal’s user registration and login is used. Besides which, admin can also create users. Moderation is set to approve the user registration. A checkbox for subscribing funding alerts and newsletter is added to the registration form. Subscribed users under each category are listed in an admin accessible page. Integration of Third Party Applications and Services RSS feeds displays the latest blogs in the new website. MailChimp and SurveyMonkey are integrated for email and survey purposes respectively. Outcome We are in the process of soft launching the 3ie website and it is scheduled to go live by the end of July, 2018. Topic Case Study Drupal 8 Drupal MIgration
/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 07th August 2020 / by webmaster
IICtechnologies.com A solutions and services provider for the acquisition, management, integration, and dissemination of geospatial data contacted us. They provide consultancy, training and specialist services to local, state and national governments in defense, aeronautics, maritime, water resources, utilities, and transportation sector. They specialize in developing and delivering geospatial solutions across all environments namely air, land or marine changing the way geospatial data is collected, processed and analyzed. Problem Geospatial data is information about a physical object that can be represented by numerical values in a geographic coordinate system. Active in the continents of North America, Asia Pacific, and Europe, the content of the site varies based on the region. The client wanted to revamp their website to make it responsive and also to build their brand awareness through the website.The website was already built in Drupal 8 using paragraphs for the content structuring. Content translation is used as the solution to show different content based on the region. However, the issue comes when they need to add differently structured content in the translated page. Approach As the site is already built, changing it to a multi-domain was not a good solution for them as the cost would have been more. So we decided to go for a solution with the least disruption that could solve the issue. Solution The Entity reference revisions (paragraph) which are referred directly to a content type will not show 'add new paragraph' item list in the translation edit page.But the Entity reference revisions field (paragraph) referred inside a paragraph type will show the 'add paragraph' option in the translation edit page. So instead of directly giving the paragraph types to a content type, it was added as nested one inside another paragraph type. Added new paragraph. In the new paragraph added ‘Add the paragraph types’ which are used to structure contentin the content type. Added the new paragraph type to the entity reference field in the content type. The page and the translation page has an entirely different structure from the paragraphs. Result A responsive multi-domain website with over 3000 articles. The solution was implemented in just one day and the content manager has now the option to structure the translated page irrespective of the original page. Topic Drupal 8 Case Study Translations IIC Technologies Internationalization