NML’S DESIGN PROCESS
During the UX Design phase of development, we spend time understanding how users will interact with the app and identify the common functions they will want to perform.
We begin by mapping out the information architecture and user journeys within the app context. What is the first screen that they are presented with? Does this screen contain the information that they will need to see? If there are common tasks that typically happen in series, we look at how best these can be presented to the user. We plan where information needs to be and how that information will be accessed.
Once these tasks and journeys are mapped out, we look at each one individually and go through a process of interaction design to best optimise each one. At this stage we identify common tasks and functions that can be abstracted in the overall design and development to form reusable components. This not only saves on time during development, but also provides a more consistent experience to the end user.
Based on the user journeys and interactions, we then build out a series of wireframes for each of the required screens. The wireframes provide a full functional specification of the elements and their interfaces for each screen or page. Each element is described in detail – when it is displayed, how it functions and what effect it has. Based on the results from the Usability Study (see next paragraph) the wireframes will be revised for final sign-off and development.
An important part of the design process is to get input and feedback from potential users of the system. This is not a dipstick approach, but rather a systematic process that is designed to provide valuable and useful feedback that can be implemented into the final design and interface.
To do this we will first start by building a set of scenarios and then developing the actual usability test. This is a combination of set tasks for the user to complete, as well as some discussion points. The aim is not to get opinion on the system, but rather to test and observe. A test group is arranged and each person is taken through the test individually. This first iteration of the test uses the wireframes as the test platform. The feedback is then provided, along with a set of recommendations, based on the test responses and best usability practices. Any immediate problems or issues can be rectified and addressed before actual development begins. The feedback and recommendations are implemented into the copy and wireframe deck and provided for final sign-off.
A second set of usability tests are usually done once a functional prototype of the application is available for testing. Ideally the following testing and data sources are fed into the User Experience design:
Errors, issues, assists, completion rates, time spent per task, satisfaction scores Field Testing Sources used, environment, context Customer Support Top problems, number of incidents Usage Tracking Completion rates, entry points, exit points, elements utilised, data entered
Once the user feedback has been integrated into the functional wireframes and final sign-off has been given, we can begin designing what the app screens will actually look like. Here, the style, tone and texture of the brand will need to be integrated with the user interactions to provide a seamless experience.
The first step in the design process is to build an overall design template for the site. This incorporates the look and feel, as well as master page structure for all of the internal pages of the site. Colour usage, fonts and navigation will all be detailed within this master page layout.
During the wireframe process we will identify the reusable components within the site. These are elements such as icons, buttons, form elements and navigation bars. All of these are then designed individually so that they remain consistent across all of the internal screens.
Once these have been built we can then build each individual page by styling and laying out the required content. For each page a mockup will be provided that contains all of the different states for the controls and elements within the page.