Using some standard mobile design guidelines, I set rules for minimum sizes of clickable objects and spacing between clickable objects. This would basically make things easy to ‘click’.
Standard spacing rules were set as well as colours for specific uses; icon size; button sizes and styling. This help the usability of the website by ensuring things were easy to interact with and minimising the time a user has to learn how to use the site (as the more consistent it is, the faster the user will learn how to use it). By creating such a uniform design, it also helped it look visually appealing and easy to absorb.
I also created typographical rules – creating standard sizes for title, section headings, sub titles, body text, links, form objects, etc.
I set standard colours for specific uses, using the basis brand colours that were provided.
As we were working on a very tight deadline, I needed to create the mobile UI guide as quickly as possible to enable multiple people to work on the project. As we were working parallel, we needed something to refer to, to ensure our designs were consistent. This seemed to work well and the designs were delivered on schedule.
Often exhaustive brand guidelines can be self defeating, too restrictive or no one actually reads them! In this case, the UI guide did seem to by handy due to the nature of the project and that the development would be handled by a third party. The aim will be to make the guide easily accessible and should evolve over time.
I wanted to create a simple and minimalistic look, reserving much of the colour for primary actions and imagery.