At ATB’s first Open Finance Hackathon, the 99Bits team designed and developed an app that visualizes personal spending data and encourages consumers to purchase from companies with high ESG (Environmental, Social and Governance) scores through monthly contests. After pitching our prototype at the hackathon, the project was awarded the Wow Factor prize for its distinct visual design and gamified business model. My role on the team was to design the initial mockups and develop the front end of our prototype iOS app using UIKit and SpriteKit.
Money Tree at the ATB Open Finance Hackathon
While my masters thesis has been my core focus area since the ATB hackathon, the 99Bits team has continued to work tirelessly on the app as the project continues to live on at www.yourarbor.com. Arbor empowers everyday citizens to create a more positive impact on our world by helping to align their spending habits with their virtues. By connecting Arbor to your bank account each transaction you make is given a score from 0 to 100 called the Arbor Index, ranking just how ethical and responsible the providing company is. As you continue to use Arbor, you develop your own Arbor Impact Score which highlights the kind of impact you are making on the world. Your Arbor Impact Score is displayed through the visualization of a tree. The tree sprouts leaves in a colour range from red to green, symbolizing the different Arbor Index scores from low to high. The team refined the concept and won 1st place in the Financial category of the 2020 Microsoft Discover AI Challenge.
Early Mockups
To kick off the ATB hackathon, I created some early mockups of the initial MoneyTree concept, focusing on the tree visualization as the centrepiece of the app.
Each leaf of the tree represents a a particular business the account owner spent their money at. Businesses with higher ESG scores have greener leaves, while companies with lower scores have leaves that are more red. Meanwhile, the area of each leaf encodes the amount spent at the business. As viewers scrub their finger along the tree, more business information is revealed and, if the viewer releases their finger on a leaf, a new detail page displays the company’s ESG score breakdown, recent business news, and historical ESG score trends.
Early Sketches
