PetSaver CS3240 Interaction Design

Project Details

what's it about?

Idea & Problem Statement

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

  • Financial literacy not formally taught
  • Lack of savings among millennials
  • Lack of discipline to save

There are existing solutions such as Seedly and Bank Apps that help to monitor their users’ expenses. It also categorizes these expenses accordingly.

However these do not cater to a younger audience who lack the discipline to use the application consistently.

Our Solution, called PetSaver, is a mobile application that makes saving fun for young adults and teenagers in a tamogotchi-inspired gamified package.

Targeted User Groups:

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

Our overall process can be seen below:

Process for the project

User Study and Findings

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 through (WhatsApp and Telegram)
  • We collected 108 responses over the course of a few weeks.

User Interviews

  • 3 face-to-face user interviews from our targeted user groups
  • Objective: find out how they currently manage their finances
  • We gave them a brief description of PetSaver so as to not affect their mental model and gathered feedback and thoughts about the idea

We gathered our findings and organised the various ideas into groups or themes based on their relationship via affinity mapping.

Affinity map elicit themes related to cashflow, reasons against PetSaver, competition, bad habits, saving practices, app expectations and pull factors and more.

Insight

  • 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

Actionable steps:

  • PetSaver allows customising of saving goals and methods of saving
  • PetSaver gives incentives as well as regular reminders to consistently save money
  • PetSaver has a simple process to save money

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.

Initial Prototypes

We all set out to make our own individual prototypes based on our own ideas on what the PetSaver app should be. This resulted in a mix of low and high fidelity prototypes with emphasis on different features.

We had a total of 6 users using each iteration of PetSaver. They tested the product using the concurrent think aloud approach, allowing us to gather their thoughts while doing a certain task.

Arthur's Prototype

Built using Adobe XD, had an emphasis on simple and intuitive design.
Feedback
  • lacked onboarding/tutorial features
  • needs more emphasis on the pet

Darren's prototype

Built with Balsamiq with an emphasis on the set up process and pet interaction.
Feedback
  • interface is too wordy
  • leaderboard shows the exact amount of money other people save instead of points

Meiyen's Prototype

Paper prototype with an emphasis on the Pet interaction and customisation.
Feedback
  • saving money and goal setting process is unclear

Amabel's Prototype

Paper prototype that has emphasis on goal setting and achievements.
Feedback
  • Paper prototype that has emphasis on goal setting and achievements.

Combined Prototype

After the evaluation and feedback from the user testing, we discussed on the design by coming up with the colour scheme and multiple mock ups, we worked on these pages using Figma.

Key screens for version 1

Had screens for all the interactions with the pet, including patting, buying food and dressing the pet. When food is bought, it is actually a transferral of money from the user’s expenses account to savings account. There are statistics for users to track their savings, leaderboard for the users to compete with friends and achievements to further incentivise users.

Feedback
  • Still lacking a tutorial on initial use
  • missing some key interactions for users when they don’t have enough coins to purchase items
  • some of the UI elements are inconsistent, such as the Friends List as compared to the rest of the app

Key screens for version 1

  • Friends list follows similar design conventions and is more readable than before
  • has a tutorial when the user first uses the app
  • Has an alert for when the user does not have enough coins to buy the item
  • Has a help section for the user to refer to when needed.

Closing thoughts

The project was my first true taste going through the entire design thinking process. On the research side, I wasn't fully sure at the time whether we were doing enough research and whether we were doing it correctly. Looking back, I realise now that our user study was flawed as instead of discovering the problem space, we had preconceived notions in mind that we were trying to reaffirm instead. This big mistake was something I kept in mind in future UX projects.

Overall, it was a good learning experience and major thanks to my teammates Darren, Amabel and Meiyen for working on this together. An infographic version on behance of this case study can be seen here.

We also made a promotional video for the module, feel free to watch it below:

Contents