Use UI Mockup to drive the UI development

Using the UI mockup to drive the UI development is a very nice thing to do.

A UI mockup tool, like invision, provides many benefits to the UI development:

https://www.invisionapp.com

1. Requirement Validation

The assumption here is that building the mockup is much easier,  less costly, and can be done rapidly.  if these are true, to acquire the feedback from users, it will be a great tool.

2. Avoid Developer's Confusions

At the UI design phase, the participation from developers may not be necessary.  The product manager and UX designer should have enough iterations to go over this before the mockup is shared with the developer.

3. Accumulate the UI design knowledge over projects

For a company, using the same UI designer across different projects can actually help ensuring the consistency across different products.


Here are some of lessons learned:

1. Train the UX designer the UI framework capabilities and constraints 

Depending on the UI framework is being used, what design choices are available may be different.

The UX designer should have the knowledge about what it can do and select the best component to be used in addressing a specific UX requirement.

2. Complete the UI mockup as much as you can before starting UI development

Coordination and reflecting the UI design change in the actual UI and the mock up become very difficult after you start developing the UI.  There become two sources of truth.  You do not know if the actual under developing UI is outdated or the UI mockup is outdated when there is a different between them.

Some work can of course be started earlier than the UI mockup is finalized.  For example, preparing the backend data service, API, data model, validation, etc.

3. Provide the enough details

If we want to ensure that the UI development follows the UI design, the details need to be provided.
It causes the confusion in development for the incomplete pieces.

4. Find a mockup tool that can make the UI design reused in development

For example invision allows us to examine the color codes and download the icons and images.   It eases a lot of communications between the UX designer and the UI developer.