Up until now, I had been designing and testing with small independent components of what has become my final design. For my final iteration I needed to bring everything together into one homogenous user experience. The desktop web application is the part of the puzzle which requires the most design attention – it’s where everything comes together.


It was time to bring everything together in one final week long UI design sprint.


My process:


First I defined the information architecture using a schematic diagram which illustrates navigational decisions for each of the screen states.


This was informed by conversations at user tests and support service interviews. The web application is simple in its capacity, it illustrates graphs as days in weeks and a list of logged text messages corresponding to these weeks. Individual entries associated with disruptions on the graph can also be seen in a modal ‘thought card’ when the disruptions are clicked.


When designing a user interface and all the interaction patterns and pixels to go with it, my first step is always to jot down initial scratchy ideas to get them out of my head and onto paper. I usually do this in my BackpocketBook™ (a non-ruled A6 notebook I keep in my back pocket at all times) when and where the idea arises (usually right after a chat with a participant).

Next I work through these ideas in more detail in bigger sketchbook while keeping defined requirements for each step at hand the whole time. This is a good point to explore other potential options with in terms of aesthetics and element positioning – making sense of works best for an end user and their goals.  If I’m struggling to find alternatives to my initial ideas I usually employ a design exercise like Crazy 8s to keep my mind open to other ideas.

Scans from my sketchbooks:


Finally I move onto a computer to develop higher fidelity screen states. Currently I use Sketch, a piece of software made specifically for designing screen based user interfaces.



Sketch allows me to develop and iterate quickly with different ideas based on initial wireframes and sketches. Working on a screen can also spark potential new ideas that the paper and pencil stage didn’t present.

In a higher fidelity, the basic user flows can be further explored and quickly tested using a prototyping platform like inVision.

Having previously worked extensively with inVision, knowing its limitations, I wanted to prototype my final web application by coding it from scratch. I said at the beginning of the year that one of my highest priorities would be to make a final prototype that would work to a near production capacity.

As a result, I’ve blocked off 3 weeks to ensure I can get up to scratch on web technologies and server side scripting in order to make these designs a reality.


The final screen states to take forward to the development stage:



The overall aesthetic and visual language/tone of voice was designed to be stripped back and pragmatic to follow the overall aim of the service. This is covered in greater detail in the branding blogpost.