Day 10

Rough UI sketches for our app. It’s going to take a while for it all to come together. Most of what we design in the very early stages won’t make it in the final version, but this time is critical for us to figure out what’s really important and what can be left out.

We know we want an editor-first experience, because typing is fast and natural. It doesn’t slow you down when you’re thinking. But we also want a structured environment so you can plan tasks and deadlines in the future and not have them get lost in the noise. Because task lists get moved and shuffled around constantly (at least if you’re like me) you want an interface that encourages this free-form use.

80 days is not enough time to get everything right, but if we get enough right we can fix our mistakes in a Version 2.0 down the road. Skipping over the ideas and prototyping phase won’t get us to the finish line any faster.

I’m going to sleep on these ideas during the weekend. Many of our Great Ideas turn into “what were we thinking!?” days or weeks later. Funny how that works. It doesn’t bother me, though. Worst case we’re going to need another complete redesign cycle or two. Best case our ideas start to converge from here on out to something with a strong conceptual core. Then we can start heads-down-coding and we should pick up speed!

This wraps up week 2 for me!

Today we’re working on more sketches for the design of Thymer (👉 What are we going to build).

As I mentioned yesterday, the goal of sketching what the app should look like is to refine our thoughts on how everything should work, and to get a preview ready for the initial marketing/landing page.

Hopefully we’ll be able to get the landing page done within the next few days. I see it as the trailer of a movie. We need it to build an audience before the actual launch and to gauge the initial response. And to stay with movie analogies, the initial preview we post will be just a like a set: there’s no need yet to build a real street with real houses, just the facade.

Working on all the sketches also helps to expose a lot of hidden additional design decisions we need to make. Even though it’s just a mockup screenshot, we’re making a lot of mini design decisions already. It doesn’t look like much on the screenshot, but we’ve had to think about how to deal with indentation, how task attributes work when you can edit everything in plain text, scheduling vs due dates, assigning responsibilities, and so on. We’ll revisit some of these topics in the coming weeks and explain how they work when we build them out.

As for creating those mockups, my two tools of choice are good ol’ pen+paper and creating a plain HTML file with CSS. It’s just fast to iterate this way, and using tools like the browser’s Inspect Element lets you quickly try out different colors and so on. The earlier in the design process, the simpler the tool I prefer so it’s easy to try out different approaches and throw things out.