top of page

Brainstation UI Design: coiin
As a goal for this year, I took a 10-week User Interface Design Course at BrainStation. For our final project we were tasked to develop and design a clickable mobile application prototype of our choice. Paired with a classmate, Coiin was created.
Coiin is a conceptual mobile payment application that provides a simple and convenient way to transfer money and spilt bills between friends. No more fuss and awkward ‘IUOs’ conversations, Coiin helps you keep your bills organized and the conversation flowing. For this prototype is focused on the ease of spitting a bill with an existing account. Check out the full interactive prototype below.
LO-FI WIREFRAMES










MID-FI WIREFRAMES










HI-FI WIREFRAMES
ONBOARDING & LOG IN




HOME & SPLITTING BILL








User Interface Style Guide
WORDMARK

LOGO

LOGO IN COLOUR


TYPOGRAPHY
Aa
Avenir
Light
Medium
Heavy
Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
Title
Avenir Black 34pt
Avenir Black 25pt
Avenir Black 20pt
Header
Page Title
Button
Body
Avenir Heavy 20pt
Avenir Medium 16pt
Info
Avenir Medium 14pt
Subtitle
Description
Additional Info
COLOUR PALETTE
#D99D30
#FFFFFF
#8475B6
#F6B69C
#4A79BB
#F7F7F7
#C6C6C6
#919191
#F7DE79
#F07390
#252525
#79D2F2
UI LIBRARY
MAIN BUTTON

NAVIGATION BUTTONS




MAIN BUTTONS



RADIO BUTTONS


STATUS ICONS
OWE

ACTION BUTTONS


EVENT ICONS





SEARCH FIELDS

TEXT FIELDS




Anchor 1
bottom of page