Petra Financial

Visual design, illustration
Fall 2016
-

I had the opportunity to do visual design for Petra Financial, a personal finance app that helps with budgeting, planning, and investing. I created three spot illustrations and a larger banner for their landing page. 

 Petra Logo

Petra Logo

 
 Spot image: Security

Spot image: Security

  Spot image: Simple, Success

Spot image: Simple, Success

  Spot image: Guidance

Spot image: Guidance

 
 Banner Illustration

Banner Illustration

 

Process

Spot Illustrations

The spot illustrations would accompany text about Petra's three main features,

  • Simple, Painless Planning
  • The app will hold your hand through your finances
  • Top notch-security

Which I condensed into "simplicity," "support," and "security."

 Brainstorming sketches

Brainstorming sketches

SIMPLICITY: My idea of simplicity was closely tied to "success." My brainstorming ideas were mostly around "winning" financially, like a happy person with money bags and a piggy bank (so simple a child could use it).

SUPPORT: Support was the most open ended feature. I wanted to ideally integrate dual ideas of "hand-holding" through the obscurity of the financial sector, as well as gaining knowledge easily via the app. Some motifs that came to mind included gold stars (for achievement), leveling up icons, grad caps, a concierge bell, a robot helper, books, and literal handholding.

SECURITY: I entertained iconography of locks, shields, medieval fortresses, and vault locks. In execution, simplicity was key, and I opted for the instantly recognizable tie between locks and security as opposed to a fortress or bank vault, which would have been more fun to make but may have been more contrived.

 

 

FIRST DRAFTS:

 Simplicity

Simplicity

 Security

Security

 Support

Support

There were some visibility issues, especially in the Support spot, so I went back to try and create some more contrast.

 Simplicity

Simplicity

 Simplicity out-take

Simplicity out-take

 Security

Security

 Support

Support

 

Banner Illustration

 Banner with blue background.

Banner with blue background.

I wanted to create an accompaniment to site content that would be friendly and playful, yet unintrusive and trustworthy. In the spirit of the app, I integrated common objects representative of finance, literacy, and success, as well as nods to Petra's millennial target audience. Though the imagery used is quite traditional, they are clear in meaning and easy for the audience to decode.

I realized that the blue banner could have introduced unwanted compartmentalization against the white of the landing page , so I changed the background to white and tweaked the background color accordingly.

 Final banner with white background. 

Final banner with white background.