Creating a product in one month from scratch and getting featured on Product Hunt
Requirements
Initial task: create a digital solution for the approach described in one of my previous posts. Short idea of it — having a to-do list for routine tasks, which we have to do day-by-day and every day picking at least 3 tasks we want to complete by the end of the day, so during the day we stay focused only on what we need to do, rather than jumping on whole to-do list.
By the way, our beloved British scientists already proven that as a human being, we only can focus on maximum 7(±2) factors, which need our attention and constant control. Everything, what goes beyond will be perceived as a thread and our brain will block all thinking.
First point in most digital solutions — to visualise your idea and start talking to potential customers (hello “Mom Test” by Rob Fitzpatrick — best book for this stage, recommending for everyone) in order to understand if anyone else is looking for similar solution. After that — improve the model of the project and you are free to go to start building an MVP. And that’s what I got.
All crazy tasks — on the left, day-to-day jobs — on the right
So, on the left side I was trying to keep all the tasks I need to do at some point in a simple to-do way. It can be either one-time task, which you can tick off after completion, or it can be day-to-day task, which will stay in the list. In order to let people organise their ideas, later on I decided to allow adding sub-tasks and “star” items for prioritisation.
On the right side I created a simple table with columns representing each day of the week. Initially I had several thoughts on approaches to achieve the ability to assign tasks for specific days: labelling each task in to-do list, or even having separate lists with tasks for each day. However, none of these options I did not like, as it will overcomplicate the interface and make it less logical. I am assuming the scenario I am using is not the ideal, users have to align each cell from the table with its task, but that was my idea — to have a single source of truth, which is main to-do list.
Building the WebApp
Then it comes to the implementation. One of my key motivations behind building this solution — not just to solve my problem and test the market for the solution, but also to learn something new. Also, I didn’t want to spend to much time on the development. And here is where “The Lean Startup” approach comes into help (I am actually a big fan of the same-named book, written by Eric Ries). Building something very quickly with focus on the main idea of the final product and test the market on demand.
Even though I can consider myself as a full-stack developer and it wouldn’t be a problem to quickly write some cloud solution with authentication and storage in Postgres, I decided to build everything purely on front-end. I understood that possibly it won’t have cross-device sync in this case, but it wouldn’t be necessary for the proof of concept and checking the demand.
By the time of development this application, I already had some experience of working with vanilla JS, Backbone and Angular (from my another movie project). However this time I wanted to learn something I have much less experience working with. And I picked React — predominant technology on the front-end market (alongside with Angular and View). Since I decided to build WebApp without any backend, I had to pick some solutions for local storage. After reading few articles on this topic, I clearly understood that I need IndexedDB. It is well supported in modern browsers and will work perfectly for my solution.
And here what I got a month later after I sstarted a project (all of that was done on my free out-of-work time):
As you can see from the screenshot above — the final design is almost the same as it was on whireframes, despite some UI improvements. For example, I allowed users to expand their to-do items and add sub-tasks. Also from expanded item they can either edit the text, or simply archive the task if they don’t want to see it anymore in the main list. Prioritisation is important — that’s why I allowed users to “star” their tasks and sub-tasks.
Performance graph
If Apple think that closing rings motivates you to do more sports, why we cannot have something for to-do list?
This graph is something I didn’t have in the original design, but I had some thoughts on value it can bring and how to place it elegantly, so it won’t overload the in itial interface of the app. By default it’s not always visible, you have to open by clicking on the “graph” icon and it and it will slide up from the bottom. And that’s where you will see your week-by-week progress of task completion ratio. Not sure whether this feature will be interested by users, but worth to try.
Landing page (slider)
These days, if you want to expain to potential customers what your business does and what they can get by using your product — you will need to place all of that information on your landing page, which is usually a separate page. I decided not to use this approach. First of all — my product is not that complex and secondly — it will take some time. Nevertheless, same time I wanted to somehow explain to new users what they can achieve with The Weekr. Looking at the bottom slider of the graph I implemented, I realised that the space I used for graph will be enough for few lines which will describe the product. And that’s what I got.
This slider appears for new users automatically and can be easily accessed from the button in the footer.
That’s it
Next step for me — will be to collect feedback and see if The Weekr will be able to solve someone else’s problem of time management. That’s why I’ve just launched it today at Product Hunt and it got featured! Feel free to visit the page and leave me a feedback.
You can access the app at https://theweekr.com. No registration needed to start 🙂
