My Process

UI / UX / Wireframing / Prototyping / Motion / Data Visualisation

Some Thoughts
People are busy & impatient
If we neglect to consider this we end up with a product that expects too much of the user and fails. We’re a little lazy, we expect technology to work for us … and why not. Products that acknowledge this win.

UX is not just digital
While it is digital products that I design, the products usually facilitate real-world processes. Pull back, think of the human in the equation and consider why they should be bothered to engage your interface in the first place.

Minimum Loveable Product
Often I'm tasked with designing an MVP (Minimum Viable Product), but where's the magic there? Reduce your initial feature set, absolutely, channel the effort into items that will make people identify with your dream, your vision, the reason you're doing this. 
Process
Two eyes, two ears, one mouth
Before you start creating you need to absorb, listen and understand.  Initially I like to get a handle on all project elements, their scale, complexity and importance. I then separate out each element and explore it in isolation, it gives each element a chance to breathe, to stretch its legs. Later you can start assembling the entire system, once  you have an appreciation for each component.

Wireframes
Sometimes it can be difficult to completely disconnect content from aestehtic but I find that’s ok, as long as you don’t get precious. Wireframes are disposable and you should never be afraid of creating a bad one. 90% of your iterations may not be solutions, but without them you will never resolve the product.

Prototype
Thanfully prototyping tools have finally come of age. Seeing your app prototype on a device undeniably helps you mature a product much faster. It also really helps the client get on board early to help iron out the kinks. My only reservation is that sometimes they look so polished that they can create unrealistic expecations, i.e. if you expect a prototype to mimic full product functionality, it will seem pretty crappy.

High Fidelity Mockup
Once the fundamentals are grasped it’s time to tame the wireframes and create harmony. Reduce the visual heirarchy, simplify, align, apply rhythm and elegance to your designs.

Interaction Design
Let’s not neglect interaction on a more granular level, not just from page to page. From a practical point of view, many complexities can be hidden behind micro-interactions only to be revealed when needed. On a soulful level, touch and feel can evoke emotion and let us bond with a product. Wierd huh? Don’t deny that warm fuzzy feeling.

Hand-off & Development
The design process is never truly complete before development begins, more-so with products that are pushing boundaries. I usually consult the developers right from the start of the design process and ensure I hand over dev-friendly designs. I make sure to hang around and assist with implementation, often technical headaches can be remedied with a simple design tweak.
Tools
Tools for designers have finally moved beyond Adobe. Many are still in flux so I tend to reevaluate my tools and workflow every few months.

Sketch has become my go-to layout tool and is now pretty much  industry standard. It’s great for wireframing, iterating and high-fidelity work. It allows you to manages large projects quite elegantly and handing off for development is now a breeze.

InVision, a prototyping tool, I could not do without. Dealing with iterations over the course of a project has the potential to become unwieldy, but I find InVision great for creating a live version of the product for all stakeholders. It also provides some great collaboration tools to quickly massage the designs through to completion.

Flinto and Framer I use when I need to animate interactions or create a richer prototype.

Adobe After Effects I use to create motion graphics for product demos and explainers videos.

Adobe Illustrator is still king for icon and illustrations

Adobe Photoshop for image preparation
Code
While I don’t sell myself as a developer I’ve been writing code since I was a kid. I’d consider myself quite profficient with Javascript, HTML, CSS (SASS & LESS), Objective C and Swift.

I’ve built and deployed numerous apps from scratch for iOS and using MeteorJS.

I believe being able to code has given me a unique perspective as a designer. I have realistic expectations of technology yet I’m always excited by its potential. The design-to-dev process is never clear cut, so I always aim to establish a good raport with developers and help design creative solutions to technical issues.
Back to Top