Web version redesign
Visual function optimization
Old design
As a globally leading TD efficiency tool, the visual style of the Ticktick Web version appears monotonous and outdated, still resembling the early stages of the Win10 visual style. The previously used linear icons, outlines, and tight layouts have become too faint with the increasing number of features and information. At the same time, as a tool-based application, there is a desire to diminish its web usage feel, making the user experience resemble that of a standalone desktop application.
Layout & Space
Better content support: create a clearer visual distinction between the sidebar function area and the content area, strengthening the unity and hierarchy of the content region. Optimize font size and weight, remove overly divided lines, and increase vertical spacing. Base all spacing on an 8px scale to improve information processing efficiency, create a sense of space, reduce crowding, and deliver a better reading and input experience.
Colors & Icons
Rework the color system, removing unnecessary colors and keeping only functional and accent colors on each page. The new color palette is deeper, emphasizing clarity and the communication of supporting information, without conflicting with content, and creating a stronger sense of hierarchy.
Icon redrawn. The use of silhouette icons improves recognizability and emphasizes functional attributes.
Old version
The current desktop login page is still in the design of the first version and has not been iterated or optimized. The window is relatively small, lacking a sense of grandeur, design aesthetics, and guidance.
New version
Adjust the original layout of the small cards to a large page divided into left and right sections, making the typesetting more breathable and comfortable. The illustration of the blue sky and snow-capped mountains on the left enriches the visual experience while creating a strong visual distinction from the login page on the right.
Feature Design
New User Onboarding Team Edition
New User Onboarding
For first-time installation users, divert new and old users. Guide new users by providing a few common task lists and frequently used functions built-in. Users can choose based on their initial intentions at the time of download. This better meets user expectations and reduces the difficulty of use.
Team Edition Sidebar
With the arrival of the team version, the sidebar needs to be adjusted based on the original structure, adding the belonging team option. At the same time, we must consider the functionality of multi-level tags and multi-level files in the future, ensuring there is no obvious confusion.
So, from the very beginning of the design, we aimed to unify the distinction between “team” and “individual” across different styles on multiple platforms, while reducing the learning cost for users. We chose the most authentic and minimal design approach, without using icons—only text prompts. At the same time, we reduced the font size and lightened the color, similar to Mac categories. While making the text smaller and the color lighter, we also increased the spacing between folders and other attributes to avoid accidental taps, making them easier to distinguish visually.
Team Edition - Shared List
Based on a shared list, users can pay to upgrade to a team list. You can set different teams and member permissions for a list to support better team collaboration.
Component-based design
Standard
Sketch component library
A component-based design approach isn’t just about making design easier and keeping things consistent. More importantly, it improves efficiency—especially the efficiency of the entire workflow.
Build components from basic elements. Turn all functional modules into components, and convert the elements used inside them—such as icons, icon colors, background colors, font styles, and more—into selectable components, layered together to create composite, customizable components.
Android animation optimization
Quick Add Task Animation
Core features, using paper airplanes as an animated carrier, to add fun and personality.
Task completion checkmark animation
At the moment of the click, with vibration feedback, it enhances the user's sense of accomplishment.
Task details expand
Click to expand the coherence of the tasks
Payment Guide for Premium Member Features
Animation design for premium members
Voice Add Task & Beginner's Guide
Users can press and hold the Add button to enter the voice task-adding screen. The new voice animation is inspired by sound ripples, and the overall design and color palette also stay consistent with TickTick’s signature style—lively yet restrained. At the same time, the animation feels more fluid and comfortable. The entire voice waiting, listening, and transcription process is smooth and natural.
