Based on insights, or as a natural progression from conceptual stage, we create low-medium fidelity prototypes to depict end-to-end user journeys. Alternatively, we use visual comps to create an interactive prototype for both usability and brand proposition testing. As a project moves into the full design we develop the Information Architecture (IA) and taxonomy. Listed below are the methodologies that support prototype creation and Information Architecture development.
A wireframe is a flat illustration of the layout of a page of an app or website. It shows what goes on the page and where and can also be used to show the global and secondary navigation, labelling and structure.
Wireframes are a valuable tool when designing websites and apps because they are relatively quick and easy to create and change following review.
They allow us to set out how the pages of an app or website will be set out at various breakpoints with notes describing behaviour or interaction. We use them to gain agreement from our clients about design before moving to the prototyping stage. It is much cheaper and quicker to adjust wireframes than more complex designs later in the process.
What we include in a Wireframe
We always need to consider the needs of the project when creating wireframes. It may be sufficient to create them freehand using pen and paper or we may be asked to use one of the various wireframing software. Whether created by hand or in software the wireframe will include the same core components as follows:
- The layout of all page components
- The interactive elements
- Images and copy
- Titles and headings
- Navigation and search boxes
We have a choice between developing low, medium or high fidelity prototypes and that choice really depends on how they will be used and with whom. Some people find it quite difficult to understand lo-fi wireframes because there is no branding, the copy is placeholder lorum ipsum and the sections are just lines drawn on the page. Increasing the fidelity can provide more clarity and is very useful if user testing is the be undertaken.
Determining the Design
Our User Experience Designer (UXD) will work with you to understand what content items need to appear on the page. They will also wish to understand the page goals for each of the pages to be wireframed and to understand these by platform – if we are designing a website that is responsive or will have a mobile versions. Page goals help the UXD to prioritise the content layout and on the smaller screen formats the content hierarchy.
This is a collaborative process and we will normally carry out this activity on site working alongside you and your team. At the very least we will need a detailed briefing session with you and then access to you on a regular process through the design process to check and iterate the wireframes as we go.
The wireframes will be delivered in whatever format has been previously agreed. An example low-fidelity wireframe is shown below and this is the type of detail that could be expected for every page. Not every page will be wireframed as there is no value in wireframing pages with the same, or very similar, layouts. So, the deliverables will consist of the key pages on all platforms.
Example of a low-fidelity wireframe
Interactive prototypes will illustrate not only the layout of the page but also the planned interaction. With modern prototyping software a high level of fidelity is possible and prototypes can look and feel like a fully built version of the website or app
The Design Process
We follow a standard user experience design methodology to create prototypes and so would expect that many, if not all the stages in the user centred design process up to this one have already been completed.
That means our prototypes are being developed from:
- A clear understanding of the user requirements concerning the proposition
- Validation of the proposition with both users and stakeholders
- Well-developed personas representing the key audience segments
- Use cases and workflows
- User journeys
With these items in place we can develop the design prototypes and require limited time with you and your team to get up and running.
To Facilitate user research, prototypes are created based on plausible scenarios inclusive of interactions that support user goals.
We use a 25:50:20:5 approach to prototype development.
The first step is to create about 25% of the prototype and then get feedback from the client to ensure we are heading the right direction. We then continue to develop until we have about 75% of the design work complete and then complete a further review. After this we take the prototype to full finished version and allow a further 5% of the time for tweaks and changes.
We are also experienced working with and as part of agile (or lean UX) teams and providing the UXD resource (as well as the research resource).
Our senior UX Designers are familiar with a range of prototyping software including popular products such as Axure RP, Invision, Omnigraffle, Sketch and many more – even HTML. Our clients find it easier if we develop prototypes in software that they already use and we are happy to do this.
Many of these software’s will enable us to prototype for multiple platforms quickly and efficiently as they have features that will resize for mobile screen sizes. They also have sharing facilities making it easy to share the deliverables with the client as they are developed and at the end of the design process.
Desk research is carried to provide an independent review of the user journeys to ensure they contain sufficient information to facilitate the creation of prototypes. The research is also used to prioritise the journeys for development and prototype testing.
This is a valuable step, whether we are to be engaged to build the prototypes or the client team wants to build them in house. We complete a detailed review of all the user journeys and provide an independent analysis of:
- The holistic user journey
- The touch points and channels and sense check the inputs and outputs
- The workflow and process steps with particular reference to alternative journeys
We identify areas of improvements in the journeys and micro-interactions during and between key steps in user the journey.
We also evaluate what aspects of the user journeys will benefit the most from user testing and the detail required to support the test sessions. In this way we can help to prioritise the prototyping activity required and avoid test sessions that are ineffective. This can be as a result of missing steps in the process, key interactions not built that are crucial for other processes or assumptions made about what a user will do.
We draw on our vast experience of prototype usability testing to provide direction and guidance that saves the client team, or our own team, time and money.
Evaluating Prototypes with User Research and Usability Testing
A key component of user centred design is the evaluation of prototypes with real users, recruited from the target demographic. There are a variety of methods and approaches that can be used depending on the specific goals of the project, the stage of development and complexity.
There is a very strong business case for carrying out usability testing to evaluate prototypes as they are being developed. The cost of change is small and the number of design alternatives is high and so prototype user research forms a key part of the development process.
Attributes of User Research
There are many different ways of delivering user testing and all contain the following fundamental attributes:
- They involve users being asked to attempt tasks similar to those they would attempt in the real world
- The users are in some way representative of the client’s target audience
- The users interact with the prototype as naturally as possible and provide feedback, generally by using a think aloud protocol
- The observations are analysed and recommendations made to iterate the prototype.
With these core elements in mind what separates the different methods are:
- Where the research takes place
- With how many users
- What is the subject of the research
- What data we want to capture
A standard usability evaluation involves 5 to 12 participants recruited against the target customer profiles attending one-to-one sessions (sometimes known as “depths”) that last between 45 and 60 minutes. Participants will spend this time with a user experience researcher (not UX designer) who will moderate the session, that in the majority of cases, they have previously prepared.
At the prototype and design stages this type of web usability testing is typically known as formative usability testing.
Carrying out the Testing
The preparation for prototype usability testing will involve the creation of the discussion guide and tasks, in communication with the client, and also the technology set up.
In most cases prototypes can be displayed on the platform they are designed for and so prototype testing can take place on a smartphone (Android, iOS or other) as well as tablet and desktop. But there are occasions when this isn’t possible and all testing takes place on a desktop screen and this can still deliver valuable results.
The session structure typically follows the same model:
- Initial interview questions to put the participant at ease
- Tasks or scenarios to facilitate the participants interaction with the user journeys and key features of the prototype
- Closing interview to reflect on the experience and answer follow up questions.
The location of the prototype user testing can be a research facility with viewing, a meeting room, or even people’s homes. In all these cases the moderator is face to face with the participant which can be different in the other methods described below.
Recording the Findings
The sessions will be recorded using picture in picture software that captures the device screen as well as the participants facial expressions. We provide session videos free of charge and upload them to a shared folder – see the example below:
Outputs from the Research
The outputs from prototype user research can include any of the following depending on the agreed scope of the project or requirement:
- A verbal debrief at the end of the testing day
- A high level summary of findings
- A detailed report with observations and recommendations
- Updates to the prototypes themselves
Remote usability testing follows the same format as a usability evaluation with the only difference being that the moderator and participant are in different locations – hence the remote element. This method works best when the prototypes are presented on a desktop or laptop screen so that the moderator is able to see the prototype and the participants’ facial expressions.
We have found it best to use Skype for remote user research because participants are most familiar with this technology. At times when we have been asked to use the client’s Webex system to save money, or so they can view the sessions, we have often lost lots of time, and some participants, simply due to technology and connection issues.
In almost every other aspect the projects run the same whether remote or face to face. The only other slight difference is that video of the sessions is taken from the screen sharing software or captured in lower definition from the moderators laptop.
Comparative prototype testing is carried out when there is more than one prototype design alternative to be evaluated. This happens when the design team comes up with more than one solution to a particular use case or requirement. User testing is one of the ways to determine which approach should be selected.
To make sure that the evaluation of multiple prototypes is unbiased we use a method called counterbalancing. Rather than have each user interact with the prototypes in the same order, i.e. prototype ‘a’, prototype ‘b’, then ‘c’ and so on, we alternate the order so that every prototype is interactive with the same number of times and in the same order.
The following is a real test protocol from a project where there were three prototype versions (two only on smartphone) and on three platforms:
Test Protocol Example
This type of testing relies on the moderator being well organised and making good notes and it can be very useful to have a note taker in addition to the moderator to keep track of the versions and order
Benchmarking evaluations are when we are evaluating a prototype against live alternatives. Projects we have run have included the live site only or live site plus competitors. The purpose is always to evaluate whether the developing prototype addresses any perceived shortfalls in the live site, or is as good as competitors.
Carrying out the Evaluation
The test set up is very simple as the tasks and scenarios to be used are identical for both prototype and live. We will use a counter balancing approach to make sure that any bias is removed and the live and prototype versions are seen first and second an equal number of times.
The participant will interact with each, one after another, attempting the same task and providing verbal feedback plus observed behaviours.
The criteria against which the comparison is carried out need to be well thought through and the tasks and test protocol planned accordingly. Participants can’t always make the leap from prototype to live and so their feedback can be based on an unfair judgment.
If we have prepared well, we can ignore that and focus on the key areas such as;
- User Journey
- Function of features
These will be the basis for the benchmark and the scoring / reporting format we have agreed with you.
This type of research involve prototypes being evaluated using online task based software such as UserZoom and Loop11. These act a little like a survey but present the respondent with a task and a website or app to complete it on.
We provide both single and multi-country studies to an audience on desktop/laptop and mobile devices.
The Benefits & Drawbacks
The main benefits of this approach are:
- Large sample size – we can run the research with 100’s of respondents which gives a great deal of confidence about the design direction and performance of the prototypes
- We can reach people in a wide geographic area, including countries and languages. For some prototypes this is very important as they are being developed for more than one market.
- We can ask questions around the tasks and due to the large sample size we can rely on the insight because it [may be] statistically relevant.
There are draw-backs as once the study is set up and running, it can’t be changed as there is no moderator. For this reason we often use a qualitative usability evaluation method first, to test the prototype in one region or with a few people, and then use this as the basis to build the online study.
Carrying out the Research
Our methodology sets out the overall structure of the study, the key tasks, plus a set of questions that you can add to elicit responses from a representative sample of users/customers.
The research is carried out with a large sample of respondents, typically between 200 and 1,000 and we can use a third party panel or your own customer panel if you have one. Participants are recruited to match your chosen audience demographic if we recruit them from a panel.
Each respondent is invited to the study and asked a series of questions and then attempts tasks delivered to them via an online interface and responding to questions about their experience. Our methodology ensures a consistent and highly repeatable approach to the study and provides real benchmark data if that is required.
We also ensure that the reporting format clearly identifies the key issues you need to address and provides the analysis and recommendations that deliver the most value.
Rapid Iterative Testing
Prototyping functional components allows usability testing to move at the same pace as development sprint cycles. Once through a round of research, updated prototypes are tested with users iteratively. Set out below is the methodology that supports rapid iterative testing.
Rapid iterative prototyping employs the techniques discussed above to create interactive representations of a product or service, often known as a minimum viable product (MVP) and then utilises phases of user research followed by design iteration to produce a robust, customer centric design, ready for development.
There are three stages to the rapid iterative design process that we provide and these are Design > Build > Test.
Prior to these the proposition will have been developed to the point where there is a tangible opportunity for design. The service we provide moves organisations from the developed concept to build stage by delivering a robust and fully evaluated high fidelity prototype.
The Design > Build > Test Cycle
The rapid iterative design process is fairly straight forward and is exactly as described.
– Design – We develop the design from the proposition
– Build – We turn the design into a prototype
– Test – We test the prototype with the users
This sequence is run over and over again until we have a fully working prototype of the proposition, product or service ready for build.
Again, our assumption is that the personas exist, that the proposition has been somewhat validated and that this is about execution. A typical cycle will take between 3 to 5 days and with each cycle the prototype fidelity tends to increase. To start with we may be testing very rough mock-ups and by the end be prototyping in Axure and have added look and feel, some copy and more.
With fast cycle times we tend not to be user testing in a research facility and will often start with guerrilla testing in a café – assuming the proposition fits this type of audience. During the later cycles, we test in a meeting room with recruited participants and organise these weeks in advance and build toward these sessions.
We are able to stream the video from these sessions to the rest of the team and so all user research will be followed by a brainstorming session and action plan for the prototype iteration.
Documenting the Research
Although lean and agile UX calls for limited documentation we do keep records of the design decisions we have taken, the outcomes of the research and issues with the build. This documentation is at a high level but allows us to deliver the developed prototype to the client together with the evidence of how we arrived where we did. This documentation also allows us to provide incremental updates to the client as we go forward.
Agile Development Team
When we provide rapid iterative prototyping services we are typically doing so as a stand-alone project team. That means we are taking the brief from you and giving you back developed designs. After discussing the brief with you we will be able to provide you with a scope of work that is reasonably fixed.
If you would prefer us to work on a time and materials basis as part of your team we are happy to discuss this approach also.