Jotex is one of Swedens largest e-commerce websites for household linen and interior design. The company was founded 1963 and is now a part of the larger Ellos Group organization.
The launch of Jotex's new platform created a lot of new tasks that needed to be finished on a daily basis, which in the end forced the employees to focus less on the marketing campaign. I was hired as a consultant to assist with the creation of these marketing mails while the employees focused on preparing the new website for the platform switch.
We wanted to validate several times during the creation of a campaign, but the process was tedious.
We worked in a way where each marketing mail was created in Photoshop prior to being built in the campaign application itself. It was done this way because the design needed to go through a visual check from colleagues before the green light to start building the mail was given.
Since the mails were often longer and consisted of a lot of products, in several different languages, the copy pasting of product photos and labels took us several hours to complete. Adding to this, photos were not always approved for use in marketing yet which delayed the progress further because we had to redo certain modules. It was not uncommon for the design process of one mail to take a whole work day, after which we would get approval and then move on to building the mail the next day.
We then needed to export all of the pictures, name them following a pattern and then upload each picture to the campaign application. During the building process we needed to copy and paste all product names, prices and links and then finally double check everything to make sure we didn't miss anything.
How we improved the process
The idea is to reach a stage where we can validate the design with colleagues as soon as possible and to do this we need to reduce the amount of bottlenecks along the way. When looking at the process at this stage we identified several obvious things:
- Presentation of products required us to copy the product photos from the site, attach labels to them and finally write the product names underneath the photos.
- This needed to be done in four languages.
- We needed to re-check the stock status of products at least once to make sure the product would be available when the mail was sent out, so that we could switch these products out as early in the process as possible.
- Text and prices needed to be validated multiple times to make sure everything is correct, and reduce human errors.
Photos and labels — By using the product number we can let the system scrape and resize the product photos in correct dimensions, use a list of predefined SVG-labels and attach the relevant ones on to the picture on the fly, simultaneously for all four languages.
Products running out of stock — If a product happen to run out of stock, we would notify the designer and let them enter a different product. On top of this, we do multiple checks at times to warn the designer if this happens. The goal is to aim to switch out these products before we move to stage two and build the mail in the campaign application.
Product names and prices — Product names and prices would always be correct (as long as the site has the correct content) for all languages which greatly reduces the risk of human errors.
All text for all products is added to a spreadsheet-like list where the designer can easily copy and paste the content into the campaign application. The fields are structured in a way that matches the way the application works, to make the task as effective and easy as possible.
Modules wth prices in them — Some modules were not vanilla rows of products with text underneath, and instead were background images (in different sizes) with product names and prices attached on top of them. These needed to be generated and exported the same way as the row of products.
An intuitive way of handling this is to let the designers drag and drop a photo, then in the application scale and move the picture as they wish where after they add a price module on top of it by entering a product number. The name, price, labels and other relevant information would be scraped from the site and attached on top of the photo. This sub-module would also be moveable for the designers, as it is important to position them correctly.
Previewing and building the e-mail
When the prototype or sketch of the mail is completed and the next step is to show colleagues we can preview the mail which mirrors the way a real mail would look (or how it would normally be designed in Photoshop).
Designers can print out the mail and show it to colleagues the normal way, or they could share a link where colleagues can validate the design or suggest changes.
Exporting assets — Generally you would export each product picture individually and name them accordingly, and this was also a long process since we work with multiple languages.
This system allows you to download a zipped archive with all images used in the mail, with correct dimension and naming conventions. Due to great limitations in the campaign application we can't bulk upload the pictures, so this still needs to be done the manual way.
Copy and pasting text — The designers still need to copy the text from somewhere and paste them in the campaign application, so there is not much we can do here more than allowing them to copy and paste the text in a more effective way.
We split the fields up in field structure that mirrors the campaign application modules so that they can perform these repetitive tasks more effectively.
This application was an amazing asset for me during my time at Jotex. It decreased the time from sketch to marketing e-mail form 10 hours down to just 2-3.
Each mail in the campaign application is exportable to an XML-file. During the development of this application I investigated the files for patterns and technically it would be possible for us to generate these files for import which would decrease the time it takes to go through stage 2 as well.