Company Background

ZIMBLE


Zimble is a digital pocket money app that encourages financial literacy at a younger age. Its educational platform comes with a prepaid pocket money card that enables children and youth to take steps toward supervised transactions.

1. PROJECT OVERVIEW

I entered the project half way into the pipeline. Development had already started referencing a base design however the business owners felt it was lacking a theme and didn't represent the vision they had. I was engaged to help revamp the whole look and feel and consult on solutions to better the overall experience.

THE UIUX BRIEF

The way I would describe Zimble is that it is a "Money Parenting App". The whole app needs to center around financial literacy and serve the function of parenting through the creation of tasks where the incentive was monetary or non-monetary. First I addressed the target audience which I strongly felt should be positioned towards parents. I feel the market is already saturated with tons of digital payment solutions especially prevalent in the gaming space. Companies like Razoror or Garena both have digital payment solutions. So the objective was to come into the market positioned as a Parenting app in order to differentiate itself from its competitors.

DESIGN CHALLENGES

A product for parenting

  • Recreate the app elements to embody a mixture of task tracking and gaming . It should be fun and engaging and light hearted.

    • No product owner

  • Because of constraints in management and budget. This project needed me to operate as a UIUX lead and a product manager role. I had to translate the ideas to an outsource development team in India and at the same time help the business owners come to a decision for the brand and UIUX positioning of the product

    • Documentation

  • Because of service agreements I was not able to take a look at git repositories and this made it challenging to manage version control, I was often second guessing if refinements were made at the developers end
  • Because of the vendors company structure, I was appointed a representative to speak to on the daily tasks however this often made it unclear if the representative understood the changes that needed to be made. To solve this I created micro gif prototypes examples that they could reference for implementation of the behaviour functionalities.

    • Agile project workflow

  • A lot of back and forth finalising of requirements. This meant I had to amend design documents which caused a lot of delays. This could have been avoided if developers were placed on hold while the schematics were finalised before continuing but because of the nature of the service agreement and timelines this could not be avoided.

    • My role

    Lead UIUX designer

    Project timeline

    3 months ( excluding development time )

    2. My Design Process

    1. OVERFLOW

    Collecting requirements

    Had many discussions with the product owner to create the foundation information architecture of the project.

    2. OVERFLOW

    Creating User journeys

    After understanding the business flow I began creating personas of the child dashboard and the parent dashboard.

    3. SKETCH

    Look and feel

    We started doing concept screens of how the menus and ui would look with the UX focusing around a parenting app and the child on budgeting.

    4. FLINTO

    Prototyping core functionality

    Drawing wireframes was not enough to communicate the ideas I had with the product owner. I started employing low fidelity prototypes to simulate solutions for the complex UX problems

    5. ZEPLIN

    Documentation references

    With the gifs created in Flinto we then put them in an overflow document with flows and sitemaps for reference.

    6. SKETCH

    Final refinements

    After documentation during alpha pre launch the business owners still wanted some final touch ups to the design minor small tweaks in the UI.

    3. UNDERSTANDING THE PROBLEM


    Initial look and feel doesn't immediately come across as a financial app

  • Changed the UI design to incorporate financial banking colours. Revamp the brand identity.

    • Parents monitoring child's progression
  • We use profile images on the dashboard that would have a small overview of their progress and balance

    • Child app needs to have bigger incentives
  • progress meter for saving goals

    • Parent needs to approve tasks that are finished in an enjoyable way
  • Stories (reference to Instagram stories)instead of it just being represented in a message I decided stories would be more memorable and interactive, incorporating images and video

    • Business needs
  • Aside from subscription the main monihtazation model was top-ups. So I made that intuitive, you can navigate from dashboard balance or rewards menu.

    • Persona type:
    Parent

    Persona type:
    Child

    Parents Userflow

    Updated the navigation in the main menu for the child. Some of core screens could not be accessed from the main dashboard. Added manage goals segment, chat and saving plans.

    Childs Userflow

    Updated the navigation in the main menu for the Parent. Some of core screens could not be accessed from the main dashboard. Split the business goals into separate screens : Top-ups, Onboarding and stories .

    4. INFORMATION ARCHITECTURE

    Here I brainstorm the connection focusing on 4 main categories: Balance/Allowance/Wallets, Admin Account/Top-up/Personal Details, Tasks and Social/Chat/stories.

    5. INITIAL IDEAS

    After I established the objectives and personas, I started punching out the different ideas exploring what we could do to make this experience really fun and fresh.
    Below is some of my thought process from prototype gifs to ideas about navigation and what information takes precedence over others.

    Design Mood-board

  • The corporate colours felt really off. To me it didn't come across as a financial app. So I created I went to the web to find some inspiration.

    • UI concept revamp core screens

  • Revamp the look and feel completely once I found a good colour scheme. I first remade the important screens.

    • Basic wireframe ideas

  • I rework the placement of UI elements on the screens

    • Improved Main Dashboard Navigation

  • The UX felt broken to me important, navigation links to core pages were missing and the sizes were off. Important information were small and vice versa.

    • Instagram stories

  • Added stories concept to the app. For parents they could track their kids activities during the day through stories.
  • They could add tasks and navigate there through the + icon at the top right

    • (click thumbnails to see more)

    Behaviour functionality concepts for the app


  • Creating Tasks

  • Transaction Histories

  • Parenting Navigation

  • Managing Allowance with sliders

  • Reviewing Tasks and chat

  • Stories activities

    • 6. Production wireframes

    Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).

    7. Design Systems

    Here I provide reference documentation to developers required to build the app. Information ranging from type treatment, colour schemes to reused components. These are all online on Zeplin labelled with the url reference links ontop of the overflow sitemaps.

    8. Final Thoughts

    Overall the project was very rewarding. I felt I did a very job cleaning up the message and theme of the app. The finished design is engaging and fun. The navigation experience is very intuitive and hopefully the whole experience translates into a very useful app in the efforts of helping parents teach their kids financial literacy through parenting.

    Key takeaways

    We managed to make all the deadlines but I can't help but feel the project would have been delivered earlier if the UIUX was addressed first before the development started. Ideally in a in-house team I prefer Agile development however taking over a project Agile development proved a very ineffecient process resulting in many delays due to second guessing of requirments. Often times developers would neglect or fail to communicate road blocks which were later discovered to be a miscommunication of some unique feature that was deemed "over-kill" and not needed. All-in-all I am very happy with the design decisions I made and the final UIUX treatment on the product.