Pablo Bariola

 

 

 

Mobile Banking

Process Innovation, Digital Strategy and UX Design.

My personal goal was to bring human-centered design to Interbank. I led this change process, that included implementing new design and agile development methodologies.

 

My role
Digital Banking Manager—Defined design strategy and work processes. Hired and coached team members. Hands-on UX design. Managed resources, budgeting and relationships with stakeholders.

Process

 

I led the implementation of new processes, including a research-funded design approach and an agile development methodology—uber scrum.


Quantitative and Qualitative Research
Design Patterns + Heuristics
Core System Capabilities
Initial Wireframes
Lo-fi Prototype
User Testing
Branding and Visual Design
Hi-Fi Prototype
Sprint Development + QA
User Testing
Version Release
Friends + Family Testing
Closed Beta Testing
Public App Store Release

Organization

I supervised the new Agile design and development team, as well as two other teams that supported other banking applications.

 

 

Wireframes

Design

 

Simple login—We made the user ID persistent, while password or fingerprint read is required for each session.
Balances on the first screen—Most Interbank customers only use digital banking to check their balance.
Simple navigation—Three items in the tab bar. Research shows happiness decreases when facing too many options!
Act as Secondary Memory—The app remembers previous transactions, facilitating periodic payments.
Avoid errors—Smart input boxes clean and reformat values to increase readability, avoid errors and give in-context feedback to users.
Support user practices—We found Interbank users commonly follow a three step process to transact: check balance, transact and verify outcome. We designed around that pattern.

 

Think-Aloud User Testing

Results

“I stopped using web banking when the new app came out.”
—Interbank Customer

 

First release of the new app had a user rating of 4.5 stars in the App Store (Interbank’s previous banking app had 2.5 stars—which isn’t uncommon in the banking app world)

Positive user feedback: “A pleasure to use”, “The best app for paying bills!” or “Doesn’t feel like a bank”. A process was set in place to feed the desing process with the user's community feedback.

Weekly downloads increased 50% the week after release and 20% thereafter—with no marketing.

 

 

 

Mobile banking team configuration

Digital Banking Manager, Commercial Manager, Project Lead, Product Owner, Scrum Master, System Architect, three Front-end Developers, two Back-end developers, two UX Designers, Visual Designer, two QA Specialists.

Healthcare Design

Design Strategy and User Experience Design

The objective was to develop a new type of low-cost, high-quality healthcare offering targeted towards the emerging middle class in Peru. Previous studies had shown that there were serious deficiencies in most of the existing services available to that population. In the long term, this project has the potential to improve the lives of millions of citizens. We worked in interdisciplinary teams, each in charge of designing one aspect of the new service. These included:

  • Business design
  • Communication design
  • Medical and operations strategy
  • Service design
  • Architecture and ergonomics
  • UX design and tech strategy

The UX design team defined a technology roadmap, designed the user experiences for key components and established design patterns for future use. Below are examples of the main applications, which we called the Patient App, the Nurse Tool and the Doctor Tool.

My role
User Experience Manager, coached UX design team members and hands-on design. Advised in the implementation of human-centered processes.

Team at the prototype site

Process

The project followed human-centered approach, having all teams performing user testing together. The digital prototypes were tested in context, in an architectural prototype. After each round, the teams revised their prototypes and provided feedback for the others.

Digital prototypes were tested using two methods. First, participants and service providers were given scripts to role-play medical consultations, after which they were interviewed. This test had the purpose of the validating value proposition and adherence to common social/professional practices. Second, participants were given task objectives for think-aloud testing, in order to evaluate the design’s usability.

 

Design

Patient App

The patient app had two variants. The first supported treatments and managing appointments. The second was focused in maternity and included a pregnancy/neonatal roadmap.

 

The Patient App uses context information to configure the main view. On this example, it invites the user to book a consultation. It also shows shortcut options to book the first available time, the first early morning and the first late night. Data showed many patients prefer to make their consultations before and after office hours.
After triage, the app shows the patient’s vital signs. Out of range values are color coded and explained in a careful manner. We took special care in not to “diagnose” (that should be the doctor) or cause anxiety to the patient.
The Patient App supports the patient's treatment, guiding him through behavior changing, lab tests and medication. In the example above, the prescription is explained in layman terms. A simple table shows when it has to be taken. For lab tests, the app helps the patient booking and visualizing the results when medically appropriate.

 

Nurse Tool

Designed to be used by a nurse technician during the triage process. It allows the capture of vital signs and supports critical actions, such as summoning a doctor for urgent care.

 

The Nurse Tool was designed for a wall-mounted touch tablet. During triage, the provider is operating several medical devices, so the app had to be used one hand. The interface guides him through the medical protocol, pacing each step in an established order (patients need to rest momentarily in order to obtain a good heart rate reading).

 

Doctor Tool

This application supports the physician’s delivery of the consultation. It was built around a protocol co-designed with the medical strategy team, following the SOAP method (Subjective, Objective, Assessment, Plan) and balancing flexibility with adherence to clinical protocols. There is strong evidence that correlates the doctor’s empathy during consultation with the recovery rate of patients: supporting patient-doctor interaction, and not interfering, is critical. We also found that patients were more prone to follow their treatments if they had participated in defining them, which we also supported.

 

Using a shared display enhanced the experience. The doctor can swivel the screen in his direction when he needs to focus on it, but the position and vertical layout doesn’t create a barrier between him and the patient. Patients valued the moments when the doctors shared on-screen information with them.

 

Before the patient arrives, the doctor is asked review a summary of the medical history, which includes the vital signs recorded by the nurse during triage, current medications, conditions and treatments. Critical information, such as medicine allergies, is highlighted.
The doctor is asked swivel the display and show the screen to the patient. The main purpose of this sharing moment is to give reassurance that the doctor is aware of all the critical information. Providing this common ground facilitates the discussion during the consultation, therefore improving the experience by a large measure.
The application provides guidance in performing the physical examination. In case the doctor finds a medical condition he takes annotations in free text. During testing, we evaluated the use of a more structured input (checkboxes, radial buttons, etc), but it didn’t provide the flexibility doctors needed to describe most conditions.
The treatment planning is a collaborative task, where the doctor discusses treatment options with the the patient. The application recommends common treatments and shows alerts for medicine interactions and contraindications, such as those related to allergies.

 

Health team configuration

Business: General manager, financial analyst, business designer; Service: two service designers; Architecture: industrial designer, experience designer, architect, two design interns; Medical: two senior medical doctors; UX Design: UX manager, lead interactive designer, two prototyping engineers, tech operations Manager.

Experience Design for Cinema Theaters

Design Project

Cineplanet leaders believed that digital tools could help them differentiate themselves in a commoditized market. They run an international cinema theater chain that operates in Latin America, where the movie distribution business is basically a low-ticket high-volume business. In collaboration with La Victoria Lab I researched and designed a new generation of digital experiences for exploring, booking, coordinating, purchasing and connecting with the customer.

This project won Intercorp's 2015 Innovation Award.

Intercorp is listed in Fortune’s Top 50 Change The World ranking.

My role
User Experience Manager—Teaching UX methodologies, coaching team members, hands-on design, advising on design strategy.

 

Process

 

Expectations Setting Meeting
Qualitative User Research
Concept Ideation
Concept Validation
Process and Wireframes
Interactive Prototypes
Visual Design
User Testing
Final Presentation

 

 

 

Wireframes
Our project room

Research

Going to the movies is social event. We found two distinct collaboration and decision patterns:

 

Analytic mode Customers coordinate and plan their visit

Spontaneous mode Customers walk in the cinema, and decide in the moment

 

Designing interfaces usable by customers in both modes required presenting information in different ways. Research showed that customers in analytic mode decided first whith whom they would go and what movie they would see, and after that when and where. On the other hand, spontaneous visitors chose a movies from what was to available in the next hour or two.

These insights were the main input for the information architecture and interface design process. We used context information to deduce when a customer was in spontaneous or analytic mode. For example, location services triggered the spontaneous view within the mobile app when a user walked in the theater.

 

Design

 

We presented a roadmap of digital products and produced designs for iOS and Android mobile apps, responsive web, a kiosk and a tablet app for agent assisted sales.

 

Wireframes of mobile app in analytic and spontaneous mode

 

Given the context of use for each platform, the web app only supports analytic mode and the kiosk spontaneous. On the other hand, the mobile app supports both. In proximity to a cinema, it would switch to spontaneous mode, displaying shows beginning in the next 90 minutes. The user can also manually switch between modes.

 

Responsive web, iOS App and Kiosk app.

The designs were presented in a booklet detailing all interactions and a presentation was given to Cineplanet’s Senior Management. Expectations were surpassed. The kiosk was launched recently, while the mobile app is currently under construction.

 

Kiosks at a Cineplanet complex

Cinema team configuration

UX Manager, Project Lead, Qualitative Researcher, Industrial Designer, Graphic Designer.

Building Consensus for a Unified Work Process

Design Strategy

Each of the departments and faculties in Universidad Cayetano Heredia, a top ranked medical school in Peru, managed their communications platforms and infrastructure separately. The rectorate asked for assistance in consolidating them under a unified process. My challenge was to bring together the staff from different departments and schools, that historically had resented each other, and help them put in place a coalesced structure.

 

My role
Director—Strategy. Managing relationship with clients, planning and resources. Hiring and coaching. Leading workshops.

Workshop session

Process

 

Presentation to the university rectorate
Meeting with rectorate and IT team
Brainstorming session with university department representatives, technical and design team
Affinity diagraming dynamic with all participants
Interpretation session with the design team
UX advisory during the design fase—representing the participants
Results presentation to the university rectorate

 

Results

During the first dynamic exercises I found that most representatives were enthusiastic to participate when they understood they were able to express their needs and participate in the decision making. An affinity workshop went a long way in achieving consensus between departments. Takeaways included consolidated lists of values, ideas, content and target audiences that were later used to inform design teams. Based on this work, the university implemented a unified work procedure.

Coalescence team configuration

Director, Project Lead, Project Manager, Product Owner, four Web Designers, three Writers, Content Editor, two Web Developers, Facilitator and UX Advisor.

Tech For The Micro-enterprise

Research Project

I helped Google to research the use of technology in the Peruvian micro-enterprise. Work consisted on performing contextual interviews and subsequent analysis.

 

My role
Director—Managing relationship with clients, planning and resources. Hands-on research.

 

 

A textile wholesaler, one of our participants, and his daughter.

Micro-enterprise team configuration

Director, Project Lead, six Researchers, two Translators.

Creative Spaces

Art + Research

“Photographs really are experience captures, and the camera is the ideal arm of consciousness in its acquisitive mood.”
—Susan Sontag

 

Part art, part research, the intent of this project was to visually document—and apprehend—environments where creative activities were performed. The process was based in prior work in the fields of visual anthropology and visual grounded theory, as well as documentary, journalism and fine art photography.

 

My role
Photographer + Researcher

 

 

Arquitecture studio

Techniques

Rapport Building trust with your participant. No longer being a stranger, images become more natural.

Curation and Patterns The images are organized in different structures, to find commonalities, series, evolutions or other patterns that can visually convey the field experience.

Microanalysis Selected images are studied individually, searching for minute details that represent relevant aspects of the field experience.

Participant feedback The photos are discussed in a projective-style interview with the participants.

 

 

Creative work spaces

 

We compiled compiled these images to inspire designers. Most of these workspaces function as creative ecosystems, decorated with previous works, family tokens and other inspiring items of emotional value, supporting varying levels of social interaction, affordances that we were compelled to share.

 

Creative Spaces photo book

Spaces team configuration

Photographer + Researcher, Academic Advisor.