Designing an app with zero experience

I’m the Jon Snow of design. I know nothing about which fonts pair well together. I know nothing about which colours are opposite each other on the colour wheel. Very far from it. I’m a scientist by training. So I try to combine my skills with the ways that designers work. I look up which fonts are most used and more likely to load quickly on a user’s phone. I use typography that I can read without my glasses. I google the colour wheel every single time.

So how did I manage to design a mobile app? (No, I didn’t wing it.)

I read this excellent book on design and a few blogs on best practices in software development and design. Then, I wrote down a functional specification document. It contained the purpose of the app, the use cases, target demographic, and a list of features that we could choose from.

When you write down what you’re designing, whom you’re designing for, and how they’ll use it, the designing itself becomes easy.

You can see a great example of this at Joel Spolsky’s website.

A lot of software has skeuomorphic design. This means that the software is made to look like the physical object that it replaces. Think ebook readers with page turns, note-writing apps with spiral binding on one side and so on. It may have been necessary in the past to help people transition from physical to digital usage. But new designs don’t strictly need it. It might be better to design something that is more efficient to use and isn’t constrained by the same factors as the physical object.

I wanted to see if I could make our app, TimeFerret, look completely different from other calendar apps. I didn’t want the same matrix look that almost all calendar apps have. It’s been done a hundred times and then some. Plus, I wanted to build an app that would help you figure out when-to-do-what in an intuitive manner. So I looked for inspiration in the places that I knew well.

Molecular biologists use vector maps. These are representations of circular pieces of DNA called plasmids. They have certain features that make them amenable to the insertion of other pieces of DNA. The most important parts of the DNA are highlighted in different colours. In short, it’s a tool to do biology research which I used a lot in my decade of science. It looks something like this.

It lends itself to a quick understanding of any plasmid, saving scientists the time it would take otherwise to study the sequence in detail. I adapted this into the Daily Donut that you find in TimeFerret.

A grey donut is divided into 24 segments, one for every hour of the day. Coloured segments correspond to hours claimed by meetings. Green arcs inside the donut correspond to free working hours. This design, apart from being unique among calendar apps, also makes the user more productive.

This is how I imagine TimeFerret’s Daily Donut will work. The user opens their app every day, takes a quick look at the Daily Donut, and plans their work based on how fragmented their day is going to be. I expect a lot of workers have to deal with meetings organised at short notice. If they already knew that they would only get two 1-hour blocks in a day, they might do one of two things. They could either decline new meeting requests for the day to keep their 1-hour blocks. Or they could schedule more meetings for that day if they cannot get any meaningful work done anyway.

I’ll call my design a success when our users also find value in TimeFerret and it becomes a regular part of their day.

*** If you liked this post, please clap so that more people can see it. If you want to read more articles from us, ‘Follow’ this blog to stay updated. We’d love to hear your thoughts on this post!***