Hasnel Indonesia

Hasnel is building a world-class e-commerce company that creates opportunities especially for local supplier to participate in online marketplace. The dream is to increase the economy in every province of Indonesia.

Founded in mid-2019 with offices in West Jakarta, Hasnel Indonesia is actively looking for supliers to expand their business nationally.

Task

• Develop an e-commerce app on android
• Logo Design: minimalistic, brandable, and represent Hasnel as Indonesia's e-commerce platform
• Develop a website for seller panel as subdomain of Hasnel.com

Requested Features for Mobile App:

• Cart and Checkout
• User Auth via e-mail and social media
• Payment Gateway
• Shipping cost calculation, Google map + JNE integration
• Integration with Paypal, Xendit and Local Banks
• User rating + comments
• CRM and analytics

Requested Features for the website:

• Landing Page
• Seller Panel as sub-domain
• User Auth via e-mail and social media
• CMS, pricing, file upload
• Inventory management
• Analytics
• Customer support
• custom e-mails & e-mail forwarders

Reference: amazon.com

Challenge

• Development from scratch is a two-edges sword. On the one side, we have a complete freedom to customize the app. On the other side, we need to check for every details that we might miss, compared to using a template. For security and aesthetic reasons, we always prefer to develop from scratch, even though it's harder.
• Similar to most of e-commerce apps, Hasnel app has many scripts from both internal and external sources.
• We don't have much control over external scripts such as payment gateway, shipping, facebook pixel and google API.
• Multi-Vendor e-commerce platform requires CMS that accessible publicly with access token from OAuth.

Solution

Functions

• We chose react native for this project because it's lightweight and customizable.
• Since it has many external javascripts, we had to async, defer, lazy load and split the scripts using modules to proper page so it takes less HTTP request per page for the end users. More about code-splitting trick at supercharged codesplit by developers.google.com.
• OAuth is similar to other apps; we register the app on facebook developer, twitter developer, google developers and we created authorization by e-mail and password. The tricky part is the access token to write/read the database.
• We created 6 classes of users: super-admin, admin, seller, buyer, anonymous (default), and blacklist. Each of them has different access restriction to the database. Super-admin is the class for developer that could access the codes; admin has access to read and write data of every storage bucket; seller has access to write and read his/her own storagebucket; buyer has access to write their/read their bio and and cart; and read their purchase history; anonymous can only read public data; blacklist have no access to read nor write data for security reason against attacker or spammer.
• We created our custom CMS for back-end without third party platform and host it at seller.hasnel.com. The admin could add/remove categories (and icons) from CMS. Auth access tokens were stored in lambda cloud function which is only accessible by super-admin.

Design

• The selling value of Hasnel is the option for the fast and free shipping as well as cash on delivery for payment method accross all province of Indonesia. So, for the logo the main theme is the Indonesian's Flag which are red and white, plus the icon of deliverer, "horse". We avoid sharp contrast in color, and paint it more cartoonish to show more user-friendliness.
• We chose sidebar for filtering data by categories. The reason is scalibility; multi vendor marketplace inevitably will add more categories in the near future as the community grows.
• We minimalized user effort to buy a product, we expect total clicks from homepage to product page and finally the checkout page would be 6.25 clicks in avarage.

Result

Hasnel Logo

Hasnel App

Download from Google Play Store

Landing Page: hasnel.com

Overall

• Service: Mobile App Development
• Category: E-Commerce, Marketplace, Multi-Vendor
• Difficulty: Fairly Hard
• Stack: React Native
• Integration: JNE, Paypal, Xendit, GA, GTM, Facebook, Local Banks
• Development process: 6 months
• HR required: 3 Back-End Developers, 1 Front-End Developer, 1 UI/UX Designer

Hasnel still has plenty of rooms for improvement and optimization, but secure & scalable infrastructure is a good start. Further improvement could be done via CMS panel even without adding more codes. We wish Hasnel all the best.