and sometimes other stuff
UX_Flowchart.jpg

UX/UI Design Process

UX/UI Design process

Let me describe my usual UX/UI process, what you get as a client and what is the reasoning behind it.

 
 

UX Stage (workflow)

I start with whatever resources you provide me and turn them into a clickable prototype as early as possible. The benefit is that from the very beginning you have something tangible to play with, show potential customers, investors, developers, etc. and collect feedback (and ideally do some sales and secure investment).

Your resources may include:

– hand-drawn sketches
– screenshots from existing apps
– mockups made in PowerPoint or any other tool
– just text description that I turn into screens

Gradually, I will turn all the inputs into a black & white clickable prototype, focusing mainly on the overall workflow of the app. The ULTIMATE goal of this stage is to make a prototype that is naturally simple to use without any help.

 

See a sample prototype on the right – it contains black & white screen mockups, hand-drawn mockups (under Shows) and screenshots from existing app (under Taxi). It's a functional clickable prototype that you can open on your device too – scan this QR code:

 
 

UI Stage (visual)

Once the UX prototype is ready and polished, we can move to UI/Visual stage. This is where we put the black & white wireframes into a thing of beauty. This is where all the great colors, icons, photographs and typefaces come to play, creating something that is clean, pleasing for the eye, but at the same time does not stand in the way of the main purpose of the app.

In this stage, we can also create all the tiny animations that make the app more lively and natural. Again, the whole thing takes a form of fully functional static prototype ('static' meaning there's just dummy data), that you can again share with clients, investors, developers and other stakeholders.

The purpose is to evaluate the whole app before you splash a looooot of cash on actual development – this is a crucial phase that can save you a lot of money and headache.

 

See an example prototype on the right. Again, it is something you can open on your device, and you can send the link to anybody you want. Scan the QR code below:

qrcode.png