AFL Online

A Customer Care and Ordering Portal

MongoDBElasticsearchSQL ServerNode.jsExpress.jsReactReduxSlackAuth0Zendesk

Benefits

  • Frictionless ordering 24/7.
  • Heavily reduced manual order entry and discrepancies.
  • Increased accountability and transparency on orders.

Major Challenges

  • Poor (initial) buy-in.
  • Expanded scope required extensive tech stack.

Lessons Learned

  • Carefully evaluate the source of feature requests. The simplest solution to a complex problem may not require programming.
  • Good team members drastically improve a product!

Scope

AFL had been manually entering about 85 orders a day — with one person — some of these orders had items with similar SKUs, descriptions, and dimensions that were easy to mistake. In addition, almost all customers had separate price lists that could change daily depending on instructions from Marketing.

Our goal was to alleviate the department by allowing customers and account managers to order online easily, and to set up internal processes such that pricelists were always set into the ERP the day before they were needed.

Elasticsearch

Ideally, there would only be one search bar for products, but because the type of items required slightly different UI to order, we split them into 4 categories. Under the hood, though, every customer had a single Elasticsearch index that was rebuilt daily to match the pricelists on the ERP system. I spent weeks understanding how it worked, and I used many of its features so that synonyms, multi-field search, filters, and autocomplete would work synchronously to deliver the best result to the user.

We also used it for searching order history. It's quick!

Other integrations

Within the first few months of operation and trying to get our customers online, we shipped additional features that allowed customers to map their own SKUs to our products, create Zendesk tickets, and allow images to be used as orders using Docparser's OCR.

I decided on our final stack, which would look like this:

In terms of the front end, I was responsible for handling client API calls and ensuring that there were sufficient Redux actions / reducers for dealing with state. React had not released hooks at the time.

My other team member, Kyle, designed / developed the remainder of the client entierly. He (extensively) researched habits and processes of different types of users and highly influenced the requirements of the project. Here are some of his mockups which can also be seen on his page which also contains video of the software.

Thanks Kyle!

At its peak, AFL Online processed up to 60% of daily orders.