5/29/2019 - #ecommerce #magento
by: Benjamin Samson

It has been few months since the Uniwax.com Website is online. This project has kept us busy for a little over a year. It is a good subject to present you, with a complete and detailed case study about the creation of an African e-commerce site on Magento 2, from the beginning to the final production.

 

   

The beginning of the project:

At the end of 2017, UNIWAX contacted us to study its project to sell customizable online advertising loincloths. You can imagine the little lights that lit up in our heads. We were immediately won over by all aspects of this project:

  • Uniwax, a company based in Abidjan, on Ivory Coast, is part of the Dutch Vlisco group. It is an important company on Ivory Coast, developing traditional quality products while pursuing an exemplary social policy.
  • The patterns of the loincloths are drawn on site by talented artists. They are colourful, creative, original. We have become unconditional fans :)
  • The goals of the project are multiple and relatively complex. A real technical and creative challenge for us.

As soon as the commercial agreement was signed, we drafted the technical specifications of the project. As I said, there are many objectives. Here are the main points:

  • Take over of the existing website which offered a gallery of traditional loincloth collections, editorial content and a blog.
  • The ergonomic priority of the site is mobile-friendly, representing more than 80% of Internet users' habits.
  • Create a catalogue of customizable loincloths, that is to say, allowing the user to modify the general aspect of the campaign, to embed visuals or logos and to enter texts.
  • Manage an order workflow that allows UNIWAX to perform ethical control over the placed orders. It is obviously a question of not allowing any kind of personalization: no sex, no drugs, no discrimination.
  • Generate a custom printable pattern.
  • Control the digital printing of the campaigns for approuved orders.
  • Synchronize orders with the ERP for accounting data.
  • Manage local constraints: Payments are mainly made via mobile packages (the use of the credit card is not very widespread on Ivory Coast) and deliveries must be entirely managed by the UNIWAX distribution network.
  • Maintain a strong capacity of scalability, this first e-commerce site for UNIWAX being the beginning of a long digital adventure.

From the beginning of the project, each of the topics listed above was detailed with maximum precision. But of course, as it is impossible, even dangerous, to predict everything. The technical specifications have evolved throughout the production process, accepting changes and modifications linked to the various constraints encountered.

In parallel, an ergonomic study was carried out using Storyboards and prototypes (available on MarvelApp) to allow us to analyze how to use the interfaces to create customized campaigns on a smartphone.

Storyboard mobile UNIWAX

Once the prototype was confirmed, we started the graphic design, exploring two paths: one very sober and not very colorful, the other maintaining the brand's graphic universe.

The graphic models and all the variations were then produced (with Sketch) throughout the project, following the evolution of the technical specifications book, itself following the evolution of the developments and encountered  constraints.

Production :

The production of the project was carried out simultaneously by the entire team on all aspects of the project: advice, design, UX and ergonomics, frontend, backend and project follow-up.

Interface for customizing campaigns

As the real heart of the project, the publisher of personalized campaigns had to respect the following constraints:

  • Easy to use on a smartphone.
  • Offering the ability to customize the loincloth in a minimum of handling (3 to 5 steps).
  • A playful aspect of personalization to make you want to test and play with it.

We have therefore chosen to limit the possibilities of customization in order not to transform the publisher into a real gas factory. The available actions are few, but allow to obtain a unique, personal loincloth:

  • Choice of pattern
  • Choice of colours
  • Inlaying medallions that can accommodate a photo or logo
  • Inlaying texts with a limited choice of typographies.
  • Full control of the images inserted in the medallion.

Design mobile UNIWAX

Design of the loincloths

Initially the loincloths were designed by the brand's artists with Adobe Photoshop using graphic palettes. We had to force the artists to change their production methods in order to provide us with vector motifs, created in Adobe Illustrator. This allowed us to obtain patterns that did not exceed the MegaOctet, while the originals were between 20 and 50 times heavier. Beyond the weight problem, it was absolutely mandatory to have vector patterns to allow color editing and generate a print-ready file.

Optimisation of plots in illustrator

Figure 1: Optimization of plots on Illustrator

 

In addition, to optimize the weight of the vector files (which could contain several thousand points), it was necessary to work on the basis of symbol patterns. Thus, the basic pattern is defined once and then repeated on a grid of 8 to 16 elements, depending on the size of the basic symbol.

Patterns in Illustrator 

Figure 2: Example of a pattern 

Results :

  • An internal team trained to use Illustrator
  • The realization of video tutorials
  • Lightweight SVG files that are easy for developers to handle

 

Generation of printable custom patterns

As mentioned above, the loincloth were generated in vectorial format (SVG format). The vector format offers many advantages, including the size of the final file and the ability of scripts to manipulate data. However, processing the display of a vector file on a smartphone requires a lot of computing resources. To limit these CPU calculations that would have made the display too slow and jerky (not to mention battery misuse), we transform the SVG pattern into multi-layer PNG patterns.

 

Layers on Illustrator

Figure 3: Example of how to use color layers

 

The use of PNG layers allows the user to view the pattern quickly and easily.

The inlaying of photos and/or texts is done through the use of SVG medallions, ready for use, also provided by UNIWAX illustrators.

We have defined a layer structure on Illustrator that allows scripts to know the location of the visual, the available space dedicated to it, the location of the text as well as the curve that the text must follow in case the medallion proposes a curved text.

 

médaillons in Illustrator

Figure 4: Structure of a medallion in Illustrator

 

When the user customizes a loincloth, all changes made are saved so that they can be modified once the product is added to the cart. It is only when the order is placed that the customization is applied to the SVG file to generate the PDF for printing.

It should also be specified that the recording of personalization data allows the user to retrieve his personalization when he change the product, disconnects and returns to the website a few days later. Practical to allow him to choose his design ;)

Many tests had to be carried out, and for that we created a temporary interface allowing:

  • to test and verify that the SVG files provided by the UNIWAX team are correctly produced and comply with the  imposed constraints.
  • test and verify color changes
  • to test and verify the generation of PDFs.

The production managed by Magento and Streamlive by Caldera

Once the order has been confirmed by UNIWAX moderators, the order data is sent to Streamlive from CALDERA, which takes care of production on the digital printer.

Result :

  • Implementation of an interface allowing ethical control and production monitoring on Magento
  • Development and use of a connector linking Magento and Streamlive.

Methods of payment

Three payment methods have been defined:

  • by Credit Card, which although not widely used in Ivory Coast, remains a necessary possibility.
  • via Orange Money, which is the payment method via the Orange mobile package, only available in Africa
  • via MTN (in french) , which is the payment method provided by the mobile operator MTN

We have developed the two payment connectors Orange Money and MTN.

These two connectors will soon be available on our Store ;)

 

Logistics

Another new and exciting subject!
The means of delivery on Ivory Coast are not as developed as in Europe. The challenge was therefore to rely on Uniwax's existing distribution network, which could be extended in the future to a network of partners.

Therefore, we had to imagine the global system allowing to track the different service providers who handle the parcels from the warehouse to the delivery by hand.

The circuit is as follows: Warehouse -> Deliverer -> Distributor -> Customer.

We have developed a PWA (Progressive Web App) for Magento allowing a mobile device to retrieve orders that are processed depending on the delivery agent or the distribution point

The device has a barcode scanner that can change the status of an order when scanning the package. The scan is an operation performed upon receipt of the package and delivery to the customer..

PWA MAGENTO for UNIWAX

Another constraint: the terminal must be able to operate with or without a network. Thus, all input and output operations are recorded locally on the terminal and then synchronized as soon as the terminal recovers a connection.

Results :

  • Design and ergonomics of the logistics tracking tool
  • Development of the PWA for parcel tracking management
  • Installation of terminals
  • Terminal deliveries
  • Life size tests

 

Catalogue of traditional products

One of the purposes of the project was also to take over the existing one, which included a presentation of the traditional motifs of the loincloths made and sold by UNIWAX.

We have chosen to anticipate the future possibility of selling these products online. It is therefore through Magento products that the collections are presented. For the moment, the online ordering functions are blocked.

 

Editorial content

Take over the existing Content with our Advanced Content Manager Extension for Magento 2 to create the blog and media library (among others).

 

Shop Location:

Advanced Content Manager is used to generate the store locator, but also used as collection points for packages.

 

The Production

Tests, refining: The production launch of such a large site is a delicate phase that requires a great deal of testing. About 3 months were required for this project receipt period. For the production launch, Anthony and Thomas went to Abidjan for 10 days to make the final adjustments, especially with regard to workflow and order tracking.

Accommodation : In order to ensure an optimal service, we have chosen to host the site on the technical infrastructure offered by Google Cloud. This allows us to have several virtual servers dedicated to certain tasks (Cache, Front, Backoffice, PDF Generator, Database). These servers are scaled and activated according to the traffic on the website.

 

Conclusion

Very positive result, despite the many pitfalls we were able to overcome without compromising on the quality of the result, both ergonomic, functional and in terms of performance.

While it is not always easy to stay focused on technical specifications, and to be understood about the details of certain functions, throughout the project we have managed to maintain a high technical level, a clean and irreproachable code.

The phase of creating and optimizing patterns in SVG format took a relatively long time to implement. Once everything was clearly defined, we passed on our experience to the UNIWAX team, which was able to produce a large quantity of customizable patterns with brilliance.

Another difficulty encountered was communication with third-party partners (means of payment), who did not show much availability and, above all, provided only a very brief and outdated technical documentation.

There are many positive points:

First of all, we are proud to have faced such a technical challenge. We remained motivated and driving throughout the project.

Then there are the personal meetings with the UNIWAX team, which is very involved about the project.

And of course the trips, we were able to make to Abidjan, as well as the welcome we gave to the UNIWAX teams to help them discover our delicious choucroute.

 

 

Write your comment

Ready
for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

Contact
+339 50 66 21 38


Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg
France
SEE MAP
FR - EN