Graphics
Mascots
Our five mascots represent different moods, each depicted in a unique colour palette to maintain consistent tones aligned with our app's design. To enhance inclusivity and approachability, the mascots are intentionally designed with imperfect shapes, conveying the message that it's okay not to be perfect.
#FF9E88
#F78B98
#567751
#79ADDC
#5C5C6D
Icons
Icons are utilized to improve visual communication with users, enabling them to intuitively locate navigations or buttons. Each icon is accompanied by label text, ensuring that users can read the label even if they are unsure of the icon's meaning. We use icons from Google as they offer simplicity and aligns with user expectations for design.
Navigation Bar
Navigation bar icons represent different pages within the app, making it easier for users to navigate to each page.
Size: 40px x 40px
Mood Tracker Questions
On the Mood Tracker page, users are presented with a series of questions to answer. These questions feature icon options that users can quickly select to indicate their mood, stress level, and other parameters.
Mood Icon Size: 55px x 55px
Stress/Sleep Level Icons Size : 52px x 52px
Great
Good
Ok
Bad
Terrible
Setting Menu
The Settings page contains eight setting menus, each accompanied by icons on their respective buttons. These icons help users easily locate the setting option they desire.
Icon Size: 18px x 18px
Photographs
Photographs are used as thumbnails for meditation content, arranged within square containers of two different sizes. The corners are gently rounded, ensuring the easy recognition as clickable cards and enhancing accessibility for users.
Small Thumbnail Size: 88px x 88px
Large Thumbnail Size: 128px x 128px
