Take an insider look into the complete design process behind Todoist’s new logo and recent rebranding. Inspired by the three steps of completing an important project, you’ll see the rounds of iterations and thoughts that resulted in the simple yet bold checkmark logo and wordmark. For more details visit: https://blog.todoist.com/2015/09/16/todoist-new-logo-rebrand/.

1. Todoist Logo Design Process 1
Todoist Logo
Design Process

2. 2Todoist Logo Design Process
Before design
Before getting started with rebranding, it was
important to first ask ourselves, why? Why rebrand?
What was missing from our previous logo and visual
brand? What do we expect with this new identity
system? What purpose do we want our new logo to
fulfill?
The previous Todoist logo — designed in 2010 by
Claan — connected a T and D to represent the initials
of our product name. However, Todoist is not “To
Doist”, it is not made up of two separate words, and
therefore makes little sense using “TD” as the initials.
In addition, the old logo didn’t convey anything about
our software or our company’s values.
“Achieve more, every day.”
That is the fundamental idea we wanted to
communicate to our users with a strong, memorable
symbol of our product and company.
Getting the ideas
Iterations
Logo Refinement
Typography
Final logos
The logo of Todoist form 2011-2015

3. Todoist Logo Design Process 3
To get the idea for our new logo, we asked ourselves,
what elements make a logo great?
We identified 3 fundamental characteristics we wanted
to strive for:
1. Identifiable — to stand out from all the to-do app.
2. Simple — to make the users easily memorise.
3. Communicable — to make the user have a clue of
what the app is for.
We wanted to find a key image or object that would
communicate the use of the Todoist app. We wanted
people to know what Todoist is about when searching
it in app stores and be able to recognize it afterwards.
In the beginning, we tried to come out with as many
ideas as possible that could be linked with the idea of
a to-do list.
Below are some of our very first ideas:
Abstract ideas:
Gradient, repetition, fluctuations, up, red.
1 2 3
4 5
1.
Gradient
2.
Repetition
3.
Fluctuations
4.
Up-right
5.
Red

4. Todoist Logo Design Process 4
1 2 3
4
7
5
8
6
Concrete objects:
Paperclip, checkmark and checkbox, fluctuation graph,
papers, bell, calendar, hamburger icon, notepad.
u
1.
Paperclip
2.
Check and
checkmark
3.
The Fluctuation
graph
4.
Papers
5.
Bell (Reminder)
6.
Calendar
7.
Hamburger icon
8.
Notepad

5. Todoist Logo Design Process 5
Iterations
After the initial brainstorm, we undertook several
dozen rounds of iterations to find the best fit for the
Todoist logo. Here are a few of them:

6. Todoist Logo Design Process 6
The logo we ultimately settled on incorporates 3 white
checkmarks on a field of red. The three checks inside
could be viewed as both a stack of paper lists or three
checkmarks.
Smoothed out the hard corners of the logo to
make it less aggressive.
We tried to find the better shape for the logo,
the circle was the first shape we applied.
The logo looked awkward aligned centrally to
the square and the hard corners of the square
looked aggressive.
In the end, we smoothed out the corners of the
background square, also placed the logo to
the left.
The right side of logo was intentionally cropped
to leave more imagination to the logo.
Why three?
Three can be associated with a process toward
completing an important project — starting, doing,
done — and the small small steps that make up
larger accomplishments.
But we knew it was not final without refinement.

7. Todoist Logo Design Process 7
Logo Refinement
Now that we had the overall design concept, we
needed to refine the details to create an iconic, yet
flexible that would be impactful and recognizable in
any context.
To start, we translated every visual detail into geomet-
rical proportions.
The new logo background could be divided by
the radius of rounded corner by 8.
Height : Circle Radius = 8:1
The ratio between the dimension of logo and
background are 1:1.6 which is close to the
Golden Ratio (1:1.61803...)
a:b = 8:5 = 1:1.6

8. Todoist Logo Design Process 8
Below is the final logo of Todoist with it’s
constructional grid.

9. Todoist Logo Design Process 9
In order to make the check marks look the same in
both the positive and negative versions, we adjusted
their width slight and added more space in between.
The ball on the left looks visually bigger than the
ball on the right side.
Before the modification, the checks on the left
looks narrower than the right.
After the modification, the checks inside the
logo look the same size between positive and
negative.

10. Todoist Logo Design Process 10
The comparison between the positive and the negative logo.

11. Todoist Logo Design Process 11
Wordmarks & Typogrpahy
While choosing a typeface for the wordmark, we were
looking for something classic, clean, and neutral, but
still be recognizable.
The geometric sans-serif typefaces usually convey a
fresh and modern look, nevertheless, they sometimes
lack of humanity or emotion.
We explored several typeface options, in the end
Avenir Next was chosen to be the typeface our
wordmark. Designed in 1988 by the legendary
typeface designer Adrian Frutiger, Avenir Next is a
classic, timeless typeface that still manages to convey
a sense of humanity in its letters.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVW
XYZ 1234567890 (:;.!?/#*)
The legendary typeface designer
Adrian Frutiger.
Avenir Next - Demi Bold
24pt.
Comparing both geometrical typface.
Futura (left) and Avenir Next (right).
The final of lower case t still keep a sense of
humanist typefaces.
The original prototype of the Todoist wordmark,
Avenir Demi Bold with Todoist logo.
todoisttodoist
t t

12. Todoist Logo Design Process 12
However, the Avenir typeface still needed a few
modifications:
todoist
2
4
1
3
1.
The ascender of lower case d was too high,
which makes it looks cold, thus we intentionally
descended it.
2.
The relationship between lower case s and t is
awkward, not only too close, but the terminals
of s looks very noisy in the composition, to solve
this, we changed its degree to horizontal.
3.
To match with the check of the logo, we cut the
upper terminal of lowercase t to 23 degree, this
also added some humanity and rhythm to the
wordmark.
4.
The hard coner was aslo smooth-out in order to
match the style of logo.
The final wordmark of Todoist.
The final lockup (logo with wordmark).

13. Todoist Logo Design Process 13
aijgktaijgkt
Graphik by Commercial Type foundry is the
accompanying typeface of our logos due to its
similarity of Avenir but with better readability (lower
acsender height) , it’s a hybrid of Neue Grotesque and
Geometrical typeface.
The similarities in characters between Graphik
and Avenir Next.
Graphik Medium
Graphik Extralight
Graphik Regular
Graphik Semibold
Graphik Light
Graphik Medium
Graphik Bold
Avenir Next
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ 1234567890(:;.!?/#*)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ 1234567890(:;.!?/#*)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ 1234567890(:;.!?/#*)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ 1234567890(:;.!?/#*)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ 1234567890(:;.!?/#*)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
UVWXYZ1234567890(:;.!?/#*)

14. Todoist Logo Design Process 14
Final Logos of Todoist
Todoist Logo
Todoist Signature Lockup
Todoist Vertical Signature Lockup
Todoist Wordmark

15. Todoist Logo Design Process 15
Android Windows 10
OS X
WatchOS
iOS
Todoist icons are slightly different in order to fit the
look and needs of each system.