Project Description

Mocal – Expenses Platform

Role: Senior UI/UX Designer • Tools: Figma, Invision • Year: 2020

The Mocal App is a product which provides clear visibility of expenses over multiple linked bank accounts & credit cards. Allowing you to track expenses and cost breakdown using a banking integrated API solution.

Low-Fidelity Wireframes

The Visual Design

Design Decisions

Primary & Secondary Colours
I used aquamarine as the primary colour as its refreshing, elegant and calm tone whilst bringing a harmonious balance when used with other neutral colours. The Secondary colour included dark greys for secondary actions such as secondary buttons and text links.

Neutral colours were used for the main UI as I wanted to create a clean UI. So such colours were used in the body, utilities, label elements… to reduce noise and clutter.

Color Contrast
Colour checks where made to ensure the accessibility of the design. I used tints at 5% to make sure that the contrast ratio passed colour contrast tests.

Left Navigation Sidebar
The collapsed navigation would be used to navigate thought the products main features, i.e. linked Accounts, expense reports, Profile Settings Etc…

Mini Calendar
Having the mini calendar in the weekly/monthly view allows a quicker Week/Month navigation if a user decides to go bath on there 3 months to check their expenses for that month as an example.

Sidebar Navigation
Left Panel allows you to navigate further linked Accounts in future and allowing access to detailed expense reports, Profile Settings Etc…

Interaction & more expense information
While I originally planned to have a modal to open on the expense details. This turned out to be a very clunky solution I opted to go with a tooltip approach allowing the user to interact with other expenses in the screen rather than taking them off the page to a separate modal this allowed for better user experience.

Toggle Sidebar
Hiding this feature behind the toggle allows the user to expand or collapse dependant if required without over whelming the users experience, This is a quick reference feature to view recent expenses viewed in your account during the week or the month you can be able to have a quick breakdown of the expenses with the total expenses of all linked cards. The Data visualisation component allows a quick visual reference to the user.

Week View
By using visual indicators such as icons and brand logos, it helped to distinguish different category expenses.

Month Day View
The monthly views were more restricted on how much content I could show for each expense, so categories icons were hidden and only Supplier Name & Price where shown at this level.

I created illustrations to help construct a visual language to the product. The intention was to produce a set of visual assets which would support the UI but not shadow it. Such illustrations can help educate, for example, on an onboarding journey or used sparingly across multiple screens of the product.