Estimate Project

Habit‑formation app

Neuroscience and AI‑based habit‑building journal* aligned with a vision of your future self

2025
Figma
UI/UX design
Mental health
App

* We haven’t specified the name of the app because it hasn’t been released yet

Dark app screen showing the 'future 2030 moments' card and an audio entry in My Future Diary.
Dark app screen showing the 'future 2030 moments' card and an audio entry in My Future Diary.
Man sitting on a workout mat at home, looking at his phone.

Project idea

After discovering our designs on Dribbble, a client from the UK approached us to create a design for their habit‑formation app.

In addition to a meticulous focus on user convenience, the design needed to establish a foundation for future AI‑based journaling features that the client planned to implement.

Woman relaxing indoors, reading a book with her phone in hand.
Woman relaxing indoors, reading a book with her phone in hand.
Woman sitting outdoors using her phone with the habit app.
Woman sitting outdoors using her phone with the habit app.

Goals

to achieve

The client needed an experienced design team to:

— Offer advice on illustration types and color schemes to use within the app’s interface, and create a consistent interface.

— Design a well‑thought‑out onboarding experience that is crucial for the app's functionality and guides user interactions effectively.

— Organize ideas into a logical framework, preparing for the integration of future AI‑based features and development phases.

Two app screens: a recorded future diary entry and a list of personalized rituals to choose from.
Two app screens: a recorded future diary entry and a list of personalized rituals to choose from.

UI/UX design

Phase 1:
Concept creation

References

Since the app aimed to provide users with personalized journals instead of a random set of habits, the client drew inspiration from our user‑centered habit‑tracking design shots and the journaling concept.

App design shots encouraging users to share their habit progress with friends.
App design shots encouraging users to share their habit progress with friends.

Moodboards

After understanding the client's design preferences, we proposed three moodboard variants to clarify the coloring and direction of the application's visual concept.

The client selected one featuring pastel colors and hand‑drawn illustrations.

Mood board collage of visual references and typography for the app.
Mood board collage of visual references and typography for the app.

Mind map

We outlined the core functionality of the product and created a mind map of the application, which was further refined through ongoing work and collaboration.

Mind map diagram outlining app structure and feature relationships.
Mind map diagram outlining app structure and feature relationships.

Concept

During concept development, we strategically considered the functionality outlined in the mind map along with the aesthetic style of the selected mood board. This approach led to the creation of two closely related variations.

Subsequently, through a collaborative initiative, we and the client worked together to create a final concept, blending their creative ideas with our foundational concepts.

Phone mockups presenting early app concept screens for habit tracking.
Phone mockups presenting early app concept screens for habit tracking.

Phase 2:
Full design

Onboarding screens

We progressed to the design phase, focusing particularly on the app's onboarding process. Our team made strategic adjustments to ensure the technical feasibility and streamlined implementation of the methodology behind the process.

Phone screens walking through app onboarding in the habit tracker.
Phone screens walking through app onboarding in the habit tracker.

App’s logic

The application was designed in logical segments, with the client actively involved at every step, contributing numerous ideas. Our team played a significant role in developing a coherent and practical logic.

Colored labels naming the app's sections: welcome, onboarding, sign in, calendar, future journal, profile, explore and more.
Colored labels naming the app's sections: welcome, onboarding, sign in, calendar, future journal, profile, explore and more.

Animation preview

An animation preview was also needed to facilitate the development of the onboarding experience. We created this using a prototype feature in Figma.

Prototyping

Besides the onboarding prototype, we created an additional prototype during the app screen design process to improve result visualization and ease future development.

Prototype board linking app screens such as the calendar, habit timer and future journal.
Prototype board linking app screens such as the calendar, habit timer and future journal.
Stylized sunburst brand mark for the habit tracking app.

Branding

In addition to the app’s UI/UX design, we developed a logo, illustrations, and icons for the application.

Custom illustrations and icon set designed for the app.
Custom illustrations and icon set designed for the app.

UI kit

As with all our projects, we assembled a comprehensive UI kit, essential for the future scalability and development of any application.

For this habit‑tracking app, we crafted an extensive UI kit including all necessary elements, such as variables, typekits, responsive sizes, profile images, inputs, buttons, chats, tabs, and more.

UI kit with the app's buttons, inputs, tags, toggles and other interface components.
UI kit with the app's buttons, inputs, tags, toggles and other interface components.

Key features

Welcome screen

The user is greeted by a screen featuring a logo of a smiling sun.

Hand holding a phone showing the app's welcome screen.
Hand holding a phone showing the app's welcome screen.

Onboarding

Onboarding is one of the key features of the application, influencing how the app interacts with the user, forms habits, and guides them on their path.

At this stage, for the first time, the app helps users formulate their vision of their future self with the aid of AI.

Flow diagram of the app's onboarding steps, from preparation and asking the user's name through building habits to the loading screens.
Flow diagram of the app's onboarding steps, from preparation and asking the user's name through building habits to the loading screens.

Subscription plan

Users can choose a suitable subscription plan or register for free with limited access to features.

Phone subscription screen prompting users to start a free trial.
Phone subscription screen prompting users to start a free trial.

Habits

Habits, formed based on the onboarding process, are then offered to the user.

Habit detail screen for a 'Call Grandma' habit with its schedule, duration and start action.

Users can select practices that seem most relevant to them.

Phone screen with three suggested rituals, all of them selected.

Chosen habits can be viewed, deleted, and added to the Habits List.

Phone screen offering three personalized rituals to choose from, none selected yet.

Calendar

The calendar serves as a tool to help track user progress and transformation by checking off small habits that contribute to a larger picture.

Woman in bed beside a phone showing the habit calendar screen.
Woman in bed beside a phone showing the habit calendar screen.
App card showing a nearly complete habit week with a 'one more day' prompt.

Achievements

Progress in habit formation is recognized and supported by concise week overviews and three‑day streak notifications.

App screens with streak and consistency notifications celebrating habit progress.
App screens with streak and consistency notifications celebrating habit progress.

Explore

Unlike habit formation, the Explore cluster focuses on mind training. With various practices, it helps develop the mindset needed to achieve set goals.

Here, we needed to organize multiple categories so they logically flow from one to another.

Phone screens for exploring and adding new habits in the app.
Phone screens for exploring and adding new habits in the app.

Profile

In the profile section, users can change their personal information

Profile info screen with editable name, email and birthdate fields.

View their overall progress

Profile screen with a monthly streak calendar and unlocked achievements.

Choose a subscription plan

Subscription details screen with the current plan, renewal date and an option to switch to annual.

Killer feature

The Future Journal

The main idea of the app is not just about forming a bold set of habits but about transitioning from the current state of mind to a holistic vision of one's future self.

During onboarding, users answer questions that help tailor future recommendations for building habits, which will dynamically evolve as the user changes.

This progress is captured and reflected in the Future Journal.

Two Future Journal screens: weekly future moments and a recorded future diary entry.
Two Future Journal screens: weekly future moments and a recorded future diary entry.

Project’s dynamics

The distinctive feature of this design project was the close collaboration with the client. Thanks to their active involvement, we developed a clear understanding of their vision and worked on the design effectively. Some revisions were actual design ideas from the client, reflecting their significant contribution to the product and the spirit of co‑creation.

Our expertise was crucial in guiding the client technically to ensure their ideas could be implemented in the future development phase, and we also maintained consistency throughout the application to ensure that creative solutions did not outweigh usability and functionality.

Team members collaborating at a desk with a laptop during the project.
Team members collaborating at a desk with a laptop during the project.

Our expertise was crucial in guiding the client technically to ensure their ideas could be implemented in the future development phase, and we also maintained consistency throughout the application to ensure that creative solutions did not outweigh usability and functionality.

Designers reviewing work together at a workspace table.

As a result

our joint efforts created a balance between creativity and coherent logic, so that when the client transitions to the actual development of the application, the shift from design to coding will be as smooth as possible.

Results

We’ve successfully passed on all the design documentation to our client and wrapped up our partnership for now.

Team

Project manager

Designer

Art director

Time

8 weeks

8 weeks

Cost

$6,000+

$6,000+

Hand holding a phone showing the daily habit schedule in the app.
Thanks for watching
Thanks for watching