Client wants to have a way to quickly extract these choices in a JSON or string that represents all the user choices, whilst the customer is still online making choices.
Ken can automate these changes to occur live on the site(target is ~10 seconds) using custom InDesign coding and MasterPlan e.g.
One other‘nice to have’ request was whether they could have a colour wheel rather than a limited selection e.g. for hair, skin, cape colours etc
The Approach
Set-Up
Using Webflow CMS and custom code, pre-populate each of the style choices for each custom category currently:
Cover Color
Cape
Skin
Mask
Eyes
Hair Color
Hair Styles
Costume
Teddy Color
Teddy Mask
Teddy Costume
Allow client to adapt these choices themselves by amending the Webflow CMS.
User choosing(form A)
Offer an attractive way for an end user to select the custom options and enter characters’ name(I can imagine some nice animations being used).
As with the POC, the users sees their choices immediately applied to a single character image by overlaying chosen PNGs
Submission of form A
On click of a button, their choices have been made
The choices are transmitted to a record in Airtable(or recorded in Webflow CMS)
A unique webflow‘product page’ is generated(from a template) for each user generated character(slug is generated random ten digit number)
User is moved to their own product page
The choices are applied to a proof of the book artwork and returned to the product webpage in a MasterPlan embed(using the unique code). See more notes on MastePlan embeds +MasterPlan embed notes (shared)
The user can come back to the product page later free of charge
Product page and purchase form(form B)
The user can decide to purchase from the product page
A method of payment and adding delivery details added to the product page
Purchase info is transmitted to a row in Airtable
*Further automation to email the customer both before and after purchase can be done but is not quoted here*
Fulfilment(KJ handling this part!)
Print Ready PDFs arrive at a shared Dropbox named with the unique code
Fulfilment Ready status are transmitted to a row in Airtable
The task
The Approach
Set-Up
User choosing (form A)
Submission of form A
Product page and purchase form (form B)
Fulfilment (KJ handling this part!)