The Process

The following is a list of procedures generally used in the UX and UI planning stages,
along with the design, development and testing procedures.

#1

RESEARCH:

After establishing the overall objective from the initial brief, the project begins with research into the business, product, or service field to determine its target market's age, gender, demographic, and socio-economic background. From this I also examine what outcomes are required for the user and client, and how to ensure the best possible user experience.

#2

INFORMATION ARCHITECTURE AND WIREFRAMES:

With the information collected in the research phase, we are able to identify a hierarchy of informational importance, which enables us to develop a site map to which we can determine how best to arrange the navigational structure of the entire site. I then develop wireframes that allow us to organize the structure and nature of the content on each page. These wireframes too help us to plan out the functional elements throughout the site. The data collected during the research phase also helps us to decide on the appropriate colour scheme, font-face, imagery and over-all tone in the way the messages are presented. The tools I use first are a drawing pad and pencil, following that the chosen wireframe sketches are drawn up for the client using Adobe Illustrator.

#3

THE DESIGN:

With the architecture in place, we then begin the design concepts. This gives us an opportunity to test colour schemes, images and fonts, and how best to convey the message to the target audience using these elements. This process consists of the creation of detailed prototypes using either Sketch or Adobe Photoshop.

#4

DEVELOPMENT:

Once the design phase is complete, I begin the development phase. The tools generally used here are: HTML5, CSS3, Less, Bootstrap, Javascript, PHP, Wordpress, sublime text IDE, Grunt and MAMP.

#5

TESTING:

To ensure good SEO, and speed optimisation as well as cross-browser support, I undergo a process of testing on a number of different browsers, screens and platforms. Applications and tools used in this process included Browserstack, GTmetrix, and Google Analytics.


Lets work together

Keen to work together? Get in touch so we can have a chat about your plans and requirements


Get in touch