Animal Wiki
A fun and interactive app that teaches kids about animals with visuals and simple facts.
Role
Duration
Target Audience
Discover
Define
Ideate
Ideate
Design
Testing
My Design Process
Tool
UI Designer & Ux Designer,
May - June 2023
Kids (ages 5–12), Parents, and Teachers
User Research
User Persona
Userflow
Userflow
Lo-fi Design
Hifi- Design
Usability testing
Figma
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
User Research
User Persona
User Journey Mapping
User Flow
Problem Statement:
Solution:
Name: David, 7 years old
Pain Points: Gets bored easily with books, struggles with retaining information
Goals: Wants to learn about animals in a fun and engaging way
Discovery: David sees the app on his parents’ phone or in school
Onboarding: Simple sign-up with parental control settings
Exploring: Selects an animal and learns through visuals, sound, and animations
Engagement: Takes a mini-quiz or plays an interactive game about the animal
Kids need an engaging and interactive way to learn about animals because traditional learning materials can be boring and lack interactivity.
A fun and interactive app that teaches kids about animals with visuals, sounds, and simple facts.
Open the app
Signup
Home
Choose an animal category
Learn facts, and see images
Login
Style Guide
Hi-Fi Design
Typography: San serif (Poppins)
Buttons
Aa
#0081A7
Blue
Light
18.40 AAA
AAA
1.14
#e6f2f6
rgb(230, 242, 246)
Light :hover
17.23 AAA
AAA
1.22
#d9ecf2
rgb(217, 236, 242)
Light :active
13.79 AAA
AAA
1.52
#b0d8e4
rgb(176, 216, 228)
Normal
4.70 AAA
AA
4.47 AA
#0081a7
rgb(0, 129, 167)
Normal :hover
3.94 AA
5.33 AAA
AA
#007496
rgb(0, 116, 150)
Normal :active
3.28 AA
6.39 AAA
AA
#006786
rgb(0, 103, 134)
Dark
3.01
6.99 AAA
AA
#00617d
rgb(0, 97, 125)
Dark :hover
2.25
9.35 AAA
AAA
#004d64
rgb(0, 77, 100)
Dark :active
1.71
12.30 AAA
AAA
#003a4b
rgb(0, 58, 75)
Darker
1.44
14.62 AAA
AAA
#002d3a
rgb(0, 45, 58)
Get Started
Get Started
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
Welcome Back!
Login
Password
Get Started
Forgot password?
Animal Wiki
Popular
Mammalians
Amphibians
Birds
Mammalians
Lions
Mammalians
Tigers
Mammalians
Tortoise
Mammalians
Elephant
Get Started
Elephants are the largest land animals on Earth, known for their intelligence, memory, and social behaviour. Here are some key points about elephants:
Species, Size, Trunk, Tusks
Elephant
Animal Wiki
A fun and interactive app that teaches kids about animals with visuals and simple facts.
Role
Duration
Target Audience
Discover
Define
Ideate
Design
Testing
My Design Process
Tool
UI Designer & Ux Designer,
May - June 2023
Kids (ages 5–12), Parents, and Teachers
User Research
User Persona
Userflow
Lo-fi Design
Hifi- Design
Usability testing
Figma
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
User Research
User Persona
User Journey Mapping
User Flow
Problem Statement:
Solution:
Name: David, 7 years old
Pain Points: Gets bored easily with books, struggles with retaining information
Goals: Wants to learn about animals in a fun and engaging way
Discovery: David sees the app on his parents’ phone or in school
Onboarding: Simple sign-up with parental control settings
Exploring: Selects an animal and learns through visuals, sound, and animations
Engagement: Takes a mini-quiz or plays an interactive game about the animal
Kids need an engaging and interactive way to learn about animals because traditional learning materials can be boring and lack interactivity.
A fun and interactive app that teaches kids about animals with visuals, sounds, and simple facts.
Open the app
Signup
Home
Choose an animal category
Learn facts, and see images
Login
Style Guide
Hi-Fi Design
Typography: San serif (Poppins)
Buttons
Aa
#0081A7
Blue
Light
18.40 AAA
AAA
1.14
#e6f2f6
rgb(230, 242, 246)
Light :hover
17.23 AAA
AAA
1.22
#d9ecf2
rgb(217, 236, 242)
Light :active
13.79 AAA
AAA
1.52
#b0d8e4
rgb(176, 216, 228)
Normal
4.70 AAA
AA
4.47 AA
#0081a7
rgb(0, 129, 167)
Normal :hover
3.94 AA
5.33 AAA
AA
#007496
rgb(0, 116, 150)
Normal :active
3.28 AA
6.39 AAA
AA
#006786
rgb(0, 103, 134)
Dark
3.01
6.99 AAA
AA
#00617d
rgb(0, 97, 125)
Dark :hover
2.25
9.35 AAA
AAA
#004d64
rgb(0, 77, 100)
Dark :active
1.71
12.30 AAA
AAA
#003a4b
rgb(0, 58, 75)
Darker
1.44
14.62 AAA
AAA
#002d3a
rgb(0, 45, 58)
Get Started
Get Started
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
Welcome Back!
Login
Password
Get Started
Forgot password?
Animal Wiki
Popular
Mammalians
Amphibians
Birds
Mammalians
Lions
Mammalians
Tigers
Mammalians
Tortoise
Mammalians
Elephant
Get Started
Elephants are the largest land animals on Earth, known for their intelligence, memory, and social behaviour. Here are some key points about elephants:
Species, Size, Trunk, Tusks
Elephant
Role
Duration
Target Audience
Discover
Define
Ideate
Design
Testing
My Design Process
Tool
UI Designer & Ux Designer,
May - June 2023
Kids (ages 5–12), Parents, and Teachers
User Research
User Persona
Animal Wiki
A fun and interactive app that teaches kids about animals with visuals and simple facts.
Userflow
Lo-fi Design
Hifi- Design
Usability testing
Figma
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
User Research
User Persona
User Journey Mapping
User Flow
Problem Statement:
Solution:
Name: David, 7 years old
Pain Points: Gets bored easily with books, struggles with retaining information
Goals: Wants to learn about animals in a fun and engaging way
Discovery: David sees the app on his parents’ phone or in school
Onboarding: Simple sign-up with parental control settings
Exploring: Selects an animal and learns through visuals, sound, and animations
Engagement: Takes a mini-quiz or plays an interactive game about the animal
Kids need an engaging and interactive way to learn about animals because traditional learning materials can be boring and lack interactivity.
A fun and interactive app that teaches kids about animals with visuals, sounds, and simple facts.
Open the app
Signup
Home
Choose an animal category
Learn facts, and see images
Login
Style Guide
Typography: San serif (Poppins)
Buttons
Aa
#0081A7
Blue
Light
18.40 AAA
AAA
1.14
#e6f2f6
rgb(230, 242, 246)
Light :hover
17.23 AAA
AAA
1.22
#d9ecf2
rgb(217, 236, 242)
Light :active
13.79 AAA
AAA
1.52
#b0d8e4
rgb(176, 216, 228)
Normal
4.70 AAA
AA
4.47 AA
#0081a7
rgb(0, 129, 167)
Normal :hover
3.94 AA
5.33 AAA
AA
#007496
rgb(0, 116, 150)
Normal :active
3.28 AA
6.39 AAA
AA
#006786
rgb(0, 103, 134)
Dark
3.01
6.99 AAA
AA
#00617d
rgb(0, 97, 125)
Dark :hover
2.25
9.35 AAA
AAA
#004d64
rgb(0, 77, 100)
Dark :active
1.71
12.30 AAA
AAA
#003a4b
rgb(0, 58, 75)
Darker
1.44
14.62 AAA
AAA
#002d3a
rgb(0, 45, 58)
Get Started
Get Started
Base Value: 11
Scale: 1.25
42px
3.818rem
H1
34px
3.091rem
H2
27px
2.455rem
H3
21px
1.909rem
Sub Heading
17px
1.545rem
Sub heading 2
14px
1.273rem
Body text
11px
1.000rem
Body text 2
Hi-Fi Design
Animal Wiki
What do you know about the Animal Kingdom ?
Get Started
Welcome Back!
Login
Password
Get Started
Forgot password?
Animal Wiki
Popular
Mammalians
Amphibians
Birds
Mammalians
Lions
Mammalians
Tigers
Mammalians
Tortoise
Mammalians
Elephant
Get Started
Elephants are the largest land animals on Earth, known for their intelligence, memory, and social behaviour. Here are some key points about elephants:
Species, Size, Trunk, Tusks
Elephant