Prototyping the new UX design

I wish to share how I’m designing the new UX for Kneaver.

The goal is to streamline the use of Kneaver, specially on smart phones, according to common scenarios (taking notes in urgence, searching for information while doing something else, reviewing while idle, etc..)

Following advices from Mayra, Andrew and posts from LukeW, I started with the smallest breakpoint : handsets (480*320). I will use responsive design inside a native app.

So what I wish is:

  • Use paper, pencil, stay away from the computer while designing. Not disturbed, not tempted to lookup existing stuff, not tempted by perfectionism.
  • Being able to reuse and redo
  • Explore different aspects, different scenarios, storyboards.

It turns out that even with the lastest HTML5 technology we also end up with only different screens and region changes. So I use cards readily available in commerce, 7.5×12.5, squared. Roughly the size and aspect ratio (1.66 for 1.5) of a small smartphone. I number them in the back. I place them of a sheet of paper, surround them by a large black marker border.

  • It’s small, I can play with it, bring it outside and try to manipulate it while walking. All cards form a deck and suffice to pick a card to simulate a change of screen.
  • Placed in the A4 paper I can add plenty of explanations. Each zone is explained and has a number in a round : this is the priority. if I had to replace, reorder, remove a zone I would go for items with the highest priority. I can write down how I imagine it will be used, thoughts, ideas, critics, alternative I have. A card and a sheet will have parallel lives.
  • Placed on a large sheet of paper I can think about all possible transitions. What cause them, what is carried along.
  • Later I will reuse it for scenarios.
  • I wish to video prototypes as I did for xAPI. Now I realize I could almost do plays. It really opens up a whole world of possibilities.

So now that I have some ideas on how to proceed I will restart from the beginning: doing some interviews on how you learn, stay abreast, apply, retain, capitalize and prepare your knowledge for sharing (email me if you’re volonteer for being interviewed !).

This is what it looks like:

The large sheet and my tools:


Detail page:


In action 🙂 low-res prototype. Sufficient to explain it to someone and gather feedbacks.