A sneak peek in my upcoming UX portfolio.

The following presentation is an overview of
the case studies that going to constitute my
first UX oriented portfolio, which is scheduled
to be completed by the end of 2019.
A sneak peek in my
upcoming UX portfolio.

I'm Nick Georgiadis, I work as a graphic designer and the last few months I've been constantly
studying the fascinating field of UX design.
This presentation is a preview of my upcoming portfolio, containing info from my WIP case
studies.
To save time you can "scan" just the introductory text of each slide (where I have included a
summary of each stage), while if you want further information you can read the content of the
tinted boxes.
Thank you.
Hi there!
Intro

Official ratings of OASA make clear that both users and
the organization itself, are not fully benefited from the
technical specs of the new ticket, like the fact that is
rechargeable. In the meantime information
architecture, content and the repeatability of the layout
through progress, make clear that basic principles of
human-centered design have been skipped.
The problem
In November 2017, Athens Public Transports launched
an e-ticket system, highly anticipated after announcing
it as a means that would benefit not only Public
Transports (reduction of smuggling leading to higher
earnings) but also passengers (faster, easier procedures
and more fair charges).
However, after a while it became a common ground
among the passengers, that the issuing procedure in
the ticket vending machines felt a bit complicated and
it wasn't unusual to see passengers asking random
people for assistance, resulting to queues, complains
and an overall delay.
The following presentation suggests a design approach
for ticket issuing, based on principles of human-
centered design. It aims at improving the user
experience, but also a greater benefit for the provider.
Case Study 1: OASA e-ticket issuing
Basic menu Product menu Durationmenu
For 3 continuoussteps we have the same layout, without making different menus distinguish.
1/8

My role
Although I work best as a member of a team, both e-ticket projects
(one more about validation follows) are personal projects, so I was
responsible for the research, design and evaluation.
2/8
I have to admit that sharing tasks would
help in better time management. While
research takes up much of the process
and has the potential to reveal the
elements that will shape the new product,
for me the most interesting part of the
whole process was the use of prototyping
software (Balsamiq and Figma), as in this
stage takes place the practical application
of all the data we have collected.
However through the full process I had
the opportunity to deal with all stages of
research and development of an
anthropocentrically designed UX and
eventually get -beyond the prototype
itself- some useful lessons for upcoming
projects.
Redesign process
Vending machinemockupfor user testingCard sorting exercises

Problem spotting
Through a series of methods combined (user observation,
questionnaires, witness research, own experience and
product analysis) a list of problematic points was drawn
up which set the basis for the whole redesign.
• Uncertainty between the meaning of“purchase”and
“recharge”options.
• Using the ticket as a digital wallet confuses users.
• If the ticket for the airport is registered as a secondary
option, the product may become useless.
• Multiple options for airport tickets, without explaining
the differentiation of options.
• The basic navigation principles of the user are not
respected.
• The card information screen has low efficiency.
• People’s ignorance of the technical capabilities of the
card such as the operation of the electronic wallet.
3/8

Personas
By combining the techniques of "Empathy mapping" and
"Situational mapping", 7 representative personas were
synthesized.
These data were cross-referenced and / or
enriched using a questionnaire that was used in
12 interviews, with questions covering areas
such as:
• the frequency of use of public transport
• the products they choose most often
• user familiarity with technology
• any problems they faced and ways they
resolved them
• the psychological imprint left by an incident
that they have encountered with the
electronic ticket
Questions were followed by corresponding
follow-up questions that kept the respondent
continuing providing information so that I had
the most complete picture possible.
The 2½D sketch for
one of the research
personas.
4/8

CriticalTasks / InformationArchitecture / User Stories
Critical Tasks (or Red Routes) were identified through research
in the OASA library and through questionnaire interviews. In
addition, based on card sorting exercises, people defined the
way they perceive information architecture.
Based on the frequency range reported, a
rank of top five tasks was formed:
1. Simple Ticket Issue
2. Monthly Card Renewal
3. Card Information
4. Airport ticket issue
5. 3-day Tourist Ticket
By combining these 5 Critical Tasks with
the data found from user questionnaires
and observations, as well as with the
overall design and usability check of the
existing UI of vending machines, I formed
five User Stories. These will be needed
later in order to carry out the necessary
Usability Tests.
Λίγοι Μερικοί ΠολλοίΕλάχιστοι
Συστηματικά
Συχνά
Περιστασιακά
Σπάνια
Αποθηκευμένη αξία
Πακέτα πολλαπλών
διαδρομών
Μεγάλης διάρκειας
Μίας διαδρομής
Αεροδρομίου
μικρής διάρκειας
Αεροδρομίου
μεγάλης διάρκειας
Λίγοι Μερικοί ΠολλοίΕλάχιστοι
Συστηματικά
Συχνά
Περιστασιακά
Σπάνια Ηλεκτρονικόπορτοφόλι
Πληροφορίες Κάρτας
Αγορά
προϊόντος
Επιδότηση
Επαναφόρτιση
προϊόντος
Online κράτηση
5/8

Design / Testing / Iteration
Based on the data I had collected, I designed the
wireframes which got tested with users. I iterated
this stage a couple of times before I move to hi-res
mockups, where I could be more detailed in my
designs. For wireframing I used Balsamiq, before
moving on to FIGMA for the final mockups.
This vending machine mockup I built, helped me with testing
the wireframes. I managed to cover the interactivity the user
deals with beyond the usage of screen. Through iteration I
detected failures in some ideas, which I corrected later. (This
presentation sharing method does not allow video playback. For
sample of Usability Test, visit my YouTube or LinkedIn profile.)
6/8

Final testing / Product distribution
After completing the design and iteration
stages, the final product gets tested and
released. As a personal project, we will limit
ourselves to a final set of Usability Tests that
will show if there is an improvement in User
Stories success rates.
User Story Checkpoints
Ticket recharge with a
“10 +1”package.
Testing the problem of confusing the terms
"purchase" and "recharging" and check the
rates of reusing an existing ticket.
Purchase a 48-hour airport
ticket using a Personalized
Card.
Test of dealing with the issue of buying an
airport ticket as a secondary product.
Issue of a new 3-day tourist
ticket.
Test of improving the lack of product
information.
Check card information. Test of improving understanding of card
details.
Increase the e-wallet balance
to 28 euros.
Test of improving the level of user friendliness
of the electronic wallet.
7/8
Existing screen for
card info.
Suggested screen for
card info.

Results / Conclusions
Final data recording will let us know, and to what
extent, the user experience has been improved. In
addition, during the research and development of the
new UX, some conclusions were reached either for
further product development or for future projects
research and development.
• While initially there were some specific design
flaws I wanted to highlight, however, through user
observation many more issues were identified than
I had in my first case study .
• Card Sorting exericises have revealed not only new
design paths but also the value of user research
and anthropocentric design.
• The potentials of e-ticket are much greater, and its
development should be based on a broader and
strategically designed framework; to improve the
user experience of the public transport passenger.
• A wider range of tourist tickets is suggested (which
may also lead to their own category in the menu).
8/8

The problem
The validation of the OASA e-ticket has a lot of room for
improvement in the user experience, both in the feedback
the user receives and in the process itself.
Case Study 2: OASA e-ticket validation
Although this stage of validation is extremely important,
instant interaction with the validating device in
conjunction with the rush for the passenger‘s ultimate
purpose - to board the vehicle - reduces the weight and
opportunities for useful feedback.
The same information we collected from the ticketing
survey is retained for personas and other passenger
characteristics.
The design approach of this case study is different. It is
mainly based on the observations, troubleshooting,
suggestions and design rules that (their implementation)
will deal with the problem.
The work is limited to design only. It remains at the
testing stage, which requires test production. (At
present, we may confine ourselves to A / B type tests).
1/6

User’s feedback
During validation, the system provides the user with a
series of useful information that is either not presented
effectively or is not understandable to the user.
The most important problems identified (regarding user
feedback) categorized by validation means are:
o At the subway gates
 The system may display one of the following
messages: E04 / E05 / E14 / E18 / E33 / E44
without further explanation of the problem (eg
E05 is 90 minutes overrun), with some of the
commands to keep the gates closed.
 Feedback and brief instructions are not
provided in the language the ticket was issued.
o On other vehicles
 There is no visual hierarchy and organization of
information, and the screen is full of
information.
 Feedback and brief instructions are not
provided in the language the ticket was issued.
2/6

Functional difficulties
The experience a user gains from a product depends a lot on
the offered conditions or ways of interaction. The same goes
for the electronic ticket and the way the validation devices are
designed.
Both validation devices on the subway gates and
those on other vehicles do not have a clearly
defined ticket scanning area. It‘s very usual to see
a user trying to validate their ticket by placing it
on the feedback screen.
Furthermore, the subway gates (especially when
e-ticket was initially released), many passengers
after validated their tickets, confused the entrance
gate.
Both practices above, created delays and queues,
reducing the quality level of electronic ticket user
experience.
Also an issue worth researching is how practical is
the plan, validation devices (on the rest of the
OASA fleet) have been installed; next to doors.
3/6

Study and suggestionsfor redesigningthe feedback
Providing solid, understandable feedback to the passenger is
essential. Content must be consisted of useful information.
Presentation must be logical, easily understandable and
visually clear.
When a passenger validates their ticket, has the
chance to get useful feedback about the usage of
their product and their own presence in the
public transportation system.
Based on those ideas, I suggest a series of design
differentiations which -I believe- can make a
difference:
• clearer layout
• content with meaning. System codes and
jargon are useless and frustrating for the
passenger
• visual hierarchy, giving content levels of
importance
• content appearing in the language the ticket
was issued.
4/6

Study and proposals for redesigningthe validation process
An anthropocentric and ergonomic approach
to the conditions the passenger validates the
e-ticket can improve the user experience.
Design suggestions (that will be presented in detail in the full version of
the portfolio) are in the following contexts:
• A series of design interventions are suggested for the metopes of
the subway gates, that will guide the user naturally to place both
the ticket correctly on the scanning surfaces (without being able to
confuse the gate) and their body in relation to gate sensors. This can
be achieved by a different combination of spatial positioning of the
equipment, respecting for ergonomics and the usage of visual
stimuli that will cause unconscious connection: Indication /
Interaction / Confirmation
• For the devices of the rest fleet of vehicles it is suggested to be clear
on the role each feature of the validation device has: 1. Information
screen, 2. Validation area, 3. Keys (almost nobody uses). Also a
better and strategically designed re-positioning of devices in the
vehicles in order to unconsciously make an even distribution of
passengers.
5/6
Ergonomicstudy Design suggestion

Testing redesignsuggestions
The redesign of feedback (in terms of presentation and
content), as well as the components of the validation
devices, should be done in conjunction with frequent
user testing. Iteration can only benefit a design process.
Frequent checks during the development of the suggested
changes provide us with data on their effectiveness and
whether we are moving in the right direction.
Development processes can be checked separately (as they
are deployed alongside for the means and the content), but
after we conclude on the individual changes, those of the
feedback should be integrated with those of the devices in
order to control:
• cooperation between them
• the user experience (especially in the pain points
identified), and
• if the conditions that considered effective for one,
conflict and burden the other.
The user experience is the sum of many individual
conditions, the combination of which brings about the
ultimate experience.
6/6

With "Postcard from Greece" we had discussed various organizational
issues they were working on. They could not spot what the real issue
was but identified several weaknesses in the organization of the
company (each role from its own perspective). Choosing a Design
Sprint did not just seem like a good solution, but a necessary one.
The first approach
Through the Sprint Design
methodology we can directly:
• produce the prototype of a product
in a few days time
• be sure all stakeholders have
expressed their different approaches
• allow the team to think outside its
established context
• get team members to align their
parallel perspectives
• give all members a complete
overview of product development,
with everyone able to provide
knowledge of their field of action
1/6
Case Study 3: Redesigning a website through a Design Sprint

My role
At Design Sprint I had a dual role:
 Facilitator, as I led the team in the processes, but I was
also responsible for both the infrastructure and the
accessories
 Designer, because I helped using the Balsamiq and
Figma softwares
For me, the proposal for Design Sprint was largely
exploratory, because after five weeks of study, preparation,
theoretical approach and testing, I had the opportunity to
see the methodology in practice.
The experience was very interesting, especially the role of
the facilitator as I gave directions and watched the team
building their solution.
Although at the end of this presentation I quote some of
the conclusions I draw from the process, what I can say
from the beginning is that you should avoid having
multiple roles, as there were times when an idea or
concept was lost for one role, due to the needs that arose
to the other role.
2/6

Before the Design Sprint we set a period of
information gathering. Moreover we held a
problem framing workshop in which we were
able to identify the topic on which we should
focus.
Problem framing process
A series of exercises put the data we had gathered into a new
perspective the team had never see before. Very interesting was
the process of designing the product's map.
This map shows all the steps of all stakeholders that participate
in the production, distribution and use of the product, as well as
their interactions. This builds a common foundation on which
we can identify weaknesses, the first possible solutions, and
delineate the problem we need to focus on. This process
concealed some surprises for the team as they had never seen a
similar complete picture of the course of their products.
The workshop resulted that:
1. We should focus on redesigning the website
2. Redesign it oriented on specific needs and functional
characteristics, not just aesthetic criteria
3. We might need an extra Sprint as we produced an idea that
needs its own independent research and development
3/6

Once the criteria and the field in which we had to move to
develop the page were finalized, each participant attempted
to sketch their ideas, followed by a process of selecting and
combining various individual elements.
Storyboarding/selection process
After defining the most important features of
the product (site), we select several tasks that
we want the user to perform. Based on these 2
guidelines, each participant draws sketches
depicting the screens and stages that will be
displayed while the user navigates.
Then we post all the drafts on the walls, a
series of exploratory questions takes place and
the creation of heat maps on the sketches of
all participants, defining the points of interest.
The project manager (AKA decider) has the
final say in making the choice of the idea that
the team will go for, with the right to add
some elements of other ideas that can be
incorporated.
4/6

Wireframes/Mockups/Testing
Based on the drafts, wireframes were designed to
test the efficiency of the information architecture
and the interaction.
Then mockups followed that show in a higher
resolution the aesthetic and functional character
we want to give to the product.
By studying the selected drafts, we developed the
wireframes. A complete design of the navigation
environment through“Balsamiq”, so that we get a first
glimpse of the switching between screens and the style
of interaction. From the sketch overview to that of
wireframes, many elements have changed as their more
detailed design revealed inaccuracies not understood
with the sketches.
After reaching the final version, the design was made
using the“Figma”platform. A basic design system was set
up (to maintain design uniformity on the screens) and we
developed the basic user paths that reveal the new
information architecture.
User testing showed that the organization of the content
was more efficient, while also pointed on some failures
(which were corrected by quick interventions).
5/6

Conclusions
The conduct of this Design Sprint was an
unusual experience, with exploratory
character.
In the end, the team had a new proposal on
the style and organization of their site, and I
had the experience of hosting a Design Sprint
as well as some conclusions to consider in the
future.
1. Pre-sprint preparation is valuable! Personas definition, card-
sorting exercises & problem framing are great time-savers.
2. In case of spotting multiple problem areas in your "map", you
must focus on one of them. If you try to combine issues under a
common generic solution you won't only make the Design Sprint
chaotic, it might also give you poor & misleading results. Also
don't be afraid to recognize the need for an extra Design Sprint.
3. People hate drawing.
4. Time boxing during prototyping day is of MAJOR IMPORTANCE!
We worked after hours (past midnight) in order to stay on
schedule.
5. Try to have specific real content. Lorem Ipsum doesn't help.
6. There's a reason experienced facilitators insist "lunch break must
be light"! (Believe me, I saw why!)
7. Efficient infrastructure & equipment are more than welcome, but
if you've got a whiteboard, some markers, plenty of post-its & A4
paper sheets, even your living room is suitable to facilitate a
Design Sprint!
6/6

Thank you
for your time!
(+30) 6945 499178
n.georgiadis81@gmail.com
linkedin.com/in/ngux
https://bit.ly/2quB0rE

A sneak peek in my upcoming UX portfolio.

Recommended

Recommended

More Related Content

Similar to A sneak peek in my upcoming UX portfolio.

Similar to A sneak peek in my upcoming UX portfolio. (20)

Recently uploaded

Recently uploaded (20)

A sneak peek in my upcoming UX portfolio.