Wu Li Hao Project

December 23, 2017 by Aaron Ong

Over the last three months, my team and I have been working with a local food supplier called Wu Li Hao Pte Ltd to migrate the logistics of their business onto a digital platform. This week we went down to their office to deploy our product. Apart from the driver and customer apps that we have released on both the Android and Apple store. We successfully deployed a production server and database for them. Our products are being beta tested by some of their clients right now. This post highlights some of our functional specifications.

Product Screenshots

Problem Statement

Wu Li Hao Pte Ltd is a noodle supplier based in Singapore that distributes noodles to their clients. Their main clients are noodle shop owners who buy their noodles in bulk and frequently makes repeat orders of the same noodles.

They currently take their orders by means of phone calls, and as they have scaled, they have found the administrative overhead associated with picking up calls on a daily basis unproductive to handle. As a single staff has to be on standby to pick calls up at all time. Interrupting their work.

Their main customers are noodle shop owners who generally do not understand how to use web platforms well, so they have requested for a mobile app due to its ease of use. As their customers generally do not own credit cards, they have requested for payments not to be part of the application. But they expressed that their customers often forget to bring cash, so we suggested implementing a tab feature.

They also want a way for their App's users to toggle between English and Mandarin.

Upon advicing them, I figured out that they need 3 different views. One for the customer,one for the admin, and one for the delivery drivers. I will detail the user stories below.

They are also looking for a feature that integrates with their accounting tool. Currently thinking of doing it in two ways. Either calling their accounting tool api (if that is available), or exporting to a csv/xml which the accounting tool then imports.

They want a way to automate the generation of receipts as well.

Branding wise, they are looking for minimal branding, they said their users dont care. But our experience with ui/ux is that good design is not just for looking good. Its making it easier for users to use them. So we are gonna provide them a good ui for their needs.

Currently the timeline for this project is 4 months and the total payout is $xx. They will be paying for the servers that we will help them host. Pass them the credentials, but we will manage it for a maintenance contract if they need it.

We will look only to support up to the last 3 yrs of android and iOS versions

Functional

Feature Set

Customers
  • React Native App
  • English & Mandarin Support
  • Log in - Stay logged in until credentials fail (if admin change)

  • Order History

    • Place new orders
    • Cancel orders - before 12 midnight on the same day of ordering.
    • Change order details - before 12 as well

  • Tab

    • Track unpaid orders
    • Total unpaid amount

  • Storefront

    • View all products available to them, add them to cart.

  • Cart

    • Checkout Cart
    • Edit delivery address (changing postal code autopopulates address)

  • Profile Page

    • Change Address, Contact Number, General Delivery Details
  • View Notifications (set by admin)
Driver
  • React Native App
  • English & Mandarin Support
  • Log In - Stay logged in until credentials fail (if admin change)

  • Delivery List

    • Track all deliveries to be made for the day
    • Click into individual order to

    • Change order status

      • Ordered >> On Route >> Delivered >> Paid
    • View unpaid orders from same customer
    • Re-order delivery in list
    • Long Press to Drag and Drop

  • Inventory List

    • Track how many items collected (split into broad categories)
    • Track how many items delivered

  • Payment List

    • Track total amount to be collected
    • Track total amount collected (Sum of orders in paid status)
    • Track total amount placed on tab (Sum of orders in Delivered status)
Admin
  • Electron Native App
  • English & Mandarin Support

  • User Account Management

    • Create new user account
    • Edit user account (username, pw, address, phone, general delivery details)
    • Delete user account
    • Manage user orders (change status, cancel order, edit order)
    • Manage user storefront
    • Add items (and allowed options)
    • Add price

  • Storefront Management

    • Manage category (noodle, dumpling skin, ...)
    • Manage item (add new noodle, ban mian, photo)
    • Manage item options (add ban mian with thickness, 5mm, 3mm, 2mm)
    • Set generic price (one price per item/item option - kai clarify)

  • Order Management

    • Track all orders - Default only store 1 month old on frontend
    • filter/sort by ANY FIELD
    • edit uncompleted orders

  • Driver Management

    • View how many orders each driver has to make
    • redistribute orders between drivers to even workload

  • Integration with Accounting Tool

    • Export orders that have not been exported into XLSX, require remote testing with accounting tool (auto count)

  • Printing Invoices

    • Populate invoice template based on order data
    • Every night at 12 midnight, auto print invoices that have not been printed

Technical

Tech Stack & Rationale

Communication - GraphQL

The decision to use GraphQL is mainly due to the fact that the app requires multiple query patterns and parameters. Using a traditional API method would result in high coupling between the Front-end and Back-end and our high degree of configurability would require at least 20 API end points.

The additional benefit of using GraphQL is the ability for the Front-end to subscribe to Back-end events. This is especially useful for the Admin Electron Front-end since we do not wish to refresh all the information in the information heavy front-end whenever we navigate between pages.

Database - PostgreSQL

We are only required to deal with structured data so SQL is a clear choice. PostgreSQL is a reliable and open source SQL database that scales very well.

Backend - NodeJS

NodeJS is just a good all-purpose language suited for our needs. It consists of all the tools that we require to integrate with the other moving parts.

We will use Sequelize to connect with PostgreSQL and Express as our backend framework. Since we are using GraphQL, we only need to serve a single route thus a minimalistic and unopinionated framework like express will be sufficient.

Mobile - React Native

React Native was selected to be the mobile presentation layer since we required a cross-platform mobile application. Our Driver and Customer mobile applications do not require any platform specific features so react native is a clear choice.

Mobile - AsyncStorage

AsyncStorage was chosen to be the mobile application local storege. AsyncStorage is a simple key-value store, which will more than suffice for the small number of information we are required to manage on the mobile application end.

Desktop - Electron

We chose Electron to be the Admin dashboard Front-end because we required a desktop application that could connect with our GraphQL backend. We did not consider building the admin dashboard as a web-app because:

  • We did not wish to expose our admin platform on the web (insecure)
  • We needed a fast responsiveness and persistence (speed)
Desktop - NeDB

NeDB is a NoSQL document store. It allows us to store the heavy-queries we receive from GraphQL straight into the local store as a json object. We can update, read, and query the local database quickly using NeDB.

Development Tools

Miscellaneous

Meeting 1 Notes - 30 August 2017

  • noodle suppliers
  • needs a ecommerce platform that integrates with their accounting tool and hopefully their delivery tool as well.
  • looking to expand to households (marketing)
  • average user is rather weak in using software, would prefer a mobile app.
  • Users always order same thing.
  • logo, softwares, invoice
  • Support up to 3 yrs about
  • manage tab
  • invoice upon order
  • Need an invoice

Meeting 2 Notes - 23 August 2017

  • require english and chinese language support on all 3 platforms
  • adviced them to deploy admin app as a native app with calls to server (security, speed)
  • allow order cancellation before 12 midnight
  • figured out the import format for their accounting tool
  • require advanced search features on their order dashboard

Questions for Wu Li Hao

  • Invoice (for generation invoice template)

  • Logo (for design)

  • Products (and customization - noodle thickness)

  • How the product packaging looks (for merging with our design)

  • Onsite analysis of accounting software (for backend integration)

  • Onsite analysis of delivery software (to understand their delivery model)

  • Do drivers have a delivery list? (to understand delivery model)

  • When do you do accounting? By Day? Week? Month? (to understand accounting model)

  • How much in advance must the customer book?

  • Do customers make repeat bookings?

  • Can customers cancel orders?

​

Back to Blog