Jikan's logo & tagline displaying: Track where your time goes

Jikan

Quick Time Logging
Flexible Activity Categorization
Comprehensive Time Reporting
Smart Goal Tracking
Shared Challenges
Task Management
Conditional reminders
Integrated AI
Beautiful Themes
And Much More
UX Design showreel
(2023-2024)
Snapshots From This Project
(Jikan - 2024)

Project Overview

Roles

Product Design
UX Design
UX Research
UX Writing
UI Design
Interaction Design

Roles

Brand Design
Type & Icon Design
Graphic Design
Documentation
Video Editing
Project Management

Summary

Jikan is an all-in-one time tracking app that helps users track, analyze, and manage their time. It offers detailed logging, insightful reports, goal tracking, and AI-powered assistance to improve productivity, balance, and overall well-being.
A mpckup of jikan application

Problem

Some people like tracking time, and some don’t. Those in the first group often face problems like juggling notes that get lost, messy spreadsheets that are hard to maintain, or calendars that don’t provide the full picture. Existing time-tracking apps work well for projects but are too rigid for daily activities. Meanwhile, habit-tracking apps are good for monitoring repetitive actions but don’t offer a comprehensive view of how time is spent across different activities or categories.
a mockup of jikan application

Solution

Jikan offers a flexible, all-in-one solution that shows users a complete picture of how their time is spent. With features like goal setting, reminders, and personalized insights, Jikan helps users stay productive and organized by allowing them to track daily tasks, activities, and long/short term objectives in one intuitive platform.
An Illustration of Another Feature of Jikan

Flexible Activities

Different activities can be created, grouped into categories, and nested within each other without limits.
More Details
An Illustration of Another Feature of Jikan

Time Logging

Activities can be logged as time blocks with a defined start and end time. Users can select the date, activity, and start/end time.
More Details
An Illustration of Another Feature of Jikan

Calendar & History

Users can choose between Calendar View, for a visual overview of activities, and History View, for detailed entries.
More Details
An Illustration of Another Feature of Jikan

Reports & Insights

Logged time is transformed into meaningful visualizations, and every key time-tracking metric is calculated over specific periods.
More Details
An Illustration of Another Feature of Jikan

Smart Goals

Users can create and track specific, measurable, achievable, relevant, and time-bound goals that target key time metrics.
More Details
An Illustration of Another Feature of Jikan

Smart Reminders

Jikan’s Reminders feature allows users to set conditional notifications based on specific time-tracking metrics.
More Details
An Illustration of Another Feature of Jikan

Tasks Manager

Users can create and manage tasks, both one-time and recurring, and link them to specific activities for better organization.
More Details
An Illustration of Another Feature of Jikan

Jikan AI

Users can ask AI to auto-group activities, analyze and summarize their activity patterns recommend goals and more.
More Details
An Illustration of Another Feature of Jikan

Beautiful Themes

Users can personalize the look and feel of the interface by changing the accent color or adding custom wallpapers.
More Details
An Illustration of Another Feature of Jikan

Interactive Widgets

customizable widgets that allow to quickly access key features directly from the home screen.
More Details

Scope & Deliverables

Ongoing scope-creeps expanded the project to over 300 pixel-perfect screens, many of which required several iterations during wireframing and testing. The screens were supported by a robust design system, along with high-fidelity prototypes for specific user flows, brand guidelines, engaging graphics, and in-depth walkthroughs and demos. Altogether, the project required over 1600 hours of work over a span of 8 months.
+1500 hours

spent on this project

+300

Pixel-perfect screens

+1500

Design Components

+600

Screen Iterations

+10

Hi-Fi Prototypes

+50

Prototype Iterations

+100

Design tokens

+30

Time-tracking Metrics

+100

Wireframes

+100

Brand Visuals

+5

Demo Videos

+10

Walkthrough Tutorials

1

Design System

1

Brand Guidelines

Approach

The project was carried out following a Design Thinking approach to drive empathy and innovation, User-centered Design principles to guarantee usability and effectiveness, and Agile methodology to improve flexibility and efficiency.

1

Planning & Discovery

Jikan's Logo
Defined project goals and scope, analyzed competitors, and set a clear roadmap for the design process.

2

User Research

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Conducted surveys and interviews to understand user pain points, motivations, and needs, gathering insights to inform the design process.

3

Defining Problems

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Conducted surveys and interviews to understand user pain points, motivations, and needs, gathering insights to inform the design process.

4

Ideating Solutions

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Brainstormed ideas to address the defined problems, exploring various concepts to improve user experience and address gaps in existing tools.

5

Testing Concepts

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Developed low-fidelity prototypes to test initial ideas, gathering feedback to validate design direction and identify improvements.

6

Hi-Fi Prototyping

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Transformed concepts into high-fidelity prototypes, focusing on the final design and user interactions for a realistic representation.

7

Testing & Iteration

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Tested the hi-fi prototypes with users, gathered feedback, and iterated on the design to refine and improve functionality and user experience.

8

Reflection & Documentation

A screenshot of some designs taken during the cocneption and prototyping of Jikan to illustrate one its process steps
Reviewed the design process, captured key learnings, and documented insights for future improvement, transparency, and knowledge sharing.

Timeline

Jikan's Timeline
App Features

App Showcase

Jikan offers a flexible, all-in-one solution that shows users a complete picture of how their time is spent. Its Features include quick/detailed time logging, activity tracking, goal setting, reminders, personalized insights, task management, AI-driven reports, progress tracking, customizable themes, and seamless integration with voice assistants and smart devices
An Illustration of Another Feature of Jikan

Flexible Activities

Different activities can be created, grouped into categories, and nested within each other without limits.
More Details
An Illustration of Another Feature of Jikan

Time Logging

Activities can be logged as time blocks with a defined start and end time. Users can select the date, activity, and start/end time.
More Details
An Illustration of Another Feature of Jikan

Calendar & History

Users can choose between Calendar View, for a visual overview of activities, and History View, for detailed entries.
More Details
An Illustration of Another Feature of Jikan

Reports & Insights

Logged time is transformed into meaningful visualizations, and every key time-tracking metric is calculated over specific periods.
More Details
An Illustration of Another Feature of Jikan

Smart Goals

Users can create and track specific, measurable, achievable, relevant, and time-bound goals that target key time metrics.
More Details
An Illustration of Another Feature of Jikan

Smart Reminders

Jikan’s Reminders feature allows users to set conditional notifications based on specific time-tracking metrics.
More Details
An Illustration of Another Feature of Jikan

Tasks Manager

Users can create and manage tasks, both one-time and recurring, and link them to specific activities for better organization.
More Details
An Illustration of Another Feature of Jikan

Jikan AI

Users can ask AI to auto-group activities, analyze and summarize their activity patterns recommend goals and more.
More Details
An Illustration of Another Feature of Jikan

Beautiful Themes

Users can personalize the look and feel of the interface by changing the accent color or adding custom wallpapers.
More Details
An Illustration of Another Feature of Jikan

Interactive Widgets

customizable widgets that allow to quickly access key features directly from the home screen.
More Details

1/ Activities & Categories

The core concept of Jikan is that everything users do is represented as activities. Different activities can be created, grouped into categories, and nested within each other without limits. This allows users to track their time however they like with unlimited flexibility.
Jikan app interface displaying time-tracking features.

2/ Time Logging

Activities can be logged as time blocks with a defined start and end time. To log an activity, users  select the date, activity, and start/end time. Jikan uses the same familiar concepts of time logging that are used by most popular time tracking and calendar apps.  
Jikan app interface displaying time-tracking features.mockups of jikan's calendar view

3/ Viewing Past Days

To view logged activities, users can choose between Calendar View, ideal for getting a quick, organized visual overview of activities by day, week, or month, and History View, ideal for reviewing and analyzing detailed, searchable entries of all logged activities over time.
Jikan app interface displaying time-tracking features.

4/ Time Reporting

One of the unique value propositions of Jikan is the unparalleled depth and clarity of its reporting. Logged time is transformed into meaningful visualizations, and every key time-tracking metric is calculated for each activity and category over specific periods.
Jikan app interface displaying time-tracking features.Jikan app interface displaying time-tracking features.

5/ S.M.A.R.T Goals

Another unique value proposition of Jikan is its ability to integrate SMART goal setting with time tracking. Users can create and track specific, measurable, achievable, relevant, and time-bound goals that target key time metrics of specific activities and categories.
Jikan app interface displaying time-tracking features.
The concept behind this feature is simple but powerful. Users define their goals by specifying targets (such as total hours, average session time, active days, or others) for particular activities or categories over specific periods. Once these goals are set, Jikan automatically tracks progress based on the data from the user’s logged activities.
The concept of goal metrics allows users to set virtually any time-tracking goal they can imagine. It is versatile enough to ensures that every type of time-tracking objective, whether focused on productivity, consistency, or efficiency can be created and monitored.
Jikan app interface displaying time-tracking features.

6/ Shared Challenges

Besides private goals, users can also create or join shared or public goals to compete against each other. The two add a gamified element to make goal achievement more interactive and rewarding.
Jikan app interface displaying time-tracking features.
Jikan app interface displaying time-tracking features.

7/ Conditional Reminders

Similar to goals, Jikan’s Reminders feature allows users to set conditional notifications based on specific time-tracking metrics. However, unlike goals, reminders do not track progress or display insights. They simply notify users when the set condition is met.
Jikan app interface displaying time-tracking features.
A Mockup for Jikan app interface displaying time-tracking features.

8/ Task Management

Though not the primary focus of Jikan, the task management feature was added for users who prefer to keep everything organized in one place. Tasks can range from simple one-time to-dos to recurring habits.
Jikan app interface displaying time-tracking features.Jikan app interface displaying time-tracking features.

9/ Jikan AI

Jikan is the first time-tracking app to fully integrate AI across its entire feature set. Unlike other solutions that use AI solely for automation, Jikan-AI enhances every aspect of the time-tracking experience. Users can ask it to auto-group activities, analyze and summarize their activity patterns, suggest and recommend goals or reminders based on their habits, and much more.
Jikan app interface displaying time-tracking features.
Jikan-AI is designed to give users a deep, personalized understanding of how they spend their time through conversational interactions. Users can ask questions in both text or voice modes, and the AI will assist by analyzing data, offering insights, and providing recommendations.
Jikan app interface displaying time-tracking features.

10/ Everything in One Place

The home screen provides users with a snapshot of their most relevant information. It displays previews of key reports, goals in progress, to-do tasks, and upcoming reminders. It also includes a preview of users' watchlist, which includes specific activities users want to monitor closely and find quickly.
Jikan app interface displaying time-tracking features.
A Mockup for Jikan app interface displaying time-tracking features.

11/ Seamless Authentication

Jikan’s authentication system is thoughtfully designed to cover all user scenarios, including login, sign-up, password recovery, and verification from start to finish. Each step is designed to be intuitive, user-friendly, and secure.
Jikan app interface displaying time-tracking features.Jikan app interface displaying time-tracking features.

12/ Quick Onboarding

Jikan’s onboarding experience is designed to be engaging and straightforward, guiding users through the app’s core features and functionality.
Jikan app interface displaying time-tracking features.

13/ Personalized Themes

If users don't like the default minimal theme of Jikan, they can choose from existing themes or create their own. They can personalize the look by adding a custom wallpaper, which will be automatically blurred to create a visually appealing background that enhances their experience.
Jikan app interface displaying time-tracking features.

14/ Plans for Everyone

Jikan offers three plans to suit different needs: Free for essential tracking, Pro for advanced features like AI insights and advanced reports, and Premium for full access with integration tools.
Jikan's Subscription ModelJikan's Subscription Model

15/ Interactive Widgets

Jikan offers customizable widgets that allow to quickly access key features like time tracking, goal progress, and upcoming reminders directly from the home screen.
Jikan app interface displaying time-tracking features.
Design Process
video

Design Process

Design thinking, user-centered design principles, and agile methodology guided this project from start to finish. Because Jikan's scope kept expanding beyond initial planning, its design process shifted to multiple iterative cycles instead of a single linear one. Initially, the focus was on establishing the core features and functionality of the app. As the project grew, each new feature or flow was treated as a separate mini-project requiring its unique cycle of research, definition, ideation, prototyping, and testing. The process was flexible, adapting to each feature’s needs, sometimes skipping steps for similar features, while other times emphasizing specific steps based on complexity.

1/Initiation & Planning

Most of the initial planning for this project wasn't very accurate due to ongoing scope creep. At first, I quickly set the project’s goals and outlined a rough plan, but I didn't invest enough time to fully understand its scope. As the project moved forward, new unanticipated ideas and user needs kept emerging. The plan had to be revisited multiple multiple times to keep up with the evolving needs, causing frequent shifts and making it harder to stay on track.
Jikan's Timeline

1/Initial UX Design

Initial Research

I must admit, because of my long struggle with time tracking, it was quite difficult to keep my biases in check as I was trying to empathize with people interested in time tracking. Understanding users' perspective, motivations, preferences, and pain points with time tracking and existing time-tracking solutions required detailed analysis of user's comments and reviews along with extensive interviews with students, freelancers, productivity enthusiasts and professionals. But ensuring that my personal experience didn't cloud my view on their experiences required conscious effort in all stages of research.
In this initial research phase, I quickly realized that focusing on every tiny detail of users' experiences with time tracking proved inefficient because it diverted attention from the app's core functionality. Doing so made it difficult to identify and address the KEY pain points and KEY needs that should drive the design. Research into users' experiences with additional functionality and nuances that improved the overall experience was conducted later on once the core functionality was validated and tested.  
The collected data helped in shaping a deeper understanding of users through user personas, empathy maps, user stories, and journeys. However, although I focused on understanding every possible user scenario, I prioritized documenting only KEY personas and journeys that would effectively guide the next steps.
Jikan's User Personas

Initial Definition

After collecting and analyzing the data, big and small issues with existing time tracking solutions slowly emerged. The main challenge was to group these small issues and express them in a clear, concise, yet precise problem statement that accurately captured the core issues without losing important details.
Once the problems were clearly defined, formulating hypotheses wasn't that difficult. Making GENERAL assumptions about how certain features or solutions could address the existing problems was straightforward; the real challenge was the ideation, conceptualization, and testing of SPECIFIC solutions that addressed these problems in the following phases.
Jikan's Problem & Hypotheses Statements
At this point, It became difficult to keep track of all functionalities, so I divided the app into three primary flows: Activity Logging, Reports & Insights, and Goal Tracking, each requiring its cycle of ideation, conception, prototyping, and testing to ensure it effectively addressed its specific user needs and challenges.
Some results of user research of Jikan
Then, I worked on clearly articulating the unique value propositions (UVP's) that would set the app apart from competitors. The guiding principles in this step were simplicity, insights, and personalization. The app should be easy to use, provide helpful reports, and allow users to set their own SMART goals (i.e., Specific, Measurable, Attainable, Relevant, and Time-bound) that capture every possible goal pertaining to time management, making it a more efficient solution for effective time management.
Jikan's Unique value propositions

Initial Ideation

Some of the innovative ideas implemented in this app were in my mind before starting the project, but most of the ideas required a semi-structured cycle of inspiration, competitive analysis, and brainstorming. It should be noted, however, that ideation continued across all stages of design; the main challenge was keeping track of all ideas without losing focus on the three primary flows.
some early ideas to include in jikan
To stay focused, I tried narrowing down my ideation to align with the three flows, but as I was looking for inspiration, studying competitors and brainstorming, new ideas for extra features and functionality kept popping up. At first, I intentionally avoided exploring these "irrelevant" ideas to avoid distractions, but soon realized that doing so meant loosing them. Fortunately, I paid attention to this in the early stages, so I started documenting all ideas, even the crazy ones, in a
"parking lot" and then categorizing, sorting, and prioritizing them according to relevance, required time, potential impact, and alignment with the core vision of the app.
Ideation for this project was accomplished through three methods: inspiration, competitive analysis, and brainstorming. I started by gathering inspiration from various sources, including existing time-tracking apps and broader productivity tools. Meanwhile, I analyzed direct and indirect competitors to identify what worked well and what needed improvement in their solutions (i.e., features, flows, navigation, accessibility, consistency, visual identity, etc.).
Jikan's competitors
In parallel, I kept brainstorming and noting down ideas on potential solutions and features that could enhance the main experience and/or add extra value to core functionalities like simplified time logging, or additional features like advanced analytics, smart reminders, or integrations with other tools

Initial Conception

The most challenging part of this project was figuring out a clear, intuitive, and unified structure that brings together the entire flows of the app in a way that made sense both visually and functionally. Knowing that the report section, for example, should be comprehensive and intuitive is easy, but finding the right conceptual framework that effectively structures the vast amount of data, meaningfully presents them, and intuitively integrates all possible features and actions without confusion or complexity is another story. Simply put, structuring information so it's accessible, understandable, actionable, yet not overwhelming was The Challenge in this project.
Throughout this stage, I kept examining how other solutions solved similar problems. I experimented with different conceptual models to group and structure similar elements and actions, hid less frequently used options behind menus, dropdowns, or buttons, added new tabs for advanced options, adjusted relationships between related elements and changed the visual hierarchy to reflect these relationships.
Some notes taken during ideation phase
One breakthrough in time logging was breaking free from the project-oriented models used by most apps, where users create projects and tasks, sometimes with recursive tasks nested within each other. Although this approach worked well for managing projects and tasks, it often became limiting when it was used to track time across various activities and categories, and it lacked the flexibility to enable the grouping of similar projects together for collective tracking. For instance, if a user wanted to track time spent on similar tasks across multiple projects (e.g., client meetings or research), the conventional approach made it difficult to get a holistic view.
The alternative approach, instead, applies the same concept sightly differently by using activities as the core building block instead of projects. Users can then group these activities into broader parent categories, and further nest them as sub-activities recursively. This flexible structure opens up endless possibilities. Users can now take full control of how they want to organize activities and categories based on personal needs or workflows. They can create custom hierarchies, track time across these hierarchies, and generate tailored, meaningful reports that reflect their unique time management patterns.
an information architecture of one of jikan's main flowsSome of the user journeys that guided jikan's conceptionSome of jikan's wirefrmaeessome of the early prototypes used in jikan' conception
With persistent trial and error, detailed journeys, complex flows, numerous wireframes, and consistent testing, I finally started to "piece together" the entire flows and sub-flows and "see" a clear direction of how everything should be structured. Once I "saw' that right conceptual framework through which everything fell into place, I started to see it everywhere. It's fascinating how this new framework had always been before my eyes, yet I was too framed to see it! I felt like a fish seeing the ocean for the first time, and I gained a new lens through which I could see how complex systems could be better organized.

Initial Prototyping

Typically, when the conception phase is completed successfully, (i.e., when its "architectural blueprint" is well drafted), the prototyping phase becomes mainly about visually designing elements like colors, shapes, and layouts to establish the product's look and feel and then experimenting with interactions to ensure smooth navigation and consistent experience. As simple as it seems, I had to relearn this the hard way.
One of the big mistakes I did in this project was jumping to the design phase too early before having the right conceptual frameworks in place. As I was designing, I didn't realize that I was both wireframing and designing at the same time. I figured I'd be able to design the interior of a house without fully understanding its architectural framework, but I ended up stuck in an endless loop of iteration. My design decisions kept shifting as the underlying structure was still being figured out, and I didn't realize this until I had already invested a significant amount of time and effort into design.
By that point, I had to backtrack and make major adjustments, which only added to the frustration and delays. Fortunately though, it wasn't late enough to course-correct. I immediately started focusing more on solidifying the core concepts and refining the structure before continuing with visual design. It turned out that unlike what I originally believed, most of the design work, in fact, happens in the conception phase, not the prototyping phase
some screenshots of the hi-fi prototypes and designs used for jikan
Once the concepts were refined, I revisited the visual design with a clearer undertstanding of how the elementes interacted and related to each other. At this point, rather than focusing on creating a complete design system, I explored various design decisions and experimented with color, typography, layout, shapes, and effects to find the right balance between familiarity and creativity. I wanted an app that felt familiar enough for easy navigation but also stood out with its own unique visual identity.

This was another major challenge. The more I drew from existing designs, the more I found myself unintentionally adopting their frameworks, which, no matter how creative I tried to be, kept shaping my design decisions. It became difficult to fully break free from those influences, and I could always see how my design was framed by the choices of others, which made it harder to establish a user interface that was truly original.
some screenshots of the hi-fi prototypes and designs used for jikansome screenshots of the hi-fi prototypes and designs used for jikan
Then suddenly, as I was designing a list element based on Google's M3 Design System and Apple's design guidelines, I tried tweaking some properties, and to my surprise, this small adjustment led to a fresh, unexpected look. I could have never imagined that seemingly significant differences between how various products looked were actually the result of small tweaks to a few key properties, but once I realized this, the distinction between apps started to blur. I began to see how small design decisions (like how spacing is handled or how colors are used) could have such a significant impact on the overall feel of an interface.
some screenshots of the hi-fi prototypes and designs used for jikansome screenshots of the hi-fi prototypes and designs used for jikansome screenshots of the hi-fi prototypes and designs used for jikansome screenshots of the hi-fi prototypes and designs used for jikan
I feel like after this moment, visual design suddenly became much more intuitive, not just while working on this app, but when analyzing other designs as well. The quote: "Good designers copy; great designers steal" somehow made sense, and I began to recognize the common design principles at play across different apps and platforms. It made me realize that design isn’t about starting from scratch every time, but rather about borrowing inspiration from what already exists and then making it your own with a few KEY tweaks that result in a fresh new look.
The visuals of the app kept being changed and refined when I started working on other features, but once I was satisfied with how the app started to look, I started building an interactive, hi-fi prototype. I first revised the principles of motion design to ensure the prototype felt natural through smooth animations, transitions, visual cues, and feedback. Using user journeys as a guide, the prototype was constantly refined to be as close to the final experience as possible to simulate real user interactions and provides accurate feedback on usability, design, and functionality.
some screenshots of the hi-fi prototypes and designs used for jikansome screenshots of the hi-fi prototypes and designs used for jikan

Initial Testing

Before starting the project, I planned to start testing once a hi-fi prototype was completed. However, as the work progressed, it became clear that I had to constantly test every design decision from the early concepts all the way to the final prototypes. Before testing on real users, I tested everything myself first. I tested conceptual models, information hierarchy, and alignment with user goals, and then I evaluated functionality, interaction smoothness, task flows, visual consistency, and accessibility.
The cycle of testing and iteration felt endless at first. The more I designed, the better I became, but the better I got, the worse my earlier designs seemed and the less satisfied I became. This cycle would go on forever. No matter how much I improved, there would always be more room for improvement, and my past work would always feel incomplete. I learned to recognize when to stop and move forward, rather than endlessly chasing perfection. Instead of endless refinements that delayed progress, it was important to know when the design was GOOD ENOUGH to meet user needs and expectations.
Once I was reasonably satisfied with the design, I moved on to testing with real users. I tested with users from different personas to ensure a diverse and representative sample for more accurate feedback.
After testing, I collected feedback, analyzed user pain points, and identified areas for improvement. I refined the design based on this input, making necessary adjustments to enhance usability, streamline interactions, and address any issues.
some screenshots of the hi-fi prototypes and designs used for jikan

2/UX Design Cycles

Besides working on the core functionality of the app, another round of UX design was taking place. Whenever I had a new pressing idea, needed a break, or felt drained from working on the core flows, I would shift to working on additional functionalities. I called these UX design cycles because, though not as structured as the initial phases, each new feature and flow went through its own cycle of research, definition, ideation, conception, prototyping, and testing to ensure they fit well into the overall user experience. Besides time logging, reports, and goal tracking, the additional flows that required this separate cycle include conditional reminders, shared challenges, tasks, AI support and suggestions, home, watchlist, onboarding, and authentication.
some screenshots of the hi-fi prototypes and designs used for jikan

More Research & Definition Cycles

As the project progressed, I found myself diving into additional research and definition cycles for each new feature or flow. While it wasn’t as formal as large-scale user research, this iterative process helped refine my designs and make them feel more cohesive. I focused on understanding the needs and behaviors of the user, as well as defining the core functionality by identifying the goals and challenges specific to each feature, analyzing similar apps, reviewing design patterns, and mapping out possible user interactions, and then defining the key elements and structure for each flow.

More Ideation & Conception Cycles

Ideation and conception cycles for extra features were more flexible than the initial stages. I adjusted my process based on the complexity of each flow. Some flows, like reminders and tasks, already had a well-established conceptual model or closely resembled patterns from other solutions, so I felt confident skipping conception and moved directly into designing and prototyping. Other flows, especially activities hierarchy and public challenges, were more complex and needed a solid, clear structure before moving forward.
The conditional reminders flow, for example, was inspired by the smart goals concept but required additional thought and design to adapt it for the app. The idea was to provide users with personalized reminders that would trigger based on specific conditions related to their activities or categories. Another example is the task management flow which largely adopted the basic structure of popular apps like Google Tasks and others, as they provided an effective and familiar way of managing tasks. The main difference was organizing tasks within categories and/or linking them to specific activities.
On the other hand, the activity hierarchy flow needed careful thought about how activities would be grouped, nested, and organized to ensure that users could intuitively understand and manage their activities, and the public challenges flow needed defining how users could turn personal goals into public challenges, share them with others, and track progress together. Both flows required a deep dive into the structure and logic before moving on to visual design or prototyping.
some screenshots of the hi-fi prototypes and designs used for jikan

More Prototyping & Testing Cycles

Similar to previous stages, I began these new prototyping and testing cycles in parallel with some other stages. The visual design of the new flows wasn't as challenging as the earlier flows because I already had a solid framework to work with, and its process was similar. The difference was refining color, typography, layout, shape, icons, and other styles ensuring aesthetics, functionality, consistency, and accessibility.
A major challenge at this stage was figuring out an appropriate color system that satisfies three criteria:
1/ Consistency: Activities within the same category needed similar colors to show they belong together.
2/ Distinctiveness: Each activity within the same category, needed a unique color to avoid confusion.
3/ Differentiation: Different categories needed distinct colors to be easily recognizable.
Plus, the system had to be both scalable and accessible as users added new activities and categories, maintaining clarity without repeating or blending colors.
Initially, I divided the color wheel into specific hue ranges corresponding to primary colors, with each range representing a single category. Within each hue range, I used different saturation and brightness values to generate different shades, tones, and tints to differentiate individual activities. I then manually checked for accessibility and removed colors that didn't meet contrast standards.
Jikan's color system
Using the HSL model to generate activity colors quickly proved ineffective. Since the model doesn't account for the perceptual differences of different colors, hues with different saturation and lightness values didn't always appear visually distinct. Even with different saturation and lightness values, it was difficult to predict which colors would appear distinct from one another. On top of this, generating colors with this model also caused issues with visual harmony. Colors of different hues, even with similar saturation and lightness, often clashed and didn’t complement each other well which led to a visually inconsistent user interface.

This was the perfect opportunity to explore how these systems were originally created and revisit their assumptions. During this exploration, I discovered Material Design’s tonal palette, which adjusts tones and chroma instead of saturation and lightness to account for perceptual color relationships. And Although it still required an algorithm for optimal contrast, it was more intuitive and scalable than the HSL-based system, so I decided to adopt it for the project.
Jikan's color system
This color system, however, wasn’t perfect due to some inherent limitations. When there were more activities within a category, the available differences in hue, saturation, and brightness within each range started to overlap, making it harder to visually distinguish them. Similarly, as the total number of categories grew, the limited number of hue ranges available became stretched, reducing the visual distinction between different categories. Additionally, ensuring accessibility limited the range of colors I could use, further reducing the options available for distinction (i.e., inside each category) and differentiation (i.e., between categories). Although the system ensured accessibility and maintained a balance between color similarity and distinction, this scaling issue became more noticeable as the number of categories and activities exceeded a certain point.
To work around this limitation, I added a new button that allowed users to temporarily switch the colors of activities when they noticed the visual distinctions becoming unclear due to the growing number of categories or activities . Once they’re done, they could click the button again to return to the original color system without permanently sacrificing the visual consistency of their activities.
Unlike the projects I previously worked on, I used design tokens in this one's design system to achieve better consistency, scalability, and flexibility. Having learned from Google's Material Design 3 (M3) guidelines, It became clear that using tokens to manage colors, typography, spacing, and other elements was much more efficient than styles.
I should note that Jikan's Design System is largely influenced by Material Design 3.
some screenshots of the hi-fi prototypes and designs used for jikan

4/Brand Identity

Lorem ipsum dolor sit amet

1

Initiation

I outlined the project's scope, set clear goals, and defined key deliverables. However, I underestimated the complexity of some features, which led to  scheduling issues. Two mistakes I made were not defining the scope and setting overly ambitious timelines without fully understanding the scope of the project which set the project on a less realistic path from the start.

2

Planning

I created a detailed plan with timelines, milestones, and I prioritized features based on user needs and project goals. The main challenge was scope creeps. new features and ideas kept being added, which caused delays and forced me to adjust the original timeline multiple times.

3

Execution

I designed the entire user experience from start to finish. The challenge here was balancing time between this project and other concurrent work. Besides, as new features were added without fully evaluating their impact on the timeline, the project became more complex and less predictable than initially anticipated.

4

Monitoring

I closely tracked the project's progress and adjusted the scope and timeline as needed based on testing feedback. The main challenges were that certain features required more time to iterate than initially expected, and that testing uncovered areas that needed improvement, resulting in many revisions and delays.

5

Closing

I gathered feedback from user testing to address any remaining issues and made final adjustments to polish the interface. A key challenge was balancing time constraints with the urge to keep refining details. Ultimately, I focused on delivering a stable, user-friendly product and documented the project learnings and design decisions for future improvements.
video

3/Project Management

Working on this project from concept to completion was also an opportunity to gain practical, in-depth experience in project management. I originally aimed to finish the project in 1-2 months, but every time I added a new feature or made a tweak, it stretched things out. Before I knew it, 6 months had flown by. It literally  was a crash course in how scope creeps can snowball, delay progress, and turn a small project into a never-ending loop of "just one more thing." I had to learn the hard way, again, that sometimes "good enough" really was good enough if I ever wanted to actually finish.

1

Initiation

I outlined the project's scope, set clear goals, and defined key deliverables. However, I underestimated the complexity of some features, which led to  scheduling issues. Two mistakes I made were not defining the scope and setting overly ambitious timelines without fully understanding the scope of the project which set the project on a less realistic path from the start.

2

Planning

I created a detailed plan with timelines, milestones, and I prioritized features based on user needs and project goals. The main challenge was scope creeps. new features and ideas kept being added, which caused delays and forced me to adjust the original timeline multiple times.

3

Execution

I designed the entire user experience from start to finish. The challenge here was balancing time between this project and other concurrent work. Besides, as new features were added without fully evaluating their impact on the timeline, the project became more complex and less predictable than initially anticipated.

4

Monitoring

I closely tracked the project's progress and adjusted the scope and timeline as needed based on testing feedback. The main challenges were that certain features required more time to iterate than initially expected, and that testing uncovered areas that needed improvement, resulting in many revisions and delays.

5

Closing

I gathered feedback from user testing to address any remaining issues and made final adjustments to polish the interface. A key challenge was balancing time constraints with the urge to keep refining details. Ultimately, I focused on delivering a stable, user-friendly product and documented the project learnings and design decisions for future improvements.
I also quickly realised that a purely predictive approach (Waterfall) is hard to apply in software design becaue of constant testing and iteration. The process was never truly linear, and instead of sticking to a fixed plan, I needed to adopt a more adaptive (agile) and hybrid approach. This way, I didn't have to compromise flexibility and improvements as new feedback and insights emerged throughout the project.
Design System
Hero text displaying color
Every color used in Jikan falls under one of four roles. Primary Colors (Brand Colors), Secondary Colors (Category Colors), Tertiary Colors (Activity Colors), and Neutral Colors. Each role is further divided into sub-roles to maintain consistency and flexibility throughout the design.

Primary Colors (Representing Jikan)

Primary colors are five colors that represent the brand identity and are consistently used in brand elements and key UI elements. To maintain visual harmony, all primary colors are designed with matching saturation and lightness values and only differ in their hues.

One of these primary colors is selected as an accent color and is used to highlight and draw attention to specific important elements like CTAs, buttons, or links. Jikan uses blue as the default accent color, but users can select their preferred accent color in the app settings.

Blue Accent

HEX

#0033CC

HSL

225, 100%, 40%

Brown Primary

HEX

#CC8800

HSL

39, 100%, 40%

Rose Primary

HEX

#CC00CC

HSL

300, 100%, 40%

Green Primary

HEX

#00CC00

HSL

120, 100%, 40%

Red Primary

HEX

#CC0000

HSL

0, 100%, 40%

Each primary color is used to generate its corresponding container color by maintaining the hue and saturation and increasing lightness (90 instead of 40). Each primary color’s lighter variant is applied to thematic sections or components that match the tone or context of the primary color (e.g., using the light accent color for call-to-action blocks).

Blue Container

HEX

#E5ECFF

HSL

210, 100%, 94%

Brown Container

HEX

#FFF0D2

HSL

40, 100%, 93%

Rose Container

HEX

#FFD2FF

HSL

300, 100%, 88%

Green Container

HEX

#D2FFD2

HSL

120, 100%, 88%

Red Container

HEX

#FFD2D2

HSL

0, 100%, 88%

Blue Container-50

HEX

#E5ECFF

HSL

210, 100%, 94%

OPACITY

50%

Brown Container-50

HEX

#FFF0D2

HSL

40, 100%, 93%

OPACITY

50%

Rose Container-50

HEX

#FFD2FF

HSL

300, 100%, 88%

OPACITY

50%

Green Container-50

HEX

#D2FFD2

HSL

120, 100%, 88%

OPACITY

50%

Red Container-50

HEX

#FFD2D2

HSL

0, 100%, 88%

OPACITY

50%

Blue Container-25

HEX

#E5ECFF

HSL

210, 100%, 94%

OPACITY

25%

Brown Container-25

HEX

#FFF0D2

HSL

40, 100%, 93%

OPACITY

25%

Rose Container-25

HEX

#FFD2FF

HSL

300, 100%, 88%

OPACITY

25%

Green Container-25

HEX

#D2FFD2

HSL

120, 100%, 88%

OPACITY

25%

Red Container-25

HEX

#FFD2D2

HSL

0, 100%, 88%

OPACITY

25%

Occasionally, when more than five elements are needed in brand graphics, the brand uses additional primary colors  to expand the palette.

Purple Add-primary

HEX

#6600CC

HSL

270, 100%, 40%

Yellow Add-primary

HEX

#CCCC00

HSL

60, 100%, 40%

Cyan Add-cyan

HEX

#00CCCC

HSL

180, 100%, 40%

Purple Add-Container

HEX

#E8D2FF

HSL

240, 100%, 94%

Yellow Add-Container

HEX

#FFFFD2

HSL

60, 100%, 94%

Cyan Add-Container

HEX

#E5FFFF

HSL

180, 100%, 94%

Purple Add-Container-50

HEX

#E8D2FF

HSL

240, 100%, 94%

OPACITY

50%

Yellow Add-Container-50

HEX

#FFFFD2

HSL

60, 100%, 94%

OPACITY

50%

Cyan Add-Container-50

HEX

#E5FFFF

HSL

180, 100%, 94%

OPACITY

50%

Purple Add-Container-25

HEX

#E8D2FF

HSL

240, 100%, 94%

OPACITY

25%

Yellow Add-Container-25

HEX

#FFFFD2

HSL

60, 100%, 94%

OPACITY

25%

Cyan Add-Container-25

HEX

#666#E5FFFF643

HSL

180, 100%, 94%

OPACITY

25%

Secondary Colors (Representing Categories)

Secondary colors are generated from primary colors by adjusting the hue while maintaining matching saturation and lightness. Unlike primary colors, the hue range of these colors dynamically shrinks or expands as the number of activity categories changes. This hue range starts from a specific hue value (e.g., blue at 250°). As more categories are added, the range of possible hues around that starting point becomes narrower. For example, the hue range for blue might be from 250° to 200°, but as more categories are created, the range might shrink to 240° to 170°, and the new secondary color will have its hue at 170°. This, of course, changes the starting point of every category and therefore changes their hue values. The goal is to maintain enough contrast and visual distinction between each category while adjusting the color spectrum based on the number of categories.
Jikan's color system

Tertiary Colors (Representing Activities)

The secondary colors are used to generate tertiary colors by adjusting their tone and chroma following Jikan's color system, Jikaniro. Each category can generate multiple colors, named possible-tertiary-colors, but only a few of these are selected through an algorithm that test for maximum contrasting relationships. The selected colors are called tertiary colors. It should be noted, though, that as the number of activities grows, the contrasting relationships between colors become tighter, and the visual distinction becomes harder to maintain because the available color space becomes more limited.
Jikan's Color System

Neutral Colors

Neutral colors are used to complement Jikan's overall color palette. These include shades of gray, white, black and are used for elements like backgrounds, text, borders, and subtle UI components.

White Neutral

HEX

#666643

HSL

324515

Black Neutral

HEX

#666643

HSL

324515

GreyD Neutral

HEX

#666643

HSL

324515

GreyL Neutral

HEX

#666643

HSL

324515

Usage Guidelines

Do
Select one primary color as the accent color and use it consistently in the user interface.
Don't
Don't use more than one primary color as accent colors.
Do
Use different primary colors to highlight different non destructive actions.
Do
Use red-primary for error messages to indicate failure. Use blue for neutral ones.
Don't
Don't use red for non destructive actions. Don't use non-red for desctructive ones.
Don't
Avoid using green for error or neutral messages. Only use it to indicate success.

Color System

Since the number of activities change from one user to another, Jikan uses a dynamic system, called Jikaniro, to generates dynamic palettes for each category. The system first takes one category color as its base color, manipulates chroma and tone to generate all possible colors, and then uses an algorithm to select a the most contrasting colors based on the required palette size. The system is designed to generate the maximum number of colors with the highest possible contrast.

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan
Tertiary Colors used in Jikan

Applications

An illustration of jikan's tertiary color

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
An illustration of jikan's tertiary color

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Brown
Tertiary Colors used in Jikan- Brown

Applications

Tertiary Colors used in Jikan- Brown

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Brown

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Brown
Tertiary Colors used in Jikan- Brown

Applications

An illustration of jikan's tertiary color

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Green

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Green
Tertiary Colors used in Jikan- Green

Applications

Tertiary Colors used in Jikan- Green

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Red

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Red
Tertiary Colors used in Jikan- Red

Applications

Tertiary Colors used in Jikan- Red

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Cyan

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Cyan
Tertiary Colors used in Jikan- Cyan

Applications

An illustration of jikan's tertiary color

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Purple

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Purple
Tertiary Colors used in Jikan- Purple

Applications

An illustration of jikan's tertiary color

Activity Colors

Manipulating the chroma and tone while keeping the hue of this color results in the following palette:
Tertiary Colors used in Jikan- Purple

Contrasting Relationships

For a 9-color palette, applying Jikaniro algorithm to the larger palette results in the following palette:
Tertiary Colors used in Jikan- Purple
Tertiary Colors used in Jikan- Purple

Applications

Tertiary Colors used in Jikan- Purple

Accessibility

Conversations were structured around open-ended questions, allowing participants to share their thoughts, preferences, and pain points. The interviews provided valuable qualititative data, offering unique.

Tokens

An illustration of jikan's tertiary color
Hero text displaying typography
Jikan's type scale follows M3's five type roles: display, headline, title, body, and label and uses the Major Second ratio with a base of 14dp to generate a wide selection of font styles that can be used across an app. However, not all styles generated by this ratio were necessary for the mobile experience; some were reserved for use on other platforms. Additionally, a few styles were subtly customized to better fit the app's specific design needs and improve usability in certain contexts. For platform-specific support, the system defaults to Roboto on Android and San Francisco (SF) on iOS to maintain familiarity and compatibility.
Jikan's Typeface, Brand letters, fonts, and typescale

Introducing Jikanji

Jikan-ji is the custom typeface designed exclusively for Jikan to reflect its unique identity and purpose. The name blends Jikan (時間, meaning time in Japanese) and Ji (字, meaning character). Jikan-Ji is a bold, modern display font with strong, rounded letters. It’s designed to stand out and grab attention, making it perfect for headings, logos, and branding. The font has a clean, minimal look that combines boldness with readability.
Jikanji, the font used in jikan's brand

Applications

Jikan's logoApplications of TypographyApplications of TypographyApplications of TypographyApplications of Typography

Tokens

An illustration of jikan's tertiary color
Text Title displaying Layout

Grid System

The responsive layout grid for Jikan is made up of three elements: columns, gutters, and margins. Following standard best practices, the columns are defined as percentages (4 columns, not fixed values), and the gutter is set to 16dp for consistent spacing. However, the margins deviate from the recommended 16dp and, instead, use a custom 26dp margin to create a unique yet consistent visual identity.
Jikan's Grid systemAn illustration of jikan's grid system

Spacing System

Jikan's spacing system
Following standard practice, Jikan consistently uses an 8pt spacing system and applies multiples of 8 (4dp, 8dp, 16dp, 24dp, 32dp, etc.) to dimensions, padding, and margin of elements.
Jikan's spacing systemJikan's spaing systemJikan's spacing system

Brand Elements

To generate unlimited brand elements i used a grid system with prexisting elements that are already designed and an algorithm to generate unlimited 'scenes' from a structured combination of these building blocks (circle, half circle, quarter circle, with sizes L, m, s, xs).
video

On this page

Layout

Text Title displaying icons
Most of Jikan's icons were adopted from Google Fonts Icons . Additional icons were either sourced from other repositories, like Iconify, or custom-designed to meet specific needs of the app. All selected icons are consistent, visually distinct, and adaptable to various themes and user interactions

System Icons

Icons in their resting state use the outlined sharp style with a weight of 200 and a default size of 24dp. Icons that have an active state switch to the filled sharp style and maintain the same weight, size, and elevation values. Larger or smaller icon sizes, primarily 16dp, 36dp, and 48dp, are used contextually in components or key areas where emphasis or accessibility is required.
Some icons used in JikanSome icons used in Jikan

Category Icons

Unlike system's icons, category icons are filled and rounded. The icons represent represent broad classifications of activities grouped by users. Jikan's default categories include learning, work, social, entertainment, sports, and others.
Some icons used in Jikan

Activity Icons

Activity icons, on the other hand, are outlined and follow the same rounded style to maintain consistency with the category icons.
Some icons used in Jikan

Color-Coded Icons

Aside from activities and categories, some icons are color-coded to express priority. Throughout the app, orange, red, green, blue, and grey are used consistently in tags, reminders, and other elements to indicate high, medium, low, or neutral priority, respectively.  
Some icons used in Jikan

App Icons

To ensure a beautiful, meaningful, consistent, accessible, and scalable visual identity across multiple platforms, Jikan's app icon was designed following best practices for icon design.
Jikan's App IconsJikan's App Icons

Applications

Some icons used in Jikan
The shape scale used for Jikan is based on Material Design System (M3). Components are assigned styles depending on how rounded they need to be. Square-cornered shapes are labeled as 'None,' slightly rounded shapes as 'extra-small,' and fully circular shapes are marked as 'full.'"

Shape Scale

An illustration of jikan's shape scalean illustration of Jikan's shapes

Baseline Shapes

An illustration of jikan's design system
An illustration of jikan's design system
Jikan uses elevation to communicate the hierarchy and depth of components. Higher elevation is applied to interactive elements, such as floating action buttons (FABs) and modals, to make them stand out from the background, signaling interactivity. Other elements, such as cards and sheets use moderate elevation to subtly differentiate content sections without overwhelming the layout. Each component is assigned a specific elevation value to visually indicate its hierarchy and relationship to other elements.
An Illustration of Jikan's elevation

Elevation levels

The elevation levels ranges from 0, representing no elevation (flat elements like the background or inactive items), to higher values indicating components that are elevated or visually “closer” to the user, such as modals, buttons, or floating action elements. Some components have different elevation values in their resting and active states. When at rest, they have a lower elevation to seamlessly integrate into the interface, but when interacted with (e.g., when pressed or hovered over), their elevation increases to highlight their interactivity.
An Illustration of Jikan's elevation

Depicting Elevation

In addition to shadows, elevation is also sometimes depicted through other visual cues such as surface edge, opacity, background blur, fill, and surface overlap.
An Illustration of Jikan's An Illustration of Jikan's elevation
Do
Use the same color to represent the same category through the app whenever possible
Do
Use the same color to represent the same category through the app whenever possible
Don't
Use the same color to represent the same category through the app whenever possible
Don't
Use the same color to represent the same category through the app whenever possible
Do
Use the same color to represent the same category through the app whenever possible
Don't
Use the same color to represent the same category through the app whenever possible
Do
Use the same color to represent the same category through the app whenever possible
Do
Use the same color to represent the same category through the app whenever possible
Don't
Use the same color to represent the same category through the app whenever possible

Scrims

A higher elevation is also expressed using scrimmed background. When the background is scrimmed, primarily behind modals and overlays, it indicates that the content above it is at a higher elevation.
An Illustration of Jikan's  scrim

On this page

Elevation

Hero text displaying Motion
Jikan uses micro and macro interactions to complement its UX and make its UI feel more natural and engaging. These interactions follow motion design principles to enhance usability, provide feedback, and create intuitive interactions by visually guiding users through transitions, highlighting relationships between elements, and mimicking real-world physics.
warning Note: The easing curves and durations displayed here are preliminary and meant for preview purposes only. They are not finalized and will be refined in future iterations

Duration

All interactions in Jikan use two types of duration: short (100-200ms) for small-area transitions or when elements exit the screen, and long (300-500ms) for larger-area transitions or when elements enter the screen. Short durations enable quick exits, while longer durations help users smoothly absorb changes when UI elements interact or appear.
Do
Use quick durations for transitions requiring immediate feedback, such as button presses or simple state changes
Avoid
Avoid using slow durations for frequent interactions, as they can disrupt the user experience and feel unresponsive.

Easing

Besides duration, all interactions also use proper easing to feel smoother and more natural. The main ones include Ease-In, mostly applied for scrolling animations and entering elements, like modals or menus, Ease-Out for subtle hover effects and exiting elements, like notifications or drawers, and Ease-In-Out for balanced transitions, like button clicks or page transitions. Less used ones include Linear for steady progress bars or loading spinners, Bounce for playful interactions, like buttons or icons reacting to clicks, and Elastic for drag-and-drop actions or animated transitions that require a springy, responsive feel.
Do
Use easing without lateral movement for transitions like top chips when switching screens quickly and directly.
Avoid
Avoid using easing without lateral movement for transitions between tabs; lateral movement creates a more natural experience.

Transitions

Jikan's transition patterns closely align with M3 Guidelines. The most used patterns include Container Transforms to expand elements to reveal more detail, like a card turning into a details page; Forward and Backward Transitions to navigate between screens at consecutive levels of hierarchy (fade with partial sliding for Android and parallax effect with slower background movement for iOS); Lateral Transitions for side-to-side movement; Top-level Transitions to navigate between top-level destinations; and Enter/exit Transitions to introduce or remove a component on the screen. In addition to these patterns, some UI elements are enhanced with custom animations that add a playful touch to the interface without affecting usability.
Container Transform
Use container transform for changes within a single component, like expanding or collapsing content.
Forward Backward
Use for navigating hierarchical levels, with forward transitions feeling progressive and backward transitions feeling regressive.
Lateral
Use for navigation between peers, such as tabs or carousel items, to emphasize a horizontal relationship.
Top Level
Use for global navigation, like switching between major sections or screens, to signify a significant context change.
icon
Enter/Exit
Use Enter/Exit transitions to introduce or remove a component on the screen.
Other
Use UI animations sparingly for unique interactions or branding moments.
Hero text displaying components
This page contains some of the interactive building blocks used to create a consistent user interface for Jikan. This page, however, only provides a glimpse of the app's core components; the full details and specifications of these components are documented in a dedicated Figma file.

Credit to Google’s Material 3 and Apple’s Design System because many of the components I used were inspired by them. While I adjusted and customized some components to create a fresh look, designing everything from scratch would have been way harder without these as a foundation

Cards

An illustration of some components used in Jikan

Charts

An illustration of some components used in Jikan

Chips

An illustration of some components used in Jikan

Pickers

An illustration of some components used in Jikan

Buttons

An illustration of some components used in Jikan

Buttom Bars

An illustration of some components used in Jikan

Buttom Sheets

An illustration of some components used in Jikan

App Bar

An illustration of some components used in Jikan

Lists

An illustration of some components used in Jikan

Menus

An illustration of some components used in Jikan

Selectors

An illustration of some components used in Jikan

Miscellaneous

An illustration of some components used in Jikan
Brand Identity

Brand Identity

Brand Statement

At Jikan, we believe time is more than just hours and minutes—It’s our most valuable resource that guides how we live, work, and achieve our goals.  Tracking our time gives us insight into where our energy and focus are spent and allows us to make informed decisions, improve productivity, and focus on what truly matters. Our goal is to redefine how we track, analyze, and manage our time through intuitive, innovative tools that seamlessly integrate into everyday life. We value innovation, user-centricity, flexibility, insightfulness, privacy, and accessibility, and we strive to empower people to make the most of their time while respecting their needs and preferences. Time is yours to shape—let us help you make it meaningful.
Jikan's Logo Design
A Mockup of an Iphone Showing Jikan Application in Use
Jikan's LogoJikan's Logo
An Image of a person using a deviceAn Image of a person using a device
Jikan LogoAn Image of a person using a smart watch with Jikan application
A Mockup of an Iphone Showing Jikan Application in Use
videoBranding Asset of Jikan Displaying Some Marketing TextBranding Asset of Jikan Displaying Some Marketing Text
An Image of a person using a device
Branding Asset of Jikan Displaying Some Marketing TextBranding Asset of Jikan Displaying Some Marketing Text
A Mockup of an Iphone Showing Jikan Application in Use
A Mockup of an Iphone Showing Jikan Application in UseBranding Asset of Jikan Displaying Some Marketing Text
Branding Asset of Jikan Displaying Some Marketing TextBranding Asset of Jikan Displaying Some Marketing Text
Branding Asset of Jikan Displaying Some Marketing TextA Mockup of an Iphone Showing Jikan Application in Use
Branding Asset of Jikan Displaying Some Marketing Text
App Features
Thank you! You'll hear back from me in less than 48h
Sorry, the form couldn't be submitted.
Please make sure all three fields are filled out correctly and try again.
mail