Introduction

I haven't made a side project in 5 years. There are a lot of reasons why this hasn't happened. Transitioning from client work to products > becoming a father > travelling the world > moving to Spain > renovating a farmhouse. Plus this whole pandemic thing isn't helping either. So while time is not in abundance, I'm making time.

I will be building Daily Four. A productivity tool that will help you achieve the important things.

Who is building this? I'm Mark, Dutch designer living off-grid in Spain with my wife and son. I've been a product designer for over a decade, mostly working for early stage startups. Nowadays my focus is on Wild Ventures. The company my wife and I run where we make apps inspired by nature.

I'm intentionally keeping the product small. Making sure I can actually finish this and create something useful. There is no grand goal or business model. I'm building this for me. If I succeed others will hopefully find Daily Four useful as well.

It's also the first time I'm building in public. For years I have been following other people share their process thinking I should do this too. But like a failed New Year's resolution it's something I never acted on. Until now...unless I abandon the whole thing and all you are reading is this.

I will cover each stage of the product development. Whenever I complete part of the project I will share an in depth article on the entire process.
Thanks for reading 👋 and let's start building!

Concept

Daily Four is all about getting the important things done with minimal stress. Long to-do lists can be overwhelming and full of low-priority tasks. With Daily Four you only get four todo's at any given time. Yes, that's it.

I like creating products with small set of features, often designed with some constraints in place. In the past I've designed products such as a weather app that only showed the Feels Like temperature.

Now this isn't the first time I've designed a productivity app. Daily Four is a combination of two products I designed many years ago. Called Priority and Made It.

Priority (2012)
Close to Daily Four where the you could only enter five todo items. The design and product experience was subpar (terrible) and it lacked an overall concept.

Priority

Made It (2015)
A mix of a done list and journalling. I always liked the design but trying to combine a done list with a journal did not solve a real problem.

Made It
Made it

Daily Four

At this point I roughly know what I want to make but to further refine the concept I went on a Sales Safari. I have gone through so many forums taking note of the pain points people experience with their productivity and tools they use. I now have a list of insights that help me to better define the concept and the product features.

Daily Four is meant to compliment any todo system you are using. It's not a full blown productivity suite but your daily place to get things done. I keep a separate “future” list to help me keep track of things that need to be done so I don’t forget, or do forget when it's no longer important. I then pull the daily four from that list, often the night before. Now instead of ending each day feeling like I’ve fallen behind I completed my four todo's!

Why four? It seems often times lists are either three, five or ten. I've seen many systems use three items as a limit but I find this a little restrictive. Four is a nice balance. Giving you a little bit more space to work with while still keeping you focused. I admit it's no exact science and somewhat arbitrary. But hey, it's my product.

Reflect

Since you are only adding important items, periodically looking back on your completed todo's can be very motivating. You often underestimate what you get done over the long term.

While we are renovating our Spanish farmhouse we keep a monthly list of things we've completed. Even though we see the results of our labor all around us, you loose the sense of when things got done. I always get pleasantly surprised by the amount of things we got done in any given month.

I don't want this list to be judgemental of your productivity. This means items will not be grouped per day but per week and per month. We all have gaps in our productivity and that should be fine. Reflect regularly or simply whenever you need a dose of perspective.

Product

I am intentionally keeping the feature set small so I can design a well thought out product that's a joy to use. This will allow for things like dark mode and animations.

The next article will all be about the product itself. Stay tuned!

Product

With the concept in place here is a list of goals the product itself needs to accomplish:
The design has to be "out of your way" for you to manage your to-dos. Think of it as a quiet place to work.Fast, simple and delightful to use.No registration required. You should be able to use Daily Four straight away.Avoid having unnecessary settings. Instead try to make life easier for the user by thinking things through.Easy to build and privacy focussed.A well designed dark mode (I love dark mode).


Typography

Before Daily Four I already knew I wanted to use the Inter family for a project. Now I had planned on using Inter for Wild Journey. However in several blind tests my wife, also designer, consistently picked Lato for the interface. Both font families are great and sometimes you have to know when to concede.

Inter offers a good variety of weights and is suitable for both the big copy on the landing page as well as smaller individual items in the Reflect design.

Typography

As for the logo, a serif font brings a nice contrast to the rest of the UI. After trying several options I went with Utopia. It's a rounded serif with a playful character. I am not branding a financial newspaper here.

Typography

To-do view

Daily Four To-do

I like that this view is quiet. Almost as if you are writing your to-dos in a text editor. In the early design exploration I tried a number of card based designs but ultimately went with the most essential version I could think of.

Daily Four Design Tryouts

The main interaction is adding and completing your to-do. I spent an unhealthy amount of time on this interaction. A big part of it went into the subtle animations. When you complete an item it first strikes through the text before moving to the Reflect view. When you delete an item it disappears much faster.

Daily Four Interactions

Reflect

Daily Four Reflect

While I find focussing on a limited number of todos makes me more productive. I don't want to make this view judgemental of your productivity. There are no streaks to complete and your completed to-dos are not grouped on a daily basis.

I wanted to differentiate this view from the to-do view with a timeline representation. Completed items are grouped by this week, week before, last month and earlier. This feels like the most relevant way to group your past achievements. You can hover over each item to view the relative time ago. You then also have the option to delete an item in case it isn't worth remembering after all.

I tried the visual timeline representation but ended up with a design that visualises the timeline concept more subtle.

Daily Four Reflect

This view should be different but still be connected to the to-do view. I tried several color options but ended up with something close to colors used in the to-do view.

Daily Four Reflect Colors

Landing page

Daily Four Landing page

The landing page is part of the app. Usually this is a bad idea but for Daily Four it's perfect. You can start adding your to-dos straight away.

I tried to make the copy as succinct as possible with an opinionated title to get your attention. You are reading this so it seems to have done the trick.


Dark Mode

My iPhone is always set to Dark Mode. Wild Journey only has one mode...you guessed it.

I have learned that it's better not go with 100% black. The contrast can get too harsh and it tends to create an unpleasant effect when scrolling.

For both the to-do and reflect view I picked a color within the same range as the light version. To keep the two connected and to avoid a grey tone feel to it.

Daily Four Dark mode
Daily Four Dark mode

Daily Four follows your system settings automatically and in real time. When your device is set to dark mode so is Daily Four.


Design details

The product is fairly simple. No complex flows or lots of information to organise. This gives more room for attention to detail and a little fun.

The dot in the logo serves as an indicator. When you have zero to-dos listed the circle is empty with an outline. As you add more items it gradually fills the circle. When you have reached your four to-dos it's a solid circle.

Daily Four Logo animations

Privacy

There are no analytics or other tracking software so I have no idea how people use Daily Four. This is not only a privacy consideration but mostly comes down to a question of why. It's easy to collect and track a lot of data but how often do you need any of it? The most important metric for me is engagement via email and twitter.

Tech

I love creating products but I'm not passionate about coding. While I enjoy writing code that works well it's mostly a means to an end. I'm foremost a designer and therefore choose my features carefully and put my efforts in the conceptual and design part of a product. There are any many ways for me to derail a project such as this. Getting stuck learning a new framework or building features that require a lot of engineering. I have found I can code most features I come up with but it often takes me about 10x as long compared to an experienced engineer.

All your to-dos are in the local storage of the browser you use. This makes many things easier except for two big tradeoffs. It won't sync between devices and if you ever delete your local storage you loose all data. This is particularly bad for the Reflect part of Daily Four. It's a comprise I accepted for a side project.

I am not using any frameworks or doing something interesting here. I haven't done a lot of web development these past years so it's mostly a compilation of code I wrote before along with some help of the internet. It works and it's fast.

Next

I really enjoyed focussing my efforts on a small product and doing some web development again. Right now I don't have any plans to add features or turn this into a business. It all depends on the feedback I receive and my own interests.

Thanks for reading the making of Daily Four!