1. PCP PORTFOLIO
GGTQ2
MSc HCI-E Student
*All the sketches / design artifacts presented were done by the author of the present document.
(we are able) to help.
Index
Design Process 01
User Research 02
Ideas Elaboration 03
3D Prototyping 04
Wireframing and Visual Design 05
Validation & Technologies 06
Laser cutting & Fitting Trials 07
Final Design 08
Thoughts about the process 09
2. Design Process
Process for design, define ideas and create a final prototype.
DEFINE CONCEPT
RESEARCH 3D PROTOTYPING DIGITAL PROTOTYPING
VALIDATION
WIREFRAMES LASER CUTTER MODELS FUNCTIONAL PROTOTYPE
FINAL PROTOTYPES FINAL VIDEO
LANDING PAGE
VALIDATION
VALIDATION
ThinkGenerative Research
Ideation
Mental Models
Behaviour Models
Test results
Competitive Analysis
CheckA/B testing
Site analytics
Usaility testing
Funnel
Sing-ups
MakePrototypes
Wireframes
Value prop
Landing page
Hypotheses
Comps
The design process considered elements from Agile development. Under the circum-
stances and timetable for the course, it was impossible to work in a waterfall mythology.
The process took three significant phases, Think, Make and Check.
The idea was work in many iterations as possible. Test all the design and ideas and finally,
take a strategic decision having in mind the dates and deadlines.
The Lean UX cycle.
Lean UX: Applying lean principles to improve user experience (J Gothelf. 2013)
The methods
3. USER RESEARCH
Source
Outcome
Gothelf, J. (2013). Lean UX: Applying lean
principles to improve user experience.
The user research has born from an assump-
tion and the experience to be a Dad. Having
had the experience of my daughter been lost
some valuable pieces of clothes in the school,
I thought it could be an excellent opportunity.
In order to test I created an animated story-
board to tell the story about the family and
their kids who have lost some items, for
example, the violin.
This video was presented to a few parents,
and modified with the impressions and
thoughts.
The story, tell the lifecycle of use, put the
users in context to relate the existing scenar-
io, and explain how the system will work.
paintings
tablet
violin
computer
ronaldo´s shoes
At first it was just us...
Then...Our lovely family
every parent just wants the best for their kids.
and every kid is really careful with all
their belongings, right?
A set of iBeacons to track all
the costly and important belongings.
01
02
03
04
“You’ve written the hypothesis. Now it’s time to determine
what you’ll need to test your assumptions.”
Lean UX: Applying lean principles to improve user
experience (J Gothelf. 2013)
RUN AN
EXPERIMENT
DECLARE
ASSUMPTIONS
CREATE AN
MVP
FEEDBACK AND
RESEARCH
Landay, J. A., & Myers, B. A. (2001). Sketching interfaces: Toward more human interface design. Computer, 34(3), 56-64.
4. Idea Elaboration
During the design process, a few ideas were
created. Some of the ideas were discarded.
The definition for the final approach was
made after a validation in an evaluation matrix.
Where all the relevant coordinates from the
experience and the course were put to the
test.
Mix of C-Box &
Evaluation Matrix
Source
Outcome
MScHCI Class 5
Design Practice course.
From there, three essential elements to
improve emerged. This input was useful to
evolve the idea and start another iteration
process.
Tech Feasibility
One user
Daily use
“I have seen it”
Users interact
Small users target
Not fun
Affordable
Magic
Many users
One time interaction
Wow! new idea
Stands alone
Huge target
Awesome fun!
Expensive
No magic required
The idea is simple,
technologically viable and
is possible to do with
available systems present
in the market.
Daily Use
The idea creates an a
daily experience for the
users. It should be
carefully designed to
prevent overwhelming
alarms and notifications.
Affordable
The system is cheap to
create. Requires a little
amount of development
and the device is simple,
light and done with
standards materials.
More than a tracker of things, is a
“Tool to manage behavior”
5. 3D PROTOTYPING
Different software available wer used. Each
software has a specific list of pros and cons
in the development of a 3D model for physi-
cal prototyping. In the table at right, there is
a list of benefits and challenges.
3D TOOLS
Outcome
As part of the design process, a stage of
physical prototyping was considered. First as
a tool to communicate the attributes of size
and shape. Moreover the 3D modelling was
done projecting the use into a 3D printing
machine or a Laser cutting model.
↑Sketches was a useful tool to explore the ways to interact with the environment.
First prototype Second prototype Third prototype
- Difficult to create a 3D ready to print
model. Present many problems.
- Complicated interface requires much
previous knowledge.
- Easy to create nurbs and intricate
mesh and structures.
- Easy to solve complicated joints.
- Very basic constructions elements, no
complex surfaces and nurbs
- Accept to import only a few file types,
not great managing standards
- Easy to use for beginners. Simple
interface and instructions
- Export ready to print in 3D, without
problems.
- The models always present problem
for 3D printing
- The standards for meshing are
inadequate for physical prototyping.
- Simple to use and learn. The interface
is clear and communicative
- Has an online library to get additional
models
6. WIREFRAMING
& VISUAL DESIGN
Source
Outcome
Information Architecture.
Morville & Rosenfeld
http://goo.gl/j9g00
Wireframing it is a design tool useful to
communicate the elements of the interaction.
Also to communicate the flow and relation-
ship between the different stages of the
system.
The wireframes were mixed with the visual
design in order to test the presence of
various elements such icons, images of the
kids and map recognition.
↑ First version Wireframes.
At home
Classical Guitar
At home
ART SET
OH OH...
ARSENAL shirt
(we are able) to help.
ENTER
Dominga
PEDRO
Rafi
PEDRO PEDRO
ARSENAL shirt
serial number
0091-00934-09481
set a reminder
see the last location
did you find it?
Yes
no, Or report
a problem
PEDRO
The King Alfred School
London NW11 7HY
↑ Last version Wireframes.
↑ Screens of the final prototype.
http://goo.gl/A6Yvv7
Online prototype
7. VALIDATION
Source
Outcome
Gothelf, J. (2013). Lean UX: Applying lean
principles to improve user experience.
As part of the validation stages, a online
questionnaire was done. The idea was to
explore the most lost items for children and
what was the outcome of the experience.
↑ Online questionnaire
EXPLORING
TECHNOLOGIES
Outcome
During the exploration technologies phase,
there was a few software and apps reviewed.
Evothings and Beacondo were two software
to work with beacons. Sadly the development
of the current versions is not the optimal.
There are some problems with integrate the
design creating on wireframes.
Finally, the best option work directly with a
functional prototype based on Axure, activat-
ing the beacons with the app Beecons and
run the code on the RFduino board.
8. LASER CUTTING
Outcome
In order to create a physical version of the
designed device. The laser cutting technique
was chosen. This method allows to create
many versions of the prototype in a fast and
reliable way. 3D printing in this occasion is
too expensive in time and opportunities.
FITTING
TRIALS
Outcome
After the process of laser cutting. Was neces-
sary to test the efficiency of the cut elements
in order to be placed in clothes and tags.
For a week, the different versions were put in
different clothes, different items, plush toys,
musical instruments and sports equipment.
9. FINAL DESIGN
Outcome
The final design is still not final, and is part of
the third iteration process. The current
version is created with:
1. RFDuino board with the code for make a
beacon.
2. Online prototype with functional navigation
for the app created for smartphones.
3. Physical prototype built with laser cutting
methods over acrylic.
http://goo.gl/A4cq5S
Video
https://goo.gl/2Hna5j
Video about the process
10. Thoughts about
the design process
During the PCP course, there were
many methods learned and applied.
However, the students had the freedom
to explore the best, looking forward to
their projects. I think that freedom is the
most important element in the design
industry nowadays. The possibility to
iterate, to explore, to take decisions on
the go, to validate with real users is
essential. Methods like Waterfall seems
to be less effective in more explorative
environments.
Also methods such Personas (Cooper
et al., 1999) seems to be to structure
and economically expensive in terms of
time if the designers can validate using
proto personas (Gothelf, 2013) and
scenarios.
The idea generation under a Lean
development allows to the designers
to iterate also over the ideas. Quick
brainstorming (Osborn, 1963) and
storyboards (Landay & Myers, 1996)
and scenarios deliver a fast way to
put into the users hands the ideas to
validate.
About the prototyping stage, also the
less Agile methods are less efficient.
The parallel prototyping (Houde &
Hill, 1997) requires efforts in differ-
ent stages; the goal is not have a final
product and test over it; a low fidelity
shapes and prototype can be tested
and validated.
One of the challenges of the current processes was work paralegal in different areas.
The physical prototyping: Using 3D modeling, laser cutting, foam cutting, papers, and 3D printing.
The interactive system: A interface created using Wireframes, Visual design and an interactive prototype made
in Axure.
The system: A electronic system created using RFduino, Arduino software and some particular apps from iOS.
These three different worlds represented a challenge in order to align them and work with the
synergy between them. The decision of change in one system affects the others, and the ability
to manage the parallel development of the three phases is one of the biggest learning.
ThinkGenerative Research
Ideation
Mental Models
Behaviour Models
Test results
Competitive Analysis
CheckA/B testing
Site analytics
Usaility testing
Funnel
Sing-ups
MakePrototypes
Wireframes
Value prop
Landing page
Hypotheses
Comps
Cooper, A., et al. (1999). The inmates are running the asylum:[why high-tech products drive us crazy and how to restore the sanity] (Vol. 261). Sams Indianapolis.
Gothelf, J. (2013). Lean ux: Applying lean principles to improve user experience. " O’Reilly Media, Inc.".
Houde, S., & Hill, C. (1997). What do prototypes prototype. Hand- book of human-computer interaction, 2, 367–381.
Landay, J. A., & Myers, B. A. (1996). Sketching storyboards to illustrate interface behaviors. In Conference companion on hu- man factors in computing systems (pp. 193–194).
Osborn, A. F. (1963). Applied imagination; principles and proce- dures of creative problem-solving: Principles and procedures of
creative problem-solving. Scribner.Cooper, A., et al. (1999). The inmates are running the asylum:[why high-tech products drive us crazy and how to restore the sanity] (Vol. 261). Sams
Indianapolis.
Gothelf, J. (2013). Lean ux: Applying lean principles to improve user experience. " O’Reilly Media, Inc.".
Houde, S., & Hill, C. (1997). What do prototypes prototype. Hand- book of human-computer interaction, 2, 367–381.
Landay, J. A., & Myers, B. A. (1996). Sketching storyboards to illustrate interface behaviors. In Conference companion on hu- man factors in computing systems (pp. 193–194).
Osborn, A. F. (1963). Applied imagination; principles and proce- dures of creative problem-solving: Principles and procedures of
creative problem-solving. Scribner.
