Coin: A UI Case Study

Haluka Yagi
Sep 24 · 5 min read

Project Brief

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.

Click here for the finished mobile prototype →

User Persona

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.

Art Direction

Visual Art Direction (Invision)

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.

Concept

Snowball Effect Comic by Gar-E!

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.

Lo-fi Sketches

wireframe sketches

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.

Colour Palette

The colour scheme focuses on cool tones, inspired by the concept of this app relating the colours to winter and snow.

Tested using Constrate

The accessibility of the colours used for text was checked against the Web Content Accessibility Guidelines (WCAG).

Typography

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.

Prototype

Mobile Prototype Walkthrough

Click here for the finished mobile prototype →

Login Screen

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.

Home Screen

Home screen

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

Accounts Overview (Left), Account Details (Middle & Left)

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.

Cashflow

Cashflow Overview (Left), Cashflow Detail (Right)

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.

Components

Grids

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.

Tabs

Closeup of the Navigation Tab

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

Example of the Dialogue Box used (Left), Example of the Snackbar used (Right)

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

Haluka Yagi

Written by

3rd Year Branding/Interactive Design Student at Capilano’s IDEA Program, with a love for dogs and cafe hopping.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade