>
Project overview
Design an intuitive and engaging user interface for a Zoo Simulator app to train scientists in zoo management, focusing on animal care, health monitoring
Sketching
The purpose of the sketching stage is to quickly outline key information and the main layout of the user interface, explore initial design ideas, and gather feedback to understand users’ interpretations. This helps improve the design and prepare for the next steps-user testing.
The sketching stage is used to test the concept, terms, and layout to see if they meet users' expectations. It helps identify any confusion, gather user preferences, and explore ideas about what they find "fun" for the animal detail page.
Here are some quotes from participants:
"I need to know the purpose, the goal, and the task I need to do. You should tell me this right at the beginning."
"Maybe include the appetite of the animals? That way, I can understand how frequently I need to feed them."
"How much food do I have?"
"Don't give me pop-ups. If 30 animals are nearly dying, do I need to click 30 times to close the pop-ups or 30 times to click the 'Feed Animal' button?"
Fonts
Consistent with the brand image, the font family is clear and rational. It gives users accessibility and maximum comfort of interaction.
AaBbCc123!&*
Roboto Regular
A scientist’s challenge!
AaBbCc123!&*
Roboto Semibold
A scientist’s challenge!
AaBbCc123!&*
Roboto Bold
A scientist’s challenge!
Font size
Dashboard main title
Alatsi regular 36
Dashboard secondary title
Roboto medium 28
Dashboard third title
Roboto regular 20
Dashboard button text
Roboto medium 20
Dashboard text/sidebar text
Roboto regular 12
Illustrations
I created custom illustrations that showcase the brand’s unique identity and distinctive style. These original visuals emphasize the brand’s individuality while adding an artistic flair. The set includes representations of three animal types and four different statuses.
Elephant avatar
Giraffe avatar
Monkey avatar
Active status
Active status
Active status
Playing status
Can’t walk
Dead status
Dead status
Dead status
I combined the themes of the zoo, forest, digital data, animal science, and animal care to create an emotion board, which then guided the development of my colour palette.
A colour palette creates a consistent and visually appealing scheme that reflects the brand’s identity, enhances user experience, and improves readability.
The main colour is green, representing the zoo, with yellow as the secondary colour. Magenta is used as an accent colour and won't be applied extensively.
Main Green 0BF4C8
2nd Colour FAD85D
F2A0FF
000000 40%
F6F6FB
FFFFFF
000000
Dashboard
Heuristic principles
Feedback: Provide clear progress feedback with a progress bar at the top, showing users their current progress and remaining steps.
Consistency: Apply consistent colours to convey meaning—magenta for "playing," green for "active," red for "in danger," and grey for "dead."
Thank you for your attention.
