Project Background

G-Able Thailand has a legacy insurance application that provides quotation services to insurance agents throughout Bangkok. To expand on that business, a team was tasked with creating a consumer-facing application; both to collect more data from habits, and to create a direct channel for insurance sales.

I came on board to consult with the business team and direct the UX team. The ecosystem required five separate apps or platforms for various users:

  1. Consumer Drivers
  2. Merchant cashiers
  3. Merchant admins
  4. Insurance Agents
  5. Master admin

I led a 3-person agile UX/UI team in prototyping and designing screens and interactions for all 5 applications. I participated in all sprint planning sessions and worked with development and the business team to define various rules and procedures.

Before development began, I held a design charette for the back-end developers where we ranked user needs, and brainstormed dashboards to match the highest priority.

Art Direction

Color Coding

We had free reign to design a brand from the ground up. I felt that with such a complex set of functions, that color coding the services would help users distinguish driving (blue) from shopping (orange). The Merchant application was then designed with orange as a primary color

Icons and Backdrops

I wanted backdrops that had a firm sense of place. The local staff chose the finalists from a list of Bangkok landmarks. We designed custom illustrations of the Giant Swing, Maha Nakon tower, and the ferris wheel at Asiatique. From there, the team designed custom ‘badges’ and icons intended to add excitement and competition to the application.

UI Design

In the interest of accessibility and efficiency, I asked the team to build off of Google’s Material Design for the UI. This helped remove complex discussions over iterations, as well as provide out-of-the box code to speed up UI development. We added our own spin to it, but the overall effect was a comprehensible, consistent pattern with a local feel.

Consumer Driver Application

 

Consumers who drive under the speed limit are rewarded with points, which they can use to buy rewards from area merchants. A leaderboard shows your driving score compared to other drivers in your city. Users with high scores are given coins, and can manage and gift these coins. 

Merchant Cashier Application

Consumer users can earn and collect points, which can be used to redeem privileges at participating merchants. To facilitate this, we designed and built a mobile app for merchant cashiers to scan  and redeem the vouchers.

Merchant Portal

Managers at the merchant level can log in to a portal where they can view sales and voucher redemptions. They can also make new promotions, go live within the cashier application once approved. Below are  wireframes for the cashier portal. Axure Prototype Link

Insurance Agent Portal

The agent portal had to tie in with an existing insurance policy and sales system. The core system was retained, but we designed and built new features that tied it into the consumer application. Again, I held a design charette, and personally handled the wireframes due to their complexity. Check out the Axure prototype link

Prototype Screenshots

Development

To my knowledge, this project is still under development on all fronts. User data from internal users is being gathered while technological issues are smoothed out. It is being actively marketed and promoted, and will hopefully become a viable new business for G-Able.