allrates_logo.png
Group 1.png

Allrates.com is a personal finance site. It breaks down complex money-related themes that are easy to digest and understand to the user, offering insights and strategies to make most of their money. 

Topics that are covered include loans, banking, mortgages, credit cards and insurance.

Role
UI Designer

Project Type

Site design

Timeframe

5 months 

Tools

Adobe Creative Suite

The challenge in this project was to create an interface that clean and engaging while contains a lot of educational information and comparison tables.

It was a long journey...

Which started with an exploration of the ultimate interface that will include all desirable features: tables, filters, onboarding questionary and explanatory content.
 

🖥 iMac.png
allrates__v1_first_question.jpg
allrates__v1_third_question.jpg
allrates__v1_second_question.jpg
allrates__v2_first_question.jpg
allrates__questions_2.jpg
allrates__questions_3.jpg
allrates__questions_4.jpg
Allrates_HP_ver_3_no_filters.jpg
Allrates_HP_ver_D.jpg
Allrates_side_element_st2.jpg
Allrates_side_element_st1.jpg
Allrates_vertical_collapse.jpg

How to develop?

This question started a broad conversation about the best approach to this new company's project development: Bootstrap, Fluid, mobile-first, HTML-CSS and much more.

Those discussions created a tight collaboration with the dev team during a project that was built across:

3 breakpoints 

Desktop 1920x1080 ,tablet 1024x768 and mobile 640 x 1136

12 columns grid

7  pages at the moment of its launch

Allrates_HP_12grid.jpg

From the beginning... 

The concept wasn't approved. Taking insights from the wireframe stage and implementing it in a low-fidelity design proposal ( as a reason of the time constraints, the next step didn't have wireframes).

Allrates_HP_desktop.jpg

Based on layout approval, desktop and mobile high-fidelity versions were presented.

💻  Macbook.png
📱 iPhone 8.png

but not excepted. The main feedback and request were to create a more modern and bright, less formal overall look and feel of the interface.

And here we

are going again :)

 

The version that was presented during the project launch.

allrates.png
terms_desktop.jpg
provider's_index.jpg
industry_page.jpg
contact-us_desktop.jpg
compare_table_3_sections.jpg
compare_checking-accounts.jpg
about_us_desktop.jpg
articles_desktop.jpg
become_provider.jpg

But...

Yes! We did it again!

 

money.png