Interaction Design Portfolio by Pablo Ferreras

Pablo Ferreras INTERACTION

artgomad@gmail.com

DESIGNER

0034 669 27 39 32

Curriculum Vitae 21/04/1994

Master:

@art_go_mad

Design for Interaction Delft University of Technology

Pablo Ferreras Chumillas

+34 669 27 39 32 artgomad@gmail.com

EDUCATION

Sept 2017- June 2019

Bachelor:

CGPA: 8,3

Industrial Design Engineering Universidad Politécnica de Madrid Sept 2012- June 2017

SOFTWARE Digital prototyping /programing Framer, React (JS), HTML, CSS Arduino (C++) Raspberry Pi (Python) Unity, Vuforia (C#) Max MSP

Computer-aided design SolidWorks Catia

Graphic Design Adobe Photoshop Adobe Illustrator Adobe InDesign Sketch

Rendering

Entrance grade: 8,57

Erasmus:

Industrial Design Engineering Politécnico di Milano Feb 2016 - June 2016

Grade average - 9,36

WORK EXPERIENCE FLEX/design:

Industrial Design Intern Product design and innovation agency 5 months full time (2018 - 2019)

Delft, Netherlands

I participated in several projects for clients like Samsonite, Henkel, Lely, etc. in different phases of the design process: ‘Fuzzy Front-end’ research, conceptualization, sketching, form-giving, CAD modeling, rendering, and presentation.

Arnaiz & Partners: AR & VR developer intern.

KeyShot, 3ds Max

Architecture studio

Video editing

5 months full time (2016 - 2017)

Adobe Premiere Adobe AfterEffects

CGPA: 7,2

Madrid, Spain

Virtual and Augmented reality app development for the architectural visualization. Conceptual design and mechanism simulation of a cooking robot.

MY HOBBIES Life project

Mural art and Drawing

TILT-POINT ONE Master project

PRODUCT DESIGN

UX and Digital Prototyping

RAIL

Bachellor Graduation Project

Industrial Design Engineering

Table of contents 02

GUSTO

Master project

Interactive Instalation

INTERACTION DESIGN LOTUS

Master projetc

Design for Prosocial Behavior

I am multiskilled Â¨T shapeÂ¨ interaction designer passionate about technology and user-center design. In my Master Thesis, I am applying an innovative methodology called research through design. This method leverages my design and programming skills to creatively develop prototypes (as research probes) that maximize the insight generation during the early stages of the design process.

01 Tilt-point One

UX/UI OF A ROOM CONTROL SYSTEM Master project Group work, 5 members

Knowledge gained:

4 months, Spring 2018

UX, UI, User Centered Design, Scrum, Usability analysis, User testing, Arduino, React

Tilt TILT-POINT ONE

User Experience & Usability redesign This project is about user interface innovation; about creating and selecting the right user interface concept and fine-tuning it until it becomes a high-quality user interface.

The assignment was to analyze the usability and user experience of an existing product, come up with a redesign for its user interface and evaluate it.

ORIGINAL PRODUCT /7

Through iterative cycles of usage evaluations and redesigns, we kept improving the fidelity of our prototypes until the final test with real users.

Button behavior is inconsistent Feedback icons look as pressable as the buttons Misleading CO2 and eco-indicator Lack of feedback on task progress or completion

I love to work with keyshot and photoshop

Priva TouchPoint One is a single room control unit that integrates heating, cooling, lighting and sun-blinds control, re-designed for the class environment.

WATCH VIDEO

Final Interface Blink

Window icon

Feedback bar

Reminds to open the window when CO2 is too high. Interaction illustrated on the left pictures.

Works as a progress bar when controlling the blinds, helping to set them to the desired height. On temperature and CO2 menus alerts about unhealthy conditions.

Recommended setting

Heating/cooling feedback

Suggests the healthy and productive setting in temperature and CO2 menus.

Lights when the set temperature doesnâ&#x20AC;&#x2122;t match the room temperature.

TILT-POINT ONE

Temperature menu

Blink

Pro-mode Turns on with a long press in some menu buttons. Allows to control each light or blind individually. When turned off all blinds/ lights will be controlled at the same time.

/7 CO2 menu

Menu buttons Each menu only displays the information relevant to its functionality.

Increase/decrease controls

TILT-POINT ONE

Group meeting to define three distinguishable proposals for prototyping and usage evaluation

Test analysis

QUESTION

Which mechanism will we use for increasing/ decreasing values?

Which concept is more appreciated by the participants?

Where do participants find problems?

METHOD

Harris Profile

Spider Web

Task performance

This was a critical decision to make and the method help the group to agree and move forward.

The data obtained from the test questionnaire help identifying which UI was better understood by the users.

While the test was running, we annotated in an observation sheet the touchpoints in the UI during the different tasks.

As a UX/UI project, a big part of our time was spent on user testing and analyzing. In this page, I want to highlight the methods that helped us to take the proper design decisions and row in the same direction as a team.

Buttons for menu navigation All functionalities should be visible

TILT-POINT ONE

Because we established the parameters and rate each concept as a group the result was accepted and the disagreements ended.

Informative over minimalistic

The gathering of all this data in a single visual helped to communicate where the users found problems and to develop the appropriate solutions.

Tilt mechanism

Input only through physical buttons

DECISION

Tilting mechanism in all sub-menus

All functionalities accessible at any time Informative over minimalistic

Buttons for menu navigation Input only through physical buttons

TILT-POINT ONE

Group meeting to converge to a single design concept after analyzing the results of the tested proposals

Functional Prototyping

HOW DOES IT WORK?

This project is an example of how programing skills can be leveraged in the design process. The way we approach this prototype was thrilling and I am looking to work in more projects like this in the future.

TILT-POINT ONE

By programming the functionality of our prototype we were able to spot many UX pitfalls that would have gone unnoticed with codeless interactive software (like Marvel or Invision). Besides we were able to finetune the micro-interactions and feedback signals to almost product ready features, which increased the validity of our final test.

This website was open in a phone, whose screen simulated the LCD display of our room controler.

Jonny Five Wifi

Firebase

React

Web-page

Allows to control Arduino using JavaScript

Wifi

b. Back side of the prototype

a. Front side of the prototype c. Exploded view of the parts (3D-printed & laser-cut) that compose our prototype.

Gets the input from the user

The input data is received and stored in a Real-time Database

I have experience in website development using React and CSS. Also coding and designing with Arduino which was my responsibility in this project.

Arduino

Displays the real-time data in the UI, simulated with in the phone screen

Framework to display real-time data, powers the web-page.

Gusto restaurant INTERACTIVE INSTALATION

Master project Group work, 4 members

Knowledge gained:

2 months, Spring 2018

Iterative design, Futuring techniques, Research, Arduino, MAX/MSP

Methodology

The goal was to create an interactive installation that immerses visitors in a provocative future scenario.

GUSTO

We should use speculative future developments as a way to problematize the present.

RESEARCH THROUGH DESIGN 137 cm

SPECULATIVE DESIGN

Every week we made a prototype and a user test, in order to gain insights about how people interpret our scenario and proposed interactions. The reflections and conclusions of each cycle helped to develop the next iteration.

Prototype week 2

Prototype week 3

Prototype week 6

Future scenario In 2060 due to overpopulation and scarcity, the government has put huge taxes on food to lower the consumption. However, it ensures citizens wellbeing by providing them with free, tasteless, nutritious spheres according to their energy needs.

GUSTO

A restaurant concept arises where you can upload flavor data to your brain, which is stimulated to experience taste.

Interactive installation A headset with 3 vibration points simulates the manipulation of the neurons in the gustatory cortex.

We designed a multisensory installation where our visitors experience a dinner in GUSTO, a restaurant concept of the future were sophisticated taste codes are uploaded to your brain, allowing you to delight in tasteless food.

Flavored nutrition spheres trick the visitor, making her think that the taste experience is artificial. Bellow each sphere, there is a light sensor that detects when the sphere is taken away from the plate.

GUSTO

A beamer reproduces audio and video projections over the table, responding to the actions of the user.

Touch sensors placed over engraved fingerprints in the table allow the user to upload the flavor data to her brain.

LED ring interfaces placed below the plates guide and give feedback to user actions.

I was responsible for programming the behavior of the prototypes as well as the composition of the involved media (sound and visuals). I am experienced in programming with Arduino and Max/MSP.

GUSTO

My role

Software Prototyping

Max 7

/4 Max/MSP uses a visual programming languaje (VPL)

Â¨Uploading flavorÂ¨ interaction. Pictures from Thierry Schut and Guus Schoonewille

Lotus

INTERACTION DESIGN FOR PROSOCIAL BEHAVIOR Master project Individual work

Knowledge gained:

5 months, Autumn 2017

Design research, Interviewing, Observation techniques, Interaction Vision, Iterative design, Experiental prototyping, Arduino

LOTUS /8 Inspiring Heterogeniety

coworking

The aim of the project was to design for prosocial behavior in the work environment. Besides this general guideline, we had total freedom to define the design goal.

Accesible

Inclusive Community Fun Creative Sustainability Horizontal

Innovation

Collaboration

It was our job to explore the context and to find a relevant effect to achieve with our design intervention. After completing the field research in I defined the following design goal:

Openness

Design goal:

Encourage punctual collaborations and cross-pollination of knowledge among members of the coworking space.

Analyze current interactions

Formulate Design Goal

Define desired Interactions

Develop the concept direction

Iterative ideation & prototyping

Evaluation

Develop a research plan

Define the key phenomena or practices on wich the design will focus

Formulate an inspiring Interaction Vision

Aligned with the Design goal and Interaction Vision

Sketching

Recruiting participants

Model making

Research booklets

Quick prototyping

User testing

Enacting

Qualitative analysis

Research probes

Harris Profile (decision making)

Define research questions Observation Interviews Desk research Personas Context mapping

Define the intended effect of the design intervention.

Define interaction qualities Enacting StoryBoarding

Translate the insights gathered into a meaningful and feasible design direction Sketching

Research through design

Reflection and insight clustering

Final concept development Translate the insights into design properties Material exploration Functional prototyping Arduino CAD modeling and 3D printing

Lotus

Iterative Research & Design process

Presentation

Interaction Video Visual Communication Reporting

User & Context Research 4 Cities

Madrid, Delft, Rotterdam, Utretch

6 Coworking spaces

4 Cities

Lecolective, MaakBaar, Keilewerf, In de Ruimte, De Vrije Wolf, Seets2Meet

nterview locations

CYCLE 1: RESEARCH

Madrid, Delft, Rotterdam, Utretch

6 Coworking COWORKING spaces

13 interviews INTERVIEWS Andres, Lot, Jord, Sylvia, Missy, Thies, Khalid, Kasper, Gert, Nynke, etc.

SPACES

4 Cities CITIES

In this project, I had the chance to apply different qualitative research methods such as observation, interviews, personas, iterative prototyping, user tests, and evaluations. I learned a lot about people and how to explore their abilities, concerns, and practices.

Being able to leverage these insights to develop innovative user-centric designs.

Madrid, Delft, Rotterdam, Utretch

Lecolective, MaakBaar, Keilewerf, In de Ruimte, De Vrije Wolf, Seets2Meet

* In the appendix page XX is possible to find all the transcripts of the recorded interviews. 6 Coworking 13 interviews spaces Andres, Lot, Jord, Sylvia, Missy, Thies, Khalid, Kasper, Gert, Nynke, etc.

LECOLECTIVE, MADRID

MAAKBAAR, DELFT

KEILEWERF, ROTTERDAM

Flexwork

Makers place

Socialization

Community feeling Collaborative projects

Socialization Punctual work interactions

Collaborative projects

Cost Handwork (makers space)

Punctual work interactions

Computer work (flex working)

Cost Handwork (makers space) Computer work (flex working)

Private office rent Flexwork

Size (members) Socialization

Community Community feeling feeling Community feeling Collaborative projects

Community feeling Community feeling Socialization Community feeling Socialization Punctual work interacCommunity feeling Socialization tions Socialization Community feeling Collaborative projects Socialization Collaborative projects Cost Socialization Collaborative projects Collaborative projects Socialization Punctual work interacCollaborative projects tions Punctual work interacHandwork (makers Collaborative projects tions Punctual work interacspace) Punctual work interacCollaborative tions projects Cost Punctual tions work interacComputer work (flex Cost Punctual tions work interacworking) Cost tions Punctual work(makers interacHandwork Cost tions Cost(makers space) Handwork space) Handwork Cost(makers Handwork (makers space) Computer work (flex Cost Handwork (makers space) working) Computer work (flex space) Handwork (makers working) Computer work (flex Computer work (flex space) Handwork (makers working) Computer work (flex working) space) working) Computer work (flex

Socializing Team Work Punctual work interactions

Hand work

Lecolective, MaakBaar, Keilewerf, In de Ruimte, De Vrije Wolf, Seets2Meet

Flexwork 13 interviews Makers place

Andres, Lot, Jord, Sylvia, Missy, Thies, Khalid, Kasper, Gert, Nynke, etc.

Community feeling

Socialization

Collaborative projects

Community feeling

Collaborative projects

Punctual work interactions Cost Handwork (makers space) Computer work (flex working)

Punctual work interactions Socialization Cost Collaborative projects

DE VRIJE WOLF, UTRETCH

IN DE RUIMTE, UTRETCH

SEETS2MEET, UTRETCH

Makers place

Private office rent

Flexwork

Community feeling

Collaborative projects

Punctual work interactions Socialization

Punctual work interactions Cost

Handwork (makers space) Punctual work interac-

Handwork (makers space)

tions Computer work (flex working) Cost

Computer work (flex working)

Cost Collaborative projects Handwork (makers Punctual workspace) interactions Computer work (flex working) Cost

Handwork (makers space)

Computer work (flex

Computer work (flex working)

Coworkingworking) spaces are very different

from each other, I must focus on one to intervene.

KEILEWERF, ROTTERDAM

Socialization Community feeling

Community feeling

INSIGHT

Seets2Meet was the space that more closely achieved the coworking principles that I founded in my desk working) Computer work (flex Computer work working) research, so I chose it as my specific context.

Flexwork

MAAKBAAR, SEETS2MEET, DELFT UTRETCH

Community feeling

Cost

LOTUS

LECOLECTIVE, DE VRIJE WOLF, IN DE RUIMTE, MADRID UTRETCH UTRETCH

Community feeling

Socialization

Punctual work interactions Collaborative projects

Collaborative projects

Punctual work interactions

Cost

Handwork (makers space)

Computer work (flex working)

Collaborative projects

Community feeling

Socialization

Collaborative projects

Punctual work interactions Cost Handwork (makers space)

Cost Punctual work interactions Handwork (makers space) Cost Computer work (flex working) Handwork (makers space)

Computer work (flex working)

Seets2Meet was the space that more closely achieved the coworking principles that I founded in my desk research, so I chose it as my specific context to intervene.

Concept direction HelperÂ´s Sand Watch

The Time-exchange concept is a materialization of the insights gained during the context explorations and user research. I will iterate on it during the rest of the project. The concept encourages punctual collaborations among community members by highlighting the value of the help received. It is a physical reminder for the user and the rest of the community of the help that has been given or received by each coworker.

Collaboration starts

Each sand watch consists in two parts

Personal part Has the blocking sand system and it belongs permanently to one coworker.

When pulling the red beak down, a tab blocks the hole that connects both halves of the clock.

The sandwatch is now blocked

Separate the two parts of the watch

The asker gives to the helper his exchangeable part, which is empty

The parts can be joined by magnets, threads or gripping fit.

Exchangeable part It is the container of the exchanged sand, so it keeps rotating hand to hand among the coworkers

The time exchange is now completed!

Collaboration ends

The sand watch is open, so the sand flows to the lower part

Both helper and asker join together their new exchangeable parts with their personal ones.

LOTUS

Time exchange concept

Flip the sand watch to start recording time

The helper Gives the exchangeable part of his sand watch to the asker It contains the equivalent in sand of the time that the collaboration lasted. By Pablo Ferreras contact: artgomad @gmail.com

FIRST EXPLORATION

TESTED INTERACTION

Time-exchange concept; detachable hourglass

Cubes as time materialization

SECOND EXPLORATION LOTUS

Ceiling lamps as a container for accumulated help

In order to understand how people would react to the concept of time exchange, I explored several artifacts to embody the interaction.

TEST IN THE “WORK” STUDIO. GATHERED DATA

User testing and analysis

Participants: DFI students from the studio “Work”

Starting date: 26/10/2017

Number of participants: 16

Ending date: 2/11/2017

I gave booklets to all the participants so they could fulfil them during the test week. The booklets consisted in seven A5 printed pages with both open and multiple choice questions.

I wanted to test if the “time-exchange” concept would achieve the design goal in a coworking environment. The cubes were chosen as prototypes because they were the cheapest and quickest way to represent stored time and exchange it.

Name: Profession/ speciality: 1.

Prototype that you received: Mark the correct one

Prototype testing booklet

Share your time

3 TESTS, DIFFERENT SCALE AND SET-UP: Location

Uni studio

S2M Utretch

Participants

1 week 16 students

6h. 13 coworkers

(30 min. each cube)

Sand

(5h max. per bottle)

Liquid

(5h max. per bottle)

Spread the knowledge

Design Faculty

Starting amount of time:

Who did you collaborate with (name, profession/speciality)?:

1 4.

How long and about what did you collaborate with the different persons? Did you give or ask for help? Name

Test duration

Big cubes

Help each other

Time of the collaboration

2 weeks

Type of collaboration (Brainstorm, design advice, etc.)

Place of the collaboration (together or alone)

2 5.

Helped or asked for help (mark the correct)

How much time did you end with:

Initial time

Ending time

I asked/ I helped /both

*Each cube corresponds to 30 minutes of time.

6. Where this collaborations useful? Did you learn something new? Did they improve your productivity? In which way?

I asked/ I helped /both

27 students (3 masters)

I asked/ I helped /both

Collaboration time

13h.

0h.

20h.

I asked/ I helped /both

Did in your opinion, improve the productivity of the other participants that you collaborate with?

I asked/ I helped /both

Description

I used booklets and interviews to gather user insights

LOTUS

Cubes represented 30 min.

Cubes represented 15min.

It failed because:

Physical panel to visualize the cubes,

The test requires time to prove the impact of the concept. The concept requires a closed community where all the members have access to the cubes.

Whatsaap group for requesting collaboration and increasing the community feeling. Different colours of cubes to show specialization (different master)

3 5 8. Do you feel that has been a balanced exchange between you and the community? (The time that you have spent helping has equivalent value to the time that others have spent on you)

4 6 Receiving help from others: Used/ Cheated Annoyed Bored Incompetent Useless Frustrated

Intrigued Excited Surprised Grateful / thankful Supported Happy/ playful

Encouraged to help others Encourage to ask for help Encouraged to share knowledge and ideas Attracted/ wishful Motivated

Rewarded Trusted/ respected Inspired Competent/ skilled Satisfied Productive

Something else? 9.

How did you felt during the time exchange? (During the interaction with the prototypes) Mark the ones you experienced

Helping others I felt: Used/ Cheated Annoyed Bored Incompetent Useless Frustrated

Can you shortly explain why do you think you felt the way you did? Intrigued Excited Surprised Grateful / thankful Supported Happy/ playful

Encouraged to help others Encourage to ask for help Encouraged to share knowledge and ideas Attracted/ wishful Motivated

Rewarded Trusted/ respected Inspired Competent/ skilled Satisfied Productive

Something else?

Booklet I gave to the participants

Final design WATCH VIDEO

TILT-POINT ONE

LOTUS is a connected device that stores and visualizes the help received by his owner in the form of coloured light.

Both prototypes talk to each other via Bluetooth, so when they are stacked toguether, the lower one decreases the intensity of its light, while the upper one increases it correspondingly.

STEP 1: UPLOAD YOUR DATA TO A LOTUS

STEP 2: FIND A PARTNER TO COLLABORATE WITH

At the entrance of the coworking space members will be able upload their data to one of the available LOTUS.

High brightness of the Lotus (purple/red) = Has received a lot of help Low brightness of the Lotus (yellow/white) = Has helped a lot.

STEP 1: UPLOAD YOUR DATA TO LOTUS At the entrance of the coworking space members will be able upload their data to one of the available LOTUS. log in

User

light your lotus

Password Create account

Visitor

Not today

Synchronizing...

Visitor

your lotus is ready stefan! Ask, help and spread the knowledge!

This coworker is looking for help. He needs somebody to listen to his speech, so he can be ready for tomorrow.

Collaborating

Has helped a lot

Not interested in collaborating

Collaborating

Available for asking

How does it work? LOTUS

The duration of the help received by each coworker is visualized in a LOTUS but stored in the cloud. Therefore, this data can be uploaded to an available device by logging into the system with a personal account.

Step 1: Upload your data to a LOTUS Step 2: Find a partner to colaborate with Step 3: Collaborate and exchange the corresponding light

STEP 3: COLLABORATION

MOBILE APP To maximize the potential of the system, the physical devices will be combined with an app. The app shows the different backgrounds of the coworkers and the work that they are doing the current day. This will be helpful to find specific sets of skills.

Collaborating is as easy as placing the askerâ&#x20AC;&#x2122;s device above the helperâ&#x20AC;&#x2122;s. As long as the collaboration lasts, the light will keep transfering from bottom to top.

Start collaborating Asker

A magnet attracts one piece to another

Timmy Macknuggets

Information for

Helper

COWORKERS

Track: Design Knowledge of: Graphic design, Illustrator, Photoshop, photography

Data For the

Asker

Light transfers 2

Helper

MANAGERS

LIGHT/ HELP / KNOWLEDGE

Over time light moves from bottom to top

Interested on: Technology, 3D Printing, fast food

Nancy Flurry Track: Research Knowledge of: Editing, publishing, writing

LOTUS

Helper

Finish collaborating

Asker 3

Helper

When collaboration ends, top LOTUS has more light and bottom less

Asker

Interested on: Ancient history, archeology, etnography

John Fries

RaĂl

DESK LAMP DESIGN

Bachelors Graduation Project Individual work

Knowledge gained:

6 months, Spring 2017

Concept design, Mechanical design, Manufacturing, 3D modeling, Catia, Video making, 3ds Max

Rai

Design for Manufacturing Rail started as a concept design for a third-year bachelor course.

WATCH VIDEO

RAIL

A year later I decided to graduate by developing the lamp to its maximum fidelity in the given time.

STEP 1: Individual conceptual design project (2 months) STEP 2: Further product development in pairs (3 months) STEP 3: Individual Bachelors Graduation Project (6 months)

Simplicity, functionality, clearness, trust, basic shapes, straight lines, right angles,

RAIL

counterweights, rails.

Mood board

Rail

Sketching and form-giving

RAIL

I consider myself a good illustrator and enjoy working with different tools and visual styles.

Rail replaces the three arms of a conventional table lamp for two, maintaining all the required positions for lamps of its kind. The mechanism has five degrees of freedom.

275째

137 cm

Rai

Basic Mechanism

45 cm Upper arms rotation

Head and counterweight slide proportionally along the arm with rails in opposite directions, keeping the balance in all its positions

60째

Base rotation

RAIL

360째

Lateral head rotation

Frontal head rotation

Head

02.

Front connection

Click if you havenâ&#x20AC;&#x2122;t watched the video yet

01.

01 03.

Central connection

04.

Base

05.

Counterweight

Back connection

Product Assembly 03

RAIL

06.

Rail suppose a new approach to the design of adjustable lamps. Its novelty resides in two main aspects:

NO SPRINGS

NO CABLES

Instead of springs, the position of the head is maintained with a pulley system that connects head and counterweight; dragging the latter to the compensation position when the user slides the head.

The head has two sliding electrical terminals that gently rub along two parallel copper strips placed inside the upper arms. In this way, electricity reaches the head without the need for visible cables. It works in a similar way to a Scalextric.

Electric Circuit

Head connection: Longitudinal slide

Central Connexion: Rotatative slide

RAIL

The main requirement regarding the electric circuit was to provide current without visible wires, besides the need for a sliding electric contact for the head.

The electricity moves from the cables inside the vertical bars to the copper tape, while allowing rotation of the upper arms.

Conductive parts Isolating parts

Base Connection: Fixed

RAIL

Qualification of honors for Design Workshop III (6 ECTS)

10 out of 10 for the Bachelors Graduation Project (12 ECTS)

My hobbies MURAL ART & DRAWING

Personal projects

Knowledge gained:

2010 - 2019

Graffiti, Streetart, Mural art, Drawing, Painting

DIGITAL SKETCHING

These are some examples of digital sketches I did, most of them drawn without reference.

This is a small overview of my best art pieces, including both canvases and murals.

THANKS FOR YOUR TIME! +34 669 27 39 32

artgomad@gmail.com

@art_go_mad