Portfolio Design Practice
MSc HCI-E Student
Design timeline 02
Ideas Elaboration 04
Idea validation 05
Visual design 07
Thoughts about the process 10
*All the sketches / design artifacts presented were done by the author of the present document.
Process for design, deﬁne ideas and create a ﬁnal prototype.
W1 W2 W3 W4
W1 W2 W3 W4
W1 W2 W3 W4
Design and iterations
Thoughts about the process:
When I just realized about the design process for Design practice course, I
proposed to my group the idea to follow a more "LeanUX" process. I did the
planning for take advantage of each stage. Trying to have fresh ideas and
hypothesis and test it over the weeks. However, the majority of the group was
not aware of this "Lean" way to work.
Hopefully, in a more design related scenario it will be useful to have a class
about agile development and techniques.
↑ Fig. Early sketches for explore the relationship between the users and their smartphones on the street. Sketches as a exploration tool.
Personas. Alan Cooper
A persona is a way to model, summarize
and communicate the research done about
people who have been observed. It is an
archetype, a nutritious mix of patterns of
“Personas are archetypes built to identify our real users
proﬁle, needs, wants and expectations in order to
design best possible experience for them”.
EDNAResident of MillRoad
Was a Teacher
She moves through the city by bus
She loves movies and watch tv
Ability to be surprised
Time to spend in cultural stuff
Fear to be exposed socially
“I know you think I’m old- fashioned but I’m
quite happy the way I am. I don’t need the
internet. I’ve got the radio and the tele and
that’s enough for me.”
Process for research the users.
We did an a deep interview with the stakeholders
team at MillRoad.
From that experience, we extracted the data and
created a Persona in order to deﬁne the user.
Additionally a series of sketches were useful to
determine the future interaction schemes. One
insight gathered was: it is difﬁcult to the users to
grab the phone, read a Qr code with a speciﬁc
app, and ﬁnally get information or an augmented
reality experience. There is too many steps and
only will work with a few segment of users.
The most difﬁcult part was to deﬁne the user
model of interaction.
Older people will not interact with a complex
system. It should be simple to use; easy learn and
easy to stop to use.
Older people do not interact publicly with their
smartphones; they do in a safety environments,
they feel exposed using artifacts on the street.
Moreover, deﬁne a way to educate on the use of
the system, was the starting point to deﬁne the
interaction model and location.
Knows how to interact
Learn how to
↑Diagram. Model to think the learning process.
→ Sketch. User steps to interact with the possible design.
Sketching User Experiences. Bill Buxton
Sketching is a powerful tool. Sketching is an
expression of thinking and problem-solving. It
is also a form of visual communication, to be
more effective with all the workgroups.
If Ernest Hemingway, James Mitchener, Neil Simon, Frank
Lloyd Wright, and Pablo Picasso could not get it right the
ﬁrst time, what makes you think that you will?
— Paul Heckel
↑Sketches was a useful tool to explore the ways to interact with the environment.
During the design process, a few ideas
were created by the team. Some of the
ideas were discarded for not consider our
main persona as an important participant.
The team deﬁned the condition of not
interact with any device as the most
important rule to validate the ideas. The
following ideas lasts until the validation
Mix of C-Box &
MScHCI Class 5. Lab project.
The group deﬁned a few important elements
to evaluate the ideas, such the tech feasibility,
ways to interact, costs of implementation and
“If at ﬁrst, the idea is not absurd, then there is no hope for
“I have seen it”
Small users target
One time interaction
Wow! new idea
We did deﬁne and choose the "Time
Travel" idea because it represents:
1. A real tech feasibility.
2. Many users interacting with the
3. A possible interaction each time the
user got the bus stop
4. A quite innovative and creative idea
5. Require the users interact with the
6. It is possible to reach a huge
amount of people
7. It is affordable to implement
Morville & Rosenfeld
Wireframing it is a design tool, to communi-
cate the main elements of the interaction.
Also Communicate the ﬂow and relationship
between the pages or stages of the system. It
shows in simple lines and boxes the size,
position and hierarchy of the components.
Fancy a trip down memory lane?
Stand on the blue circle
raise your right hand
raise your left hand
raise your right hand
raise your right hand
Mill Road Project
You at the Empire
“She loves me, yeah,
played here in 1951
That's great. You're amazing!
↑ Wireframes on a sketchbook
↑ Wireframes made with Adobe illustrator.
The UX Book. Rex Hartson
Visual design is the stage of the merge the
information of the wireframes with the ﬁnal
look and design guidelines. The team deﬁned
a color palette from the original Mill road
design website. One of the goals of the look
and feel was be related to the actual develop-
↑ Visual design captures.
MSc HCI-E Class 6. Nicolai Marquardt
Storyboard is a practical tool to visualize a
sequence of events related to the design. It
tells the story about how to use or relate to
the interface or design.
"Stories are a communal currency of humanity."
Tahir Shah, in Arabian Nights
VIDEO FLY TROUGH
A video is useful to put the interactive system
in a place and context. It shows clearly the
position on the street, the scale between the
user, the element and the other elements
around like the transportation system and
also, other users.
Click on the center to watch the online video>
the design process
One of the challenges of the design practice
course it is not work with only design related
people. The majority of the group has not experi-
enced on design processes. That fact provoked
that the main process was slow but steady.
In a more advanced situation, the process,
hopefully, will be more agile. Less structured, not
following all the "waterfall" steps and try to
validate all the steps and ideas.
What we did.
Research Identify the user Align Goals Design Prototypes Validation
Online research Primary Persona Stakeholder´s goals Design workshop Wireframes Consultant vision
Interview Sketching Visual design Stakeholder vision
Questionaries Validate ideas Storyboard
What we could have done.
Research Identify the user Design Prototypes Prototypes Validation
Online research Persona Early design Design workshop Wireframes User testing
Interview Scenarios Validation Low ﬁdelity prototypes Visual design Re- design
Create Hypothesis Journey Map Validation Validation
The course tends to put the students into a Waterfall process. With consistent and deliverables based structure and timing. This structure made not
possible to test the designs and ideas in early stages. Moreover, the waterfall process requires much time to develop all the deliverables of each stage.
Lean UX approach.
The new methods on the market like the "Lean UX" one. Allows to the design teams to validate each part of the process. Even the ﬁrst ideas.
Validate each step or deliverable allows to the team to take more precise and cheaper decisions.