Mock Ups

Overview

Scroll To Top

‘Save Well’ is a money saving tool that helps users to save quickly in preparation for a big purchase or expenditure.

  1. Who: This tool is for people who want to save money quickly for a particular reason. They require that the information they receive via the tool is accessible, and clearly tells them what they can do to better save.
  2. What: A responsive web app, and mobile app allowing all data on income and expenses to be recorded easily, on the go, and from a variety of devices. The tool displays data on the user's finances.
  3. When: Users will utilize the tool in the period before a planned expense. They will input data on the amount that they want to save and the save duration.
  4. Where: The tool can be used anywhere and using any device to ensure income and outgoings are easily recorded.
  5. Why: Saving money can be really hard, especially when you don't have a long time to do so. The tool helps users save by providing personalized information on how they can save during these finite periods of saving.
Home_screen
SaveWell_screen

Building a brand

The key branding principles were firstly decided upon. Preliminary ideas were sketched and inspiration pieces were gathered from existing products on Behance, Dribbble, and Pinterest.

The final designs and components of the brand were created including Guiding Principles, Logo, Colours, Typography, Image and Writing Style. The dominant colour being used is a corporate blue as blue symbolizes trust, loyalty, confidence, technology and intelligence and is also associated with stability. These are all appropriate symbols for a money saver app to be assocaited with.

Logo ideas were brainstormed and the idea of using a well was developed. Historically a well has been associated with health, community and abundance. These associations all suit the message that I am trying to align to the product and are also suitable to use with the brand colour. The name for the product is 'Save Well' what also communicates to the user that they will have healthy savings by using the product.

Branding

User Flow

Using user stories a user flow diagram was developed. This user flow will be used to develop the wireframes from low to high fidelity. This will then lead on to the testing phase of the project.

User Flows
right track flow1
right track flow1
right track flow1

Sketching

Rapid sketching methods as well as sketching templates were used to sketch out initial ideas for the various screens. It was decided that onboarding screens would be used for the app as it would be important to give the user information on how and why they should use the app. They would need to be able to add their bank account and also be able to create and view a savings goal. The user will enter the name of the savings goal as well as the amount they want to save and the save duration, the app will then calculate how much they need to save each month. The design would also need to include a homepage where the user could view their financial information that is linked to their bank acccount, as well as having a visual view of their finances on a dashboard.

From the possible solutions mid fidelity wireframes were created using the Sketch software tool. The mid fidelity wireframes were created using placeholders where content and UI elements would later be developed during the high fidelity wireframing stage.

Mid Fidelity

Wireframes

Usability Testing

As user centered design is being followed a testing phase is important to discover any usability issues. The high fidelity wireframes were moved into InVision and a prototype was created.

Users recorded themselves using the app and also left comments on the InVision prototype, with both positive and constructive feedback being gathered. The feedback was then analysed and any necessary changes were made to the design.

The final interface screens were developed after any design concerns had been addressed following on from the user testing. The user testing proved to be very useful and insights discovered led to a more functional design.

Some of the changes that were made to the final design following on from user testing included:

User Registration

  • The user can now register without having to pass through the 'add fingerprint' screen. And the requirement to add a bank card is now introduced after the user has completed registration and is no longer a part of the registration process. The more steps involved in registration increases the risk that the user will drop off and not complete the process so these were important improvements to the design flow. Introducing the bank card at this stage was a cause of concern to users as noted in the usability testing as they were not comfortable providing this information at this early stage.
Registration Flow - Before Testing

Bank Card Testing Flow
Registration Flow - After Testing

Bank Card Testing Flow

Add Saving Goal

  • The flow was changed so that the user now creates a saving goal after the welcome screen.During the usability testing concerns were raised that the user was being directed to the home page after the welcome screen, where their bank account information was being introduced. This caused confusion. The improvement means that a user now creates a saving goal after the welcome screen and is then directed to their save well. From there they can access the homepage as well as their dashboard and profile, as these buttons are available on the footer navigation.
Saving Goal Flow - Before Testing
Saving Goal Flow - After Testing
Flow Savings Goal

  • The steps invloved to create a savings goal were reduced, the new design brings these screens together into one screen with all input fields available to create a savings goal. This improvement would make it easier to set up a saving goal as the user no longer has to click between screens.
Savings Goal Steps - Before Testing

Savings Before
Savings Goal Steps - After Testing
Savings After

Final Screens

Additional feedback regarding the use of colour was taken on board. There were a number of changes made to how colour was being used to make the app more accessible.

  • The heading titles were changed from blue to dark grey.
  • Dark grey is now used for all of the body copy and no highlighting of text is used.
  • Blue is the primary colour used throughout the app to indicate interaction to the user, orange is no longer used as it fails a contrast test against a white background.
  • The size of some copy was increased where it felt it was too small to be accessible.

The result is a more simplified, accessible brand that projects the intended brand values of being strong, reliable, secure and accessible. The final screens were polished and a responsive web UI was designed along with mockups to showcase how ‘Save Well’ would look in real life on a mobile screen.

A new prototype was also developed to reflect the changes that were made based on user feedback during the testing phase. The updated final screens were brought into InVision and linked together to create an interactive guide. The final screens can be viewed here.

Interface