PayGro Save

Designing a Savings App

Pen + Paper

Sketch

Adobe CC

Invision

Omnigraffle

My Role

Duration 2.5 Weeks

UI / UX DESIGNER

iPhone Presentation

OVERVIEW

"Paygro" is a finance app created to help you save money quickly and intuitively using fun and friendly designs. 


We have exclusively designed this app to assist in reaching your large savings goals quickly and easily, using badges and achievements to add encouragement.

Be it a wedding, an overseas adventure or a brand new car, we are here, right at your fingertips.

user_flow.png
design.png

Jay

∙ Like the skip login option and the intro slider screens

∙ Icons in the tab bar are looking good

∙ Notifications screen looks great. Should the close be at the top?
∙ Transition between September and October could be instant.

 

Fixes Applied

∙ Changed transition effects

∙ Add close functionality to the top of the app where the notification icon is.

mockup_02.png
mockup_01.png

CONTEXT

"Paygro" has been created to encourage users to save by the use of “Gamification”. It is designed to be rewarding and keep large savings goals fun and friendly.

 

"Paygro" is here to help you save for that large purchase. The users are not new to technology but struggle with saving in the past, so it has to be accessible and clear. 

OBJECTIVE

The objective of the "Paygro" app was to use bright colours, illustrations and "gamification" to create a savings app. It needed to be clear and easy to use but make a usually, fairly dry task a little more interesting to users who are familiar with the app technologies but have struggled to save in the past.

USER FLOWS

I needed to make the app flow as simple and easy to use as possible to meet the above objectives. I decided to choose four user flow statements and combine them into one final flow diagram.

DESIGN

I chose to look at competitor apps such as the RBC banking and savings app for the general UI Elements but I had to look into other more graphic apps in order to produce some interesting diagrams and illustrations that were sure to keep the user engaged.

illustrations.png

In order to get a really good idea of the app design and to make sure the user flows were working correctly I created some low fidelity designs. I turned these into a prototype so users could test the app and let me know of any major issues or likes/ dislikes with the design and layout.

LOW FIDELITY

low_fidelity.png

MID FIDELITY

After gathering feedback I adjusted my app and created mid fidelity pages so I was able to test the layout and design again with a little more thought. Users responded very well to the app with only a few adjustments including extra pages and the new placement of the menu for easy access with one hand.

mid_fidelity.png

FEEDBACK & IMPROVEMENTS

Eric M

∙ Really like the Dashboard page.

∙ Being able to customize and add categories is really useful

∙ Overall the app is very functional, it’s a big project, a lot is considered here.

∙ How will I set goals? Holiday, education, car etc. Can you have more than 1 goal?

∙ Having a forum for financial strategies would be useful

∙ Add some support to savers

 

Fixes Applied

∙ Added a ‘goal type’ section to specify what sort of goal it is the user is saving for. In this case I chose travel.
∙ Added a FAQs and Contact Representative section to provide more support and information the users.

Gábor R

∙ Love the icon designs

∙ Nice and creative idea for app name, logo and colours

∙ Like the design for goal indicator, would suggest a percentage bar and predicted date calculation.

 

Fixes Applied

∙ Added percentage calculation as well as a bar to show current progress

Tiffany P

∙ Should be “forgot password?” instead of “forgotten password”

∙ Really like the charts and graphs on the main screen. Nice to be able to view at a glance

∙ Menu screen was neatly laid out and pretty clear what each button was for

∙ The tabs on the bottom are super helpful (and the icons are cute!)

∙ The app is looking a bit crowded. Lots of good information on each page but maybe try to add a little more white space

∙ Notifications page was excellent. I like how the current messages are bolder than the older ones

∙ I like the clear all function. I find notifications can be annoying to me

 

Fixes Applied

∙ Edited the layout and spacing on the dashboard to add more breathing room.

∙ Adjusted all other pages to add more white space as well.

Kelle

∙ Easily found Notifications section.

∙ Like design, it appears bright. I want to see all those trees go green!
∙ Icons are clear
∙ App is easy to navigate
∙ Overview graph doesn’t seem necessary on the dashboard

∙ Bar graph would be nice in colours.

 

Fixes Applied

∙ Removed overview as it is sort of covered in the tree section now with the percentage bar.

∙ Added colour to the bar graph

FINAL DESIGN

© 2019 by Adaliv Design.