Background

In June 2019, I decided to build a microsite that focuses on 1 product as part of an experiment for an online campaign. The main objective was to explore the potential of a microsite for a Multi-Level Marketing company known as Naturally Plus Singapore. This company was 10 years old and it only sells its product from its physical store. I initiated this project because I think it's time to expand into eCommerce.

However, my expertise was in end-to-end video production and I did not have any web building experience. As a result, the microsite was built with Wix ADI and no coding was involved. I managed to concentrate fully on web layout design and 3D animations for the main product. I have tested almost all Wix built-in apps, elements, and functions to understand how things work without using Wix Corvid.

At the beginning of 2020, I tested all third party form apps listed in Wix App because I wanted to handle and process online transactions. I decided to use 123Formbuilder to allow our existing customers to buy our products online by filling up a form. The idea was simple: get the user to fill up the form and make a payment online. However, the biggest challenge I faced was the nature of the business. With the MLM business model, the online form is unusually complicated. 123Formbuilder was the best choice because it can handle complex conditional rules. As a result, each form has 80 rules and they had to be renewed monthly. Coincidentally, due to COVID 19 outbreak, there was a nationwide lockdown since 7 April 2020. Thankfully, the forms went live just before the lockdown and we could still process and fulfill online orders.

During the nationwide lockdown, I realized that the forms weren't good enough, because:

  • There was no "cart" to handle combined orders
  • There was no centralized staff dashboard to process online orders. As a result, only 1 staff was being assigned to process the online orders to avoid processing the same order more than once.
  • There was no way for the user to track order status and past order details
  • If the payment was failed, there was no way for the user to attempt paying again. Instead, the user had to fill up the lengthy form repeatedly for every attempt.

That was when I decided to turn on Dev Mode to use Wix Corvid so that I can build an online store from scratch.

The Challenges

1. No web building coding experience

The main challenge was not knowing how to code with Wix Corvid. I watched many online tutorials and read its documentation. I spent around 3 weeks to learn how to code in Javascript and I think Javascript concurrency was a tough concept to understand (but that's the awesome part of Javascript).

2. No prior experience with any external API

I started to realize the need of using an external API when Wix Corvid wasn't "enough" for me, especially for the payment process. I could have conveniently used Wix Pay API but the company's requirement is to have 3D Secure capability and I need to access transactional data for further processing. Thus, I studied Stripe API documentation and received technical guidance from the Corvid Forum community, StackOverflow, and Stripe customer support. Later on, I also relied on more external APIs to make things work.

3. Complicated Form

As mentioned, due to the nature of the business the online selling processing was not straightforward at all. I'm not going to explain what is required but the following logic flow diagram will illustrate how complicated the forms can be: enter image description here

4. Cross Department Requirements

I wanted to create not just an online store where transactions can happen, but I also wanted to create a staff dashboard so that all departments can start using the dashboard simultaneously to fulfill their roles virtually. To do so, I spent a lot of time communicating with different departments to understand their requirements. The goal here is to figure out a way to build tools that are useful for staff.

5. Frontend vs Backend

Again, I didn't know the differences due to the lack of web building experience. I managed to distinguish them when I started to integrate Stripe API. That was when I started to use Corvid NodeJS Backend and HTTP Functions.

6. Debugging Tools

The project was huge and there must be a more efficient way to detect and debug all issues. For this challenge, I used Google Cloud's Cloud Logging dashboard to monitor and resolve any issues detected by it.

Sub Projects

I'm using the phrase "sub-projects" because this project was really huge and the entire online store was built by myself in 4 months.

Master Form

The core of the Online Store is its all-in-one form feature, where all types of forms are merged into one Master Form. In terms of code, this is the biggest part of the project because it was built inside a Multi-State box, with about 5000 lines of codes. The

Key Features

  • Product availability is controlled from Staff Dashboard
  • User-friendly interface for MLM requirements. For example auto free gift availability update (see below) enter image description here
  • This company offers different free gift selections based on the choice of product, plans, and other conditions. By using Wix Corvid, I was able to set all rules the requirements and only free gifts that are applicable can be selected by the user.
  • Autofill is used to load user data automatically to speed up the lengthy form filling process. This was made possible by using the Wix Data Collection. ## Staff Dashboard To allow all staff from various department to fulfill their roles and duty virtually, I've built these tools in the staff dashboard: ### 1. Online Orders Initially, I built this page by using Wix Dataset but it took too long to load, so I rebuilt it by using only WixData and it turned out to be much faster in terms of loading speed. enter image description here #### Duplicated Processing Prevention System This page contains all orders that we've received online. By using this page, multiple staff can process different orders at the same time without worrying double processing an order, because I've built a system to detect if more than one staff member is viewing at the same order. #### Custom Filters With this function, staff can quickly filter out the online orders and they can also use the search function to find a specific order. #### Order Status Update By updating the order status here, the status will also be reflected on the user's order history page too. ### 2. Transaction Page This page contains all transaction data, including completed, failed and expired Stripe Checkout Session. This is mainly used by the accounting department. Likewise, the filter functions allow the accountant to quick search for specific transactions. enter image description here ### 3. Summary Page This page gives the overview of our online business performance by showing various trends. It is useful for analytical purposes. I can't share a screenshot because it's filled with confidential data. ### 4. Collection Rules Control I'm also giving staff the ability to control how delivery and self pick-up slots to be presented to the user. Basically, before checking out, the user will only be able to see a certain number of slots for delivery and self-pickup. What the user can choose is based on the rules set from this page. This is a handy feature to prevent the user from choosing dates where delivery or self pickups are unavailable. In general, it avoids public holidays, weekends, and any additional excluded days. In addition, this function is also useful to block out more days when all services are unavailable due to external factors such as natural disasters or stricter nationwide lockdown. enter image description here ### 5. Product Status Control With this page, staff can also update product availability. For example, if one of the products is out of stock, then the user will not be able to select it from the Master Form. enter image description here ### 6. Promo Rules Control The company always have monthly promotions with various sets of rules and condition. I've created a rule-based interface so that the marketing manager can conveniently create and schedule upcoming promotions. All these rules, conditions and deals will be reflected in the Master Form. enter image description here ### 7. Changelog I've also built a changelog system to track all changes made by staff in the Staff Dashboard so that all progress and errors can be tracked.

User Page

This subproject aims to show the user's related data.

1. Profile Page

Users can save unlimited number of delivery addresses here so that there is no need to fill up lengthy addresses in the Master Form.

2. Transaction Page

This page not only shows the user's past transactions, but it also allows the user to attempt payment again if the payment was failed earlier on.

3. Cart Page

With the cart function, users can now pay for multiple orders as a single transaction. Furthermore, the user can also easily duplicate cart items to create new order that is very similar to existing ones. Sometimes the user only need to duplicate and change one input field.

Stripe Integration

The integration was possible through the use of:

  • Corvid Database Collections to store transactional data
  • Stripe NPM package to use Stripe API
  • Secret Manager to store and access Stripe API Secret Keys securely
  • Corvid NodeJS backend to create Checkout Sessions

- HTTP Functions to receive webhook data from Stripe.

Payment Confirmation

This part of the project aims to "confirm" that payment has been received and updates Wix Data Collection accordingly by using Stripe Webhook. In addition, with this process, if the payment was failed, the user can attempt the same payment again without filling up the forms repeatedly because the user can now re-use the Stripe Checkout Session URL within 24 hours. enter image description here

Product Page

As mentioned, initially this website only focused on 1 product. Now I've continued to build pages for all product so that I can use them as Landing Pages for Product Campaigns, where the call-to-action of these Landing Pages is the button that directs the user to Master Form. I used Blender to model all products in 3D and I've also used fluid and cloth simulation to create relevant scenes in 3D. enter image description here

Testing

Unfortunately, due to security and sensitive data, I cannot allow the Judges to access the Staff Dashboard but everything else is fully functional. Please note that membership approval is done manually and I will send the demo login details to the Judges privately.

Built With

Share this project:

Updates