@uijasme aka Jasmine

NAVIGATING

YOUR FIRST
U I/UX CASE STUD
From My Journey and Learnings for Beginners Y
Copyright © Jasmine Noor, all rights reserved.

No part of this book may be reproduced in any form or by any electronic or

mechanical means including information storage and retrieval systems, without
permission, in writing from the author.

Author’s Profile
Introduction 04
Problem Statement 06
UX Research 09
(a) Competitive Analysis 10
(b) User Research 12
(c) User Personas 19
(d) Empathy Mapping 20
(e) User Journey Map 21
Brainstorming 24
Storyboarding 26
Wireframing 29
Userflow 32
High-Fidelity Design 36
(a) Branding 36
(b) High-Fidelity UI Design 37
Prototyping 40
Presentation 42
Introduction
Hey there, fellow UI/UX newbie!

My name is Jasmine, and I have been working in the field of UI/UX design from an

year.

This is not a standard to make case studies, this is my knowledge and experience as

of today and I still have a lot to learn and explore in this field.

As a fresher UI/UX designer, getting started on a UI/UX case study can be a daunting

task

Where do you begin

What should you focus on

How do you make sure you're delivering value to your users?

These are all common doubts that new UI/UX designers have. Even I have had when I

was working on my first UI/UX case study. Despite searching for something that fits

my situation and guides me through the process, I couldn’t find anything.

That's why I've decided to compile my experiences into this e-book to fill these gaps

and talk with the beginners with the beginner level experience without making you

feel overwhelmed...

In this e-book, I'll guide you through the process of Problem Identification, User

Research, User Personas, Prototyping, and much more.

By the end of this e-book, you'll have a solid understanding of the basic steps

involved in a UI/UX case study, and you'll be able to apply these steps to your own

case study.

Whether you're a student, a career transformer, or a self-taught designer, this e-

book is for you. So, grab a cup of coffee, let's get started on your UI/UX case study

journey!

I hope you find this e-book helpful and feel free to reach out to me if you have any

questions or feedback on LinkedIn or Instagram.

Happy reading!

04 Introduction
Important Note

When creating a UI/UX case study, it's important to keep in mind that both the User

Interface (UI) and User Experience (UX) aspects are equally important because UI

empowers UX and UX enhances UI.

For UX designers,

Prioritize UX research and design to meet the user's needs, while also considering the

importance of UI design in creating an appealing User Interface.

For UI designers,

Involve basic UX Research to ensure the design meets user needs, and don't hesitate

to seek guidance from other designers or mentors.

Additionally, take the time to study the basics before beginning the case study and

remember that this is all about getting started. Collaborating with others and

seeking feedback can help you see your work in a new light and improve your skills.

Las l t y, y u
if o p t
're looking for some ins ira ion , I encourage you to take a look at my
t v tu y, wh h y u t

h h p th h p
s
n
io

Not
a
ic
if

firs e er UI/UX case s d ic o can find ere . I o e is el s...

t io
n
s

Not
a

t
ic
if
re
t n
s

H p t
n io

Notp u
e
C ile a
ic
ge
of
l if
Usa
pr
e r en
ur a
App
m be
yo C 0 s
up si
c 10 ha
g ₹
S
rm
et
tin Ca
+ 3 jal fa
mins Brin
ed
R 2
, 20 r ld
10
- 02
b
24
ts
! You sale. to
es
yie

ation
Fe ra r ta
ng fo po

Educ
ls Co ed ct
ea ov pe
D pr ex
g ap n L
in ca Lo
0
! You
os . g
5

mins tt
Cl 23 un
s ₹
H
y , 20 Ch
oe ra 5
g
25
+
a ur ch
Mar ka
o an

nata
P W

Usa
ge Joh
n

Kar
-
1 on
le s

ore,
0

App
sa ha
r ll

Mys
fo se

ut
e u

t
uc yo

3
m
od ite
Pr
ns re
, 20
2

5 mi
an

H p t
n s
of
o
e 25 b n
C ile ice
A
%. ow

t
b pr
ge
of gr l

ation
Fe t
l
Usa
pr ja

u
e
e r ke 20
is
a Mar uc en rin

Educ
ur

App
ys by B
re
p
m be
yo C 0d od

H p
al s

t
Pr
n An up si
c 10ise ha
e t g ₹ra
S
rm

tt
C ile ke
l ge
of
Mar et
tin Ca
+ 3 jal fa s

Usa ns Car mins

pr oe

u Brin
ed
e R 2
, 20
a

6 mi
ur en

App
r ld o

p
m be P
! You sale.
0
-
yo s yie
up 1
si
c 10 10 ha
02 24 es
g ₹ b ts

S
rm to

ation t
Fe ra r ta
et
tin Ca
+ 3 jal fa ng fo po
s

Educ
oe

mins Brin
ed ls Co ed ct
R 2 a
D
ea
, 20 r ld pr
ov pe
To
m

- ! You sale. yie ex

L
g 24
02 ap n
Lo
10 s
in es ca
b 0 te
! You
os ts to . g
5
ation
150

tt
Fe r

mins
ra ta 23 da
Cl fo ₹ s ₹ d un

&Y
ng po

H
y , 20

Educ
ls Co ed ct oe ra 5 iel Ch
g
25
+
ov a ur
ea 10pe ch
Mar ka
D pr ex o an
₹

S
ng

nata
g ap n P L di W
in

Usa
ge ₹ 50 ca
0
Loon
Joh
n

Kar
-
ee
! You
1

₹ 16
os le . g s

ore,
0

mins tt
23

App
Cl s sa un ha
ll

H
r y , 20

Mys
oe fo ra 5 Ch se

ut
g
25
+
u

ht
a e ur ch
Mar ka
o uc an yo

nata
P W
3
m

ge
a od

!
n

abad
ite

Usa Joh Kar

-
on
ve Pr
c

ns
le 1 s

ore,
2
, 20
0

5 mi
Li
an

App
yder
sa al ha
Tot
s of
o
t
r ll

S Mys
s
fo ge se b n

upp
ut
25
k e ar u ice
A
%.
me
b ow
ub pr
c or yo gr l

ation
uc Ch H Fe t

t w th
ja
a e
3
m

na
od y List ke 20
is
t, Mar
s
b uc rin

Educ
er ite s

h by
Pr B

ns k’
i ys iv by od
e t 2

5 mi
al el an d

t
Pr

earc
c r ee
un D 20 of
o
m ne An ca s
b
W ise
o co t o n ra

t
on 25 ur

tt
ac ice
A
ke
%.
C
lc b ow

F
dd yo
Mar A pr l s
e ur me gr

ation
al Fe t S ja
ns
yo ke oe
20 ro
W is To
Mar
a

6 mi
uc rin

Educ
th B o
er
wi ys by od P
al d

S numb
Pr

u ty
in 1
n An ise

one
ig t ra

tt t
s

l.com
ke
Mar
s

s or Ph
rie s
oe

ns
oe

gmai
go
i

t
a a

6 mi
te
s
es le
o n m

addr
Ca P To

ser@
1 b m
Email
s
a te
m
pleu
150 e
t
da
o
h
s
₹ g d

&Y
t
e oe C iel

exam
a
f V₹ 1
0 m

Sp
To ac
o
S
ng
in di

0
s
te ee
Lis
₹ 16
150 da
₹ d

&Y u
iel

ht p
10 m es

ord dd

*
₹ c

S
ng nch A

Passw
******
di si bu

0
a

? !
4

abad
ee
ve
c

₹ 16p t
Ca
Li

****** yder
al
Tot
s ed ₹30 0

S
d ge R ₹2
or ar

ht
k
up e
w ub
c or

m
ss Ch H

t with
a
by na
Pa a y List

! t
s
b
abad
er

F
t s
ve
c
iv dd k’
e
h
t A
go Li el
t
g

earc
r ee

yder
al
Tot
or un s c D
K
m
1

t
in ca W

S
ge ne l
o co o

t
Log

upp
on ja ur
ar
k ac

e
C 0
lc
F
dd 0 yo
ub rin
c or A ₹6

nam
e ur Ch H B S m

t w th
al ₹5
a W s yo y
To
List ro
b th er
t s

h by
k’
er
i iv
e t wi
el

S numb t
earc
or r ee

u ty
un in
c D
m n
ne ca W

one
o co ig o dd

t y
on ur K
g A
s

om
ac er C
lc
2

F
dd yo 1/

or Ph
A rie

qu
ail.c
e ur ord
al S m
go
i
s
yo ro

t
ick
W To
5 te
s
- dres
n
th 0

r@gm
er le
₹6
wi a Ca
₹5 a
numb ? S Email ad !
up

S
e
b

u ty t
in
n
c
n d a m

euse
To
one
ig Pla ig
m

tu ound
s
e
l.com
o
pl h
t

s or Ph
rie
d g C

m ar and
un
e

gmai
k go
i
exam
re

t
co
s
es c Cate
le
n f V
addr
ac
a
Sp
ers froadvices in
ac
b a o

ser@
an
b m in
Fe
Email
ve e t a
m Lis
pleu Farm hts, trend
’t
ha
m un
e o
o g
h
th co

u
t
on wi ac e C

exam fellow s, insig test

D
lc
in
f V n

S
e
p
ur m es

ord
n

Sp so
yo dd

*
with re tip the la ing.
ac c
W o
nch A
sig

Passw ****
th in si bu

? mber
or 4

a
wi
Lis
S
****** nect . ha te on e farm
S
in Ca
n
nu e
one
0

u
ig ed ₹30
d R ₹2
le
** Ph Con region to da ainabl
or

p
w m S

ess or
es

ord a
ail.com
dd

*
ss c nch A

Passw the stay up sust

******
si bu

addr
Pa

?
4

F
t dd
Ca A

@gm
go

Email
******
g
K
or in ed ₹30 0 1
d R l

rmer
₹2

n
or Log ja

t t
0
w rin ₹6 0

exfa
ss ied
B if

Fusio
₹5
Pa no

F
t dd e
A G
go or K
g
or in 1
l dd

y
Log ja 0
K
g A
er 2
rin ₹6 0 1/

qu
ord B ₹5

ord
ick

Farm
5

- *
₹6 0

Passw ****
a
₹5 a
?S ? !
or e up
c
n d

******
To
Pla ig dd

y
g A

tu ound
K
er 2
t d 1/
d
qu **
ord or

m ar and
un
ick co w k re
c
5

- ac ss ₹6 0
a

ers froadvices in
a
Pa ₹5 a
?S !
e up an b a
F
t
c
d
Fe
n
e
To
Pla ig ve go t

tu nd Farm hts, trend

ha or un
t ’t m

arou d
un on wi
th
d o co
k ac

fellow s, insig test

D in
re lc
co
c n

-
from ce an
in

S
n Log e ur

so
ac
a yo

with re tip the la ing.

W
?S
up
sig
b a

mers advi s in
an th

mber
Fe
or n
ve e t ig wi
a
S
S nect . hadate onble farm
in
e
le hts, trend
ha un
m
e nu
’t t n

Far
th
o co
un ig

Phon
on wi ac

fellowas, insig test

D
lc
Con region
in co
n

S
e ur S

ess or to na
n ac

so
l.com
yo

with re tip the la ing. the stay up sustai

sig W th an

mber addr ai
or
a
wi ve

S
nect . ha te on e farm
S
in ha
e
Email
er@gm
nu
n ’t

one
ig
on

le
D

n
Ph
rm Con region to da ainabl t t
S

ess or
ath
ail.com exfa
ied
if

Fusio
the stay up sust
wi

addr
in no
n e

er@gm
G

Email
sig
or

n
rm t t
exfa
ied
if

Fusio
ssword

Farm
no

*
e

******
G

Pa ?
******
or
d

!
th
w
ord

Farm
*
Hy
ss

Passw
re
**** up
Pa
e
? F
t t

******
go r un
or be co
d
e

S
ac

**
or m
w in nu ur

-n
ss Log e yo
on
Pa ig te

?S
up

F
t ph ea

n
go ig ur Cr
or yo
t r
un te 0
r in
co En 0
0
fo
-
Log ac
0

h e 0
?S
e up

Name
an

th ic
n

Doe
0

thy
ve

from
ig
o ha 0
t ’t 0

ight ring John

C un on 0
0

+
co D

H e stra orde t !
ac
th 1
l 9

thy
an wi
a

oduc easyfreshes
ve in
e fe n
Li t
th
ha

ess
ail.com
P
’t sig

nic pr . With the

Hy
OT
A re
addr
on or e
D
e t
G

orga orstep enjoy @gm

l
Email
un th
a wi
e co

ering ur do ns, rmer

e ac in
W ur n

Delivrm to yoery oplatioble. exfa

yo sig

!
te or
ea
Cr

liv
fa d de avai th
Hy
mber
re
an oduce
! up
e t

e nu xxx
r un

Name Phon
co

pr xxx xx
be

Doe
e

y th S
m ac
er nu ur
n

up +xx xx
rm e yo

John
Fa re

up
on
a
e igt te

H
ph ea

r ur Cr
I am be r un
yo

S
m be co r
e

S
nu m ac te 0
r n e 0

l.com
nu ur En

ess
er
fo ig on n e yo 0
?
0

h thaie
dr
on
Us
e
ph
ig te
0
ail ad Name
a

ssword
ur ph ea
ic
a
@mgm ***** Doane d
0

thy C
I am yo ur Cr
o r
0
Em
d
Pa
yo
0

ht erfro ring
te r 0 or

**
0 0
Johnservice
En te
0 w

rm
**F ****
0 0 0

+
r En ss

Heal y Life oduce stexearafaigsyfreorshdeest er -up

fo 0 0

!
0 0 1 Pa

y Ch
t

the ms of
e 0 9
Name
0
ic 0
go
S
Doe
0 or
Ter
from g lth
t our
ign
o 0 0
t
lth th ess
ail.com
0 0 P

c pr . With e
Hy
0

+ John
A re 0 OT

raight derin
0
accep addr
+t
e
e

! e ering orurgadoniortiostnsep, enjoy th Phone nuxxxxx xxxxx

1 G

mb t

H
9
@gm
1 you
that Email
y Life c prod.ucWeithsteathesyfreorshest
un
a co 9

rmer
a e
confirm
ac
e

lth
P
W
t
th Delivrm to yolivery oplable. ail.com
ur

ess exfa
OT P

Hey
yo e

g, you ?S
OT
A
+xx
re G in

addr
te e n
e
isterin .
G

ni
t ea ig

orga orstep enjoy Email @gm

un Cr
a t
e
fa d de avai By reg y Policy
co

rmer
un

ering ur do ns,
ac co

mber
W
an oduce Privac
ur

exfa
ac

Delivrm to yoery oplatioble.

yo

? H e nu
an

x
te e

pr ord Name Phon xxxx

ea av th

* Doane d -
xxxxx
Cr wi

Passw
liv ******
d

fa d de avai
er up
or
s

up
rm

Joofhnservice
w n

mber +xx
41
n Fa

an oduce **F ****

ss

on
sig
9:
o
-up
a
Pa or
ti
e nu
r

xxx
I am t
ca
be

Name S Phon
pr S
go
Terms
m

Doe xxx xx
or
fi

m Fusi
nu

t our
ign

ti n e

ess
ail.com
er

up +xx xx
rm
o er ig on

John
er

accep addr ?
Fa rg
N pm Us ph
a

ord
a
Bu ur
you
@gm *
:59 r

that Email Passw

I am I am yo

******
08 be r d
en -

S
0

rmer
m te or
and
ck ly

confirm
hi ful nu En 0 w

**F ****
vice
n e 0

l.com
22 ss

ess exfa
C es

-up
cc
ig on 0
g, you
er d

?S
Pa
of ser
, 20 0
?
in

dr
gmai
Us ie su ph n t

isterin .
d

ail ad
a
0
ssword S
26 Fr ur ig go
0
* Terms
ere
I am e yo or

@ ****** t our
ign
ch liv t
0
By reg y Policy
r

Emw
bl d
0
Pa
R v farmer
ar de teun
0 or
and
ou 0 0

+
M er Enco w
0 er accep

Far id App
D

**F ****
vice
0
Privac
ord ac ss
1
mb -up
ur ie

S m
9
ex you
Pa

e nu of ser
e
0
H
an

x that
Yo t
e

x xxxx
it
0
Ph0on
go
S Terms
av th

- t confirm
ub wi or

t our
P ign
0
0
xx
up OT

+xx xx
0

+
e

g, you ?S
n

er accep
G in
sig n
1
numb isterin .
ig
or
9 you
xxx that
r.

e
t

By reg y Policy
de

Phon
un

x xx
or
st
t P

confirm
co

Privac
x xxxx
22 fir OT ac
e

g, you
, 20
?S
ur

?
in

H
G an
yo n e

+x isterin .
01

ssword
ig th
to on av

* -
t wi
ch e

******
t

By reg y Policy
un d
m
Pa
ar co or un up
s
and
M co dis w co n
el 41
n

**F ****
vice Privac
ss

Andruosionm Fusion
% ac sig
9:
o
-up
W 50 or
Pa
ti
? of ser H
t an
t e

ord ca
Ge go
S Terms
av th

* -
wi

Passw
or
fi

****** t our
ign
d
or ti up
s o and
w er n
n
accep
41

**F ****
vice
rg
9:
o
ss N pm sig

-up
Bu
you
Pa or
ti
of ser
:59

that
t
ca
08
en
S
-
go
Terms
ck ly

confirm
or
fi
t our
ign ful
hi
ti 22 C es
o er d cc
you
?S
, 20
accep
in
g,
rg su
N pm ie n

isterin .
d
26 Fr ig
Bu
you
:59 ere

that
e

s!
08 ch liv t

By reg y Policy
en bl

sumer
-

w
ar de un
ck ly
ou
confirm
M er

Rv
ful co

Farm F Fpar id App

hi D
Privac
22 es ord ac
C ie

and Con
cc ur

g, you
d

S ?mS
, 20
e in

H
su Yo an
ie n e

isterin .
d it
26 Fr ig av th

-
ere
ch e liv ub
t wi

rmers
By reg y Policy
bl
w
ar de un up
M ou er

Rv
co n
D
Privac
ord ac sig

Fa
ur ie

S m
or

twee-n
e

H
Yo an r.
it e
av th de
wi or
ub st

Gap be
up 22 fir
, 20
n ur
sig yo
01

the
or to t
on
r. ch e un
de ar m

Bridging
or co
st
M co dis
22 fir el %
W

e
, 20
ur 50
t

Jasmin
yo
01 to on Ge
t

p
ch e un
ar m

o
co
M co

droid A Andr
el dis
%
W 50
t
Ge

ers!

An
m
Consu
sumer
s! ers and
and Con n Farm
rmers betwee
tween
Fa
gi ng the Gap
Gap be Br id ine
the Jasm
Bridging e
Jasmin

U serflow

ing
irefram

ole
W

ng
torybo
arding rototypi
05 R P

Important Note
My
S

orming esign
Brainst UI D

earch ustratio
ns
U ser Res Ill

ng
Brandi
 Problem Statement

Finding the right problem statement is the first and most

CHAPTER
crucial step to take when working on a UI/UX case study.
The problem statement sets the foundation for your design,
as it defines the goals and objectives of your project.

It not only helps you focus your design efforts but also helps
you create a more user-centric product. By understanding
the problems your users face, you can design a product that
meets their needs and solve their pain points.

06 Problem Statement
Design hint
Selecting a real-world problem statement that resonates with people and solving it
through your UI/UX design can showcase your problem-solving skills to recruiters or
clients.

It's a valuable skill that sets you apart in the field and showcases your ability to
understand and solve complex problems through your design.

For example, in my case study Farm Fusion, I addressed the challenge of making it
easy for farmers to sell their organic produce and for consumers to access fresh,
organic food.

This problem is significant as it affects both the farmers and the consumers, and my
design addressed this issue by creating an app that bridges the gap between
farmers and consumers, making it easy for both parties to buy and trade.

In case you're having trouble generating a problem statement, there are resources
available that can help you.

Some of these tools can automatically generate problem statements based on

specific criteria, making it easier for you to choose one that fits your needs.

Find the links below...

>E UX Challenge

UE Sharpen Design

aE Designer Cize

07 Problem Statement
 CHAPTER

02
UX Research
UX Research is the process of studying and understanding user behaviors, needs,

and attitudes towards a product or service

_ It aims to gather insights that can help you as designers to create products that

are user-centered, intuitive, and effectiveB

_ By conducting UX Research, you can validate assumptions, identify pain points,

and improve the overall user experienceB

_ Before starting the research, it's important to choose a design thinking

methodology that aligns with your goals and approachB

_ By selecting the right methodology, you can ensure that your research is focused,

effective, and actionable.

Design thinking methodology is a creative problem-solving approach that puts the

user at the center of the process.

It involves empathizing with the user, defining the problem, ideating potential

solutions, prototyping the best solution, and testing it with users.

Here is the link to different design thinking methodologies to help you choose

one that fits your project's needs.

One popular methodology that follows a four-step process is called the Double

Diamond approach. This methodology involves four stages: Discover, Define,

Develop, and DeliverB

Discover Define Develop Deliver

Goals Research Problem

Prototypes
Testing

& ideas & iteration

Users Users

_ The Discover stage involves exploring and understanding the problem space.8

_ The Define stage is focused on synthesizing the research and framing the

problemB

_ The Develop stage involves Ideating, Prototyping, and Testing potential solutionsB

_ The Deliver stage involves implementing and evaluating the final solution.

By choosing a design thinking methodology before starting your research, you can

ensure that your process is structured and aligned with your project's goals.

09 Research
(a) Competitive Analysis
This is a crucial part of Research. It’s an opportunity for you as designers to leverage
what works, avoid what doesn’t, and identify gaps to gain a competitive advantage.

This analysis provides you with valuable insights to develop a strategy to enhance a
product’s User Experience and business value.

Why Competitive Analysis? Is it really important?

Performing a competitive analysis can serve various purposes for designers. One
simple reason is that you have not done one before.

And it is always beneficial for you as a UI/UX Designer to gain a deeper

understanding of the research methods and to apply them to the design process
effectively.

Types of Competitor•
‚ Direct Competitor‡
— Indirect Competitors

º Direct competitors offer the same goods and services to the same or overlapping
target market. These competitors generally compete on price because their
offerings are so similar
º Instagram, TikTok, and Snapchat are direct competitors offering similar products
to a similar target market
º Indirect competitors operate in the same market space but offer different
products. While these are different products, they usually fulfill the same need, so
the customer chooses one over another
º Instagram and LinkedIn are indirect competitors. While these platforms fulfill
different needs, they both compete for user attention.

Understanding direct competitors can help improve your product and pricing to
make your brand more desirable, while indirect competition could expose new
opportunities.

10 Competitive Analysis
How can you perform competitive analysis?

Here are six methods you can use to analyze your competition's UX(

)% SWOT (Strengths, Weaknesses, Opportunities, and Threats) Analysi9

T% Using your competitor's produc.

% Reading their review9

% Comparing features with a char.

% Comparing User Journey9

% Conducting a usability test on their Prototype.

Since my expertise was in UI design, I relied on the second method and used my

competitor's product to gather insights. It's one of the easiest ways to "spy" on the

competition and learn from them.

Here are some things to consider(

} How do your competitors engage with their customers across different

touchpoints like their website, app, blog, etc._

} How do they present their products and pricing_

} What's the process for signing up for a free trial, upgrading, or cancelling_

} Analyze their overall UI design, including layout, colors, typography, and micro

interactions%

} Use the product yourself to complete tasks and identify pain points.

I hope this helps you understand how to conduct basic UX competitive analysis and

improve your own product.

1 1 Competitive Analysis
(b) User Research
User Research is used to understand the user’s needs, behaviors, experience and
motivations through various qualitative and quantitative methods to inform the
process of solving for user’s problems.

Why User Research is important?

Because everything begins with the user, is centered around the user, and is created
in collaboration with the user.

Gaining insights about your users and their needs through User Research is crucial
for delivering a top-notch User Experience. Without a deep understanding of your
users' emotions, feelings, struggles, and other important factors, it's difficult to create
a product that truly meets their needs and expectations.

Conduct User Research with empathy in mind.

It’s no surprise that empathy is the key to user-centered design.

Empathy means putting aside your own assumptions to see things from someone
else’s perspective.

In other words, Empathy allows designers to put themselves in the user's shoes and
gain a deeper understanding of their needs, behaviors, and motivations.

Why Empathy in User Research?

Because You are not the user. By putting the user first, you can approach it from the
angle of what the user needs to make their life much easier or simpler.



The benefit of this is that it builds an emotional connection between the user and the
product. Users feel their needs are being met and are more likely to continue using
the product.

12 User Research
You can apply the Golden Circle model to gain a deeper understanding of user
needs and create user-centered solutions by asking three important questions

Why?

How?

What?

 Why are we achieving a certain goal

 How are we going to achieve this goal
 What’s the outcome of achieving this goal?

Approach to User Research

The first thing to do before doing any User Research is to ask the right questions.
What is your User Research goal? What are you trying to understand?

Here are some guidelines to assist you in refining your research questions
 Be specific^
 Be focused and relevant to what you’re trying to understand^
 Make them practical with the resources you have^
 Make them actionable^
 Be flexible and don’t worry about which method to use(yet).

Research Methods

There are many ways to conduct research. Here are some important research
methods and when to use them

^ Stages of the product life cyclƒ

{^ Quantitative and Qualitativƒ
|^ Attitudinal and Behavioral


13 User Research
 84 Stages of the Product Life Cycle

Discovery

Launch

Development

(a) Discovery

During the early stages of the design process, the key goal is to do exploratory
research. Each project has its own context and specific user group that research
should explore.

Questions to ask~
}{ What do users need‚
n{ What is already working and what isn’t?

Appropriate methods to be used at this stage include 1:1 User Interviews, Focus
Groups, Competitive Analysis.

(b) Development

This comes after developing your ideas and building Wireframes and Prototypes. You
need to evaluate and validate whether your designs actually help users solve their
problems.

Questions to ask~
}{ What do users need‚
n{ What is already working and what isn’t?

Appropriate methods to be used at this stage include 1:1 User Interviews, Focus
Groups, Competitive Analysis.

14 User Research
(c) Launch

As the design goes live, the goal is to measure how well the product meets user’s
needs. The goal here is to measure the performance and aim to optimise the
experience.

At this stage, feedback from users is really useful.

Things may have changed and the product you created to solve user’s problems in
the first place may no longer be the best solution anymore. The key is to proactively
adapt and iterate if needed.

Methods include Surveys, Data Analytics, Bug Reports.

In a nutshell, User Research can be done at any stage of the product life cycle.

15 User Research
  Quantitative and Qualitative Research
Quantitative Research is used to understand the ‘what’. This type of research can be
measured numerically2

Percentage of consumers interested to buy

fresh, organic produce instead of
conventionally grown produce. 10%
90%

Interested
Not interested

+ For example, “How many people visited a store over a week” or “What percentage
of users clicked this button”. This type of research explores large sample sizes of
data to identify trends and patterns2
+ Examples include surveys, analytics, and A/B testing2
+ What Quantitative Research doesn’t tell you is why particular trends or patterns
occur.

Qualitative research uncovers the ‘why’.

How do you currently purchase organic produce?

I grow my own organic produce 10%

I buy from a local Farmer's market 30%

I don't know where to find organic produce 90%

I don't trust that what I'm buying is actually 80%

organic

0 1 2 3 4 5 6 7 8 9 10

“Why do users have a particular attitude towards a product?” and “What else do
people see on the page?Q
+ Qualitative Research explores user’s attitudes, behaviors, and opinions. It provides
key insights into understanding the context behind why trends and patterns arise2
+ Examples include User Interviews, Field Studies, Usability Testing, and Customer
Calls.

16 User Research
  Attitudinal and Behavioral Research

Attitudinal Research seeks to assess why users have particular attitudes and
feelings towards an experience. For instance, whether users enjoy using your product
or not.

Listen to what users say

$ Examples include Focus Groups, Card Sorting, Surveys, Questionnaires and

Participatory Design.

Behavioral Research focuses on what users do with the product in question. This
could be to find out how users navigate through a site.

See what users do through Observational studies

$ Examples include A/B Testing, Eye-Tracking, Click-Stream Analysis and Usability

Studies.

It’s important to know that what users say and do are often different, which is why
you should aim to do a mixture of Attitudinal and Behavioral Research.

17 User Research
 4 In my case study, I used a combination of both Quantitative and Qualitative
research methods to gain a comprehensive understanding of user needs and
behaviors

4 The Quantitative data helped me to identify patterns and trends, while the
Qualitative data gave me deeper insights into users' motivations and pain points

4 In addition to these research methods, I also employed user testing to validate

my design decisions and ensure that the final product met user needs

4 By combining these methods, I was able to create a user-centered solution that

was both effective and engaging.

For a better understanding of how I incorporated both Quantitative and Qualitative

Research in my User Research process, please refer to My Case Study .

18 User Research
(c) User Personas
User Personas are fictional representations of your ideal customers. They are created
based on data and insights gathered from User Research and are used to inform
and guide the design process. User Personas typically include information about
Users' Demographics, Goals, Motivations, Pain Points, and Behaviors.

Demographic profile

Frustrations Goals

Name

User Personas aid design teams in empathizing with users and grasping their needs,
wants, and behaviors. It also establishes a shared understanding of the target user
and aligns design decisions with user needs.

To create effective User Personas, it's important to conduct thorough User Research
and collect data on your target audience. This can include Surveys, Interviews, and
Observational Studies.

A well-defined User Persona contains four key pieces of informationL

[ Header containing details such as Name and Summary quotK
[ Demographic Profile such as Personal Background, Professional Background, User
Environment, and Psychographics (include details such as Attitudes, Interests,
Motivations, and Pain Points.N
[ Frustrationj
[ Goals

19 User Personas
(d) Empathy Mapping
Empathy Mapping is a tool used in design thinking to gain a deeper understanding
of a particular group of people, such as users or customers.

Thinks

Sees Hears

Says and Does

Pains

Gains

It involves creating a visual representation of what the user or customer Thinks, Feels,
Sees, Hears, and Says and Does.

This can help designers and researchers develop empathy for the user, identify their
needs and pain points, and ultimately create products or services that better meet
their needs.

20 Empathy Mapping
(e) User Journey Map

User Journey Map refers to the steps a user takes to achieve their goals within a

particular application or website.

In a UI/UX case study, it is important to understand the user's journey and design the

interface accordingly.

Credits - Bakery Paradise App

With a clear understanding of the user's journey, the designer can create an

interface that is intuitive and easy to use.

21 User Journey Map

 . Remember, User Journey Maps can be drawn for both already existing apps and
new apps.)

. For already existing apps, the user journey can be used to identify pain points or
areas of improvement for the user experience.)

. For new apps, the user journey can be used to map out the flow of the app and
identify potential issues or areas of improvement before the app is developed.

If you are uncertain about what to include or are unable to figure it out, you can
utilize this User Journey Map Template by Career Foundry .

You can also take inspiration from websites like Behance and present it with
your own theme.

22 User Journey Map

 CHAPTER
03
Brainstorming
Brainstorming is a creative process that involves generating a large number of
ideas and solutions to a problem or challenge.

Idea 2
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
Idea 3
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Lorem ipsum dolor sit amet,
Idea 1 consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
Lorem ipsum dolor sit amet, et dolore magna aliqua.
consectetur adipiscing elit, sed do Idea 4
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
Idea 7
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Lorem ipsum dolor sit amet,
Idea 5 consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, eiusmod tempor incididunt ut labore
consectetur adipiscing elit, sed do et dolore magna aliqua.
eiusmod tempor incididunt ut labore Idea 6
et dolore magna aliqua.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua.

Here are some tips for conducting an effective brainstorming sessionJ

cf Define the problem: Make sure you or everyone (if you are working as a team)
understand the problem or challenge you are trying to solve@
gf Set a goal: Set a specific goal for the brainstorming session@
ef Encourage participation: Encourage everyone (if you are working as a team) to
share their ideas and build on each other's ideas@
df Avoid criticism: Do not criticize or judge any (if you are working as a team) ideas
during brainstorming@
af Record all ideas: Write down all ideas, even the impractical ones@
bf Evaluate and prioritize: Evaluate and prioritize the ideas based on their feasibility
and potential impact. Then, develop a plan for implementing the most promising
solutions.

From starting with simple tools such as sticky notes, mind maps, and whiteboards &
markers, to utilizing more sophisticated (Don’t worry. They are user-friendly and
easy to use...) online collaboration platforms like Fig Jam, Miro, Google Jam board,
and Microsoft Whiteboard, there are a variety of options available for brainstorming
and ideation.

Have fun brainstorming!

24 Brainstorming
 CHAPTER
04
Storyboarding
Storyboarding in UX visually predicts and explores a user’s experience with a
product.

Max has a confession 1 1/04/2023

Max is worried about his first UI/ Meanwhile his friend Jonas
Jonas feels something is wrong
UX Case Study walks in. with Max.

Max confesses that he is worried

And, it’s because he doesn’t Jonas suggests my e-book to
about his first UI/UX Case study... have proper guidance. Max and he successfully finished
his first Case study with it.

It presents a product very much like a movie in terms of how people will use it.

It can help you as designers understand the flow of people’s interaction with a
product over time, giving the designers a clear sense of what’s really important for
users.

As you are new to UI/UX case study, incorporating storyboarding into your process
can be a valuable addition.

It helps ensure that everyone involved in the product's creation has a shared
understanding of the design direction and development goals.

A storyboard may not be necessary if all parties involved in the product creation
process have a clear and unanimous vision of the design and development
direction.

I have drawn the illustrations myself to showcase my skills, and if you can draw, I
encourage you to give it a try as well.

26 Storyboarding
Don’t worry if you're not familiar with sketching or illustrating, Here are some
storyboarding resources that can make the process easier and save you time...

Open Peeps

Open Peeps by Pablo Stanley

Storyboard Mix-and-match Library

By Lucian Popovici

27 Storyboarding
 CHAPTER
05
Wireframing
Wireframing is a process to design an app at the structural level.

Wireframes should be used early in a project to get user and client approval on the
layout of key pages and the navigation. This will provide the project team,
specifically the UI designers, confidence in moving forward.

Wireframes help design team save significant time and money in the testing and
revision phase of the project.

There are various wireframes, such as-

)7 SketcV
(7 Detailed Hand-Drawn Wirefram+
@7 Low-Fidelity Wirefram+
17 Low-Fidelity Mobile Wirefram+
&7 High-Fidelity Wireframe and more.

I recommend starting with Sketch or Lo-Fi wireframes.

You can use tools like Miro, Balsamiq, or even Figma. I suggest using Figma with the
Wireframe plugin , as it simplifies the wireframing process. Don't worry if you're
not familiar with sketching, it’s not a requirement.

29 Wireframing
“
A wireframe
is much easier
to than a
concept
design.
“
 CHAPTER
06
User flow
User flow is a visual representation of the steps a user takes to complete a specific
task or reach a particular goal within a product or service.

8 The flowchart begins with the consumer’s entry point on the product, like an
onboarding screen or homepage, and ends with the final action or outcome, like
purchasing a product or signing up for an account(
8 Each touchpoint on the user’s journey is represented by a node in the flow chart.
These nodes are characterized by shape, and each shape indicates a particular
process(
8 For instance, a Diamond means a decision is being made and is therefore
followed by “Yes” and “No” arrows. A Rectangle indicates a task or action that
needs to be taken, like “Log in” or “Purchase”.

Display Decision Action

32 Userflow
Types of User flow charts
User flows are versatile for interface and web design, but certain flowchart types are
more useful based on the project. Here are some flow variations and when to use
them.

mk Task flows

Task flows focus on how users travel through the platform while performing a
specific task.

yk Wire flows

Wireflows are a combination of wireframes and flow charts. They utilize the layout of
individual screens as elements within the diagram.

„k User flows

User flows focus on the way your target audience will interact with the product.

33 Userflow
User flows are created early in the design process, after user research is conducted,
and serve as an important foundation for your product's design.

They help determine the number and order of screens and the necessary
components.

User flows can also be made for existing interfaces to enhance the User Experience.

Flow charts are part of your deliverables, which you provide to the client and design
team upon completion of the project.

They can help validate your design decisions and may be revisited and edited if
further research deems it necessary.

As a beginner, I recommend you to go with simple task flows which will be enough
for your first UI/UX Case study.

34 Userflow
 CHAPTER

07
High-Fidelity Design
(a) Branding
Branding is the process of creating a unique name, design, symbol, or other feature
that identifies and distinguishes your company from its competitors-
! This involves developing a brand strategy that communicates the company's
values, mission, and personality to its target audience-
! Creating visual and textual elements such as logos, slogans, and color schemes
represent the brand's identity and image-
! Working on branding can be a plus for you.

Farm Fusion Farm Fusion

Nunito #5200FF #0FCA6E

For my case study, I created this Branding. You can do the same by starting with a
mood board and designing visually attractive and meaningful branding that
complements your app-
! A Mood board provides an overall visual representation of the brand's look and
feel.

As a UI/UX designer, having a good grasp of branding can help you create unique
and remarkable products in the market, even though companies often have
separate teams dedicated to branding.
36 Branding
 u
g up yo
Settin
s
10 min

ion
Cart
Educat
gD eals
Closin

(b) High-Fidelity UI Design

m
a psicu
25 min
s
Red C
02
+ ₹ 100
ge -
App Usa le
ce for sa
Produ
5 mins
, 20 23 has be
en
Potato
es Feb 24 jal farm
ur Brin
Educat
ion + ₹ 50 Congr
ats! Yo le.
lysi s - 01 for sa
et Ana
ed eld
Mark approv toes yi
ct pota
16 min
s n expe
! You ca 23.
Hurray
ch 5, 20

High-Fidelity (Hi-Fi) design closely matches the final result of a product's design.
on Mar

, 20 23 has
k! u sell
e bac Feb 25
prices
of an
item yo
ang C
hung
LoL

r acco
unt Market 20%.
John W ka
ou
ised by
Karnata
ra Mysore,
at
Live ch

About
mber
one nu
s or Ph
com ₹ 150 n
gmail. with su
pport e grow
user@ Conne
ct ₹ 10 Produc
tal
Sub To ₹ 160
rges
y Cha Brinjal
Deliver oes
Potat
******
Total Tom atoes
cart
word? Add to
t Pass tes
ab ad eld da
Hyder g & Yi
Seedin
Login
me
h by na
Searc List
or eek’s
your W
r
From
a qui ck orde orie s
Place Categ
p
count?
Sign-u
bles
an ac
Vegeta
List of
have
Don’t
with
sign in
unity
or

Spina
ch Comm
m
apsicu
Red C 4 bu nches
Add
l ₹30
Brinja 1 Kg ₹20
Add
ack!
₹60
₹50
ome b
1/2 Kg

Welc ₹65 Add

unt ₹50
ur acco
with yo
Sign in
day
red To
s or Ph
one nu
mber
Featu
addres
Email

usion
ail.com
er@gm
n

Seaso
Farm F
exfarm

Passwo
rd
S a le
*
******
****** d
aroun
ord? s from e and
Passw Farmer dvic
Forgot fellow insights, a in
ct with s, trends
Conne n. Share tip the latest
gio on ing.
the re to date le farm
Login stay up sustainab
p
Sign-u
ac count? tified
ve an Get no
ha
Don’t

for a
in with
hoice
or sign
lthy C
A Hea if e e
hy L om th
Wealt roducp
ight fr
e stra ordering
sy
ganic p. With ea eshest
ing or te fr
Deliver your doors , enjoy the
ns
farm to ivery optio
el .
and d e available
prod uc ere!
Hey th count
your ac
p
Sign u
e
Farmer Creat
I am a mber
one nu
your ph
Enter
Use r Name
I am a
ere!
00000
Doe
John
Hey th
00000
t
accoun
addres
s + 91 Creat
e your
Email com
ail.
er@gm
Content, visual styles, and animated transitions — all work together to make high exfarm Get O
TP
Name

John
Doe
p
Sign u
mbe r
Phone nu r
mbe

fidelity assets look and work as close to the final product as possible. x xxxxx
xx ur ph one nu
+xx xx E nter yo Email
addres
s
ail.com
er@gm
exfarm
00000
00000
rd
Passwo

+ 91
*
******
******
r
numbe
Phone

V During this stage, wireframes can be a great time-saver and prevent cluttered
d? x
Pa sswor xxx xxxx
Forgot +xx xx
TP
Get O
p
Sign-u d
vice an rd
of ser

thinking3
Terms Passwo
pt our *
that yo
u acce
******
, you co
nfirm ******
istering
By reg Policy. ord?
Privac
y
Passw
unt? Si
gn in Forgot

V In my personal experience, I found inspiration from real apps, although it was

co
an ac
Have Sign-u
p

ith
-up w
or sign that yo
u acce
rm
u confi

challenging to find relevant examples for an Android Apps compared to the iOS
, yo
istering
By reg Policy.
y
Privac

cou
an ac
Have

Apps3 or sign
-

V To assist with this, I recommend referring to the Material 3 Design Kit , which
provide official guideline standards for designing Android mobile apps3
V If you are designing iOS Apps, Refer to this iOS Guidelines 3
V Developing a design system can be advantageous for your project. Furthermore,
utilizing Auto layout, components, and other properties can also be helpful3
V To make it easy for you, I am providing a Figma file link that demonstrates
the creation of card components with Auto layout. You can use this as a reference
to create your own cards or utilize them as needed.

37 High-Fidelity UI Design
Make sure to use Grid Layouts in your design.

What is a Grid Layout?

A Grid Layout is a design structure where the content is arranged in columns and
rows.

It provides a framework for organizing and aligning visual elements in a consistent

and coherent way.
• Grid layouts are important in designing UI screens because they help establish a
sense of order, hierarchy, and balance in the design|
• They create a visual rhythm that guides the user's eye and makes it easier to scan
and understand the content|
• Additionally, using a Grid layout helps to ensure that the design is consistent
across different devices and screen sizes|
• This is especially important for responsive design, where the layout needs to
adapt to various screen sizes while maintaining a cohesive and functional design.Œ
• Overall, G rid layouts are a valuable tool for you as a designer in creating
effective and aesthetically pleasing UI screens.

Refer to Material 3 Design Kit or iOS Guidelines

(Link given in Previous Page)

38 High-Fidelity UI Design
 CHAPTER
08
Prototyping
Prototyping is the process of turning a static mockup into an interactive and
dynamic mockup (better known as a prototype).

Bringing a static mockup to life is without doubt one of the most exciting step in the
design workflow.

I suggest using Figma for Prototyping, although there are other tools available such
as Protopie, Proto.io and more7
T Using components can make Prototyping easier as it allows for quicker and
consistent design iterations7
T By creating a library of reusable components, you can easily drag and drop
elements onto your designs without having to recreate them each time7
T This can save time and ensure consistency across different screens and
interactions in the Prototype.

You must remember that the initial UI design of screens is not the final result. It
requires iteration by taking user feedback and testing.

However, for your first case study, your focus should be on designing the screens and
explaining your thought process. Incorporating user feedback and testing will be a
bonus.
40 Prototyping
 CHAPTER
09
Presentation
Let's begin with presenting your first UI/UX case study... You may consider
presenting the case study using storytelling techniques to better engage your
audience, but this is optional.

eh For the case study presentation, I suggest starting with the cover slide. Make sure
it's visually appealing and includes the project title, a tagline (optional), and the
tools you used.

Note: You can take inspiration from some amazing projects available on platforms
like Behanceh

5h You can write about your role in this project, including the specific areas you have
worked on.

Note: If you are part of a team, you can also mention the specific parts of the project
you have contributed to, such as Prototyping, UI design, or Researchh

;h You can add what inspired you to work on this particular case study, which is
optional, but it's definitely a plush

Jh Project Timelineh

Uh Problem Statementh

1h You can now add the Research part to your case study, which includes the Design
Thinking Methodology you used for this project, Competitive Analysis, User
Research or Survey, User Personas, Empathy Mapping, and User Journey Map as I
have mentioned earlier in this e-bookh

.h Brainstormin>

-h Storyboardin>

3h Wireframin>

e+h User floK

eeh Moving forward, you can include the High-Fidelity Design section which should
consist of Branding that is highly recommended, and then final UI screensh

e5h Prototypin>

e;h Next up is an optional but interesting section, which involves outlining future
development ideas for your app.

42 Presentation
‡ÙC Add success metrics to your app case study.

Note: Success metrics are Key Performance Indicators (KPIs) that measure the
app's success. These are specific to each type of app, based on its goals and
objectives.

For an existing app, success metrics can be tracked using Analytics tools that
measure user behavior such as user retention rates, conversion rates, and
engagement levelsC

) This data can reveal areas of strength and areas that need improvement.

For a new app, success metrics can be established based on the app's intended
goals and objectivesC

) For example, if the app aims to increase brand awareness, success metrics could
include number of downloads, social media engagement, or website traffic
generated by the app.

Common success metrics for apps includef

) User Retention Rate\

) Engagement Level\
) Conversion Rate\
) Session Duration anO
) User Satisfaction Scores.

By measuring these metrics, app developers evaluate their app's effectiveness and
identify areas for improvementC

‡~C Finally, it's important to include a thank you slide at the end of your presentation
to show appreciation for your viewer's timeC
‡oC Include CTA to follow you on socials. It also help recruiters to find your profile.

I recommend you to publish this on Behance. Use relevant tags to reach more
audience.

How to promote your Case Study?

Stay active on social media, interact with other creators, and promote your case
study work. Consistently posting high-quality content will be a plus and also help
attract more audience to your work.

43 Presentation
 Thanks for taking the time to read this e-book. I sincerely hope it was
helpful for you and provided a solution for any confusion you may have had
about case studies as a beginner UI/UX designer.

If you found this e-book helpful, I would greatly appreciate your feedback
and opinions.

Please consider leaving a 5-star rating on Gumroad to help me create more

useful content like this in the future.

Thank you once again for your support!

Jasmine

Connect with me on:

@uijasme Jasmine Noor @uijasme