One of the key aspects of all digital projects is defining the detail of what is going to be built.
Clients often come to us with an idea: "We want to refresh our homepage and make it more interactive”. Or with a problem they need solving: "We need to increase our CRM database". We then tease out the detail of the requirements to pin down exactly what the final delivery will be. Regardless of project size, this process of definition itself can take up to 30% of the budget and overall project time, so we need to be sure that we get it right and use the time effectively. Clients need to be able to visualise what they are getting for their money, and understand all the assumptions we are making.
Through a mixture of requirements workshops with key stakeholders, user testing, and good old fashioned experience, we gather all this information and produce a specification that forms the architectural plan – a kind of blue print – of the final product. It gives clarity to what's in and what's out of scope.
Prototypes
Over the last 10 years I have used various methods to document this kind of information, and in recent years came across a prototyping tool called Axure. After joining 3Sixty I introduced Axure to the team, and the user experience designers (UXDs) have been using it ever since. Axure is specialist wireframing and prototyping software. It allows you to create line drawing layouts of proposed design solutions, building up interactive elements that can be clicked and interacted with. The end result is not pretty, it's functional.
Benefits of Axure
The biggest advantage I have found with Axure is that it takes the pain out of trying to explain in words what is being planned, by showing how the site will work as a rough, clickable version.
Not only does the prototype benefit the client by demonstrating the final solution, it also helps the project team, as it improves our internal communication. The wireframe shows the hierarchy of the information on a page, and can give guidance to the amount of content required. Multiple staff can work on the same Axure document at any one time using check-in / check-out versioning. Plus, using a system of 'masters', enables chunks of pages to be quickly reused elsewhere.
Designers use the Axure prototype as a basis for the final design, and our developers also annotate every element on the page with a detailed technical specification. It becomes their bible when progressing into the design and development phase as Axure documentation is referred to throughout the build, rather than weighty word documents that are written and left to go dusty!
Problems
There are still some issues we come up against. For example, with AJAX and HTML5 increasingly common , it can be difficult to simulate their fluid interactions in Axure. (In fact, it could end up taking longer to mimic them than it would to code the whole thing!) That’s when sketching in code is the best method, so we use a combination of both.
Detail can also be missed if you rely too heavily on the prototype. As you have to click on a series of ‘Post-it’ notes to read the annotations, if one important point is missed, then the perception of the page can be misunderstood. To help make the process slightly more linear, Axure lets you export all the specification notes into Word format which helps. But, as the prototypes are black and white line drawings there is still room for interpretation, and of course most clients want to see the pretty pictures and find it difficult to visualise the end webpage or application. We find presenting creative concepts alongside the prototypes goes some way to helping them through this process.
Finally, due to the nature of the definition phase of any project, the cost can be difficult to swallow. But getting the prototype and specification right can save enormous amounts of time when it comes to design and build. After all, you wouldn’t start building a house without planning it out with an architect first!
Best tool for the job
Overall, I think Axure is a great tool to help us clearly define and spec out the end website or application. It gives clients the opportunity to walk-through the proposed solution and feedback before a single line of code is written. There are so many benefits that make it the best tool for the job. Everyone can view the prototype in one place - online - so there’s no worry of having an out of date version. UX notes, tech spec and developer notes can also be stored in the one document, and even user testing can take place using the prototype to gauge how well the idea performs with users. Let’s just hope it keeps up with the changing front end technologies and we’ll keep using it at 3Sixty.