How to start designing without designing.

I’m a Noob in the UX space. I’m usually a Front-end Developer collaborating with Designers and Developers writing HTML, CSS, Javascript. There’s recently been an opportunity at work to try UX so I decided to attend the UX Conference, this year in Brisbane.

I was introduced to this method at a workshop run by UX Mastery. It’s based off something that some awesome dude used at BaseCamp/37 signals. I even managed to find an article by them here

It’s called Writing out your UI Flows. It’s quite simple but so effective. You write What the users sees on the top and then What the user does on one
post-it note then rinse and repeat.

Ui Flow Template
UI Flow Template

I find this so helpful to clarify the design problem of what you are trying to solve. I’ve used this UX workshops when you have Subject Matter Experts, Stakeholders, Business Analysts in a room to help them express how they see their problem being solved. The post-its help as you can re-arrange and adjust certain steps of the flow. This opens up the discussion and helps people to re-think how things can be differently.

It also helps to see where certain steps live so when it comes to Wireframing you can see where things belong. Just to emphasise that each post-it note is not a screen, rather a step in the flow. You can see this in the example below of a RSVP flow. The RSVP Screen has different actions the user can do on that screen and each action can lead to different screens.


So if you don’t know where to start with your design. Start here.
Writing UI Flows down have helped me step back from implementing a solution straight away and to rather solve the problem at hand.


Next Stage ThoughtWorks! Technical Interview

Today has been awesome…to reveal how awesome it is I have to go back to Friday. Friday I was having lunch with my wife and her friend as she just got a new promotion! Then I get a phone call from ThoughtWorks who I haven’t heard in a while, that they would send me a UI problem. I received the problem in the form of a PDF, and out of respect to ThoughtWorks I won’t be posting the UI problem PDF on this post. But my solution is in the video…I am so proud that I was able to produce a solution with nothing but my own experience and other resources such as google, stackoverflow, js fiddle, js bin. It was very exhilarating being stuck to the screen this weekend and focusing on this project. Especially when I was happy enough with my solution, to zip it up and send it to ThoughWorks.