Utopia.png
 

Project Description

The brief for the final project in Ironhack was the most interesting deliverable for me because I had to recreate everything I learned in UX, UI and IxD for the past two months. I had the opportunity to create the looks and feels of an idea from scratch, make it feasible and testable. Besides approaching this as a UX/ UI Designer I had to go through the entrepreneurial and tech aspects too. In two weeks, I designed a colaborative economy app.

 
 

Work Areas

 

User Research

User Analysis

Mapping

Wireframing / Prototyping

Information Architecture

Visual Design

Interaction Design

 

What is Utopia?

 

The context in which we live today where people need to share apartments because they haven't enought money to pay a full one and banks have abusive clauses for borrowing money so most of times people are forced to ask friends or families and in some cases they have to resign.

Through this necessity UTOPIA cames along. It would be easier if people trust each others and their could share their money with a percentage of interest rate they agreed on this and it has to be lower than the bank. They agreed on in this scenario both parts win.

 

Trust

Help

Collaborative Economy

Security

No Banks

Research

 

The first step I took for user research was making the LEAN Survey Canvas to learn what information I need, from whom, what information I already have to obtain the first draft of the questions for surveys and interviews.

I implemented 10 questions in two idioms (spanish and english) for the survey, and for the interviews I asked people an opened questions that allowed me to empathise more with them.

 

Lean UX Canvas

 

I had one week to get information from surveys and interviews. Next step was to use Lean UX Canvas to order data and discover what was I building, why was I building it, and who I was building it for and identifed if i had weak areas.

 
Lean UX Canvas_Loans (1).jpg
 

Problem Statement

 

"Lenders and Borrowers need a safe way to trade their money and come to an agreement where both parts take an advantage from it because they want to skip the bank abusive clauses."

 

User Persona

 
User Persona_Loans.png

Feature Priorititzation

 

The next step was to do the feature prioritization so I started gathering all the actions that the app could do and highlight the main ones, the most importants, the secondaries and the no necessaries actions. Finally I organised them on functionality screens.

 
FeaturePriorititzation.jpg

User Flow

 
Loan_UserFlow.jpg

Low/Mid Fidelity Prototyping

 

I chose design an app because the user needs to do borrows or loans anywhere. And I think the interaction is the key of the success.   

I used the above user flow and information architecture in order to layout the first hand concept sketches and mid fidelity wireframes.

 

Once the screens were finished, I uploaded them in InVision for user testing. So I obtain the following results:
At the beginning, I created only a one split screen for the user loans and borrows but they needed more clear graphics which explain better what was happening. 

How much money are they borrowing?

When have they to refund it?

what's up if they don't do that?

So I needed a full screen to represent all of this kind of data.

 
 

Visual Design

 

After deciding the layout and functionality of the main user flow, it was time to put some life to the project. The first step was to create a mood board to gather all the individual inspiration I had in my head and combine it into a solid and cohesive style.

 
 
Moodboard.png
 
 

I wanted to represent a confident enviorment for users, this is the reason for I used this kind of deep blue and stright lines. I used an engaging pink as a main color and call to actions while the light grey and white background would create contrast. All this set promotes the main values of the app: trust, help, collaborative economy, security and no banks

 

S P L A S H

 
 
iPhone_Splash.png
 
 

B O R R O W S   &   L O A N S

 
iPhone_Borrows_Completed.png
iPhone 7_Loans Opened.png
 
 

S E A R C H E R   &   F I L T E R S

 
iPhone 7_Search Filtered.png
iPhone 7_New Loan Info.png
 
 

U S E R   P R O F I L E

 
iPhone_Lender_Profile_Info.png
iPhone 7_User_Profile_Info.png
 
 

S U M M A R Y   S C R E E N S

 
iPhone 7_Loan detail.png
iPhone 7_Loan Resume.png
 
 

C H A T S

 
iPhone 7_Chats.png
iPhone_Chat_Conv.png
 
 

F I X   D E A L   F E A T U R E

 
iPhone 7_deal_Waiting Screen_1.png
N_iPhone 7_deal_Waiting Screen_2.png
 
 

Related Links