The #1 edition

UX Buddy
Workbook

Made with by Bojan Novakovic

Before we kick off ...

I need to tell you that UX Buddy Workbook doesn't guarantee any

personal or professional improvement. Content written in this Workbook
is based on personal experience and does not mean that the methods
explained here will have any kind of impact.

Also, I would appreciate it so much if you could support me as the author

by not participating in copying, reproduction, scanning, uploading, and
distribution of this Workbook - including amazing illustrations from
craftwork.design - via the internet or via any other means without my
permission. Please purchase only authorised editions and do not
participate in or encourage piracy.

I know I can count on you. Published in November 2020, on uxbuddy.pro

The UX design is
much more than the
lines and shapes.
It takes a tremendous effort to
design something that actually
works.
I'm going to walk you through my collection of thoughts
behind my design decisions. In a way, it's very personal.
Almost like a diary of my design thoughts.
A little bit
about my
experience
I’m fortunate that I’ve been
able to work on so many
projects. Most of them were
the early staged startups.

I’ve designed prototypes in different industries, such

as social media, fin-tech, food, health, fashion,
makeup… the list goes on and on.

A lot of times I get asked: “Bojan, how have you learned

design in such a short time?”. The most honest answer
is: "By putting in the work every day."

05
Every project I’ve been
working on was a learning
experience.

This is why we’re going to do the same thing in this

Workbook. We’re going to pick a project and design
the user experience for a part of that product.

I believe this is one of the most beneficial learning

approaches. You actually get to brainstorm on a
specific project and think about different
solutions.

It will be like we’re working together for the same

client, on the same project. Well, almost.

06
 Thank you for being here.
Now, let’s roll up our sleeves and get started.
Pen and
paper
Before we jump on a project,
let me tell you about one of
the best tools to practice
UX design.

It’s something most of us have at home. It doesn’t

require any digital skill or whatsoever.

It’s pen and paper.

What’s so great about pen and paper is that it’s so easy

to sketch something down, start over, and even test.

09
You don’t have to worry about the visual aspect. Truth
to be told, my paper sketches look like I’m way too far
from being a designer. But who cares, I’m keeping
all of them for myself, and not showing them to the
clients anyway.
Grab a pen and paper
So, the first thing when I’m starting a new project, I
come up with a story. To do that in the most efficient
way, I grab a bunch of papers and start thinking about
the user flow.

Usually, I’m designing the app interfaces, so each A4

paper is like one screen in the app. When I sketch down
the first flow, I bring together the papers and move
Sketch
through them with my finger. You’re going to be
surprised how many UX flaws you can discover with
this simple method. It’s going to save you so much time
later on because you built the right foundation already
from the start.

So, prepare some paper and a pen. We’re going to pick

the project now.
Test with fingers

10
Let's pick
the project
Today we’re picking an app
that shows the happy hour
deals nearby.

What is happy hour? You may have seen this in the bars
in your local area.

I am referring to a 1 or 2-hour deal that drops the price

by, say, 50%. For example, bar XYZ has a happy hour
deal every Fri and Tue, from 9 to 11 PM, and all cocktails
are 50% off.

Ok, so we cleared out what the happy hour is.

12
One of the most important
things when designing the
user experience is knowing “User-centered
your customer.
design
means u
nderst
anding
what yo
ur users
need, h
ow they
think, a
nd
how the
y behav
e– and inc
orporat
ing tha
t
Who and how old are they? What do they like? In what underst
anding
into eve
ry aspec
t of you
environments would they use this product the most? process
."
r

We’ll see later on why this matters. For now, let’s just
say that our client did homework and made research on — Jesse J
ames Ga
rrett.
their user persona. User Ex
perien ce Desi
gne r

We’ll call our user persona Tamara. She is 24 years old,

finishing up college, and has a part-time student job.
She’s very sociable, likes to hang out with her friends,
and always on the lookout for some great deals both
online and offline. Oh, and she does not travel often.

Now that we know who’s our ideal user, we can start

thinking about the user story.

13
 Looking for
great deals Likes to
hang out

24 years old

Does not
travel often

In college A part−time
student job

14
Home
screen
In this Workbook, we are going
to tackle the home screen of
our app project.

"Only the home screen?", you might ask. No worries,

there is more than enough material to brainstorm the
home screen. After all, the home screen is one of the
most important screens. In many apps, it is THE most
important one. Who is Tamara?

Anyway, let’s think about Tamara for one second. If you

remember, she is our ideal user. Let me quickly share a
few words about her again: 24 years old, finishing up
college, and has a part-time student job. She is very
sociable, likes to hang out with her friends, and always
on the lookout for some great deals both online and
offline. Oh, and she does not travel often.

16
Why are we thinking about Tamara so much? Well, her
personality, likes, and dislikes will impact our design
Components
decisions. The home screen is the first thing the users
see when they open the app (well, usually they see the
logo for a few moments in the loading screen, but the
home screen is right after that), therefore it’s even
more important to structure this screen right.
What is Tamara Happy hour deals
looking to achieve
in our app?

Let’s quickly re-call what our

product is all about - finding
the happy hour deals.
Nearby bars

What are the other relevant components on the home

screen, besides just deals? By ‘relevant’, I mean the
ones the user can physically reach (preferably quickly),
otherwise, there’s no point taking the screen real
estate away to show bars that the user can not go to.
The answer is - the nearby deals/bars. This is one of the
most crucial components. If it’s nearby, it enables a user Search
to be there fast. Let’s keep that in mind.
17
The next important component for the user would be Why am I mentioning this? Because this very thing will
an option to search for a specific bar. be the reason for our first design decision.

Speaking of search, let’s not forget the scenario where We’re going to use the nearby component as the
Tamara would like to search for some bars in another default one, meaning we are going to show only the
city (meaning not where she is right now). Perhaps bars that are close to Tamara, as quickly as possible
she’s traveling next weekend and she’d like to check without having to tap anything. The bars in another
some happy hour deals in that city, so she can plan the city are not relevant to her unless she would travel
evening in advance. often. But because we know she doesn’t, we can
implement this option in a separate flow.

Let’s just stop here for a

second. We mentioned 2
location components - nearby
and another city.

Right now it’s even more important we know who

Tamara is. We said that she does not travel often,
remember?

18
Remember, we don’t want the
users to do more taps than
what is needed. It’s just time-
consuming, and with every
tap, the attention could drop.

19
Let’s quickly think, though,
about the solution if Tamara
would be a heavy traveler.

This time she is a stewardess, and we're designing the

app for the aircrew to plan their hangouts when
traveling around.

In this scenario, we could think about the solution that

would enable Tamara to have a very quick way to plan
the whole week in all the cities she and her crew will be
visiting. This would require a different approach to
design the features than what we are going to do in our
app.

But let’s not dive into this. Our Tamara is waiting for
the designs!

20
 Happy Search
hour deals

Ok, we are back. Let’s

sum up what we have so
far in the home screen.

Nearby
bars

21
Wait, we’ve only mentioned
these 3 components so far?

Actually yes. It sounds little, but that’s almost

everything we need to start designing the home
screen. Why almost? Because we still haven’t broken
down the most important component of these 3. If you
think for a second, what component am I talking about?

It’s the bar. We need to decide what will the bar card
display to the user.

I’d like you to stop for 15 minutes and come up with all
the elements you think the bar card on the home
screen should have.

3, 2, 1, go!

Click on the notebook and add your notes

22
Welcome back. How was the
brainstorming?

I wish I’d be able to see your list now, but that’s fine.
What’s important is that YOU do the thinking. The
deeper you can dive in, the more you can understand
Tamara, the better you become at design decisions. In general, if you have the
If we step in Tamara’s shoes and we imagine browsing opportunity to show the
through different bars, what are the things she would
visuals, do it. It will make
like to see and read? The bar name, obviously. What
else? We mentioned the nearby component above, so the screen much more
she might want to see the location of the bar, or how
far it is from her (more about this later). There is also
interesting, perhaps even
the bar photo. Do we show it? In general, if you have practical for the user.
the opportunity to show the visuals, do it. It will make
the screen much more interesting (perhaps even
practical for the user), but you need to be careful with
the sizes (more about this later).

Do we have all the elements? Let’s see: bar name,

location (proximity), photo. Is this it? Let’s sketch!

23
Hm, is something missing there? What do you think? I
think it does. Let’s go back to the basics of this
product. What is our app about? It is about helping
people find happy hour deals.

The reason I sketched this version on the left is that

some of my students did the same - they forgot to
include one of the most important elements, the
discount.

Let's add the discount to the list, and see then how it
looks like!

24
What about now? Is this it? Before answering, let me
just quickly explain why does the discount look
different than the other elements. Well, it is the main
(or one of the main) elements the users who'd like to
save money will be looking for. While scrolling, this
element is easy to spot. It is highlighted in a separate
row, and there are no other elements on their left or
right side that would disturb the view.

So, back to our question. Do we have the bar cards

ready? Let’s try to imagine the real scenario - you’re
meeting with friends today at 8 PM, the venue hasn’t
been decided yet, and you’re going to use this app to
check some bars around. You land on the home screen,
there is the search bar to search for a specific bar, but
since you don’t have anything specific in mind, you
want to browse through the list.

Did you figure out the missing element? I quietly

sneaked the element in the last paragraph. If you didn’t
catch it, let's carefully read one more time the
paragraph above.

25
It’s the time. I mentioned ‘8 PM’. In the scenario we
imagined above, you’d like to know whether the bar Location,
runs the happy hour at the time when you meet your proximity
friends, and if it doesn’t, when does it.

Bar name
We can also take it to the next level by giving these
time labels some colours, such as green and orange.
The green colour usually provides the feeling of safety.
In our case, it could mean that the bar is running the
happy hour right now. Orange colour could also mean
Photo
that the bar is running the happy hour right now, but
it’s slowly going to end.

Let’s sum up all of the elements within the bar card so

far: bar name, location (distance), photo, happy hour Happy hour
discount, happy hour time. time

Happy hour
But there’s something else I’d like to add. What is it? discount

What else?

26
Again, knowing whom
we're designing for, makes
our designs more relevant
for them.

Yes, it's so important that I just had to tell it

again, and I will probably do it more.

27
Remember, the users like Tamara is, they want to save
money, right? So the price usually impacts their
decision.

With this in mind, we could offer users something that

would help them make a decision based on the price.
What do you think about the price levels, indicating
how expensive this bar in general is?

Oh, and there's something else we could do. It's a

pretty standard thing that enables users to make a
shortlist of their favourite bars or the ones that they
just noticed, but would like to come back to them later
when they're not in a rush. Yes, I'm talking about the
feature to save/like the bar.

Let me show you the sketch on the right side.

28
Much better, but there is still
one thing I’d change. Take a
minute and think about it.

I know, I know. Why don't I just shoot all the

components, right? Well, the key is in brainstorming.
By articulating my thoughts so widely, I can give you a
The stages of the user
better feeling of what's going on behind all these
design decisions. journey matter. Each
I've already mentioned the location vs. distance fight
screen should display just
above, so here it is. I would suggest not to overwhelm enough info for the user
the users with the exact address, because it might be
too long, the layout looks too crowded, and it’s just not
to move forward.
worth filling out the screen real estate considering the
value it brings to the user. Yes, the location is
important, but do you think that in this very stage
(home screen), would the distance (such as '1.3 miles')
not be enough for the user? If they are interested in
this bar, they will most likely tap the bar card and read
more details about the bar anyway (and this is where
the exact location could be provided).
29
Here's the distance instead of the exact address:
You may think: “But why not
display both location and
distance”?

That’s a good question. This right here is an example of

one of the hardest design decisions - dilemma what
elements to display in each step of the way of the user
journey.

You see, each step (or stage) of the user journey has
its own specifics. This is why I like to outline the user
journey in a written format as well, to make sure I dive
in enough. By knowing the user journey, we can make
better design decisions. And what is the better design
decision? The one that enables users to get what they
want with minimum time investment as possible (I
mean the user's time investment, not the designer's).

30
The less screen real estate
each bar card takes, the fewer
time users need to find what
they are looking for - which is
the happy hour discount.

Therefore we need to make

sure that the user can see as
many bar cards as possible
while we have their attention.

31
Speaking of the screen real estate optimisation, next
we need to discuss the layout when grouping the bar
cards. Will we go with the full-width bar cards, grid
view, or vertical list?

Let’s stop for 15 minutes, so you can think about it and

provide an explanation for your decision.

Click on the notebook and add your notes

32
Well done! It’s really important that you brainstorm does, we are still going to provide a bar photo, just in a
first, go through the potential solutions, and only then I smaller dimension.
present my point of view.
Let’s see an example with the full-width bar cards:
Let’s start with the layout I would not go with: The full-
width bar cards. The reason is simple actually - It
requires too much of the screen real estate.

Now, I’m not saying that the full-width cards don’t work
in general. They do work, but it’s not the optimal design
decision for our home screen, because the elements
we defined above (bar name, distance, photo,
discount, time, price level) can fit in a smaller card as
well. Again, another reason why breaking down the
screens to the components and elements is smart to
start with, because your design decisions are based on
that.

Also, the full-width layout requires a big photo which in

our case is not really relevant. It would be relevant for
the dating app, but not for our app. Remember, Tamara
is looking for ways to save money. She doesn’t care so
much about how the bar looks like in this stage of the
user journey (home screen). But in case she

33
Pretty big, right? I know, these low-fidelity mockups
are not 100% realistic, but it gives you the feeling of
the potential size. Even if we move some of the
elements on a photo, the size would still be too big.

So, we crossed out the full-width cards. Smart! This

means we are for sure going to use the smaller cards.
This leaves us with 2 options: grid or list view. It’s worth mentioning that
within the same or similar
screen real estate that
So what view are we going to the full-width card
choose, list or grid? requires, we can place 2
different bar cards in both
Now, I wouldn’t dare to say which version would
actually perform better, because we should run some
versions (grid and list).
A/B tests to find out. But a lot of times designers,
especially freelancers, don’t have the time nor the
resources to run the tests for the client, so we need to
make our best assumption and move on. By the way,
brainstorming about different potential solutions gives
you the power to efficiently articulate your design

34
decisions to a client. So, do it, always. somewhere at the bottom part of the screen (left or
right side, depending on which hand you use). Even if
Back to the decision - What would I do is picking the list you’re holding your phone with one hand and use the
view, and here’s why. pointer from another hand, the finger usually doesn’t
go completely off the screen.
Before explaining my decision, please note that both
versions require about the same screen real estate. That being said, while scrolling down our home screen,
Within a similar height, the user can see 2 different bar it’s most likely most of the users would cover different
cards in both cases. parts of the bar cards while scrolling, if we go with the
grid view. But if we go with the list view, we can make
sure that the most relevant information within the bar
card is going to be displayed on one side. Most of the
people are rightists, so we can make sure that the
So, why the list view, and not most important elements within the card would not be

the grid one? on the right side. Preferably, they would not be on the
left side either (we don’t want leftists to feel left out).

Grab your phone for a second and scroll down on any Now, I'd like you to take your time and sketch 5
page. If you’re like most users, your thumb doesn’t go different bar cards in a list view. Don’t forget to take
completely off the screen when you're not scrolling. into account what we discussed about the left and
right sides. Also, keep in mind that all that Tamara
For example, you’re scrolling down the Instagram feed, wants is to find a great deal near her (ordering the long
you notice a catchy photo, and you stop scrolling to Uber ride means more costs and less saving money
see it better. Where’s your thumb? It’s probably which is not aligned with her goal). Let's sketch!

35
Great job! Let me explain some of the decisions.
I also did my part, and here’s how my sketch looks like:
The bar photo is on the left side because it's a pretty
usual thing, but also I wanted to avoid positioning the
discount on the very left side (not a good solution
when scrolling with a left thumb).

The happy hour discount is still in its own row, kind of

isolated from the other elements which gives the user
a clear look at the discount while scrolling fast down
the screen. Remember, a lot of users just scan the
content without actually reading it, so designing the
discount that stands out makes total sense.

The bar name is prominent as well. Some users are

used to go to specific bars, so seeing the bar name
that stands out might be useful.

The price level and time also provide a clear look on

them because they are in their own row.

Now, when it comes to the distance, it's isolated on the

right side. We could put it right next to the time, but it
would look too crowded. Having it isolated gives

36
the user a better feeling of the distance while scrolling they need to spend to get the results, the more likely it
down the screen. Potentially, we could play around and is that they will not be returning back often in the
swap the price level and distance. future. In fact, they might even delete the app. So, it’s
our job to help them spend less time to find the happy
Before we move on to the next subject, please note hour discount. This will form a positive user
that potentially we could have a different dynamic experience, will encourage them to come back for
within the bar card. For example, the bar names would more, and even spread the word about our app to their
be smaller, and the main title would be something like friends and family.
'30% off on all beers'. This depends on the product
nature, and whether the bars would run the happy hour We’ve already mentioned the search bar. It’s a way for
deal on all drinks or only on specific ones. users to quickly find what they’re looking for. But only if
they know specifically what they are looking for (for
example, the name of the bar). But what if they don’t
know specifically? Let’s say they only know the time
they are meeting with friends, and that they want to
Now that we finalised the bar find something within the walking distance. How can
card design, let’s think about we help them quickly find something that works for
them?
helping users save time when
looking for a happy hour deal. The answer is - by eliminating the choices they know
for sure are not an option. In general, the more choices
you have, the harder it is to find the winner. In design,
Yes, we want them to spend as much time as possible we call this feature the filters.
on the platform, but the irony is that the more time

37
The primary job of the
filters is to help users save
time by narrowing down
the number of choices.

38
Filters are being widely used
by many platforms.

But it’s not enough just to implement the feature. We

need to design it in a way it’s going to be efficient for
the user. Otherwise, it makes no sense to design it.

I always start by thinking about all the potential filters

the user could use. At this point, I don’t think about
design yet.

Let’s go back in Tamara’s shoes and come up with all

the potential filters we should design for her. For
example, one filter could be the rating which would
enable users to see only the bars that are highly rated.
What could be the other ones?

Counting down 15 min starts now!

Click on the notebook and add your notes

39
Awesome, let’s dive in. I also did my part and here’s the
list of some potential filters:
We can use the full potential
of the filters only if we
Price, proxim
organise them right.
mile, rating, i t y - 1
discount - 50
%
happy hour ac off, Ok, we have the list of filters. What next? Let’s think
t
right now, typ ve i
e o about creating a new list where only the most relevant
music, outdoo f
... r s pace filters would land on. We can call them the primary
filters. Many times, because of their fast nature, I call
them the fast filters, because they can be managed
from the main screen without having to go to the filters
screen.

Do you remember I mentioned above that the filters The thing with the fast filters is that we really need to
need to be efficient for the user? Now when we have know our users and how are they using the app. The
the list of filters that we are going to use in our design, more usage data we have, the better decisions we can
it’s time to think about the way we are going to make. But when we don’t have much data yet (or zero
organise them. It’s the organised design that makes data), we can make our best assumption by observing
them efficient. how other products are handling this, and by analysing
what we know about our potential users (Tamara). The
more we can understand their needs, the more
relevant primary filters we can come up with.

40
Why are the fast filters even important? Well, with
them, the user can narrow down the list of choices
even faster, by just making one tap, and not having to
go to another screen to select filters.

Should we take 10 min to think about the fast filters

from the list above? You can use the filters from your
list as well, in case you have something more relevant
that I haven't added.

Talk to you in 10 min!

Click on the notebook and add your notes

41
Nice job! The more frequently
we dive in, the better designer
we become.

These thinking processes are really important for our It’s nothing wrong if your list is not the same. Just
design development. make sure that you can always articulate your design
decisions to the clients.
I also did some thinking, and here’s my list of the fast
filters: Here’s my explanation of the primary filters I chose.
Let’s start with ‘Happy hour active right now’. If we go a
step back and think about the purpose of our app, it’s
about helping people save money at the bars nearby,
Happy hour a right? But because the happy hour deals have a time
c
right now, dis vet i
c o
50% off, prox unt - restriction (usually 1 - 2 hours), we need to make sure
1 mile i m i t y- people have a fast and simple option to explore only
the bars that have the happy hour right now, at this
very moment while being in the app. Remember, some
users are going to use this app while being outside,
and they need to figure out very fast where to go now.
So, what would be the fastest way to do that? It would
be brilliant if we could allow them to do that by a single

42
tap. And guess what? We can do precisely that by
putting the ‘Active now’ filter among the fast filters. By
tapping on it, the list of bars would automatically get
updated by showing only the bars that are running the
happy hour right now. If you want to remove the filter,
you simply tap it again to unselect it. Magic.

The next fast filter on my list is 'Discount - 50% off'. Or I

should rather say it "was" on the list. I'm taking it off
both lists, but I wanted to talk about it first, so I can Great design is not only
show you my thinking when the situations like this about the UX for the end-
happen (when I change my mind).
user. It's also about the
Now, we can all agree that it might be useful for users
healthy balance between
to have the fast filter that says something like '50% +',
which allows them to see only the bars that run at least UX and business.
50% off. But this brings concern on board. What does
this do to the visibility of other bars? This is especially
important if the business model is based on purchasing
vouchers for specific bars. We are not going to talk
about the business in this Workbook, but it's important
to highlight that great design is not only about the UX
for the end-user. It's also about finding a healthy
balance between UX and business.

43
Now, I'm not saying that for
the balance, the UX design has
to be compromised.

No, no. The UX design should never be compromised at So, these are our fast filters: 'Active now' and 'Within 1
the level where the users would feel the pain point. We mi'. Potentially we could have more of them, but I want
can and we need to find the way this doesn't happen. In to keep the rest of them in a separate filters screen
our app, I believe that the UX design is not and focus only on the essential ones on the home
compromised when we don't allow users to see only screen.
the bars that run the happy hour with at least a 50%
discount. All bars have a discount anyway. It would be Shall we see how does it look like? Let's!
another story if not all the bars would run a discount. In
that case, the general 'Discount' filter might be a
better fit, to see only the bars that provide the
discount, any type of discount.

The next fast filter is 'Proximity - 1 mile'. It's pretty

simple actually. By tapping on it, you allow users to see
only the bars that are very close to them, say, 1 mile. In
the interface, we can name it 'Within 1 mi'. This
becomes especially handy when we're outside and in a
hurry.
44
There's one last thing I want to
tackle before we hit the end

Usually, I like to structure the main content (bar cards

in our case) in a way that is more personalised for the
user. Only if this is possible, of course.

How can we do that? If we think for a moment, let's say

Tamara has been a returning user, and she has already
used the service multiple times. By 'using the service',
I'm referring to purchasing the vouchers through the
app (in case if this would be allowed). This way, the app
assumes what bars has she visited.

Now the question is - how can we make the experience

faster for Tamara to decide which bar to visit next? Let
me show you on the next page what do I have in mind.

45
It's the section of bars I've recently visited.

What's important here is that we don't want this

section to take a big part of the screen real estate,
because there is another section below that should be
above the fold. So, instead of the vertical list, we are
going to show the recently visited bars in a horizontal
view. If there are more than 3 bars, the user can simply
scroll horizontally. We can also provide an option to
see all recently visited bars on a separate screen if
there would be too many of them.

Keep all important elements

above the fold

This means that all important elements are visible

when the screen first loads. Take into account that
there are a lot of different device sizes, and ideally we
want to have an optimised design for all of them.

46
This is why in our case it's important to have the
'Popular' section above the fold when landing on the
home screen. Otherwise, the user might not know they
need to scroll down to reach this section.

Potentially, there can be even more sections, such as

'Live music', 'Hot deals' etc. But in this case, each
section should show only a few bars with an option to All important elements
see all of them. There are 2 reasons for that:
should be visible when
1. The above-the-fold concept explained above. the screen first loads,
2. Faster scrolling experience that allows users to
quickly scan all of the sections. If there would not especially the calls to
be the 'See all' option in each section, the user
action. Take into account
would need to do a lot of scrolling to see all of
them. different device sizes.
This is it! We've covered most of the essential parts of
the home screen.

That being said...

47
Have we just reached the end
of the Workbook?

I believe we did. But it was fun, right? I hope I've

succeeded in giving you insights from a part of my
design process.

Why just 'a part'? Because there's so much more we

can discuss, and hopefully, we will in the future.
Perhaps new Workbooks are around the corner, who
knows.

If the Workbook helped, I'm over the moon! If it didn't,

do reach out, and let's see what could be improved and
how can I help you.

Thank you for being on this journey with me, for

trusting me, and for becoming a better UX designer.

On your success,
Your UX buddy
Let's talk. I'd
love to get your
feedback.
Your opinion matters
significantly.

bojanovakovic

[email protected]
Made with by Bojan Novakovic