@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.

t y, if you're looking for some inspiration, I encourage you to take a look at my

Las l

first ever UI/UX case study, which you can find here . I hope this helps...
s

a
tion
Not
ic
if

a
tion
Not
ic
if

e
n
tre tion
s

pC ile
t a

Notp
of
ic
Hel ge if
pr
r
Usa
en
a
um
ur
be
C 0
App
yo s
up si
c 10 ha
g ₹ rm

Set
tin Ca
+ 3 jal fa
mins
R
ed

, 20
2
r
Brin ld
10
-
02
b
24
ts
! You sale. to
es
yie

Fe ra r ta

ation
ng fo po
ls Co ed ct

Educ ea ov pe
D pr ex
g ap n L
in ca Lo
0
! You
os . g
Cl
5 23
₹ un
mins
s

tat
y , 20 Ch
oe ra 5
Hur g
25 P
o
+ Mar
ch
W
an
ka
nata
n
ge Joh
1 on
le s
Usa , Kar
0

App fo
r
sa
- se
ll
ha

ore
Mys
e u
yo

ut
uc

3
m

tre
od ite
Pr
2
ns , 20
an

5 mi n o
of
s
e b
p t
n
25
C ile ice
A
of b pr
%. ow
l

Hel
Fe t gr
ge pr
r e ja

tre ation
ke 20
Usa Mar
is en rin
a uc
um
ur B
ys by

Educ
be
C 0d od
App
al yo Pr s
10
psi
c
n An up ise ha
e
pC
t ₹ra
t
g rm
ile ke
Mar Set
tin Ca
+ 3 jal fa s

tat
of

Hel ge pr oe

Usa
r R
ed
Brin
um mins
2
ur ns Ca en
, 20 ld o
6 mi
be r P
! You sale.
0
App
yo s yie
10 24
psi
c 02
-
1 10 ha
up b
es
g ₹ rm ts to
Fe ra r ta
Set
tin Ca
+ ation 3 jal fa ng fo po
toe
s
ed
Brin
ls Co ed ct

Educ
R a
mins
2
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
Cl Fe ra r 150 ta 5 23 da
un
ation
fo ₹ ₹
mins
s d

tat &Y
ng po
ed
y , 20 iel Ch
ls Co ct oe ra 5

Educ Hur g
25
+
ov
ea 10pe ch
Mar
D pr ex o an
ka
g ₹
n P L ng
ap di W
Loon
0 See nata
in ca n
ge 0
! You
1
Joh
₹ 16
os . g s
5 le
Usa ₹ , Kar
0
-
Cl 23 un ha
sa
mins
s

tat
ll
App
r y , 20
oe fo ra 5 Ch se ore
Hur g
Mys
25
+
e u
ch

hat
o
Mar an yo

ut
uc
P W
ka
3
m

nata
od n ite
ge Joh
on
ve Pr
c 1
le s
Usa abad , Kar
2
, 20
0
ns
!
an

App
r
sa Li
- 5 mi Tot
al s ll
ha of
o
yder
fo
t ge se ore s
b n
Mys
25
Sub A
ar u ice
k e
%.
upp
b pr ow
c or yo l

me
ut
uc Ch H Fe t gr
ja
a e

23
m

ation
y List ke
b
od
th s is er ite
na s
Mar
20 uc rin
tw
Pr B
k’
rt
i ys iv by

Educ
od
e ns , 20 h by
t al el an d Pr
ee
5 mi
c
m un
An D
to ca
of
o W ise

earc
ne s
o co
on t 25 b ur n ra
ac ice
A
ke
%.
C
lc b yo ow
tal
dd

Mar
pr s

tat
A l
e ur t S gr
Fe
Frouce
m ja oe

ation
yo ke 20
W th is
ns To
Mar B
rin
o
6 mi
ys by

Educ
wi od P
in er al
1
d Pr

Sig
n
mb t
An ise

e nu
ra

ty
ke s

Mar
s
Phon toe
s

tat
rie
om
uni
go oe

s or ail.c
a
ns te
s o m
es 6 mi le To
Ca P

Em
ail addr
ser@
gm 1

150 e
ta b
s o
m
m
da
te
s

toe
pleu
₹ g d

&Y
C
e
h
iel
a
V 10
exam t of
m
₹ To ac ng

Lis 0 te
s
Spin See
di

₹ 16
150 da
₹ d

&Y
iel
10 um es

hat
dd

psi
₹ c
ord ng nch A

*
di bu

Passw 0 See
4

****
ve
c

?
₹ 16p abad
Ca

!
Li

****
al
Tot
s ed 0
₹30

yder
d ge R ₹2
t
**** t Pass
or
w
c
k or
Sub ar

hat up e
Ch H
a
nam
y List
ith
s
b er s
ve tw
c
k’
rt
iv dd
e
abadD
A

! For h by
go t
Li al el g
ee
Tot
un s c K
m
1
in
to ca W

yder earc
ge ne l
Log o tacco on ja ur
k Sub ar 0
pur
C
lc yo
tal me
dd 0
rin
c or A ₹6
e up Ch B S
Fro
H ₹5 m
a yo y List
ith
b W s
er To
na
th s
e t wwi iv t k’

h by
t
m un
or in
c er D
el r ee

S
n
mb to ca W

earc
ne
o co dd

e nu
ig

ty
on ur K
g A
s
ac er C
lc
2
yo
tal
dd 1/

Phon
A rie

y
e ur

l.com
ord S
Fro
m
qu uni
yo go
s or
ick
W To
5 te
s
ai
th 0
le
₹6
wi
-up es Ca

tab
a
er ₹5 a
addr
r@gm
in e

mb
c
d m
? Sig Email
n
Sig
n
To
!
Pla

e nu
ty
m
euse
s
t e o
Phon nd
rie
d g
om C
ture uni
un
pl k go e
h arouand
s or ail.c
co
c Cate s V
exam
le
t of
ac
es a
ta from ce
ac
addr gm b b a
Spin
an
m
e Fe
ser@ ers s, advi s in
ve t
ail ha
m un
e m Lis
Em ’t o
pleu arm
th
o co
g
on
e
h C
nd
w F sight st tre
wi ac
lc
um
D
in
e ur
f V n

exam t
es
n

so
yo

fello tips, in e late g.

dd

psi
c
ord W o ac nch A
sig
Spin
th

***
Seale
bu

Passw
or wi 4

Lis er
? with ₹2 th rmin
in
**
Ca
Sig
n
mb re0
**** nu
nect . Sha te on e fa
d ed ₹30

one
R

**** t Pass um
Sa
or
w
Ph
Con region to da ainabl
es
dd

s or psi
c
ord
nch A

* om
bu

Passw dres
4

**** ail.c the ay up sust

dd

? Ca A

For ail ad
go g

****
K
0

@gm
1
ed ₹30

st
in
d R ₹2 l
Log
Em
**** t Pass
or ja

rmer
0
w rin 0
tified
₹6
B ₹5
t no
exfa

ion
dd e
A G

For
go or K
g
1
in
l dd
Log ja K
g A

Fus
er 0 2
rin ₹6 0 1/

y
ord B ₹5
qu ick

ord ₹6
5
0
-up
***
a
₹5 a
Passw
or e
c
d
? Sig
n
** ? To
!
Pla g dd

****
A

Farm
K
er 2
t d 1/
d
nd
**** t Pass y
ord

ture
un or
k
qu arouand
ick co w
c
5
ac ₹6 0
-up a
from ce
a
e an
₹5 a b a
c
d
Sig Fe
n
e
To
ers s, advi s in
ve

! For
go t
t?
Pla
ha un
’t m
oundd arm
th
d o co

nd
ture
un on

w F sight st tre
wi
D k in
lc ac
co in
c n

m ar an
n Log e ur

so
ac
a -up yo

fello s, in late
an sig
b a W th
Fe ? Sig s fro vice in
S
or n
e a
with re tip the rming.
ve t wi
in er
mer s, ad nds
’t
ha
th
o
m co
un
t
Sig
n
mb e
e nu
nect . Sha te on e fa
un
are
on

waFl sight st tre

wi

S
ac
D
lc
in
e ur co
n
Phon
Con region to da ainabl
n ac

so
yo
s or fello s, in late
sig W an
om
th

Seale dres
or

ail.c with re tip the rming.

wi
e
ve
in er up st
th
ha
Sig mb ail ad su
n ’t

one
nu on

@gm nect . Sha te on e fa stay

Sa
D
Em
rmer
Ph
s or Con region to da ainabl tified
th

om
wi
t no
dres
ail.c exfa the ay up sust
in

ion
n e
G

ail ad
sig

@gm st
or
Em
rmer

Fus
tified
t no
exfa ord

ion
e

***
G

Passw ?
****

Farm
!

Fus
**
d

****
or
w
ord ss
re
*** th
Pa
Passw
e

H y
t t

up
** ? For
go r un

****

Fara
m
be co
d m e ac

**** t Pass
or ur
w in nu

S
Log n e yo
ig-up ph
on
ea
te

? Sig ter yo
n
ur Cr
For
go
t
un 0
r in
co En 0
fo Log 0
ac
0
e -up an 0
hoi the
c
? Sig Name
n ve 0
0
Doe
ha

from g
0

thy
t ’t
C un on 0
0
John
D

ight rin
co
ac 1
+
th
9
stra orde t
l an

Hea !
wi

y Li produceith eaesyfreshes
ve in
fe ’t
ha n
P
sig
t OT
lth
A re s om
th
on
dres
or e

ail.c
D
e
. W th
G

Hey
c
t

ail ad
ganiorstep enjoy
un th
a
@gm
wi
e co
Em
g or
ac in

rmer
W
, ur n

erin ur do tions
yo sig

exfa
te or

Deliv to yoery op ble. !

ea
Cr

farm deliv availa re

and uce
er
the
Hey
t
mb
! n up
un
e nu
r

x co

prod
be

Name Phon xx
m ac

Doe x xx
er nu ur

S
e

xxxx
rm yo
re ig

y th
Fa on te

John
e
up +xx
a ph
t ea

a
up
r ur Cr
I am be r un

He
m co yo
be r
nu m ac te 0
Sig
r n e nu ur En 0
Sig
fo
on n e yo 0
om ess
er
Us ph on te 0
e l.c
e dr 0
?
a

thai
ur ph ea

a
h ic
ail ad
0 ord Name
I am yo ur Cr

gm o 0
*wor
r
ed
d
Passw
yo
0
fro@m g
0
****
te

yC Em
r
En te 0 0 0 Doan
ht er
0
lth
0 0
****
r En

Joofhn
ss
vice
igrm
fo 0 0
rafa rin 0 0 1 Pa
-up
+ **go t
9 ser
orde t
0
stex
e 0
**
h o
ic
th e Hea y Life uce easy shes ! 0
0
0
0
Name
Doe
For Sign
r Ter
ms

from g
0 0 P

lth
yC A
lth prod ith fre er
the
re 0
0
0
John
e
t OT
accep
t ou
dres
s
ail.c
om
nic ep. W the e numb
1 G

ight rin
Hey +
t
9 1
ail ad
+ t you
un
a 9
Hea stra orde t !
e
orga orst enjoy Phon xxx @gm
co
tha Em
y Li produceith eaesyfreshes
fe
ac

rmer
P

x xx
W
ing ur do tions,
ur
t OT P firm
t OT con
lth
xx s
yo e
A re
er om in

exfa
th Deliv to yoery op ble.
G

xx dres
te e
you
ail.c ? Sig
n
e
. W th +xx ring,
G

Hey
c
t ea

ail ad
ganiorstep enjoy
un Cr
a iste t
e
@gm reg icy.
co

farm deliv availa

un
Em
g or
ac By
rmer
W Pol co
, ur
acy er
erin ur do tions
ac

and uce
yo
mb
exfa
te Priv an

e nu
e

Deliv to yoery op ble. ? Hav

xxx
ea th

prod ord Name Phon

Cr wi

*word -up xx
rm la Passw Doe d xxx
er

liv s
****
rm
fa de avai
n
n Fa
xx
41
e an
**** Joofhn
er
ss

on
sig

and uce +xx

9:
o
up
a
vic or
-up
Pa
ti r
mb
ca ** **go t I am
ser be
e nu
prod For xxx
m
fi Name Sign ms
Phon

m Fusi
nu

Doe
r Ter
Sig
n
x xx
e
er
ti t ou
xxxx
rm
o er
s
on
om
er
Fa
dresr
rg
N
Us ph
accep
ail.c
pm

John +xx ?
up
a a
Bu ur

ail ad
:59
I am I am
t you
yo
ord
*word
08

@gm
en be r

Passw
-
0
****
m te
ck ly
tha Em En 0
and
rmer
ful nu
hi firm
Sig
n 0
****
22 es e ss
C
con 0 vice
on
s
cc

om
er d
-up
Pa

exfa
, 20 in
0
dres
you **go t
Us su
ie ph
of ser
ail.c ?urSig
n
ring,
d
0
? **
a
Fr
For
26
ail ad
I am e ere
iste
yo 0 ord Sign ms
ch liv t
0
@gm *word
r
bl
icy. r Ter
reg 0 0 Passw
ar de

****
teun
M ou er Emw By Enco 0 0 t ou
and
rmer
Pol

Far id App
D
Rev acy 0
**** accep
ord ss
0 er
ac
1
vice
ie

+
ur
9
-up
Pa
0mb
exfa
Priv an
**go
Yo t
mit Hav
e
0e nu of ser t you
S
th
0 x **
For tha
xxxx
ub wi
0Phon P
Sign ms
-up t OT r Ter firm
xxx
0 con
n
0 G
e
t ou in
er sig
1 xx accep ring,
you
? Sig
n

+ 9
+xx
or

numb
r.
t you iste t
e x icy.
de
tha reg un

xxxx
or

Phon
st P
firm By Pol co
22 t OT acy
x
fir ac
con
xxxx
e
, 20
ur G in
Priv an
g, you
yo

?S
n e

+xx
ch
01
e
to t
on
ord ? iste
rin t
ig
Hav wi
th

*word -up
un
icy.
m
Passw
ar
reg
****
co un
M co s By n
and Pol
dis co
el 41
n acy
****
ss

Andruosionm Fusion
% ac sig
W 50
9:
o vice or
-up
Pa
ti Priv an
**go
t t
of ser
e

? ca ** Hav
Ge
For
th
ord Sign ms wi

Passw *wordotifi r Ter -up

s
**** t ou
er n
41
n N and rg

**** accep
ss pm sig
9:
o vice Bu or
-up
Pa
ti :59

ca ** **go t
of ser en -
08
t you
ti
fi For S ign
22 r Ter
ms
C
hi
ck
es
ful
ly

firm
tha
o er
, 20 t
ou d cc con in
N rg ie su
you
26 accep
? Sig
pm n
ring,
d
Bu :59 Fr ere
e

s!
en 08 cht you bl
liv
iste t
icy.

sumer
-
ck ly ar
tha ou
de
reg un
ful M er
w By Pol co

Farm F Fpar id App

hi firm D
Revin acy
22 es ord ac
C
con ie

and Con
cc ur
d
, 20 ie su
you Yo Priv an
d
ring, mSitign Hav
e

t?
26 Fr th
ch e liv
ere
iste Sub wi

rmers
ar
ou
bl de
By
reg icy. un -up
M D
er
w Pol co n

Rev acy
ord ac sig

Fa
ur ie
or

tween
Yo Priv an r.
mit Hav
e
th de
Sub wi or

-
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...

D? UX Challenge

N? Sharpen Design

Z? 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

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

are user-centered, intuitive, and effectiveC

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

and improve the overall user experienceC

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

methodology that aligns with your goals and approachC

Z 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 DeliverC

Discover Define Develop Deliver

Goals Research Problem

Prototypes
Testing

& ideas & iteration

Users Users

Z The Discover stage involves exploring and understanding the problem space.]

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

problemC

Z The Develop stage involves Ideating, Prototyping, and Testing potential solutionsC

Z 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) AnalysiC

1 Using your competitor's produc.

4 Reading their reviewC

 Comparing features with a char.

* Comparing User JourneyC

? 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"

r How do your competitors engage with their customers across different

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

r How do they present their products and pricinge

r What's the process for signing up for a free trial, upgrading, or cancellinge

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

interactions

r 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
 @ 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 needp
‡ 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 needp
‡ 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 numerically3

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 patterns3
) Examples include surveys, analytics, and A/B testing3
) 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?U
) Qualitative Research explores user’s attitudes, behaviors, and opinions. It provides
key insights into understanding the context behind why trends and patterns arise3
) 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 not1

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 site1

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
 , 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

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

, 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

, 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 informationJ

I Header containing details such as Name and Summary quotV
I Demographic Profile such as Personal Background, Professional Background, User
Environment, and Psychographics (include details such as Attitudes, Interests,
Motivations, and Pain Points.A
I Frustrationo
I 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 session]

bf 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<
df Set a goal: Set a specific goal for the brainstorming session<
gf Encourage participation: Encourage everyone (if you are working as a team) to
share their ideas and build on each other's ideas<
cf Avoid criticism: Do not criticize or judge any (if you are working as a team) ideas
during brainstorming<
ef Record all ideas: Write down all ideas, even the impractical ones<
af 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+

*0 SketcI
K0 Detailed Hand-Drawn Wirefram6
P0 Low-Fidelity Wirefram6
%0 Low-Fidelity Mobile Wirefram6
>0 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.

D 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)
D 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)
D 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.

ml Task flows

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

rl Wire flows

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

l 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 competitors1
! This involves developing a brand strategy that communicates the company's
values, mission, and personality to its target audience1
! Creating visual and textual elements such as logos, slogans, and color schemes
represent the brand's identity and image1
! 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 app1
! 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

Q 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

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

Q 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

Apps7 or sign
-

Q To assist with this, I recommend referring to the Material 3 Design Kit , which
provide official guideline standards for designing Android mobile apps7
Q If you are designing iOS Apps, Refer to this iOS Guidelines 7
Q Developing a design system can be advantageous for your project. Furthermore,
utilizing Auto layout, components, and other properties can also be helpful7
Q 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 more:
8 Using components can make Prototyping easier as it allows for quicker and
consistent design iterations:
8 By creating a library of reusable components, you can easily drag and drop
elements onto your designs without having to recreate them each time:
8 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.

b` 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 Behance`

;` 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 Research`

>` You can add what inspired you to work on this particular case study, which is
optional, but it's definitely a plus`

6` Project Timeline`

G` Problem Statement`

a` 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-book`

Z` BrainstorminA

0` StoryboardinA

/` WireframinA

b-` User floU

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

b;` PrototypinA

b>` Next up is an optional but interesting section, which involves outlining future
development ideas for your app.

42 Presentation
nâ@ 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 levels@

* 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 objectives@

* 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 includeX

* User Retention RateR

* Engagement LevelR
* Conversion RateR
* Session Duration anO
* User Satisfaction Scores.

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

nl@ Finally, it's important to include a thank you slide at the end of your presentation
to show appreciation for your viewer's time@
nj@ 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