User:Francg/expub/hookedlooped/diagram

From XPUB & Lens-Based wiki

"Habit Design" diagram based on the notes from Nir Eyal
File:Diagram.pdf



I have prototyped an interactive diagram with Adobe XD software, a simple UI/UX tool that allows to wireframe your storyboards with interaction and therefore creating a life-like experience of the website/app's final result. It provides pen tools but it also allows to use vectors from Illustrator or production-ready assets to your project.

Process1.png

Process 2.png

Process3.png


After I have double checked that the buttons are properly framed to each corresponding board, I save the project as svg. files and open them again in Sublime. Then I transform the files as html and link them all by adding a sound file to each button, resulting on 31 html pages.


Process4.png

Process6.png
Process7.png
Process9.png
Process11.png


The final result is an interactive diagram that resembles the smartphone's messaging experience, hooking the user up to the last response, creating a game-like effect on the reader.