This document outlines the design process undertaken for a portfolio project. It includes sections on observation and persona creation, idea elaboration and validation, wireframing, visual design, storyboarding, and creating a video fly-through. The process followed a waterfall approach due to constraints of the course, but the author notes it would have been better to take a more iterative Lean UX approach to allow for faster idea validation and testing at each stage of design.

1. Portfolio Design Practice
MSc HCI-E Student
Index
Design timeline 02
Observation 03
Ideas Elaboration 04
Idea validation 05
Wireframing 06
Visual design 07
Storyboard 08
Video 09
Thoughts about the process 10
*All the sketches / design artifacts presented were done by the author of the present document.

2. Design timeline
Process for design, define ideas and create a final prototype.
W1 W2 W3 W4
September
W1 W2 W3 W4
October
W1 W2 W3 W4
November
Design and iterations
Design definitions
Visiting Cambridge
Validate Ideas
Prototype
Observation
Validate Design
Presentation
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.

3. Observation
↑ Fig. Early sketches for explore the relationship between the users and their smartphones on the street. Sketches as a exploration tool.
PERSONA
Source
Outcome
Personas. Alan Cooper
http://goo.gl/zxpBOH
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
behavior.
“Personas are archetypes built to identify our real users
profile, 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
WOM capacity
Time to spend in cultural stuff
Technology WOM
Interaction times
Fear to be exposed socially
Less
Less
Less
Less
Less
Less
More
More
More
More
More
More
“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 define the user.
Additionally a series of sketches were useful to
determine the future interaction schemes. One
insight gathered was: it is difficult to the users to
grab the phone, read a Qr code with a specific
app, and finally get information or an augmented
reality experience. There is too many steps and
only will work with a few segment of users.

4. Ideas elaboration
The most difficult part was to define 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, define a way to educate on the use of
the system, was the starting point to define the
interaction model and location.
User
Knows how to interact
See others
interacting
Interact
Learn how to
Interact
↑Diagram. Model to think the learning process.
→ Sketch. User steps to interact with the possible design.
SKETCHING
Source
Outcome
Sketching User Experiences. Bill Buxton
http://goo.gl/MgsU6a
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
first time, what makes you think that you will?
— Paul Heckel
↑Sketches was a useful tool to explore the ways to interact with the environment.

5. Ideas validation
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 defined the condition of not
interact with any device as the most
important rule to validate the ideas. The
following ideas lasts until the validation
session
Mix of C-Box &
Evaluation Matrix
Source
Outcome
MScHCI Class 5. Lab project.
The group defined a few important elements
to evaluate the ideas, such the tech feasibility,
ways to interact, costs of implementation and
innovation.
“If at first, the idea is not absurd, then there is no hope for
it.”
Albert Einstein
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
Augmented reality
Time travel
Bus proyections
We did define and choose the "Time
Travel" idea because it represents:
1. A real tech feasibility.
2. Many users interacting with the
system
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
system
6. It is possible to reach a huge
amount of people
7. It is affordable to implement

6. WIREFRAMING
Source
Outcome
Information Architecture.
Morville & Rosenfeld
http://goo.gl/j9g00
Wireframing it is a design tool, to communi-
cate the main elements of the interaction.
Also Communicate the flow 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.
03
Wireframes
01
Fancy a trip down memory lane?
Stand on the blue circle
02
Ladies,
raise your right hand
Gents,
raise your left hand
05
Ladies,
raise your right hand
03.1
Ladies,
raise your right hand
03.2
Mill Road Project
06
You at the Empire
Ballroom, 1950
“She loves me, yeah,
yeah, yeah!”
The Beatles
played here in 1951
04
That's great. You're amazing!
↑ Wireframes on a sketchbook
↑ Wireframes made with Adobe illustrator.

7. VISUAL DESING
Source
Outcome
The UX Book. Rex Hartson
http://goo.gl/gQmPE4
Visual design is the stage of the merge the
information of the wireframes with the final
look and design guidelines. The team defined
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-
ments.
↑ Visual design captures.

8. STORYBOARD
Source
Outcome
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

9. VIDEO FLY TROUGH
Source
Outcome
Author
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>

10. Thoughts about
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
Sketching
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 fidelity prototypes Visual design Re- design
Create Hypothesis Journey Map Validation Validation
Idea Validation
Waterfall approach.
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 first ideas.
Validate each step or deliverable allows to the team to take more precise and cheaper decisions.