Toggle screenreader descriptions
Animation, icon design, sound design
Emma Barratt, Matthias Hoegg & Pedro Messias
Google Tasks is a feature launched in 2018 to help users stay on top of their schedule. It runs as a standalone app and is also built into Gmail and Google Docs.
While working at Wolff Olins, I was on a team to create the icon and animation behaviours for it, as well as developing a subtle sonic identity.
[video transcript]: Life is full of to-dos. Whether it's keeping on top of your weekly shop, or working with your team to deliver that killer pitch. Google Tasks is here, to help you keep on top of everything and get the right work done. Helping you to balance your long list of to-dos, focus on the right thing each day, connect everyone to work better together, celebrate these moments of progress, checking if off the list and getting you ready to take on the next.
The act of ticking tasks off a paper list is one of those near-universally satisfying moments, so our goal was to translate this feeling to the screen.
We pitched a series of animations (above), then refined from the feedback, arriving at the animation below: the empty circle of an uncompleted task turns into a diagonal strike, which playfully spins into a tick.
[Video description]: A long yellow pill shape and a blue dot spin around eachother. They zigzag downwards. The yellow shape pivots on top of the blue dot as the blue dot rolls left and right. The yellow shape scoops up the blue dot and tosses it left and right. The shapes multiply into three so that they resemble an itemised list. The blue dots swipe across the yellow shapes to create a diagonal pattern. All of the shapes spin clockwise and the yellow shapes merge back into one. The shapes now look like a percentage sign. The blue dot circles back anti-clockwise, pushing the yellow shape with it. The shapes then form a tick.
[Video description]:A grey ring shrinks down to the bottom-left and fill itself in with the same shade of grey. The shape extends towards the top right to become a long pill shape and turns yellow. A blue dot falls from the end and bounces on an invisible floor. The blue dot then arcs anti-clockwise, pushing the yellow shape with it. The shapes then form a tick.
This mark came with other behaviours to be implemented alongside it, showing multiple tasks being completed at once, loading icons and tasks in progress.
longside the animation work, I also provided some sound design. Google's brand is clean and simplistic and we wanted to emulate the satisfaction of completing a physical list, so I sampled noises like pencils drawing marks, sheets of paper sliding across one-another and the cheerful clinking of glasses at the end of a long project.