The Ultimate UX Survival Guide
8 Steps To Never Get Lost Designing
a New Product by Tom Garcy
The UX Essentials Series
Made for:
UX Designers
Product Designers
Product Owners
Disclaimer & Legal Notices
The information presented in this E-Book
represents the views of the publisher as of the
date of publication. The publisher reserves the
rights to alter and update their opinions based
on new conditions. This E-Book is for
informational purposes only. The author and
the publisher do not accept any responsibilities
for any liabilities resulting from the use of this
information. While every attempt has been
made to verify the information provided here,
the author and the publisher cannot assume
any responsibility for errors, inaccuracies or
omissions. Any similarities with people or facts
are unintentional. No part of this E-Book may
be reproduced or transmitted in any form,
electronic, or mechanical, including
photocopying, recording, or by any Illustrations: Vítek Mecner 2020
informational storage or retrieval system Version: 1.0, November 2022
without expressed written, dated and signed
permission from the publisher. © 2022 Tom Garcy, All rights reserved
2 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
About the Author
Tom Garcy
Brand & Product & UX designer.
Consultant. Biohacker.
Consultant, Creative Director, Product & Experience
Focused Designer and Entrepreneur with more than
14 years of experience in both freelance and agency
businesses. Over the years he’s initiated ventures
and has been awarded projects in both offline and
digital. Worked for clients like O2, T-Mobile,
Volkswagen or AXA.
3 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
The Ultimate UX Survival Guide
8 Steps To Never Get Lost Designing
a New Product by Tom Garcy
4 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Contents
checklist
Use this as a
01
● Why
7
02
● Data
18
03
● What
26
04
● Priorities – MVP
37
05
● Screenflow
42
06
● Wireframes & Prototyping
51
07 ● Testing 57
5 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Do it Right
This book is a straight-forward guide to
create or redesign any product. I don’t
believe in over-thinking and months-
long analysis to make a decision. This
is a process I crafted after more than
14 years of experience and the one
I follow everytime I build – a website,
an app, a brand, or a startup.
Now you can take it and use it for free.
Be a UX designer, a product owner,
or a product designer, follow those
steps to always find a way.
6 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01
Why
Current Status
Purpose
Goal
Success
The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
7
This is the first chapter of every product
on the planet. Each member of the team
should know the answers or ask
questions about it. A good exercise both
for a designer and a product owner.
Start each project by gathering as much
data as possible. You’ll combine forces to
answer essential questions about the
product, like: why you’re doing it, who it’s
for, what the desired results are, and how
to can track its success.
8 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Current Status
Always start with a basic question – what
problem do you need to solve?
Why the current solution doesn’t do that?
Are you happy with some part of the
solution, or does it need a rework and a
Current
fresh perspective?
Status
Have you already
Purpose
tried to do something about it?
Goal
Did it work, or was it a dead end?
Success
What works? What doesn’t?
9 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Existing product New product
If you are working on a product that It’s harder to analyze the current
already exists, you have a huge status of a new product since there
advantage. Start with asking the might be nothing out there yet. It’s
stakeholders what works well, what essential to know what are the key
is the customer happy with – look benefits, unique selling propositions
for real data and surveys to confirm (USPs) and why the product was
it. Do high-level testing – find people created in the first place. Ask for
who use it, or customers and just surveys or any testing results asking
ask what they think about the customers how they feel about the
current solution, what they like, what idea and what needs to be done.
is a problem, what content they
don’t understand, where they don’t
know what to do, etc. Analyze the
blockers first.
Analyze the project as a whole – is it
Current Status
understood what the project does?
Purpose
Do you know where to navigate,
what
Goal
options you have? How many
clicks are needed to convert, or
Success
make the desired outcome?
10 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Purpose
Start with asking a question: Why do you
need this website/app in the first place?
Current Status
Sometimes there is no answer, or just
Purpose
everyone has it, you need it too.
because
Goal
It’s important to know the main purpose
Success
of the project.
11 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Main purpose options examples
○ Sales
You need to sell a product, or generate leads
○ Image
You want to show our brand presence or build a brand
○ Communication
You need to inform or educate people
Based on purpose, you know where to
focus and what content could be there:
→ Sales
Product images, product benefits and features, reviews
→ Image
Brand story, brand background, team, capabilities, services
→ Communication
Articles, blog, videos
The project could be a combination
of multiple purposes of course –
sales vs. image, f.e. an agency
business. Write down your priorities,
if you care more about your image,
or you want to make sales. Make the
hard decision and prioritize one.
12 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Goal
Based on the purpose of your product,
Current
set goalsStatus
to achieve it. This is heavily
Purpose
on content and what to
focused
Goal
communicate and how. What to add,
Success
what to get rid off.
13 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Goals
Write down goals checklist.
Examples of goals following the
purpose could be:
→ Sell this product.
→ Get a lead.
→ Get contacted.
→ Browse projects.
→ Read an article.
→ Get an information.
Start with this:
Does the current content fit the
purpose?
What needs to be made more clear
and what needs to be minimized?
Quite often you just have too much
content nobody would read, or is
not relevant to the purpose.
Edit ruthlessly.
Cut everything that doesn’t lead to
your goal.
14 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
Success
It’s often forgotten to set a clear answer
Current
of how toStatus
measure that you’ve done a
Purpose
good job. Do this at the beginning and
Goal
can always come back to it. It’s ok to
you
Success
edit it in the future, but keep this in mind.
15 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
01 ○ Why
“Every UX designer should follow their
intuition, but always use their data and
feedback from real users to ensure
quality user experience.”
Current Status
Purpose
Goal
Success
16 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Checklist
A ● Checked the current status
● I know what the problem is
● I know what works and what does not
● I did high-level testing
● I’m aware of the USPs
B ● I know the purpose
● I know why we need this to be built
● I know the priorities
C ● I know the goals
● I have a checklist of goals
● I checked the content to fit the goals
D ● I know the goals
● I know how to measure goals
17 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02
Data
Analytics
Mobile vs. Desktop
Focus points
Competition
18 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Check the available analytics, heatmaps,
and customer behaviors. By analyzing
current statuses and pain points, start to
shape the basic architecture of what the
product should include.
19 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
Analytics
Always get access to analytics, like
Google Analytics, or Hotjar, if the product
already exists. Most people use
assumptions, but are not aware what
users really do, or want to do. You can
either fight it, or change the product the
way people are using it.
Current Status
→ Page visits
Purpose
What pages have the most visits? Which have low volume?
Goal
→ Behavior
Success
Where users click, what pages they leave immediately?
20 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
Mobile
vs. Desktop
Two platforms with a different usage and
journeys – for example you mostly use
your mobile on the go and do more
complex tasks on the desktop. Mobile
and desktop versions can use different
navigation and layout to reflect that.
21 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
What users do on a different plaform?
→ Differentiate data
Differentiate what users do on mobile vs. desktop – different data
→ Priorities
Data could lead to different mobile vs. desktop versions.
→ Mobile
Could be more based on looking for info – contact, location –
could be prioritized on mobile version
→ Desktop
Could be more imagery, more text, f.e. focused more on visual
content and video, which is not played so much on mobile
22 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
Focus points
Compare the data with your goals.
If some key parts of the product are
struggling, focus on these first.
→ Where to start
If some of the pages is important, like a shopping process and a
lot of users don’t finish it, they drop out – focus on this first
→ Set priorities on pages that doesn’t deliver
23 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
Competition
You don’t have to re-invent the wheel.
Most problems have been already
solved. Look around for similar or even
the same solution on the market.
Find a proof of concept.
24 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
How to analyse competition and the market
→ Look for similar solutions
If other products are using a certain solution, users
should already understand it.
→ Competition & other industries
Analyze competition and also products from another fields – how
they sell, how their structure looks like, what interactions they use.
Find at least 10 pages/apps and go feature by feature. This would
help you in the next steps.
→ Don’t re-invent the wheel
→ Don’t be discouraged
If someone does it almost the same as you want, that’s just a proof
of concept. Find a way to improve it, f.e. focus more on story, or
more on product.
25 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03
What
Information Architecture
Model Users
Features List
Pains & Gains
26 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Before actually making the design, we
think of how the elements are
connected, to have a basic overview of
the whole project. We also create
personas/model users and map their
journeys with the product. We analyse
the pain points and where are the
opportunities for the future.
27 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Information
Architecture
The first step for later screenflow and
wireframes. Create a map to clearly see
where are all the information and content
in the product, and how they’re
connected together.
28 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Create a site map, this helps to know how
much work you have to do, how many
screens you have and how they’re
connected. Simplify as you can.
It could be a classical column site map,
or I prefer a mind map to see where the
user can go from other parts as well.
29 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Model Users
Most people heard about “personas”.
I think this concept is a bit out-dated, but
it’s always good to map your target
audinece and their goals.
30 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
02 ○ Data
What to look for with Model Users
→ Check analytics
Look for gender, location, or age
→ Model customers
Age, education, brand preferences
(their taste, financial background)
→ Needs
Goals – how the success looks like
Pains – what problems they’re trying to solve
Why they visit the product
What they need to do
31 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Features List
Following your competition analysis and
information architecture, create a board
with a column for each screen/part of the
product and write down needed
features.
32 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Focus more on actions and functionality
for each step of the journey. This will later
be part of a bigger board at the end of this
chapter.
33 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
Pains & Gains
Every part of a product could have points
where user is happy and we can leverage
that, or where user might struggle, feel
lost, or do something undesired. Think
from both perspectives, especially the
pain one – no product is perfect.
→ Use stickers
For every screen/part of the product, write down the gains – what is solved
properly, and pains – what could be a blocker or a problem for the user
34 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
03 ○ What
How to connect what you know so far
into a single board
→ Steps/Screens
→ Actions/Context
→ Pains & Gains
→ Interaction with other
parts of the product
→ Competition &
research
→ Features list
→ Future opportunities
35 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Checklist
A ● Prepared the information architecture
● I know the scope
● I know how the screens are connected
B ● I know the mode users
● I know who is the target audience
C ● I know the features
● I know what features to use to achieve our goals
D ● I know the pains & gains
● I know what users might like
● I know what the problems could be
36 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
04
Priorities
MVP – Minimum Viable Product
Project Phases
37 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Before building THE big product, we
need to know what features are
essential and which are nice-to-have.
Set project priorities and build around
the functionality without the product
can’t survive.
38 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
04 ○ Priorities
MVP
MVP stands for minimum viable product.
Cut down the features to a bare minimum,
in multiple rounds to have a “core” product.
→ Priorities
Set clear priorities of what is essential for the product
– what the product really can’t live without
→ Two ways to build
Build whole product and then cu
Build just an MVP, but keep the door open for future addons
I prefer version 1, but it’s more budget heavy (good for you btw)
→ Cut the clutter nevertheless
39 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
04 ○ Priorities
Project
Phases
With the MVP in mind, set clear phases
when the cut-out features will get into the
spotlight.
→ Phases
Set phases to build a product – features should have
1–3 priority. F.e. the homepage is the key, start with
that, subpages after
→ Milestones
Know when you need to have a confirmation of a certain part in
order to continue – so you don’t waste time.
Do one thing at a time
40 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Checklist
A ● I know the MVP Scope
B ● I know the project phases
41 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05
Screenflow
Battleplan
Points of Entry
Storytelling
42 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
This is where the real fun starts. Take
screenflow as an advance version of
the information architecture. You’ll start
to design the basic layout, what type of
content is needed and where and how
users get to the product and interact
with it.
43 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
Battleplan
Imagine you see the Earth from a plane –
you see what’s below in not much detail,
but you have a great overview of all the
pieces and parts of land. You’re able to
create a battleplan and that’s what
screenflow is about.
44 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
→ All screens & connections
Screenflow as an advanced information architecture.
Already have a high-level idea about structure, what content
goes to each page, which is also needed for a copywriter
Already think about layout options – where images or text go.
Check the level of detail above.
45 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
Points of Entry
Think about where the user can land using
different sources, and occasions, if the
context is not lost.
→ Points of entry, points of re-entry
Map sources of traffic, on what page would a user land, using
f.e. Google, direct links or social links.
Points of re-entry – f.e. going straight to the product list easily,
with no time lost on a landing page/homepage (f.e. Shop button
in the menu)
→ Desired outcome
What do we want the user to do, where to navigate easily?
F.e. visit the homepage each time, since we publish product
updates often? Go to products listing right away?
46 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
Storytelling
We have to approach most users today
the same way we would approach
children. If we just let them be free without
any supervision, they might very well crawl
too close to an electrical socket and we
would experience quite an unpleasant
bounce rate. But in a properly secured
playpen, we can supervise and correct
their direction. With a firm but gentle
grasp, we are able to show them efficiently
and clearly which way they should embark
upon. Storytelling….
47 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
Micro-interactions Site Direction
It may be the first step, how to improve Recall the look of pages you visit
the user experience on a static webpage. throughout the day. The cover, how it
Better to direct them where you want works, benefits… sound familiar? The vast
them to go, meanwhile giving the user majority are subject to an evolving trend,
additional options. Can this be only size-limited carousels are replaced
contradictory? You will find out in the text by hero images. Their structure is still
below, that the user should only have one familiar, content is placed on strips of a
main option. This basic logic behind onepager web. Concurrently, this is not
micro-interactions stays intact. We only functional in many instances as we don’t
let the user peek around the corner to know what awaits us as we scroll further.
see what lies ahead. Examples include This type of page then leads us to a
Force Touch on iOS, or the different type detached state with zero interest as we
of likes on Facebook. Micro-interactions are overloaded with information. How
are everywhere. Even e-shops should be many pages do you usually scroll through
in on the trend. Right next to the option without realizing what you have actually
“Add to Cart” a user will immediately have read? In that instance there are far too
options to check out or even to keep many options for the user to choose
shopping. Making these commands only from, which is what we want to avoid.
in the shopping cart or on a separate
page creates too many clicks and Users might accept such a bad flow only
distracts the user from the main option — with Google, but not on your site.
other products.
That type of site is a sort of a splash — try
to google “Google Docs” — why does the
first link not lead us to the application we
want, but to a page with some
meaningless image with a dull headline?
It doesn’t get better further on — just
static scrolling. How about taking a user
after the first click directly to the desired
template? Otherwise it takes up the
entire screen and do nothing useful.
Users might accept such a bad flow only
with Google, but not on your site. Expect
the “dumb user” with which you can open
up far more possibilities and choose a
completely different direction.
48 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
05 ○ Screenflow
What does a user see Do hero images make
first on a page? sense?
A perfect wireframe doesn’t influence the Hero images have become a such a
fact, that a user first sees (or rather their trendy thing lately. As billboards with
brain) color and, as we prefer to flashy and cliche slogans have become
subconsciously read, the placement of obsolete, we have moved this perverse
the text. If we consider UX and design approach to the web. The entire screen is
together as a whole, we can focus the then taken up by some illustrious picture
attention to where we want it to go. with a headline, from which we don’t
usually get any information about the
product we’re interested in. At the same
time we’re talking about the most
lucrative part of the entire web, the first
When possible, chose thing a user sees. And it is filled with
ONE option some stock photo with, even worse, a
number of buttons to confuse us. We
need to indicate to the user what awaits
What else would a user click on? On what him further, whether it means cutting the
you tell him to. options to a minimum or stripping the
composition and attention-grabbing
texts. It should be stated at the very onset
what you can find on the webpage and
where you actually got to.
49 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Checklist
A ● Prepared the battleplan
● I know the structed of every screen
● I know how the screens are connected
B ● I know the points of entry
● I know from where the user visits the product
● I know from where user can land in different occasions
C ● I checked the story
● I know how to guide the user through the product
50 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
06
Wireframes
Low-fi/High-fi Wireframing
Prototyping
51 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Based on the previous steps, we start to
draw the first sketches and wireframes.
We give shape to an idea and discuss
the basic structure, layout, and content.
Working side by side with the client at
least one day a week is very useful. Real
collaboration is fostered by receiving
instant reactions and reshaping the
product from discussions, not solely
relying on feedback via email. All the
wires and structures are a mutual
product between you and the client.
Before selling, focus on building a
product together to test with target
groups and mode users. Quickly iterate
to get the final structures and wireframes
so graphic design can begin.
52 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
06 ○ Wireframes
Low-fi/High-fi
Wireframing
Based on your screenflow, start to design
more detailed screens. Start with paper
sketches and build more in Sketch, Figma,
or Adobe Xd. Start in grey-scale to not get
influenced by any design taste.
53 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
06 ○ Wireframes
→ Sketching vs. detailed
Low-fi – start with paper sketches, fast iterations
Hi-fi – Sketch, Figma, Xd, prepare the whole layout
→ Map the content
For hi-fi wifeframes, already know the content length to prevent
future massive edits, know where CTA needs to be to fullfill your
goals and purpose of the product.
Where descriptions are needed to guide the user.
Where images go and what type of images.
→ Hi-fi details
Know where the “folds” are, what user will see in most browsers,
or devices, where is the main message, image or CTA.
What size of content would fit to certain screens.
Where to display controls – floating buttons, sticky menus.
Don’t use final UI elements, start with black & white screens.
54 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
06 ○ Wireframes
Prototyping
Using tools like Figma or Invision, create a
clickable prototype, to simulate the flow
and interactions. Always present the
wireframes as a prototype to avoid
unnecessary set-backs.
55 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Checklist
A ● Created all screens in hi-fi wireframes
B ● Created a clickable prototype
56 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
07
Testing
57
The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
Don’t just rely on your gut feeling. What
might look simple and clear to you might
not for other people. Go out there.
Collect real data. Observe how people
are using your product. Check if your
storytelling matches.
58 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
07 ○ Testing
Go out there
The best way to test is to publish and
collect real data – you never know unless
users really use it.
→ Qualitative/Quantitative
Qualitative – set a scenario, like we need you to buy
this certain product, leave the test person to do it and
observe, don’t guide, observe what he/she does,
where he/she stops, what he/she reads, what he/she
does, measure if the goal is fulfilled
Quantitative – send it out there to anyone with basic
questions – do you understand what the product is,
what could you do there, what would you think about
this or that?
→ Hotjar, Analytics
The best way to test is to roll-out ASAP and collect real data –
you never know unless users use it.
59 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
08
You
Take this process and adjust it to you.
Be bold. Be brave. You always go through
struggle to the stars. Keep going.
60 The Ultimate UX Survival Guide 8 Steps To Never Get Lost Designing a New Product
The Ultimate UX Survival Guide
8 Steps To Never Get Lost Designing
a New Product by Tom Garcy
Illustrations: Vítek Mecner 2020
Version: 1.0, November 2022
© 2022 Tom Garcy, All rights reserved
