Be the Broker

App Design

Branding UI/Ux

Overview

Spending Tracker is a free app available in the app store. While the app is functional, it needed a facelift in both the UI and UX departments. Spending Tracker, while not very pleasing to the eye, offers some great features like manual entires, customization, and easy accessibility.

Solution

After selecting an already-made app, Spending Tracker, I was tasked to redesign the app in an enjoyable way for users and change the user's overall experience. In the rebrand, I wanted to modernize the design and add new features to the app in the prototyping process. With a new name and new features, Be the Broker was created. While managing your finances is not something most enjoy, I wanted to change that with this app. With fun transitional screens, step-by-step instructions, color coordination, and customization, the app makes managing money enjoyable and painless.

General Process

Created in 2012, while the app's functions evolved, the aesthetic did not. Stuck in a similar look to the early days of the iPhone spending tracker lacked engagement and customization opportunities but was easy to use and complete user operations. Besides the muted neutral color palette, the app used red and green to help define spending habits, which the user easily understood. Most of this rebrand focused on the user interface.

Rebrand

With the original name needing a revamp, I came up with Be the Broker, with the tagline "Don't be broke, be the Broker" to help signify the app wants to help you better understand your finances. When creating the icon widget, I included the B to create an app that stood out amongst the users' home screen apps. Final

Brand Standards

To brighten the app's look, I revamped the neutral color palette but used pops of vibrant red-orange and a teal to emphasize on and off states and positive and negative effects on their spending habits.

Transition User Inferface

To create a more engaging experience for the user, I created fun transition screens that played into the app's functionality to make going about the app more exciting and enjoyable.

Scan Here

Open Sans - Regular - Body Copy

High Fidelity Wireframes

At the beginning of my process, I created an initial set of wireframes to help the layout be consistent and follow all possible user flows. There were initially 30 high fidelity wireframes created.