Helping people organize projects and activities using post-it notes

Helping people organize projects and activities using post-it notes

image
👋
This is an ongoing side project; follow along frequently to watch things progress and to be in the loop on a product release date. For the sake of brevity this piece outlines the design process in a linear fashion and omits all of the back and forth that one might expect.

Contents

The idea

Very first sketches

Low fidelity wireframes

High fidelity user interfaces

Design language

High fidelity flows

Prototypes

The idea

Sticky notes are versatile things. You can write on them or draw what words couldn't easily explain. You can organise them into columns and rows, or bunch them into clusters if that's more appropriate. You can use coloured stickies to help differentiate themes or use different sizes if that cuts it better.

Stickies are flexible enough to mimic spread sheets, to-do lists, project boards, reminders and so much more! They're great friends when ideas are young and equally great to help structure large projects.

The flexibility stickies allow is their super power, it's also why in many cases using them is not only a valid approach but the most appropriate one.

Most tools today do a poor job of providing people with the flexibility that stickies bring in real life. This lack of justice has made them somewhat redundant in the digital space - and that’s what this project aims to address.

Very first sketches

Watch the video below for an overview of my earliest thoughts, which helped me to begin with the end in mind.

Low fidelity wireframes

First iteration

Watch the video below to discover how I transitioned from an idea to some first wireframes. This exercise helped me explore how I might help people extract value from the product.

Last iteration

Peek into the Figma file below to see how the low fidelity wireframes evolved by the third iteration. This iteration helped me understand the product’s scope in more detail.

High fidelity user interfaces

In order to go from low fidelity to high fidelity interfaces, I first allowed myself some time to explore UI directions. To do this, I took all of the key low fidelity views and treated them individually as I explored layout, colour, assets and pretty much every detail.

The process went back and forth until some common threads emerged and further changes felt like changes rather than improvements. The moment I reached this point, it was time to take all of the common 'building blocks' and begin to create a design language.

Dip into the key views below:

Design language

The design language was built upon the key views which detailed the needs by providing context.

The process of building the design language involved three tracks:

  1. One was to take reusable 'blocks' from the key views and componetize them.
  2. The second, was to take all systems (type, colour, elevation etc.) and design their scalability right into the design language.
  3. The third track was about ensuring accessibility, namely around type and colour.

Take a quick tour of the evolving design language:

High fidelity flows

With all of the key views and the design language in place, preparing high fidelity flows was a rather smooth process. By this time, the low fidelity explorations provided the broader vision whilst the design language and key views provided the building blocks. That's not to say that no decisions were made during this part of the process. Some things did in fact change namely because:

  1. The design language was made after the low fidelity flows.
  2. Designing high fidelity flows forced me to think about micro interactions which challenged some decisions that had been made.

View some high fidelity flows below:

Prototypes

With all of the key flows specified in high fidelity, the next natural step was to start prototyping.

This part of the process was the most revealing as it provided the most accurate representation of the end user experience but also, uncovered details pertaining to interactions that were hard to spot on static screens.

It's worth mentioning that the prototypes below are not the first round. In fact, the first round of prototypes had outlined a number of areas of improvement which had taken me all the way back to the key views and flows.

Play a few prototypes to see things in motion:

Product architecture
Creating a new project
Creating a new note
Sketching on a note
Reordering a column of notes
Deleting a column of notes
Breaking a grid of notes
Creating a grid of notes
Zooming into notes

Thanks for watching ☺️

Keep an open eye for further development and a release date!

Let's get in touch

📱
(+356) 7920 0774
✉️
davidportelli85@gmail.com