UX.

UI Case Study

ondle
make them feel inclusive as much as possible

Role:
Tools:
user research,

competitive analysis,

interview and survey,

personas, Ideation

,sketches, usability
test,

visual components
design,

presenting.

Client:
Duration:

this was a students team work

8 weeks
project at Re:coded UX/UI design
bootcamp

Overview
Many parents of special need kids facing struggles and challenges on daily basis
and After digging deep in researches , interviews and surveys with the target
audience it found that :

58% of families 25% of families

17% reported the
feeling social are seeking
need of financial
isolation. medical
support.
treatments help
.

we created fondle app where the parents and caregivers of special need kids will
be able to incorporating with other parents in the community and feeling included,
additionally to that it offers guidance to all the places they need to solve their
problems.

Problems
Feels unsupported with no one to share her
challenges and emotional states with.

Inade uate financial resources and lack of q

educational opportunities.

Unreliable medical sources.

less free centers or cheap treatments or

educations.

sloutio s n
fondle is a mobile app for all kind of devices it got two main
features the community to share feeling or ask and answer
q uestions ,join events and live sessions , the other feature is the
guiding map that reveal all the places they need in their city and
near to their areas further more the ability to make the whole
app about your kid or kids disabilities by answering some
q uestions while creating the profile.

Goal
The ultimate goal of this project is to support
and help parents and caregivers of special
need kids.

This is achieved by providing the resources

and guidance with the right assistance of the
society of different aspects.

Ob e tives jc

To get emotional aid from other parents with same

problems

To get better knowledge and resources for the

places they want and need.

faster access to information and answers of their

q uestions

To be updated most of the time

To let the users to customi e the whole app to their z

kids disabilities .

Target audiences

parents and caregivers of disabled kids need

to access information, resources, social and
emotional support with different opportunities
to ensure that they and their kids get the
necessary assistants to thrive.

Test
-Usability test

-Applying feedbacks

-forthcoming Ideas
Empathize
-Desk Research

-User Interviews

-Surveys.

-Competitive analysis -Brainstorming

-Sketches

-User Flow

Define Design
-User Persona
-L -F W
o i ireframe s

-storyboard
-H -F W
i i ireframe s

-Empathy Map
-P rototypes
-journey Map

-Value Preposition

Empathize
Gathering information through desk research and interviews, surveys with the target
audience from different Arabic areas and came up with those findings as mentioned
it is difficult to find
below :
places or
programs for
financial support.
Paying for many it is difficult to find
treatments and
places or programs
medications
with educational
needed.
Stanford Design Thinking Process is the design process that we followed to complete this project..
opportunities

Research Finding separate from others

Lack of education affecting the emotional
and awareness is a and psychological state
serious issue.
of the parents and
children.
Children with
special needs
q
re uire speciali ed z
treatment

Competitive A alysis n
There are many competitors in the market that provided us with great insights and
valuable opportunities to improve our plans and strategy and determined the needed
advantages for our platform :

company my o c nnect navigate life wolf a d frie ds n n

texas

Mission statement

Strengths

Weaknesses

Features
education

community

Guidance
Diversity

Notes
Notes

Opportu ities n
Identify
Opportunities

Not Availibale Availibale

n
I terview a d Surveys n
conducting interviews and surveys for more understanding and analy ing the z
factors influencing and impact powerfully on the user as their problems and
complains then using the results for the designing what will meet their needs
and solves their pain points.

Surv
ey u
how estion q

man
y sp s :
...
........
.....
ecial
need
kids
do yo
u have
?

You
r kid
~kid
belo
w ye s age
1 5
- ar
? (s
elect
6 10
- that
appl
-
11 16
ies)

If you
man are not
y yea a par
less rs ar ent b
tha e y o u u t a
2-4
 n a ye a s a r elati
ar 
 care ve w
>5 giver ho tak
? es c are o
Do yo f a sp
ur kid ecial
Yes 
 need need
s child
No
a lon how
g ter
som m ca
etim
e s
re?

Does
your
Alw kid n
ays
 eed m
Some edica
time l tre
Ofte
n 
 s
 atme
Rare n t?
ly

Do yo
u find i
Yes 
 t har
d to g
No
et ac
cept
som
etim ance
es from
com
mun
ity?

After conducting interviews and surveys, here are the results :

n
I terview Fi di n ngs
social problems

other findings

financial problems
no friends feeling of
meeting isolation

no good there is no
educational sympathy in
resources hospital

unable to pay financially

medical pills shortage

less
community always doing
support things alone

the special need no guidance or

kids cant work awareness
family support
q
re uirements

no ocial S no sympathy about the places

from the that could give
always increase
awarenes s
husban d
help

that it lead to
divorce

15%
24%

17%
Surveys Fi di n ngs
22%
17%

5%

80 (24%) Find it difficult to deal with their kids

breakouts.

75 (22%) Has one disable kid.

16 (5%) Has got two or more disabled kids.

58 (17%) Many dont know how to get help.

58 (17%)
Didn't visit a specialist .

50 (15%)
Long term need medical attentions.

D efi e n
During this stage we have created user personas and empathy map and a user
journey map to represent our target user group, based on the information which we
collected through the previous stage .

Empathy ap M

empathy map was created based on what the persona feels, says, sees and hear.

she s looking and

’

searching for finical help

or any kind of fundings

Research resources
I need help, I don t know ’

Trying to e plain her child s

what to do
x ’

needs and challenges to others

Make important and sensitive
she s trying to cope with
’
decisions
her situation
Asking for help or advic e


Other parents who seem

to have it all together
People offering advice
useless platforms

their kids surrounded by she hears other parents

other s looks ’ complaine about the same
issues

Challenges of finding
q
ade uate resources
Insensitive pity comments

Doctors and therapist s

a lot of unpaid bills

Families and friends who are
not supportive doctors keep telling her sorry
we can't help your child

her kid suffering

long list of needs for her kid

she feels she's an obstacle in

"Don t want to fail my child"

the presence of others.
’

"I need more help"


"Am I doing enough?"

She worries about her child s ’

future, Wonders why her child

she feels helpless because she
face so many challenge
doesn't know e actly what
x

“why this is happening to me?”


is happening with her disabled kid
H
" ow will this effect or help my
child?"

User Perso a n
Based upon the information we gathered during the empathizing stage, this persona was
created to represent the ideal users of the application.

User Jour ey ap n M

This is the user journey map, we prepared using the information collected
during the earlier phases.

value propositio n
It outlined the benefits of the app and services that our target audience
will gain from using it, as they complain of many problems and struggles
with us they will find the revilers they need.

aining the knowledge

Creators Gain G

around and about all Customer Gain

the rare disabilities.

ntegration into
I
The ability to choose Regular notifications Community’s live

your location and of tips and info's events.

about your kid E asy and direct
region.
condition even for communication and call
Notifications of all in session.
rare disability types.
social events
happening around Choosing your city with
The ability to match the services available
your era.
your profile with in your region.
other parents who
regular group call Easy to navigate using
has kids with the Telephone book.

sessions for
same type of
discussions and tips
disability by making
To find an
the app all about
communities for emotional support
your kid disability
sharing thoughts, from community
similar stories and Adding contact and share
knowledge information into difficulties and
each map for the stories. .
guide sources near
your location. to have people in
common to ask
Website. about certain
places,experiences Aware of a guide to

communities for Customer Job and courses .. hospitals, medical

asking information Services and educational

supports.
and join events.

Keep up-to-date
To uickly find q
Guide Map for all the with any Financial
people with the
educational, medical aids and fundings.
same disability as
and caring centers their kids.
and for the Funding
NGOs.

Society perceptions.
Lack of emotional
support from the L ack os any
community group
community, friends sentimental
session for sharing Active communities
Knowing how to deal or family. comments or any
knowledge and that sympathize and kind of sympathy
with their kids experience

support other parents

emotional crises and from doctors.
in similar situation.

Inactive social
demands.

support groups that

includes other going Lack of finical
through the same support or guide to
challenges. funding aids.
Map that guides the
Save more time.

user to all the places

that offers help Wasting time with no
regarding education, useful results.
medical and financial
needs.

Customer Pain

P ain Relievers

Ideas

We expressed the ideas as rough, simple sketches that allow expression of ideas quickly,
inspire further ideas and are easy to share, discuss and continue to the next phase.

An in call numbers in the

search bar to find platform that makes it
Community that an accurate easier for parents to

has different information for connect with specific

features like most of the people who can give help

calling sessions, disabilities and and guide for the places

guide system and guide you to they need.

sharing section. reliable resources.

Part in the platform A feature where it

similar to google

p
ma s but di ided into v is easily

: A platform where accessible to

different categories

education, fund and you can choose

communities with
social e ents with a v your country or
same issues or

feature of

disabilities
city and the

“asking”. v
ser ices a ailable v
in it.

Sketches
v
con ey ideas to different sketches dra wing with paper and digitally trying to demonstrate
functionality the platform as a wireframes without focusing on the visual de element yet

p
in ut bar

create

close

click to join in

participant

click for live

sessions groups

other users
click for
community
events

share

details for
the session

click for
more
details

even

w hat do you want to ask or share?

tagging user to a
video in community

Notifications Settings
tagging for files,links
from other user

notifications for saved

comments, new events or
articles from community

User Flow
It is the path a user takes while navigating our app and it shows what wil
happens in every step

D esi gn
Lo-mid Fidelity Wireframes
The first visual representation of a designer's idea thou translating the concepts
in to tangible and testable artifacts and for our user we made two versions of
the testing wireframes.

12:30 12:30
12:30 12:30 12:30 12:30

Create My
Account
‫يصخشلا كفلم
ءاشنا‬

Profile Edit profile

‫صخشلا يفلم‬
‫ليدعت‬
‫ يصخشلا كفلم‬
person@gmail.com ‫يصخشلا‬
person@gmail.com

Since you are a priority we need to

My Kids Loai
Autism
know what is it that your kid is ‫يؤل‬
14 ‫ يلافطا‬

suffering form ‫ نواد ةمزالتم‬

Notification 14 ‫ كلفط هيناعي ام نع انعالطا كنكمي له‬
‫تاراعشإلا‬

Ty pe of need Contact Us ‫جايتحالا عون‬

+
‫انعم لصاوت‬
pe of Disability

+
Ty

Registered events
‫ كلفطل صاخلا جايتحالا عون‬

Not available? ‫ةلجسملا تايلاعفلا‬ ‫؟رفوتم ريغ‬

saved
‫تاظوفحملا‬

Language
‫ةغللا‬

Log Out
‫جورخلا ليجست‬

12:30 12:30 12:30

choose category choose category

12:30 12:30 12:30

Search ducational places
E

‫ةئف رتخإ‬ ‫ةئف رتخإ‬

Medical Places

Funding Places

lives ‫ ةيميلعت زكارم‬

‫ ةيحص ةياعر زكارم‬

Search

‫ يدام معد ريفوت زكارم‬

‫ةرشابم تاسلج‬

Community

‫عمتجملا‬

12:30 12:30
12:30

Category How to be the best parent

to an autism kid 20 14

someone L orem Ipsum Lorem Ipsum

2 hours ago
12:30 12:30 12:30
share feeling share tip events

Date Time
25 Mar 2023 4:30 pm
20 14

someone ‫ةئفلا‬
2 hours ago L orem Ipsum Lorem Ipsum ‫واد ةمزالتم وذ يلفطل لضفا دلاو حبصأ فيك‬

Duration Location 20
My kid isn’t really reacting with 1
‫نواد ةمزالتم‬

60 min a street.
4

me
H dd’h

‫دمحم‬
‫ةرشابم ةسلج‬ ‫ةرشابم ةسلج‬
42 responses 2 hours ago
This event includes
20 14 ‫ كب رعشن‬ ‫ةلئسالا‬ ‫ تايلاعف‬
Lorem ipsum Lorem ipsumLorem ipsumLorem
someone ipsumLorem ipsumLorem ipsumLorem orem Ipsum
L Lorem Ipsum
2 hours ago ipsumLorem ipsumLorem ipsumLorem ‫خيراتلا‬ ‫تقولا‬

ipsumLorem ipsumLorem ipsumLorem 25 Mar 2023 4:30 pm 20 1

I feel all alone, everyone is ‫دمحم‬ 4

ipsumLorem ipsuem ipsumLorem ipsumLorem

making fun of my kid ipsumLorem ipsum
2 hours ago
‫ةرشابم ةسلج‬ ‫ةرشابم ةسلج‬
‫ةدملا‬ ‫عقوملا‬ ‫ُادج نيزح ودبيو يعم لعافتيال يلفط‬، ‫ لعفأ اذام‬
42 responses 20 14
60 min ‫ةدح عراش‬ ‫؟ لعفأ‬

L orem Ipsum Lorem Ipsum ‫ءاقللا رواحم‬:

42 ‫ قــــــــيلــــعــت‬

Price Õ

Register Now 20 1
YR. 2000
payment on arrival
Æ

Ô
‫دمحم‬
4

‫ةرشابم ةسلج‬ ‫ةرشابم ةسلج‬

Ì 2 hours ago
Õ
‫ يلفط نمو ينم رخسي عيمجلا‬
Æ

‫ملك يطح زوه دجبا نملك يطح زوه دجبا نملك يطح‬
42 ‫ قــــــــيلــــعــت‬

20
‫نملك‬

E
4

‫ةرشابم ةسلج‬ ‫ةرشابم ةسلج‬

The nglish version

‫رعسلا‬

YR. 2000 ‫ لوصولا دنع عفدلا‬

‫ نألا لجــــس‬

The Arabic version

Testing

S
A being parents or caregiver of special need kids being a specific
situation we tried to plan the testing phase carefully, we conducted fair
number of our audience personally and remotely vie oom.
z
going with in the testing by showing and asking them uestions while q
they navigate through the wireframes and saying out loud what they
think during that .

Feedback after testing

Overall feedback of the user was mostly positive with some confusing
parts that we change it later on the design as you will see
Simple, clear, and it is
easy to navigate
throughout

map feature is clear the live sessions layout is

but i could not find crowded
the category easily.

li can not figure out which

room is which from the icons
in the live sessions

community organized
and more appealing

map feature was clear

and great but need more
details

wireframes ha es ompariso c ng c n
after testi ng
Before
12:30 12:30 12:30
All rooms All rooms All rooms

three types of live sessions

layouts to only one layout .

Leave

Afte r

12:30
Back 1

Leave

Before
12:30 12:30
choose category
12:30
Medical laces
P
changing the category to
20 14
Search Search
more easier navigating way
and add more details
L orem Ipsum orem Ipsum
L

20 1

change the crowded layout to

4

L orem Ipsum orem Ipsum

L

more clear and easy layout

20 14

L orem Ipsum orem Ipsum

L

lo r em cente r
specialist in A utism

20 14

L orem Ipsum orem Ipsum

L

Afte r

2
3 12:30

20
12:30

Funding Medical E ducational

12:30

F unding Medical Educational

L orem Ipsum
L r o em Ipsum Lorem Ipsum Lorem Ipsum

20
L orem Ipsum
L r o em Ipsum Lorem Ipsum Lorem Ipsum

20
L orem Ipsum
L r o em Ipsum Lorem Ipsum Lorem Ipsum

lo r em cente r
specialist in utism
20
A

Lorem Ipsum
o em Ipsum Lorem Ipsum Lorem Ipsum
L r

Our app
fondle is a mobile app for all kind of devices it got two main
features the community to share feeling or ask and answer
q uestions, join events and live sessions, the other feature is the
guiding map that reveal all the places they need in their city and
near to their areas further more the ability to make the whole
app about your kid or kids disabilities by answering some
q uestions while creating the profile.

Style uide G
This style guide of fondle app contains the re uired resources related to user interface. q

Typography

The primary typeface used in this App is SUPREME. Logo

Fondle

This is an example of an

header
Meaning “gentle

Supreme -48- Bold

aa
touch and full support”

name
And this is Sub-Heading
Supreme - 38 - SemiBold

Lorem ipsum dolor sit amet consectetur. Viverra ac lectus proin

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ondle
congue ullamcorper semper. Ornare tellus adipiscing aliquam
abcdefghijklmnopqrstuvwxyz

nullam feugiat sed felis semper. Tristique vulputate dignissim

0123456789 .,!?- :;

amet eget eget lacinia vitae. Quis parturient senectus phasellus

arcu purus odio.

Supreme - 24- Regular

Iconography and Illustrations

button solid button text other buttons

button outline

utton Button Text

+
B

B utton Button Text

utton Button Text

B

utton
utton Button Text
B
B

uttons
B Button Text

ations
Text
Text

illustr

Color palette

primary & se o dary cn Font & background Butto Colors n

error a ccent

neutrals

Following are some of the final design screens which are designed and prototyped
using Figma.

High Fidelity Wireframes

undefined shapes to
e plain that people are
x

different in their needs and

rights.

12:30 12:30 12:30

On boarding :

Skip

designed to introduce the users

to our app and the main task or
ondle
where it’s all about you

We re as ’ king you questions

We are here to feel
to get you to the place

kid’s

ideas behind although they can

you and all your where you feel included
cases only

skip it by pressing the skip

Next Next

button.

Logo which means a gentle touch

Slide for more details

choose your kid s case ’

Creating your account :

12:30 12:30

First

creating new account is necessary

we need to
Since you are a priority

know what is the case of your kid is

Type of special need

cause the user goes through a very Type of special need

q
Autism
e.g Autism

Deaf and Hard of Hearing

specific few steps and uestioner to

Not available?

To get Started Visual Impairments

Psychiatric Disabilities

help us identifying the kid s case and ’

Create Profile
Down syndrome

Mental disorder

make all the app relating to it.

notifying the users if his/her
kid s case available
’

asking user for what their kid case if

its not included in the app
The main page and menu
user input only basic information and
-
his/her kid kids . The kid page

12:30 12:30 12:30 12:30 12:30 12:30

Create Profile My Account Edit profile

First Not there?
person@gmail.com

Parent Name

we need to
Since you are a priority
Age My Kids
know what is the case of your kid is
Loai can you tell us what is your kid case?
Autism
Notification
14
Contact Us
Type of special need Type your kid need type
’
Kid s Name

Registered events
+ Autism

Not available?

’
Kid Age saved
We ll do our best to include

it as soon as possible and

Language
you will be notified
Your Kid Gender

Log Out
Female Male

Submit submit OK

Submit

Menu

User can add more

Navigate through pages than one kid

submitting your answer after

choosing the kid case that
included in the app

The Map eature :

F open track my location Category and tag

one of the main features of this app is

12:30 12:30 12:30

a guiding map for all places that Funding Medical Educational Funding Medical Educational Funding Medical Educational

searching bar Search

needed to help solving some of the Arrival ( 2 mins ) Arrival ( 2 mins ) Arrival ( 2 mins )

parents struggles, users first need to

Arrival ( 2 mins )

activate track my location from their

phones then choose what aspect they Hospital of down

want to search for and lastly all the

syndrome

places near their location will appear Guide Guide Guide

so they can click on each one for

more details and specific information.
map or guiding
details of the specific place

choose which part of the community

Live sessions:

12:30 12:30 12:30

C ooseh Live session

user can discuss and meet other Your

10
kid is aging, he is a teenager Ahmed Sami Ma ed j

users whom have same conditions lives

and struggles or even for emotional

Sameera Hebah Ameera
Tuesday march 3rd

Understanding Your Kid Better

support each session has buttons for Community

share your struggles
20 Saleh Afrah Ha em z

share or to save for the ongoing Anas Yusra Yusuf

sessions. community community

Leave

voice and writing method

ongoing session for chatting while session.

chose category
give instructions

12:30 12:30 12:30

participate in an
Category Category Category
event
share thoughts
share feeling share tip events share feeling share tip events share feeling share tip events

F
Hebah Huda Huda

1 hours ago 1 hours ago 1 hours ago

The Community eature :

My kid ’
isn t really reacting with me How to be the best parent to an How to be the best parent to an
autism kid autism kid

40 responses 40 responses Register Remined me 40 responses

z
Ha em M
Ha z
ohammed
em z
Ha em

2 hours ago 2 hours ago 2 hours ago

I feel all alone, everyone is ma king 3 tips to help your autism son Let s gather, let s fondle ’ ’
fun of my kid maintain a social life

20 responses 20 responses Register Remined me 20 responses

In this part user find what he/she z

Ha em

2 hours ago
z
Ha em

2 hours ago
z
Ha em

2 hours ago

needs of information rather it is asking

community community community

20 responses 20 responses 20 responses

about their kid case or specific

problem and he/she can share 12:30 12:30 12:30

feeling, moments or educational tips z

Ha em

2 hours ago
Mohammed
2 hours ago
Ho w to be the best parent

to an autism kid

and join an events. I feel all alone, everyone is

ma king fun of my kid

The feelings of frustration, anger and
3 tips to help your autism son

maintain a social life

If you've recently learned that your child has

Hebah

1 hours ago

impatience that come with raising a child or might have autism spectrum disorder,
Date Time
with autism are absolutely real, and they can you're probably wondering and worrying
25 Mar 2023 4:30 pm
take a toll on every aspect of your life. The about what comes next. No parent is ever
emotional, physical, financial, social and prepared to hear that a child is anything
psychological impacts can be daunting, but other than happy and healthy, and an ASD
Duration Location
that in no way justifies daily yelling at family diagnosis can be particularly frightening. You
members. There are online, in-person and may be unsure about how to best help your
60 min ’
Hadd h street.

therapeutic support options in every state child, or confused by conflicting treatment

for parents, and what is even more galling is advice. Or you may have been told that ASD
that you have spent good money and time is an incurable, lifelong condition, leaving This event includes
on therapy. Bad therapy, at that. Unable to you concerned that nothing you do will make
how to deal with your kid in a professional
express their thoughts or feelings in words, a difference.
way
children with autism may “lash out” and hit,
understanding what is more beneficial for
scratch, or bite their parents or siblings.
your kid.
Hitting can range from an open-handed slap
getting to know what others endure
to a closed-fisted punch.
during treating their kids cases.

100 like 20 comment

While it is true that ASD is not something a Price

person simply “grows out of,” there are many
treatments that can help children acquire
YR. 1000 p ym n a e t on arrival

new skills and overcome a wide variety of

Register Now
developmental challenges. From free
government services to in-home behavioral
therapy and school-based programs,
assistance is available to meet your child's
special needs and help them learn, grow,
and thrive in life.

what's ext? n
The plan is to continue growing up the app for more better version and adding
more feature that can help in solving the problems easing the struggles ...here are
suggestions for the future plan
web versio
researching librarie
contact the professional

Reflection
Reflection
First of all, this was a capstone project while being in recoded u ui design bootcamp 2023 as a team work x

for 8 weeks to create our app and I must say this was a great opportunity for us to e plore a lots of trends in
UI/UX designing. Personally, Even though it was hard and challenging specially for the audience to open up
x

with us in such sensitive subject but it all went well and i was satisfied with the feedback given.

this is a great approach to continue with the future developments.

With the e perience, we got during testing phase, we thought to do this project better, eliminating the issues
x

with the layout in the app. however there are still of new features can be added in the future and up to
testing again.

Finally I would like to say, from the beginning this project was a great e perience and mainly it motivated me x

to e plore more about UX and UI designing. And I wish we would be able to release a better version of this
x

app with new more great features.

Thank You