-
-
An overview of our design vision for the Habbit app
-
Our dragon, the central mascot of our Habbit app and the icon used for the 'Hatchling level'
-
A dragon acting as our icon for the Dragonette level, the next avatar users can unlock as they log their spending
-
The main logo for our app
-
A continued look at our home screen page
-
3 buttons we designed for the earning, budgeting and spending section
-
Budgeting pop up that gives users budgeting tips
-
Spending and income tab on the app
-
Earning pop up that gives users informational content about good spending habits
-
Spending pop up that gives users tips about money conservation
-
Homescreen for the App page
Inspiration
Originally inspired by the Hobbit, this app was meant to bridge the financial literacy gap that exists for young girls through a mystical and adventurous platform that is both educational and fully interactive. We hope to inspire our users to build the lifelong habit of financial planning!
As a group of women who received no formal education on personal finance, we were also inspired by our own experience and hoped to develop an app that bridged this disconnect for female youth, making financial literacy accessible and commonplace.
What it does
Habbit acts as both an educational app and a personalized income tracker that teaches young girls about saving and spending. Users stay involved through tracking their daily expenses and earnings while also learning about money basics, budgeting and trivia. Using their newfound financial awareness, young girls are empowered to thoughtfully exercise their financial independence and make wiser and better-informed spending choices.
How we built it
Our team used Figma for front end development, creating a detailed prototype of our app that showcased its UI and UX elements. We then built the app in Visual Studio, translating our original Figma design to code and successfully achieving working functionality.
All of the graphics for the app were hand-drawn in Photoshop, including the logo, icons, dragon avatar and background assets. Our team drew inspiration from the illustrations in The Hobbit novel, a childhood favourite, to create an engaging and child-friendly design.
Challenges we ran into
No members of the group had experience with Visual Studio or React Native, and so we were challenged to code with a language and platform that we were completely unfamiliar with! This encouraged our team to step beyond our comfort zone and learn and adapt to the new software in a time-efficient manner. Whether it be through Youtube videos or digital manuals, we were challenged to take initiative and independently educate ourselves on the operation of this high-level platform.
In terms of our design, we had trouble transferring our outline on Figma into Visual Studio as our limited knowledge of the software prevented us from implementing complex graphics within the app. This caused us to adopt a pragmatic mindset, realistically adjusting our plan based on our digital capabilities while also not losing track of the app’s main focus.
Accomplishments that we are proud of
Two of our proudest accomplishments include; our hand-drawn avatar and icons as well as our successful use of Visual Studio despite not knowing React Native!
What we learned
Creating Habbit was a challenging yet highly enriching and rewarding experience that forced us to stretch our limits and experiment with new apps like Figma and VisualStudio within a time-sensitive project-based environment. Through this process we learned how to translate desired features of our app into code, rapidly increasing our understanding of Visual Studio and React Native. Furthermore, in terms of design, this was also our first-time using Figma. Once again, we learned how to work on a new platform through creating animations and graphics for our final product.
What's next for Habbit
- Implement the option to have a parental supervisor on the youth’s account. Create a parental view of the app. Add features such as a parent PIN to confirm the user’s tasks/chores are actually completed.
- Add short-term and long-term item goals which the user can set aside savings for along with a progress tracker for these goals.
- Create a points system for completing educational lessons and reaching financial goals
- Avatar upgrades that correspond to points level (Hatchling, Dragonette, Dracarys, Smaug)
- Track spending categories in order to help users effectively target areas where they can make better financial choices.
- Program the tasks so that the user can choose to personalize the amount of money they receive from each chore.
Log in or sign up for Devpost to join the conversation.