Side Project — Part 3 … Design

Designin, stylin and profilin …

7 min readAug 17, 2017

My previous two posts covered the why and what of my side project. Now that I had clarity on that part, it was time to start building …

You can read Part One and Part Two, but it’s not required for understanding this post.

For my side project, I had decided on a chrome extension that would hijack the ‘new tab’ functionality of chrome. My new tab would then provide the cues and triggers of what I should be focusing on today. The hypothesis being that this would help shape the habits and behaviours I want to be successful each day.

The next step was to come up with a mock of this side project. I had identified three keys areas that I wanted to provide cues. Three areas that if I could trigger improved behaviours, I could create habits that help me achieve my goals.

Appointments
Tasks
Reading

With this clarity it was time to move on to SketchApp and build out a mock. Below is the first draft, after multiple iterations, of the mock that I came up with. In this post, I want to breakdown my thought process in the elements and design that I’ve come up with. If you have input, feedback or ideas … I’d love to hear them. This is an exercise in working out loud, so please feel free to comment.

I decided on a three column layout. In the center column I had “Tasks”. Tasks had been the goal and most important element from the beginning. By utilizing the center column I could provide a larger width to accommodate more tasks and avoid wrapping, while still maintaining symmetry with the two secondary columns.

Appointments

In my previous post I discussed what habits around appointments I wanted craft. One thing I noted was the ability to have a clear view of my upcoming appointments. This was in an effort to ensure that I was prepared for each upcoming meeting. I also wanted to have a simple calendar view. It’s one of the few things I miss from Windows.

#1

First up was the calendar. I wanted it to be simple and flat. Personally, when it comes to navigation I don’t like paging through months. It’s true that often users are merely navigating to the next or previous month. However, when you want to view a month that isn’t within a range of two months it’s frustrating. Instead I wanted to have a dropdown to quickly allow the user to select the desired month. Regardless of whether it was simply the next month, or March two years ago.

I also wanted to be able to display which days of the week had appointments. Using a circular border around each day allowed me to indicate appointments from different calendars. The problem is that it doesn’t indicate volume.

This is something that I’m going to wait and see how I end up using it. If I find that I need the volume, I’ll try to rethink this approach to provide value.

#2

The second section is devoted to upcoming appointments. Again, through the use of color I’m able to distinguish calendars. Along with type of appointment it provides a title, time and location.

I’d like to have more space for appointments. I don’t know about you, but I have more than three per day. I tried to move the time and location to the same line, but it took away from the legibility of each appointment.

I don’t want to limit my view here, so I’m going to start by including scrolling. From there I’ll see if I need to make adjustments.

It was also important for me to include ‘tomorrow’ in the list. At the end of the day I like to review what I have upcoming the next day to make sure I’m prepared.

Tasks

This whole project started with tasks. In terms of shaping my behaviour to create habits that will help me to succeed each day, tasks are king. That why they get the center column, more width and a larger font.

#3

I’ve got a lot of ways to input tasks into my current tool (todoist). However, one thing I’ve learnt from GTD is you can never have enough. If I’m using chrome and I think of something I want to capture, I want to make sure I have an input method.

That being said, it is taking up valuable space (basically two task items). It will be one of the first things I’ll cut if the usage metrics don’t prove it’s value.

#4

As with todoist, and most other task management apps, I wanted to have a clear view of overdue, today’s and tomorrow’s tasks. The overdue date was important to focus on. As long as it was the only element in that column with any colour, I could keep it subtle yet still obvious.

For more on the Pomodoro technique check out this article

#5

Here comes the scope creep …

As I was working on the mock I was using my pomodoro timer to maintain focus. It hit me that this would be an apt place to start or view a timer.

Despite this not being a part of the original requirements it made a lot of sense. Especially if it was connected to my macOS timer app. Maintaining visibility of my pomodoro timer fits well with the idea of triggering behaviours that keep me focused.

If there isn’t an active timer running, the app displays the current time and simple button to start a new pomodoro session. If one is running, the ability to pause/resume and stop are all I really needed in this view. Simple yet effective.

Reading

With the third column I wanted to provide a trigger to read more. Specifically articles I had saved to Pocket. On top of that, I wanted combat the feeling of an overwhelming amount of content to consume.

My first iteration just had a full column of articles. I could easily fit 8–10 articles in the column. This was completely opposite to the concept of providing content that was easy to consume.

As I iterated on how best to use the space in this column, I had more scope creep. Better known as great ideas :)

#6

I decided to only display three articles at a time. Each would have a read time, if available, to encourage a sense of “it’s only 4 minutes, you have time for that”.

The source also helps. For me, most of the articles I save to pocket are from interesting and knowledgeable sources. Having Medium, Product Hunt, or Mind the Product visible in the card would invoke a sense of excitement that will hopefully encourage me to read the next article.

#7

When I was working on the mock, it happened to be at a time where I had a very engaging conversation around the power data has to drive behaviour. I had been talking with someone about how the feedback loops of my scale and smartwatch had helped me lose a bunch of weight.

It occurred to me that if this was my hub of focus, it would be beneficial to use data to help drive behaviours. I could provide stats that would motivate and encourage the behaviour I was seeking.

Pomos … This isn’t a stat on productivity. I don’t like to attempt measure productivity with the number of pomodoro sessions. Instead I want to promote the concept of using pomodoro to stay focused and productive. This stat is meant to be a consistent reminder that I should be using the timer to maximize focus and productivity. 🍅
Tasks … The concept of this stat is to be a count down to a successful day. Just like drawing a line through a to-do list, this stat can provide a feeling of accomplishment. It will show progress towards getting each day’s to-do list complete. ✓
Reads … One of my goals is to always increase my reading. What better way to provide motivation than through gamifying the number of articles I read each day. 🥇

#8

Finally, I added weekly and monthly goals.

The rule of 3 was something I had read about earlier in my sabbatical and I was interested in trying out. The concept is simple … write down three goals for today, this week, this month and this year.

I had my own take on this; I let GTD dictate my day. Then, I come up with three goals for the week before each weekly review and use them to craft the kickoff to my week. Then I have three monthly goals to guide each month.

Personally, I’ve junked the concept of yearly goals. To me it’s a lot like a product roadmap. If you try to plan that far in advance you’ll find it difficult to listen and act upon your feedback loops. Each year I certainly have in mind certain goals. However, I don’t want them to be the be all and end all, as I may miss out on feedback that shows a better path.

Summary

Now that I have a mock, my next task is to scope out how I’m actually going to build the solution. In the next chapter of this series I’m going to breakdown the function and source data for each element in the mock.