[vc_row][vc_column width="1/1" css=".vc_custom_1420534711712{border-top-width: 30px !important;border-bottom-width: 40px !important;padding-top: px !important;padding-bottom: 20px !important;}"][vc_text_separator title="Bacon" subtitle="Visual Design, Art Direction, iOS, Web, Marketing" style="small" align="center" margin="40"][vc_column_text]

When I first started at Tuple Labs, I was tasked with rebranding a personal financial management iOS app called Bacon. I was given complete creative rein to pick the color palette, design the logotype and app icon, illustrate and animate components, icons and screens within the app, and design all marketing materials following the app's release. As Bacon is an app that would target a younger market and compete with apps like Mint, I wanted the brand to feel young, modern, and optimistic.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1420429212889{border-top-width: 0px !important;border-right-width: 0px !important;border-bottom-width: 0px !important;border-left-width: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"][vc_single_image image="900" alignment="center" img_link_target="_self"][vc_single_image image="954" alignment="center" img_link_target="_self"][vc_single_image image="890" alignment="center" img_link_target="_self"][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

Below is a font system that could be utilized in instances throughout the app, website, and marketing materials. Each one of these custom characters follows the same set of visual rules set by the logotype.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1420429212889{border-top-width: 0px !important;border-right-width: 0px !important;border-bottom-width: 0px !important;border-left-width: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"][vc_single_image image="891" alignment="center" img_link_target="_self"][vc_single_image image="948" alignment="center" img_link_target="_self"][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

One of the funnest parts of this project was illustrating the login screen (above) and the onboarding screens (below).

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1420429212889{border-top-width: 0px !important;border-right-width: 0px !important;border-bottom-width: 0px !important;border-left-width: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"][vc_single_image image="893" alignment="center" img_link_target="_self"][vc_single_image image="964" alignment="center" img_link_target="_self"][vc_single_image image="970" alignment="center" img_link_target="_self"][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

Pictured above are various illustrations located throughout the app relating to the screen in which they appear on. The scope of this project included a fully responsive product website. Feel free to check out Bacon.money, that showcases the full product functionality for consumers, and features for business as well. We went from information architecture to wires to full blown HTML in just a couple of weeks, thanks to a collective effort from design + engineering.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1420429212889{border-top-width: 0px !important;border-right-width: 0px !important;border-bottom-width: 0px !important;border-left-width: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"][vc_single_image image="895" alignment="center" img_link_target="_self"][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

Remaining tasks of the project were to leave SWBC with plenty of assets to use as they wish, which included several animations for use in the app and website, a robust presentation template, and stationary (below). The rest of these assets assets build off the original design cues from the logo; abstract, primary, geometric.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/2" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

[/vc_column_text][/vc_column][vc_column width="1/2" css=".vc_custom_1507055549007{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1494908730185{border-top-width: 80px !important;border-bottom-width: 40px !important;padding-top: 80px !important;padding-bottom: 20px !important;}"][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1" css=".vc_custom_1420429212889{border-top-width: 0px !important;border-right-width: 0px !important;border-bottom-width: 0px !important;border-left-width: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"][vc_single_image image="905" alignment="center" img_link_target="_self"][vc_single_image image="974" alignment="center" img_link_target="_self"][vc_single_image image="983" alignment="center" img_link_target="_self"][/vc_column][/vc_row]