Ironhack’s Prework: Wireframing in Practice

Introduction

As most people, I need a To Do list somewhere to keep me grounded, help set my priorities and track my progress. Whilst you can’t beat pen & paper for most things, I’m one of those people that likes things neat and my handwriting is well, not super neat all the time. And that bugs me.

After lots of trials for any and every To Do app, TickTick is the one that won over my heart!

TickTick is an app that lets you organise everything in your life. From to-dos, to reminders, to habits — it can even help you keep your focus with a pomodoro timer on the MacBook app! And you can collaborate with anyone you want on any tasks. It is simple, colourful, neat. It just has it all, really.

What makes TickTick so great

By the way, this is the right time to tell you that I am in no way affiliated with this app nor am I being paid to promote it — I just like it.

So why am I so enthusiastic about TickTick you might ask? Well, let me take you through the user flow so you can see for yourself. I’ve also stripped it of all colours and UI elements so you can see that even though it looks simple, once in wireframes and sketches it actually looks quite complex. I’m most excited about the ‘Habit’ feature so I’ll take you through that part.

Looking into the ‘Habit’ feature

Here is the screen you get once you hit that ‘Habit’ button at the bottom.

I’ll admit, it’s not super clear right away what this button is about so good thing they’ve added that ‘Habit’ title at the top.

All the other icons at the bottom take you to, from left to right, the To-Do feature, the Calendar, the Search and the Settings.

That ‘+’ button is pretty explicit so let’s go ahead and click on that.

This takes you to a screen where you can add your habit. There are some predefined ones that are neatly categorized, or you can add your new own by clicking on the ‘Create a new habit’ at the bottom.

Whether you choose a predefined one or create one of your own, both these CTAs take you to the same screen — which kind of makes you wonder whether that ‘Create a new habit’ button is really needed since you can edit a predefined habit to customise it to your needs anyways.

Either way, you’ve got a choice of lots of icons to illustrate your habit, and a quote to keep you motivated.

Let’s say we want to make it a habit to rise early in the morning. This is a predefined habit and we’re happy with name, icon and quote so let’s continue.

That’s where your commitment for this new habit is put to its (first) test as TickTick then lets you pick a frequency, how much of your goal you want to accomplish within that frequency period and a reminder so you can stay committed.

And there we have it! Our new habit has been added 💪

Thanks for reading!

This article was written as part of the the UX/UI Design Bootcamp I followed in January — March 2021 at Ironhack.