To create greater awareness of the goal(s) of the project, both business goals and end user desires must be mapped. They can be merged when acquired to ensure optimal efficiency of the User Experience programme.
Depending on the situation, the background of the project has to be explored, simple or extended. Surveys, interviews and documentation analyses are used to map the business goals. All findings are verified afterwards.
The application is designed for the end user so his opinion can’t be underestimated. Contextual inquiry, surveys and interviews are great techniques to clarify and process end user emotions and insights.
Fictive model users will be defined based on extracted data from earlier research. The users are created out of reliable data so they are a good representation of the target audience. The personas will be used during the further development of this project.
By having a look at competitors, their strong points can be utilised and usage of weak points can be avoided. A simple but effective tool to save a lot of work.
In the second phase, the concept will be designed based on the determined business goals and gathered user requirements. By taking several steps, the user's desires and the tasks are explored further so the concept of the application becomes more concrete, one step at a time.
Through the use of diagrams, the steps users have to take to accomplish each task are displayed. It becomes clear how the system has to behave. By first developing the diagrams, the internal discussions are focussing on the actual tasks instead of side cases like look-and-feel.
User Journeys identify the entire path a user follows to reach a goal. Not only the application is included but also additional elements like physical factors and emotions are taken along. By expanding the scope, all bottlenecks and challenges can be mapped perfectly.
The goal of the ideation workshop is to generate as much ideas to solve the earlier defined bottlenecks. Various stakeholders can be involved to obtain insights from different angles. Those workshops can generate a surprising number of great suggestions.
The end user is invited to create the structure of the application. Card sorting techniques can be used to let users decide the grouping of content. The final content structure will thereafter be verified with reverse cart sorting to test if content can be found intuitively.
The concept phase will be completed with a list of functions that need to be developed. By prioritising all functions there will be a structure in the development sequence in phase three.
The tangible elements will be produced in the third phase. Every step will be supported by user tests and evaluations. Steps will be verified by the user, improved and retested.
The wireframes give a good impression of how all pages can be organised and laid out. Different screens will be elaborated for the different devices and resolutions. Wireframes can be provided with clickable sections so the user is able to navigate though the pages during the tests.
With HTML prototypes a new layer of interaction will be added. By using Twitter Bootstrap it is possible to set up a largely functioning website with relatively little time. No customised look-and-feel elements will be added so the focus will still be on the interaction during the testing.
The visual corporate identity and further design will be added in the User Interface Design phase. All pages will be prepared in Photoshop or Fireworx so the perfect balance between aesthetics, psychology and techniques can be discovered.
The HTML prototype and the User Interface Design will be merged into structured frond-end templates. HTML will be developed according to the smacss methodology. This will ensure a clean, structured and modular template model. It will be easy for (PHP) developers to use, process and edit the templates.
To guarantee a seamless transition between frond-end and back-end development, an implementation document and style guide will be delivered. The architecture of the HTML and CSS (or SASS) will be described. In addition, a style guide will be offered as a reference work so the application can be expanded without affecting the look-and-feel.