GREEN SAINT

A money saving app that changes course on the way the user manages finances.

gs_ux.png

UX WRITING

gs_user research.png

USER RESEARCH

I discovered very quickly when researching for this money savings app that most financial apps look almost identical to each other and are filled with so much detail that it’s hard to decipher. This duplicity and busyness is uninspiring and exhausting for a user.

 

The challenge here was to develop an app that was the opposite of these qualities and create something inspirational and was easy to understand. Ultimately, having a quality design creates trust. And trust is a major factor when it comes to the users financials. 

gs_user flow.png

USER FLOW

Developing the user flow for a money saving app is pretty straightforward and needs no re-imagining. Having knowledge of where your money comes in and where your money goes has been a staple for years and the flow of this operation is an element that just plain works.

WIREFRAMING

gs_wireframe.png

How to break the mold of financial apps? Most money apps are blocks and straight lines. I decided to break away from predictable form and utilize the shape of a coin - namely the circle. I decided to use the quarter radius of a circle to be the sections of the app. And it would be with this unorthodox design that I would use as the basic structure for navigation. 

gs_prototype.png

PROTOTYPING

After prototyping with the circular elements I needed to come up with a way to make them truly stand out other than being static shapes. I decided to venture even further outside the box and have the shapes follow the idea of true inspiration and make them look like paint strokes. With the paint stroke idea still in my mind I was able to develop a prototype that would work.

VISUALS

This is where the hard work really came in in that I needed to create a realistic looking paint stroke that was also a graphic that could be used over and over. After choosing the colors of obviously green representing money and then it’s complementary red, I created various strokes, vectorized them and implemented them into the design. And then decided to venture further away from ordinary boring sans serif type and go with something a little more playful that I found in the Baileywick typeface. 

gs_visual.png

INTERACTION

At this point in the process I came to a roadblock when I started developing the interaction. Just simply having the pages swipe up and down seem to be a disservice to the paint strokes so I decided to segment them out and have the strokes themselves removable features within the elemental design.

gs_mobile design.png

MOBILE DESIGN

With the paint strokes, the type face and the elements all laid out together, they create a nice palate for the phone. It truly feels like a break away from your typical money saving app and one that feels inspiring and fun to use.