Contents
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:
- One was to take reusable 'blocks' from the key views and componetize them.
- The second, was to take all systems (type, colour, elevation etc.) and design their scalability right into the design language.
- 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:
- The design language was made after the low fidelity flows.
- 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: