Save4Dream

The idea is to build a mobile app that encourages people to effortlessly save money to achieve a specific goal.

Our Role

We were tasked with the design of the iOS mobile application.

Challenges

With the app falling under the finance category, most of the main components of the app will be numbers, statistics, charts and graphs. The main concern is to design the user interface that achieves seamless and easy-to-use experiences while using the product.

Process

For this project, the client has presented us with a well-thought-out ideas, as well as an early representation on how the app is going to function and look like. With the existing data provided, we focus more on exploring the best design solutions for the app.
There are 2 main deliverables for this project: 1) the app’s visual design and 2) a workable high-fidelity prototype.

Competitive Analysis

We started out by comparing how other similar apps work. We analysed apps like Digit, Dobot and Qapital. These apps provide great solution for people who want to save money for things that they desire. By comparing all these apps, we were able to see the strengths and weaknesses of the apps which gave us better insights on what basic features and functionalities should be included.

Information Architecture

Like any web apps and mobile apps, the structure of the app should be well designed. We go through this process to ensure that users can easily get from point A to point B when using the app. The foundation of the app is to simplify the way of saving money and also to provide a feature to seamlessly track past expenses and income through simple and straightforward navigation system.

Design : Sketches

With all the requirements gathered from the previous stages, we transformed all written requirements and charts into sketches of possible designs for the app. Mainly we explore on solutions for: 1) an easy flow of login and signup process, 2) the best type of representation (charts, graphs, maps) to track user’s total savings, and 3) the easiest way to track the user’s expenditures and incomes.

Design : Digital Screens

We came up with the app’s wireframe to make sure all structures and components are well placed. At this point, low level wireframes allow us to achieve a more consistent view of all the app’s screens. We began to design the iPhone SE version of the app as it has the smallest size amongst all the iPhone models. Below are some of the main screens that we designed.

Login Screen

Create Goal Screen

Goal Details Screen

Activity Screen

Login and Signup Screens

One of the downside of this app is users can’t straight away use and explore the app after downloading it from the app store. This is due to the involvement of real money as users need to connect their checking / bank account with the app. Therefore, users need to login or signup before they get into the home page of the app.
Instead of asking a plethora of information to sign up, the users need only to  type in logical and relevant information to complete the signup process.

Login Screen

Sign Up Screen

SMS Verification Screen

Verification Code Screen

Goal Creation Screen

What’s a savings app if you don’t have any goals right? This is the section of the app where users will type in their goal details. Instead of designing a boring, typical way of filling up a form, we use the “fill in the blanks” design style to make it fun when typing in the goal details.

Create Goal Screen

Home Screen : Goal Screen

The main component of this screen is the progressive pie chart which is responsible for displaying the total amount of money that has been saved. Aside from displaying the goal and its details, users can also view their goal activities and track their savings progress.

Home Screen : Goal

Goal Activity Screen

Activity Screen

This section of the app allows users to view and get a better look at their spending patterns. The structure of this screen consists of 1) total expenses of a particular month and 2) single expenditure of a particular date of the month which is packed with brief and relevant information.

Expenses Activity Screen

Add Expenses Screen

Expense Category Screen

Lessons Learned

This project has been a significant learning experience for us as this was our first mobile app design project. Looking back at the flow of the project, there are many improvements can be made on our design process. The project could be managed in a more structured manner. We realised that design projects involves many iterations and we did not perform well in structuring and organising our documents and files.
PS : This is still an on-going project.