Good
Bad
Terrible
Ok
Great
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.
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.
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.
Colour:
In selecting the colour palette for our application, we meticulously considered not only aesthetic appeal, but also the psychological and physiological effects of colour.
We have also made sure our choices were accessible in terms of colour contrast.
Our primary colour, “Light green” (#9DB580), was chosen for its calming and soothing properties.
Green, often associated with nature and growth, resonates with users on a subconscious level, fostering feelings of tranquility and balance. This aligns perfectly with our application's theme, where users seek solace and support in their journey.
Additionally, light green is scientifically recognized as a neutral colour for the human eye, reducing visual strain and ensuring a comfortable viewing experience for our users.
Quicksand is chosen as the logo font because of its friendly style. The rounded style of the font compliments well with our logo and mascots, which also have a smooth and rounded shapes. Its smooth curves and clean look convey a sense of calmness, inclusiveness, and approachability, which align well with our mood tracking and meditation app.
Quicksand is chosen as the logo font because of its friendly style. The rounded style of the font compliments well with our logo and mascots, which also have a smooth and rounded shapes. Its smooth curves and clean look convey a sense of calmness, inclusiveness, and approachability, which align well with our mood tracking and meditation app.
With closed eyes and a serene smile, the logo evokes feelings of calmness and relaxation.
With closed eyes and a serene smile, the logo evokes feelings of calmness and relaxation.
With closed eyes and a serene smile, the logo evokes feelings of calmness and relaxation.
Logo:
Logo:
Fonts:
Fonts:
Quicksand
Quicksand
DM Sans is chosen as the body font because of its great readability. Its clear letter forms allows easy-reading and stress-free experience, crucial for users engaging with mood tracking and meditation content. DM Sans also provides a comfortable reading experience across different devices, enhancing the usability of our app.
DM Sans is chosen as the body font because of its great readability. Its clear letter forms allows easy-reading and stress-free experience, crucial for users engaging with mood tracking and meditation content. DM Sans also provides a comfortable reading experience across different devices, enhancing the usability of our app.
DM Sans is chosen as the body font because of its great readability. Its clear letter forms allows easy-reading and stress-free experience, crucial for users engaging with mood tracking and meditation content. DM Sans also provides a comfortable reading experience across different devices, enhancing the usability of our app.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Find the full styleguide at tranquify-style-guide.vercel.app
Find the full styleguide at tranquify-style-guide.vercel.app
Find the full styleguide at
tranquify-style-guide.vercel.app
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
DM Sans
DM Sans
Colour:
In selecting the colour palette for our application, we meticulously considered not only aesthetic appeal, but also the psychological and physiological effects of colour.
We have also made sure our choices were accessible in terms of colour contrast.
Our primary colour, “Light green” (#9DB580), was chosen for its calming and soothing properties.
Green, often associated with nature and growth, resonates with users on a subconscious level, fostering feelings of tranquility and balance. This aligns perfectly with our application's theme, where users seek solace and support in their journey.
Additionally, light green is scientifically recognized as a neutral colour for the human eye, reducing visual strain and ensuring a comfortable viewing experience for our users.
Quicksand is chosen as the logo font because of its friendly style. The rounded style of the font compliments well with our logo and mascots, which also have a smooth and rounded shapes. Its smooth curves and clean look convey a sense of calmness, inclusiveness, and approachability, which align well with our mood tracking and meditation app.
Quicksand is chosen as the logo font because of its friendly style. The rounded style of the font compliments well with our logo and mascots, which also have a smooth and rounded shapes. Its smooth curves and clean look convey a sense of calmness, inclusiveness, and approachability, which align well with our mood tracking and meditation app.
Solving a key environmental or social issue with targeted solutions and value for users.
Solving a key environmental or social issue with targeted solutions and value for users.
UI/UX Designer, UX Researcher, Frontend Developer
UI/UX Designer, UX Researcher, Frontend Developer
3
3
Feb - May 2024
Feb - May 2024
Figma, Illustrator, React / Next.js
Figma, Illustrator, React / Next.js
THEME
MY ROLES
TEAM
TIMELINE
TOOLS
LINKS
A mood-tracking and meditation app for mobile,
with a focus on inclusive design.
A mood-tracking and meditation app for mobile,
with a focus on inclusive design.
View app ↗
Case Study • 10 min. read
Tranquify
Case Study • 10 min. read
Case Study • 10 min. read
A mood-tracking and meditation app for mobile,
with a focus on inclusive design.
View app ↗
Case Study • 10 min. read
Tranquify
Case Study • 10 min. read
Case Study • 10 min. read
BACKGROUND
There is a growing prevalence of those suffering from mood and anxiety disorders, especially amongst younger age groups.
Mental disorders in Canada, 2022
Witnessing this concerning rise, we came up with the mission to provide an accessible and practical tool to empower individuals to take charge of their emotional health and mental well-being.
BACKGROUND
There is a growing prevalence of those suffering from mood and anxiety disorders, especially amongst younger age groups.
Mental disorders in Canada, 2022
Witnessing this concerning rise, we came up with the mission to provide an accessible and practical tool to empower individuals to take charge of their emotional health and mental well-being.
BACKGROUND
There is a growing prevalence of those suffering from mood and anxiety disorders, especially amongst younger age groups.
Mental disorders in Canada, 2022
Witnessing this concerning rise, we came up with the mission to provide an accessible and practical tool to empower individuals to take charge of their emotional health and mental well-being.
PAIN POINTS & SOLUTION
Many individuals struggle to consistently track their mood, stress levels, and sleep patterns due to lack of time, or engagement with existing apps. This makes it hard for them to recognize patterns or take proactive steps in improving their mental health.
Tranquify will provide a user-friendly, accessible platform designed to make it easy for users to track their mood, stress levels, and sleep quality day-by-day.
By using a simple, visually appealing interface, users can easily log their emotions, sleep patterns, and stress experiences without feeling overwhelmed or bogged down by excessive data entry. The app will also integrate a personalized meditation content feature, in which after users log their mood or stress levels, the app will recommend tailored meditation sessions that align with their current emotional state.
PAIN POINTS & SOLUTION
Many individuals struggle to consistently track their mood, stress levels, and sleep patterns due to lack of time, or engagement with existing apps. This makes it hard for them to recognize patterns or take proactive steps in improving their mental health.
Tranquify will provide a user-friendly, accessible platform designed to make it easy for users to track their mood, stress levels, and sleep quality day-by-day.
By using a simple, visually appealing interface, users can easily log their emotions, sleep patterns, and stress experiences without feeling overwhelmed or bogged down by excessive data entry. The app will also integrate a personalized meditation content feature, in which after users log their mood or stress levels, the app will recommend tailored meditation sessions that align with their current emotional state.
UX AUDIT
The main objective was to evaluate the overall user experience, identify pain points, and gather feedback for further improvements.
We tested five users with our Figma Hi-Fi prototype on a laptop.
The screen size was set to an iPhone 14 Pro Max.
UX AUDIT
The main objective was to evaluate the overall user experience, identify pain points, and gather feedback for further improvements.
We tested five users with our Figma Hi-Fi prototype on a laptop.
The screen size was set to an iPhone 14 Pro Max.
UX AUDIT
The main objective was to evaluate the overall user experience, identify pain points, and gather feedback for further improvements.
We tested five users with our Figma Hi-Fi prototype on a laptop.
The screen size was set to an iPhone 14 Pro Max.
Better labelling and hierarchy,
to address clarity and accessibility.
Another hierarchy fix, to reduce confusion about the weather section.
KEY TAKEAWAYS
Refining Technical and Human-Centered Design Skills
This project not only refined my technical skills in React and frontend development, but also deepened my understanding of human sensibilities in design. Through collaboration, empathy, and adaptability, I’ve come to realize that a truly meaningful user experience requires more than just functionality—it requires a thoughtful, user-centered approach.
The Value of User Feedback and UX Audits
Conducting a UX audit was particularly enlightening. It taught me the critical value of actively listening to user feedback and adopting their perspective when tackling design challenges. We uncovered issues that as product designers, hadn’t initially noticed. This experience reinforced the significance of small, intentional adjustments—often overlooked in early stages—that can significantly improve usability and overall satisfaction.
In the future:
We hope to integrate a fully functional back-end system which would enable us to provide a seamless, end-to-end experience.
KEY TAKEAWAYS
Refining Technical and Human-Centered Design Skills
This project not only refined my technical skills in React and frontend development, but also deepened my understanding of human sensibilities in design. Through collaboration, empathy, and adaptability, I’ve come to realize that a truly meaningful user experience requires more than just functionality—it requires a thoughtful, user-centered approach.
The Value of User Feedback and UX Audits
Conducting a UX audit was particularly enlightening. It taught me the critical value of actively listening to user feedback and adopting their perspective when tackling design challenges. We uncovered issues that as product designers, hadn’t initially noticed. This experience reinforced the significance of small, intentional adjustments—often overlooked in early stages—that can significantly improve usability and overall satisfaction.
In the future:
We hope to integrate a fully functional back-end system which would enable us to provide a seamless, end-to-end experience.
KEY TAKEAWAYS
Refining Technical and Human-Centered Design Skills
This project not only refined my technical skills in React and frontend development, but also deepened my understanding of human sensibilities in design. Through collaboration, empathy, and adaptability, I’ve come to realize that a truly meaningful user experience requires more than just functionality—it requires a thoughtful, user-centered approach.
The Value of User Feedback and UX Audits
Conducting a UX audit was particularly enlightening. It taught me the critical value of actively listening to user feedback and adopting their perspective when tackling design challenges. We uncovered issues that as product designers, hadn’t initially noticed. This experience reinforced the significance of small, intentional adjustments—often overlooked in early stages—that can significantly improve usability and overall satisfaction.
In the future:
We hope to integrate a fully functional back-end system which would enable us to provide a seamless, end-to-end experience.
Next Project: West Point Hotel →
Next Project: West Point Hotel →
Next Project: West Point Hotel →
© Angela Lee 2025. All rights reserved.
Tranquify
Tranquify
Tranquify
Findings & Recommendations
Findings & Recommendations
Findings & Recommendations
Findings & Recommendations
Findings & Recommendations
Findings & Recommendations
Solutions in Detail
Solutions in Detail
STYLEGUIDE
STYLEGUIDE
STYLEGUIDE
MAIN FEATURES / MVPs
Solutions in Detail
Solving a key environmental or social issue with targeted solutions and value for users.
3
Feb - May 2024
THEME
MY ROLES
TEAM
TIMELINE
TOOLS
LINKS
UI/UX Designer, UX Researcher, Frontend Developer
Figma, Illustrator, React / Next.js
PAIN POINTS & SOLUTION
Many individuals struggle to consistently track their mood, stress levels, and sleep patterns due to lack of time, or engagement with existing apps. This makes it hard for them to recognize patterns or take proactive steps in improving their mental health.
Tranquify will provide a user-friendly, accessible platform designed to make it easy for users to track their mood, stress levels, and sleep quality day-by-day.
By using a simple, visually appealing interface, users can easily log their emotions, sleep patterns, and stress experiences without feeling overwhelmed or bogged down by excessive data entry.
Additionally, the app will integrate a personalized meditation content feature.
After users log their mood or stress levels, the app will recommend tailored meditation sessions that align with their current emotional state.
Good
Ok
Great
Terrible
Bad
Solutions in Detail
Tranquify
Tranquify
PERSONAS
Try the prototype! (Press "R" to restart)
Better labelling and hierarchy,
to address clarity and accessibility.
Another hierarchy fix, to reduce confusion about the weather section.
* Current product may exhibit slight deviations from proposed sitemap
* Current product may exhibit slight deviations from proposed sitemap
SITEMAP
PERSONAS
PERSONAS
SITEMAP
SITEMAP