CAJA DE INGENIEROS

Improving usability to increase value proposition, engagement and reduce support

Project main goal was:

Redesign desktop and mobile experiences to provide a better usability, increase value to customers which are also investors in the bank, generate more engagement and reduce support queries by phone and email.

PROCESS OF DESIGN

Understanding current context by mapping actual information architecture, reviewing analytics and uncovering technical limitations.

Set up a Design System following given brand guidelines and create a gallery of components.

Propose design solutions for each section and iterate with stakeholders and potential users.

img_comparisonMobile@2x
UNDERSTANDING CONTEXT

1. Mapping actual Information Architecture

First step was mapping the current architecture to identify gaps and propose improvements aligned with user and business needs. At this stage few inconsistencies where found such:

– The need to performed more than 2 clicks to access content. 

– The fact that it was extremely easy to find contact details when the company wanted to reduce the number of support queries.

– Their intention was to give more presence to the financial advisor and redirect the customer to them for a more personal attention.

– A strong desktop and mobile unification was needed in terms of functionality.

As a conclusion 5 big modules where identified; products, transactions, user profile, communication, other bank resources.

As well as a modular pattern of navigation to provide consistency and ease product use where possible transaction actions were always accessible.

img_IAProposed@2x
UNDERSTANDING CONTEXT

2. Reviewing analytics

Analytics helped to reveal which operations user performed more often. That information allowed to arrange better the transactions.

Instead, products order came straight from a business side, such for example give more presence to credit cards instead of debit and arrange list of product in an specific way.

img_reviewAnalytics@2x
UNDERSTANDING CONTEXT

3. Uncovering technical limitations and needs

Not many technical limitations were found in the process of redesign but one had impact straight to the main page. The issue was that information offered could not be refreshed automatically, reason why it was decided to include last time and date content was refreshed always visible on top and allow the user to do it manually by swiping down the page.

– As a requirement of the entire project, accessibility was a must to fulfill Ilunion AA certification.

DESIGN SYSTEM

Set up a Design System following given brand guidelines and create a gallery of components.

img_colorsTipo02@2x
img_components02@2x
IDEATE, DESIGN, PROTOTYPE AND ITERATE

Propose design solutions for each section and iterate with stakeholders and potential users.

A little roadmap was stablished to cover all modules the product was composed of. And each section was covered in order of importance for business and relevance for the user. Therefore project started with main page, products page, transactions, user profile and other resources. 

Iteration and feedback was key in every module to achieve the most suitable design solution.

MICRO ANIMATIONS

Some samples of interactions created for mobile experience

Transaction menu

PIN activation switcher

MOBILE

Other mobile screens designed among 24 different user processes to performed operations.

img_mobileScreens01@2x
img_MobileScreens002@2x
img_MobileScreens03@2x
img_MobileScreens04@2x
SCOPE OF WORK

Business design strategy
Research

User Experience
Interface Design

User Flow Mapping
Wireframing
Prototyping
Responsive Design

CHECK SOME OF MY CASE STUDIES TO KNOW BETTER HOW I WORK
thumb_lemon@2x

Ideation, creation and design of  an medical online network to help people with spine cord injuries.

thumb_AlianzaFPDual@2x

Conceptualization and execution of a internal social platform to increase job employment.

thumb_HelloCustomer@2x

Helping Hello Customer to increase their value to the users adding new features in their existing product.

thumb_Cl3ver@2x

Redesign to enrich users experience and add value of this online tool to preview 3D renders in the browser.

logoWHITE@2x
© Laura Vilar 2017. 
All rights reserved.