Portfolio 2023 Abril Villanueva

Page 1

Abril Villanueva

PRODUCT

PORTFOLIO. -2023
| UX | UI DESIGNER
INDEX Alair 2 Critical Care VW Chairs To-Do W.Taxi PAGE 3 PAGE 17 PAGE 26 PAGE 40 PAGE 53

W.Taxi

Augmented Reality Head-Up Display for Kiel’s Clean Autonomous Water Taxi System

W.Taxi Head-Up Display is my master thesis project. The main problem was to solve the Interface Design of an autonomous vehicle, because the lack of driver causes insecurity in the user.

The final design, nevertheless, involves the user with what is happening around him with important information that also makes him/her feel safe.

01
MASTER THESIS | PROF. DETLEF RHEIN | MUTHESIUS KUNSTHOCHSCHULE | UI DESIGN

Kiel 2022: an era of public transport transformation

The city of Kiel is living a public transportation transformation era, in which a reliable water taxi system would cover a lot of the mobility needs required nowadays and in the future, particularly if the aim is to respect the city’s sustainable vision, as well as its interest in improving its citizens’ life quality.

Mobility is a crucial topic when we talk about improving life quality, and one of the aspects that will change massively due to technological innovation and behavioural changes. The ownership of private vehicles will decrease; thusly, the combination of multiple modes of transportation will become more prominent in cities.

4
Statement
Problem
Design, with its user-centered problem solving ability, must develop a system, that facilitate and improve life quality in the city of Kiel.

Background

Why to develop a Water Taxi?

This project is based on the CAPTN project that has been running for the last 2 years in the city of Kiel. The CAPTN project aims to improve conectivity and transportation in Kiel, which due to its geography, has been one of the leading German naval bases since the 1860s. It is the capital of the federal state Schleswig-Holstein, hence the importance of modernizing and improving trafficn in the city.

The previous CAPTN Projects (Vaiaro and Wavelab) already aimed at solving urban mobility problems in Kiel, but only considered massive transportation vehicle, ignoring completely the need of having a more private vehicle in case the user had an urgency or needed to travel fast and directly from one port to another.

5

At the beginning a group brainstorming was made. Through its development, I understood how complex it is to design a transportation system, especially one that will not be controlled by a human and has to be innovative enough to drastically improve its user’s life quality.

For it to be developed, the system would need a new infrastructure, vehicle, app and maybe even an extra automat or interface where the user could be able to buy tickets.

6 Brainstorming W.Taxi 01

fast

Kiel identity

24/7 available affordable flexible

CLEAN AUTONOMOUS WATER TAXI SYSTEM IN KIEL

In this phase of the project, I defined the objective of the project: “Develop a transportation system that complements the current CAPTN System in Kiel.”

The characteristics of the system were also set to achieve the previously mentioned objective. These can be seen in the present mental map.

secure inclusive

intuitiv

7 Defining the characteristics W.Taxi 01
6

Age: 34 years old

Marital Status: single

Master International Business

Professional Years: 7 years Net Income: 3800€

Needs Goals

+ aboutHappy Personality

Favorite Brands

8 Persona
Education:
Associated Market Volume Development Tendency Frequency of contact or use
Technology Affinity Support Economic Stability Travel outside his country Owning a sail boat Move in with his girlfriend Job Promotion Make more sport Meeting friends A challenging project at job Vacations Networking Traditional Cooperative Introvert Disciplined Efficient Mindful Innovative Competitive Extrovert Impulsive Meticulous Ambitious Climate Change Traffic Train Delays Social Injustice Security Sustainability Individuality Challenge Status Up-to-date Time saving Ease of use Durability Low cost Innovator Early Adopter Early Majority Late Majority Laggard Daniel
aboutUpset

Daniel just realized he has a train to catch and has only 20 minutes to arrive to the Main Station. The only public transport that can bring him on time is the W.Taxi, so he searches for the nearest port.

Daniel can see in the W.Taxi App how long will the trip last and how much will it cost.

The App shows where is the next W.Taxi Port and how many W.Taxis are available.

Daniel arrives to the port. There he can see the number of available taxis and also the connection to the CAPTN Vaiaro Ferry.

Daniel

He aboards the vehicle. The W.Taxi will welcome him with the proper atmosphere and signage.

Daniel arrives succesfully and punctually to his destiny.

Insight: The need of the design of the interface of the head-up display.

9 User Journey W.Taxi 01
pics a free taxi and scans the QR Code in order to start to use the vehicle. The Head-Up Display shows the route and the location of other W.Taxis on the system.

Phase 1

In the first phase, the elements such as time, date and weather were still to predominant for the head-up display’s dimensions. The idea of a path showing the direction of the vehicle was constant since the beginning.

10 Design Process W.Taxi 01

Phase 2

In the second phase, the most important part was the development of a vectorial map, which could be easily understood.

Color Experimentation was also crucial.

11
W.Taxi 01
Design Process

Design Process

Phase 3

In the third phase, the elements of the second phase are simplified and positioned in the center of the screen, so that they can be better seen.

12
13 Rethinking the Head-Up Display W.Taxi 01 Head-Up Display Fahrspur W.Taxi Hintere Teil Vordere Teil Helles Grautone weiß durchlässig transparenz prozentsat Kein Verlauf Pfeil gestalten vor dem Schiff Form Experimentation Andere Fahrzeuge Farbe #00D8B4 Projektion Fahrichtung Außere Linie + Hell Kein Verlauf Muster Sektoren keine Punkt Kart e keine andere Schiffe zeigen Strecke keine Straße andere Hafen markieren Pin Point Star Ziel Marker Or t Abstand Richtung Symbol gestalten Entfernung näher rücken (-) sich entfernen (+) Anzahl Symbole Uhr beobachten Lucke ändern Ohne Buchstaben Mit Buchstaben Richtung W.Taxi Logo Nummer Geschwindigkeit Fehlende Zeit KREUZUNG PIN POIN GESTALTUNG Star Ziel

Elements: Direction Velocity Remaining Time Map

The arrow indicates the direction and the 4 parts of the circle the cardinal points.

x -x

The velocity is showed in km/h inside of a vectographic that resembles a speedometer.

Inspired by the representation of time passing by in any conventional round analog clock.

In the interactive map, the user can see his real-time location on the representation of the travel route.

14 Final Design W.Taxi 01

Yellow: Red:

Thanks to the vectographical precision of the interface, the intersection of the W.Taxi path with the other ships path can be showed in yellow color and remarked with a symbol of “crossing”.

This function allows the user to know exactly where the other ship will cross with the path of the W.Taxi, giving this way an extra sense of security that the ship will not crash with the W.Taxi.

The moment the other ships crosses over the path of the W.Taxi, the yellow projection of both paths turn into a red area. This, beside its warning function that indicates there’s a ship near the W.Taxi, also

makes the trip more interesting, because of the gamification of the situation. The whole situation gives the user a sense that every detail of the trip is controlled and measured.

15 The Intersection Situation W.Taxi 01

User Journey. How would be a trip inside W.Taxi with different weather conditions?

CLICK HERE FOR ANIMATION

16
W.Taxi 01

To-Do

There is nothing more important in these days than having a good app where you can organize the activities that you will do during the day.

To develop it, I used diversed methods used in the company UXMA for UX-Design.

02
PROJECT | OPENCAMPUS.SH | UX/UI DESIGN
App built in Figma for iPhone 14

In the first phase of the project, the problem was defined: How can I work the best im Home-Office and not be distracted by the household to do’s?

In order to do this, we answered the following questions:

1. What is the problem or question? What is it about?

2. Why is this problem important?

3. What is to be achieved? Why it’s worth to solve this problem? What would change?

This information is basic to start the research of this project.

To-Do 02

Afterwards, the analysis of the problem continued with the Five Why’s Method.

Through repeated “why” questions, deep-seated causes of problems can be determined and analyzed quickly and flexibly. Sakichi Toyoda cultivated the method as part of the lean manufacturing approach.

The method helps to develop causality chains for problems with low to medium complexity. The “Circle of Whys” as a method extension encourages the user not only to proceed linearly.

Circle of Whys questioning about the distraction working Home-Office

Who is affected by the Problem?

This method helps to know which people are affected by the problem and with what severity. In the center we can see the people that get more affected and in the perimeter the less.

To get to know better the user of this app, we also created a Persona, through who we analyzed the necesities and costums of the user.

Aftewards, a Problem Statement was made. The problem statement is a concise description of the main problem that needs to be solved. It is a focus aid.

To-Do 02

In the “Was wäre, wenn?”

Method (“What if” Method in english) the process is questioned on the basis of common stereotypes about the status quo. The participants consider what the consequences would be if the stereotypes were reversed.

To-Do 02
CLICK HERE TO SEE THE APP FUNCTIONING

VW Chairs

Auxiliary Chairs for Automotive Assembly Line

This project is the result of observing the ergonomical problems of the workers in the Volkwagen Mexico Factory. The result was two chairs that help to avoid fatigue and stress during their daily routines.

This thesis was awarded an Honourable Mention by the National Autonomous University from Mexico.

03
BACHELOR THESIS | PROF. HÉCTOR LÓPEZ AGUADO | CIDI UNAM | INDUSTRIAL DESIGN

Fatigue & Stress: The Modern Enemies

Today one of the main problems is the fatigue and stress that we suffer in our jobs. This problem is one of the most alarming in Mexico, which is in fact worldwide, the country that works the most hours a day. The consequences derived from this problem are reflected in the health and quality of life of the population.

It is a problem that was detected and studied in particular at the Volkswagen factory in Puebla, Mexico, where the workers have to adopt unhealthy positions in their daily activities. Developing an object that solves the problem of stainding and/or adapting positions that can cause fatigue was the main objective of this project.

27
Statement
Problem
Human Factors and Ergonomics are key factors in the workplace.

Research A Day in the Life: Volkswagen Puebla

In order to find out in detail about the ergonomic problems that workers suffer from on a daily basis, we visited the Volkwagen factory in Mexico.

We found that people working in factories, manufacturing plants and distribution centers suffer from muscle disorders. They have to bend constantly and also suffer from back and joint problems. These are repetitive movements that cause fatigue and mental exhaustion as well as long term damage.

28
Insight: Users need an option to weld and other to assemble.

Function Options

Insight: Active Sitting.

29 Morphological Chart VW Chairs 03
accept the user seat mount lean shock absorber hydraulic piston sphere sphere ball joint base form wheels nylon ferrule rail magnetic levitation support the user
movement
movement
rotational
translational

Active sitting occurs when seating allows or encourages the seated occupant to be active even whilst seated. Also referred to as dynamic sitting, the concept is that flexibility and movement while sitting can be beneficial to the human body and make some seated tasks easier to perform.

30 Sketching VW Chairs 03
Welding Chair Assembly Chair

In order to prove the sketched proposals, we built simple prototypes that were tested by around 10 people.

Through this tests we determined the following factors:

Height

Size

Form

Comfortability

The percentils of the people went from 95 to 5.

31 User Testing and Prototyping VW Chairs 03

The aesthetic analysis was based in the aesthetics of Volkswagen’s cars and corporate design.

32 Moodboards VW Chairs 03

The result of the research, analysis, observation and testing processes was the design of two auxiliary chairs. A low chair to work at a height of less than 50 cm and a high chair to help prevent fatigue in the lower limbs when the worker performs tasks that take place in a fixed standing position.

VW Chairs 03 Final Design

The base of the chair has an angle of 18º with respect to the floor, along the entire circumference of the base. This angle is used by the user to tilt the chair in any direction he needs.

Sequence of Use

It is especially helpful for mounting the front bumpers.

34

VINYL MEMORY FOAM

FIBERGLASS

STAINLESS STEEL

HEXAGON HEAD SCREW

1/4” x 2”

ABS+STEEL

The industrial processes to produce this chair are widespread and inexpensive: CNC routers, industrial knitting, fiberglass forms and welding. Therefore, the chair has the advantage of being able to be produced very simply and relatively cheaply.

35 Low Chair: Production and Materials VW Chairs 03

The chair has a footrest, so that the user can change position. The height of the chair can be changed within a range of 55 cm to 75 cm. This allows the chair to be used effectively by any operator of any size.

Sequence of Use

This chair helps the workers welding and general assembly. The seat tilts and its height can be adjusted.

36 High Chair VW Chairs 03

VINYL

MEMORY FOAM

FIBER GLASS CHAIR MECHANISM

PNEUMATIC CYLINDER

ALLEN SCREW

3/16”x 3/4”

CHROMED STEEL

ABS + STEEL ABS

WHEELS

Hammer Caster Co.

37 High Chair: Production and Materials VW Chairs 03

Because of the good acceptance of the project at the Volkswagen Factory, we were asked to plan and build prototypes of both chairs.

The prototypes were very useful to find new benefits and also to improve mistakes. The manufacturing process was also very interesting: we learned a lot about controlling a CNC router and thermoforming.

38 Last Prototyping Phase VW Chairs 03
39

Critical Care

Emergency Room of the Future

This project shows how the emergency rooms could look if the system could be changed in order that most of the patients didn’t have to wait long to be attended by the hospital, with help of new technology and a whole new architectural design.

04
3° SEMESTER | PROF. DETLEF RHEIN | MUTHESIUS KUNSTHOCHSCHULE | SYSTEM / INFORMATION DESIGN

Problem Statement

Emergency Rooms: How long will I wait this time?

In July 2019, the Federal Ministry of Health presented a concept for reforming emergency rooms, in order to give a faster and more efficient service for those patients who by circumstances need to use emergency rooms but are not in a life-threateaning situation.

Those patients need also better and faster attention, because, they might not be in life-threateaning situations, but must of the times they are very uncomfortable, because of possible injuries or pain that they might have.

Background Triage System

Depending on the seriousness of the symptoms, patients have to wait from 0 to approximately 4 hours. In our project we made use of the triage scale, which is the process of determining the priority of patients‘ treatments based on the severity of their condition or likelihood of recovery with and without treatment.

Our main focus was on the minor urgency and no urgency situations (green and blue colors in the triage scale).

ROT IMMEDIATE VERY URGENT 120 MIN 90 MIN 10 MIN 0 MIN 30 MIN URGENT URGENT NON-URGENT ORANGE ORANGE YELLOW GREEN BLUE

vs.

CURRENTLY: long waiting time, no information transparency, inefficient communication

FUTURE: data analysis, no waiting time on site, transparent communication, self-test

Present vs. Future Critical Care 04
Critical Care 04 TOP VIEW SIDE VIEW PERSPECTIVE VIEW
Spatial Arrangement
Treatment Room Waiting Area
Access (Schock rooms, doctor’s lounge and the rest of the hospital) Autonomous-Unit Center QR-Code Check-in
Information
Entrance
Entrance Critical Care 04
Self Check-In by QR-Code Critical Care 04
Children’s Area & Waiting Area (5 min. maximum) Critical Care 04
Signaletik Critical Care 04
Intelligent Tables: Personal Data & Syptoms Critical Care 04
Check-up by a Doctor & Diagnosis Critical Care 04
Equipping the robots with medicine for the patient Critical Care 04
Critical Care 04
The autonomous robot bring medicine to the patient, check-up in ergonomic chair

Alair 2

A new and better Bronchial Thermoplasty System

During my interchange semester at the National College of Art and Design in Dublin, we worked together with Boston Scientific in order to redesign the Alair™ System. Our task was to redesign this system in order to make it more user-friendly and therefore efficient and easier to use.

05
4° SEMESTER | PROF. ENDA O’DOWD | NATIONAL COLLEGE OF ART AND DESIGN | MEDICAL DEVICE DESIGN

Background

Alair & Bronchial Thermoplasty

Bronchial thermoplasty is a treatment for severe persistent asthma involving the delivery of controlled, therapeutic radiofrequency energy to the airway wall, thus heating the tissue and reducing the amount of smooth muscle present in the airway wall.

This reduces the capacity of the immune system to cause bronchoconstriction through nitric oxide signalling, which is the main root cause of asthma symptoms. It is normally used to treat patients who do not respond well to typical pharmacotherapy regimens.

The Alair System uses mild heat for it. Less muscle tissue means less airway constriction during an asthma attack, allowing patients to breathe more easily.

54
Bronchial Thermoplasty would also help to treat patients with COVID-19.
User Journey Alair 2 05
Setup Preparation of the patient Advancement Ablation Removal 1 2 3 4 5
Equipment

We tested our prototype in 20 different users, the results can be seen in the upper diagram. In this tests, we settled the correct hand orientation, the smallest and tallest percentil user and experimented with the ergonomics of the hand grip.

Testing the product, what can be improved? Alair 2 05
Design Variants Alair 2 05
2
3
Concept 1 Concept
Concept

1. Monitor + Basic Unit

Unlike the Alair, the Alair 2 has a monitor, so that the doctor doesn’t have the need to use an extra one. It counts with an upper grip to transport the system.

2. Signal + Pedal

Here the doctor controls when the ablation device sends the burning signal.

3. Ablation Device

The ablation device controls the distance inside the bronchial tube, which can be seen in the upper screen.

The device is symmetrical, so that it’s also left handed friendly. The ergonomics also allows to shorten the surgery time.

Final Design Alair 2 05
1. Monitor + Basic Unit 2. Ablation Device 2. Signal + Pedal

The doctor prepares and connects the device.

The catheter has to be proved before the OP

The catheter must open easily.

The doctor inserts the bronchoscope through the patient‘s laryx

The transparent tube is inserted in both the catheter and bronchoscope

The doctor sends the ablation signal with the pedal.

User Journey Alair 2 Alair 2 05

a) Insert the lower part (disposable) into the upper part.

a) Push the frontal button once to connect the internal mechanism.

a) Push the superior button to set the depth of the ablation device.

a) Push again the frontal button to liberate and deploy the catheter.

1. Not Disposable Part

2. Disposable part

3. Guidance Tube

Ablation Device Alair 2 05
Abril Villanueva PRODUCT | UX | UI DESIGNER avrila915@gmail.com 01793712086 https://www.linkedin.com/in/abrilvillanueva-id/ Thank you for your time.

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.