The brief outlined a need for a user-focused digital budget assistant, to help the selected target market get their financial facts fast, accurately, and honestly, while being visually stimulating.
Due to project time-constraints, mid-fi wireframes and UX flow was provided by our instructor. For this project we were asked to take these existing UX and generate a UI design system. Our goal was to study grid systems, typographic scales and colour accessibility while creating a branded UI experience.
The primary demographics for Coin are Millennials aged 20–30, who new to an increased income. These individuals lack money management skills to save for the big things in the future and to manage their day to day expenses.
Coin is a financial app geared towards young adults, which required the branding to be both trustworthy enough to use while being trendy to be attractive for the users. These nine images and words above each represent a part of Coin’s brand.
Coin’s visual identity is inspired by snow — snow is like money; it can be beautiful and fun, but also dangerous. The “Snowball Effect” is a process where something small and insignificant, builds upon itself, becoming more significant and dangerous. This metaphor can be used to describe what can happen when bills are unpaid, spendings go out of hand, and loans that keep piling up. Coin’s goal is to prevent the snowball effect by offering an informative and straight forward interface to keep the user aware of where their budgets stand.
In the initial sketch for Coin, the layouts emphasized concise and precise information, while incorporating symbols of the metaphor of “snow” throughout the app’s interface. This could apply on charts, iconography, and visual identity.
The colour scheme focuses on cool tones, inspired by the concept of this app relating the colours to winter and snow.
The accessibility of the colours used for text was checked against the Web Content Accessibility Guidelines (WCAG).
Coin uses the fonts Lora and Roboto, both web fonts made by Google Fonts. Lora is a contemporary serif that adds a sophisticated and modern look to the app, while Roboto features friendly and open curves that create a natural reading rhythm for the user.
The login screen reflects the original concept of the app and plays with motifs related to snow. Coin used these login screens as an opportunity to show the brand characteristics.
The home screen has an overview of many features of the app while showcasing essential data such as an update on their spendings, or the due date for your credit card bill. Simple iconography is used, such as the check on the notice card, which helps decrease the amount of text on the screen.
Accounts Overview & Account Details Screens
Both the account and cashflow overview uses a ring to easily compare how much you’ve used up of each account/during each month. This helps the user visualize the difference, to understand how much they have saved/overspent.
Once a specific account is clicked on, the interface will show a larger ring, with the total amount spent on that account. A mountain outline indicates whether your spendings are going out of the roof, or is at a controlled spot.
The cashflow overview screen also utilizes the circles to represent the net growth of the month visually. After the month is selected, users can see a breakdown of the income vs expenses and details of their spendings.
Coin utilizes a four column grid, which is a responsive layout grid that can adapt to screen size and orientation, creating a consistent experience across different layouts.
Coin’s tab navigation sits at the top of the screen, with icons that represent each section. The home icon is on the left, and users can switch to the other pages, using the right-swiping motion to create a natural flow throughout the interface. This right-swiping motion also exists on the login screen, as well as the quick bill payment card on the home screen.
Dialogue Box & Snackbar
Dialogue boxes and snackbars are means in which an app can use to inform users. Dialogues boxes inform the user about a task and usually contains important information that requires the user to make a decision, while snackbars are used to provide brief messages about the app, that is typically temporary.
Thank you for reading!
Timeline: 3 Weeks
Capilano IDEA School of Design
IDES 363 UI Design Systems
Instructor: Christina Paone