Piggy Bank is a website that helps users achieve their saving goals more effectively.
Challenge
Design a responsive website that offers an easy money-saving tracking process and an option to share this process with friends.
My role
UX Designer leading the Piggy Bank website design.
Solution
Piggybank is a user-friendly responsive website with clear navigation that allows users a fast goal-setting process.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
research
I conducted user interviews, which I then turned into empathy maps to understand the target user and their needs better. I discovered that many users are looking not for budget trackers but for simply processing to save money for a specific goal. However, many financial websites are confusing to navigate and have an overwhelming design. This caused a normally enjoyable experience to become challenging for them.
USER RESEARCH: PAIN POINTS
1
Experience
Online financial websites don’t offer an easy money-saving tracking process
2
Sharing
Users need an option to share their money-saving process with friends or family members
3
Budget-friendly
Users look for a website that allows them to use major functions at no cost
USER PERSONA
"I have a simple goal. I checked many websites, they are so overwhelming, and don't help me at all"
Problem statement: James is a busy college student who needs a simple money-saving tracking app and website, because they want to save for a friend's birthday gift.
James is a college student who is involved in many different activities except studying. As a busy student, he wants a responsive website, that helps him to set a financial goal and easily track it during the money-saving process.
USER JOURNEY MAP
I created a user journey map of James’ experience using the site to help identify possible pain points and improvement opportunities.
ideation
Next, I ideated and sketched out paper wireframes for each screen in my app, keeping the user pain points about experience and sharing in mind. My fur friend helped me a lot :)
design, test, iterate
SITEMAP
My goal here was to make strategic information architecture decisions that would improve overall website navigation.
I chose the combined sitemap structure: sequential + hierarchical.
I created a low-fidelity prototype, connecting all of the screens involved in the primary user flow of setting the saving flow.
USABILITY STUDY
Then, I conducted the unmoderated usability study with 5 participants, each of whom spent 20-30 minutes. I asked each participant to complete the same six tasks, going through the primary user flow of the app. The usability study highlighted some major problems, and I was glad I conducted it before creating a high-fidelity prototype.
1
Homescreen
Users cannot find the personal account.
2
Not able to put money into the piggy bank
The option to put money in the Piggy Bank is missing.
3
Goal-setting screen
The slider to choose a duration is hard to understand.
ITERATE
According to my research study, it was found that a majority of users are unable to locate the personal account button. I moved the button to the right corner to make it easier to find.
before usability study
after usability study
After conducting a research study, I found that the slider was unclear for most users. I made changes to enhance its visual appeal.
before usability study
after usability study
final solution
The Piggy Bank is a responsive website and I have designed screens for three various sizes: for a cellphone, for a tablet, and a desktop. Below are only three screens as examples, that are part of the primary user flow: the Sign-up/ Login page, the Goal-setting page, and the Summary page.
IPhone 14-15 Pro Max
IPad Pro 11"
Desktop
piggy bank sticker sheet
The use of vivid colors in Piggy Bank's design aims to express to users how motivating and empowering the goal-setting and money-saving process can be. The warm and inviting feel of the screens further encourages user engagement.
Piggy Bank has color combinations with a contrast ratio of 3.19 for larger text and a contrast ratio of 4.94: 1 for buttons according to WCAG (Web Content Accessibility Guidelines).
