The Project
For our three week class, we were tasked with branding a finance app for a niche target market with the use of Google’s Material Design principles. The ultimate goal of the project was to take the base design provided and brand it uniquely to the needs and goals of a specific group of users. The resulting app was aptly named “Coin” and you can view the finished project here. The rest of the article will go over details of the app’s branding from lo-fi sketch to prototype.
Who is Coin for?
The target group chosen for Coin were teenagers, specifically those in the early to middle stages of high school. Most teens at this stage of life are probably working part-time, or want to have more independence and knowledge with regards to their finances. Although complex banking jargon and business leaning visuals may leave them confused or intimidated.
Art Direction
For Coin’s art direction, most of the visuals were centered around a penny board. The penny board was chosen as opposed to a skateboard as it was a more gender neutral option, it also seemed less intimidating and friendlier to beginners or more casual riders. In the end, the art direction steered into something that was exciting, cool, with punk inspired elements sprinkled throughout.
Lo-fi Sketches
With the art direction in mind, it was time to create lo-fi wireframes of the required screens. While creating the wireframes, I kept in mind how the user would go from each screen to the next, making sure that they followed a natural pattern. Many of the screens sketched out here are actually fairly close to the end products, with variations done for better usability.
Colour Palette
Coin’s colour palette is first and foremost bright and bold, without being overbearing or too childish. Although it never goes completely wild as it is still a finance app after all.
The main blue for Coin’s branding was chosen as it was neither feminine or masculine leaning. The brighter colours such as the cyan, salmon, and yellow, were selected to contrast the blue to establish hierarchy or a call to action on many of the screens. The black and grey were used quite minimally, but were used in areas for visual aid, such as the wheels of the skateboard or for smaller copy.
Typography
Due to the bold nature of the colour palette, I decided to use one typeface to avoid cluttering the screens. Barlow was ultimately chosen for its versatility, varying weights, and modern style.
The other reasoning for choosing a sans-serif typeface as opposed to a serif, or even using a serif paired with a sans-serif, was simply because of the target market. Since the group of users are fairly young, it made the most sense to choose a sans-serif that could work independently throughout all the screens.
Components
Launch Screen
When the user opens the app, they are greeted by a penny board coasting down the road. If this were prototyped further, the image would not be static and would show the ground beneath the penny board going up to give a sense of motion. This use of imagery is playful and it differentiates itself from static launch screens in a subtle, but effective manner.
Login Screen
Again, the penny board is present here in the login and error screens. If the user inputs the wrong information, the penny board will flip over to the other aside, revealing an assortment of stickers, and the background will cease moving until the user enters the correct information. The use of both colour (the salmon), change in imagery (flipped over penny board), and iconography (exclamation mark) on the error screen all direct the user to take action. Although a mistake was made, the user is notified in a fun manner, signalling to the user that their action was merely an accident rather than a failure.
Home Screen
The home screen features both the penny board and stickers found beneath it. This screen essentially functions as a quick overview for the user, letting them know exactly how much money they have left for the month, how much of their budget has been used up, as well as other information such as an increase or decrease in their savings for the month. With big text and bold colours, users can easily garner information on the go, without needing to fumble through other tabs.
Accounts Screens
The account overview screen features a static illustration and provides information for each account in a simple manner. Using an illustration to fill up the space instead of other information about the accounts makes the screen more visually entertaining.
Tapping on any of the accounts will direct the user to a detailed account summary page. This screen includes an easy to digest graph, along with a timeline of purchases that the user can scroll down to see various transactions or deposits. Users can also shift between months if desired by swiping to the left or to the right near the graph.
Educational Screens
This screen provides the user with educational information. Other cards would likely include budgeting or saving up for certain goals. The image at the top of the screen depicts a skate ramp, with the coin moves back and forth depending on which direction the user swipes the cards. This action allows the user to see how the app directly responds to their actions but again, in a more playful way.
This particular card focuses on the cash flow of money within the accounts, and will bring the user to a page that shows the average amount of money in and out for the month. The bottom of the skateboard shows the stickers once again. The size of the circles will be dependant on the percentage for money in and out of the account.
Dialog and Snackbars
The dialog boxes are used to inform the user of important information, hence the use of the big type on an askew angle. Snackbars are coloured in the darkest shade of the colour palette, enough to attract the user’s attention but not so distracting that it takes away from the main screens.
Tabs
The navigation bar was designed with icons that quickly summarize the function and information for each page. When the user is at a particular screen (here the user is at the home screen), the icon’s outlines will change to cyan, if not on that page the icon will remain white.