Introduction
The journey began with a modest app concept: creating a gratitude journal application designed to promote users' mental well-being. By offering features like gratitude journaling, affirmations, and daily motivation content, the app aimed to inspire individuals and cultivate a positive self-care routine in their lives.
Designed by: Hashir Tihami & Kshitiz Sharma
This project is currently in the development phase. Stay tuned by following us on Instagram for updates on the release date.
"Tiny Logs" conveys simplicity and approachability, emphasizing that anyone can use the app to start their gratitude journaling journey without feeling overwhelmed by lengthy entries.
The Story Behind Our Beaver Mascot
The notion of using a beaver as our app's mascot struck me when I was brainstorming ideas for a friendly face to represent our platform. Suddenly, it clicked in my mind – the term "Log" perfectly encompasses both the journals created by our users and the wooden logs. And who better than beavers, renowned for using logs to build and secure their environments, to symbolize making our world a safer place?
Building on this concept, we brainstormed a bunch of additional ideas about how we could leverage the combination of logs and beavers to inspire users to log more frequently. The central idea was to encourage users to write a daily gratitude entry, and with each new day, they would accumulate a log. Our friendly beaver could then use these logs to construct its home and create other unique artifacts, which would serve as trophies and rewards for our users.
But for that, we need a Beaver first 🙂
So I jumped in and started collecting some cute beaver inspiration from the web. Then, I opened up Adobe Illustrator to play around with design ideas.
Not gonna lie, first few versions were just horrible. 🙂
Behold! The Beaver is alive and adorable!
We chose the vibrant orange color for our beaver mascot because it symbolizes enthusiasm and energy, traits that align perfectly with the spirit of our app. Orange also represents creativity and positivity, which are values we wanted to convey to our users through our mascot's cheerful appearance.
The design was intentionally crafted with adaptability as a top priority. This ensured that we could easily create various versions to suit different scenarios, whether it's a cheerful beaver, a sad one, or adaptations for use as icons or in messaging.
Wireframes
We put in quite a bit of effort into the wireframing stage, largely because our goal was to keep the app simple and user-friendly. It did take us a while, but we wanted to make sure that it ticked all the necessary boxes and met our requirements comprehensively.
So here it is. Our lovely beavy app
Get ready, we're about to explore the ins and outs of each design flow.
Cuteness over-Loader
nom nom nom nom...
Onboarding
In shaping the app's initial user experience, we went for a minimalist onboarding. With a concise message and an obvious 'start writing' button, we aimed to reduce cognitive load and make it effortless for users to begin their gratitude journey. After jotting down their thoughts, a 'done' button simplifies the process of saving the log."
Today Screen
After writing a log, users will land on the "Today" screen. Here, they can easily review the log they just wrote, find a prominent call-to-action button to create a new entry, and access a bottom sheet to browse their previous logs.
Today Screen - Empty State
The following day when users return to the app, they encounter an empty "Today" tab. Here, we've made the "Tap to Log" button more prominent by centering it and increasing its size. This deliberate design choice ensures users can seamlessly initiate their gratitude entry without the need to search for the button. Additionally, a small and friendly beaver-themed toast message provides motivation and encouragement, simplifying the process of logging thoughts for the day.
Ideas to log!
When it comes to mental health, people often find themselves fixated on negative memories, making it easy to overlook the good things that happen in their day. This is where our small but impactful button comes into play.
Pressing it triggers an overlay with a horizontal scroll of ideas to help them remember those little moments in their day that they can be grateful for. It's all about breaking free from the grip of negative memories and starting to appreciate life's small, yet wonderful, moments.
View all logs
To enhance user navigation, we adopted a navigation approach inspired by the Shazam app, avoiding the use of a conventional navigation bar. Our design allows users to access older logs simply by dragging the bottom sheet upwards. This screen serves as a centralized hub, providing easy access to a range of options, including settings, progress tracking, and a comprehensive archive of previous logs.
We chose to display full previous logs, avoiding truncation and extra clicks, for a seamless experience. Users can easily browse their joyful memories on one screen, like flipping through a happiness-filled book of their own memories.
Progress 🥁🥁🥁
We designed this screen primarily to serve as a motivation hub, encouraging users to maintain their daily gratitude practice. The concept of streaks plays a key role here. Additionally, we integrated various statistics to keep users engaged and informed about their progress.
In the future, we envision expanding the functionality of this screen to incorporate exciting features such as awards and milestones. These will be unlocked by users as they achieve significant streaks and continue their daily logging journey.
Message of the day
We've incorporated a "Message of the Day" feature, delivered through push notifications via Firebase. It's designed to inspire and foster a deeper connection between users and their beloved beaver.
Furthermore, users have the delightful option to share these messages with their friends.
Dark mode 🌗
And for those who love dark modes (like me), we've got you covered too!
Explore more case studies
Grammar Guide Case study
This case study showcases my journey from concept to successful implementation of Grammar Guide
