Timer App

While using the iphone timer with my daughter, I thought... this is boring...
What if a timer ended with a duck quacking instead of a dull sound?
And that idea was the start of Kids Timer - Duck & Friends.

I started with a Notion page, putting together all the concepts behind it and my research on other timers. I searched for alternatives but couldn’t find one that had a nice design and was simple enough to use (and ad-free!).

I started drafting the UI on paper, I had a clear idea of big numbers and a round design (so kids can use it too).I wanted it to be colourful, but most of the apps I looked at had either a white or black background. Many timers also switch between white and black depending on dark mode settings. When researching kids’ apps, I noticed the same: most had plain white or black backgrounds. I do like clean design, but I thought I could brighten things up by using gradient backgrounds.

I went to Illustrator initially as it gave me the freedom to use a sketch brush and also start thinking about the UI with shapes and colours.
Some initial designs and colours:

I knew I wanted to stick with yellow and white, and green worked well with those colours. So I decided to ditch the blue (since not many animals are blue) and add some pink. That’s how I ended up with the current colour palette.

AfterI was roughly happy with the UI, I started animating and building the interaction states in Rive. I made a test version for a 2 or 5 minute countdown that you could access from a phone browser, so I could try it with my daughter during bath time. And it was a success! I said “two more minutes”, showed her the new timer and she when the timer went off and was happy to get out of the bath. She even started asking for the timer, which made the whole process much more enjoyable.

I had a prototype, a design, and started working on new characters.
Then I found a developer to turn the app into reality. We both had to learn how to transfer the Rive animations to ReactNative. After a few tests we it was working 🥳

Rive was essential because the design is very important for me. With Rive I could control each animation play and transition, and having it all in one vector-based software made it much easier to visualise. Plus, being able to create a working prototype made the developer’s life much easier.

We now have a fully working version of the app, and I’m slowly adding new animals.

Download:

Designed with Adobe and Figma, built using ReactNative and Rive

Bonus:

Click on “walk”, “run” or “celebrate” buttons below:

Rive application preview:

More information: https://kidstimer.framer.website/