‘Save Well’ is a money saving tool that helps users to save quickly in preparation for a big purchase or expenditure.
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.
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.
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.
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:
Add Saving Goal
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 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.