Ecomate logo green
UI Design
UX Design
Branding

Boosting environmental and financial consciousness through design

Green personal financial manager helping you track & reduce your budget and your carbon footprint at the same time

Ecomate mobile mockup design screen dashboardEcomate mobile mockup design screen analytics

Our involvement

UX/UI Design, Branding, Illustration

Deliverables

iOS and Android applications

See it yourself!

The challenge

Our enthusiasm for design is originated from its nature: this wonderful area of expertise is capable of converting abstract ideas into tangible digital products. This was exactly what we needed to do in case of Ecomate. Our team delivered comprehensive end-to-end UX/UI design for a very unique concept: a fintech application promoting financial consciousness while laying a huge emphasis on carbon-neutral lifestyle thus developing financial literacy and supporting environmental protection at once.

Man looking at a graph with green background and plants

Clean dashboard for budgeting
 to be financially more conscious

We created a dashboard that contains all the functionalities that help users immediately have a clear overview of their financials. Besides goal-based savings, customers can easily set their custom limits based on their personal spending and carbon emission habits.

Ecomate mobile mockup design of the dashboard

Monitoring your carbon footprint

Besides being a personal financial management tool, Ecomate also raises attention to users' carbon dioxide output in the form of notifications. Wondering how this can be done? The application possesses its very own, built-in algorithm which continuously monitors customers' carbon footprint.

Ecomate mobile mockup design of the analytics page

Goal based savings flow

Ecomate is aimed at getting users understand that keeping a conscious budget is not difficult at all. In order to nudge customers, we have built in numerous predefined values and template-based flows to further ease goal-based savings and help them develop the much needed financial literacy.

Step 1.
Ecomate customizing goal step 1 design screen

Select a template for your goal and name it

Step 2.
Ecomate customizing goal step 2 design screen

Set an amount for it

Step 3.
Ecomate customizing goal step 3 design screen

Set a due date and tap on create goal

Arrow with 3 dot pointing right to show flow or progress
Arrow with 3 dot pointing right to show flow or progress

Custom illustrations for 
a better understanding

We wanted to provide users with a friendly and unique experience, therefore we designed modern custom illustrations. The main concept was a perspectival, exploded view which symbolises the connection between human and nature, thus creating a well understood visual metaphor.

Ecomate illustration with a car representing buying a new car
Ecomate illustration with cycling representing buying new gear
Ecomate illustration with a older car representing a wedding
Ecomate illustration with a plane representing traveling
Ecomate illustration with a house representing a home improvement
Ecomate illustration with a ambulance representing emergency funds

Financial coach feature 
to educate younger customers

The financial coach contributes to developing mindfulness in budgeting by setting different rules and practices. This is a great platform within the application for the company to communicate with its customers through meaningful advice.

Ecomate financial coach mobile mockup design screenEcomate financial coach setting roundup mobile mockup design screen

Transaction history with details

Our goal was to create a concept that truly facilitates users' lives. By leveraging open banking, all accounts can be merged in Ecomate, so customers can easily switch between them and review their past transactions ensuring transparency.

Ecomate transaction page mobile mockup design screen

Dark mode for good usability

Dark mode is a user expectation nowadays however, we decided not to only invert our UI's colours. When creating Ecomate, we laid huge emphasis on developing a fully custom colour palette so the dark mode can provide high level CX similarly to the default, "light mode" visuals.

Ecomate dashboard mobile mockup dark mode design screen
Ecomate financial coach mobile mockup dark mode design screen
Ecomate transaction detail mobile mockup dark mode design screen

More work

CASE STUDY

MKB Bank

Branding, marketing materials for online & offline campaigns

Read more
MKB bank design mobile mockup

CASE STUDY

OTP

UX research, UX consultancy & youth banking strategy for the bank regarding an app targeting teenagers with non-banking functions

Read more

CASE STUDY

Cristo

Designed & developed the app of a pay-as-you-drive insurtech startup

Read more

LET'S WORK TOGETHER

Have a project for us?

Send icon
Contact us
Close icon grey
Having an award-winning idea in mind already? Looking for help to figure out the initial concept? Either way, let us know!
Please fill in the form to contact us...
By sending this message you agree with our Privacy Policy.
Thank you for your interest, it's much appreciated! We will get back to you as soon as possible!
Oops! Something went wrong while submitting the form.
Not a form-person? Simply write an email.
hello@ffnext.io
Copied:)
Copy icon