< Back

PetSaver

CS3240 Interaction Design Project

Preface

PetSaver is a student project from the module CS3240: Interaction Design @ National University of Singapore (NUS). I took this module in AY19/20 Semester 1 under Prof Bimlesh. This page showcases my group's final project through its various iterations and design lifecycle.

Problem Statement

We noticed the following problems amongst youths with regards to personal finances:

1. Financial literacy not formally taught
2. Lack of savings among millenials
3. Lack of discipline to save

Currently, there exists solutions or spending trackers such as Seedly that monitors users' expenses and even categorises their expenses for them.

However, they do not cater to a younger audience who may lack the discipline to use the application on a consistent basis.

Hence, our solution, PetSaver, will help to instill that discipline by gamifying our way of saving money. Inspired by tamogotchi and gamified productivity apps, PetSaver will encourage users to save money in return for raising their very own virtual pet.

User Study

Target Users

• Primary: Young Adults (21 ~ 25 y/o)
• Secondary: Teenagers (13 ~ 20 y/o)

We carried out an online survey as well as user interviews to find out more about the financial literacy problem amongst youths. Details are as follows:

Online survey

• Shared link on various chat groups (Telegram, WhatsApp)
• Collected 108 responses in total

User Interviews

• 3 face-to-face user interviews from targeted user groups
• Users were asked about their finance management
• We briefly introduced PetSaver as a solution as to not affect their mental model and gathered feedback and thoughts regarding the idea.

Key Findings

• Respondents save their unspent money without a set target value
• Many do not keep track of finances
• Need regular reminders to encourage saving
• May not feel secure in letting the application handle savings
• May not have a bank account

Thus, for our application, we seek to have users to have the ability to customise saving goals and how they save, provide an incentive or motivation to be consistent in saving money as well as easing the process of transferring money.

We also realised that not everyone has a bank account or may feel secure in letting an application handle transfers, thus we also need to provide the user the freedom to choose however they want the application to do the 'saving' for them.

Processing Data

Affinity Diagram

We gathered our findings and organized the various ideas in our findings into groups or themes based on their relationship.

User Personas

We distilled our findings and generated 2 user personas based on the common needs of our target user groups. This helped us focus on keeping the user's needs in mind.

User Scenarios

We came up with storyboards for scenarios where the actor, Jia Yi, is able to easily sign up, set a target goal, and interact with her virtual pet cat. She is then forced to save by making a transfer via our application to satisfy her pet cat.

In the second storyboard, a second actor, Brandon, is able to accessorize his virtual pet and compare his saving progress with friends on the leaderboard which encourages him to save more.

Key User Tasks

To summarize, we needed to create a solution where our users are able to:

1. Customise saving goals and methods of saving
2. Given incentives and reminders to encourage saving money
3. Transfer money via the application easily

Prototyping

Process:

• Designed 4 individual prototypes
• Gathered feedback (Formative evaluation)
• Designed 1 combined prototype
• Gathered feedback
• Designed final prototype (Figma)

Individual prototype

For starters, we each created our own individual prototype based on our own representation and mental model of how the eventual application is going to be like. These prototypes, a mixture of low and high fidelity, were then given to 6 users to evaluate.

Afterwards, we did a formative evaluation with the individual prototypes in which our group discussed the pros and cons of each prototype. We then started working on how our combined prototype is going to be like and these are some of the mockups that we did.

Combined Prototype

After the mockups were done, we then did another round of user evaluation with more users.

For our evaluation process, our setting included an evaluator as well as a tester who gives tasks or guidance when necessary. We also made sure that our users are able to vocalise their thoughts if they choose to (Concurrent Think Aloud approach). We also asked questions after each task in order to get responses and finding out what needs to be improved in the prototype.

We also attempted to apply the Nielsen Heuristics to serve as a guide whereby we tried to figure out if our prototypes complied or violated the heuristics. If a certain functionality violated the heuristics, we would try to fix it. We asked the evaluators what are the features they find appealing and and keep them in the combined prototype.

The feedback was then gathered and we came out with a final prototype.

Final Prototype (1st Iteration)

We then had a last round of evaluation to determine what further changes can be made.

Final Prototype (2nd Iteration)

Changes made:

• Added tutorials and tooltips
• Better notification dialogs
• Improved UI for (also made the system clearer)
• More interaction with pet

Check out the Final Prototype!

PetSaver Promo Video

Conclusion

To summarize, doing such a comprehensive user study helps us gain a better understanding of how people go about performing tasks and achieving goals that are important to them. This includes figuring out their pain points and things that they appreciate with regard to saving money.

After the user study is done, we then move on to the prototyping process where we ascertain the users’ needs. From there, we were able to gather even more feedback to fix what was wrong and to keep what was right by identifying gaps in design & usability.