At the centre of a lean design process is the necessity to rapidly manifest your ideas so you can test them with your users.
Being able to do this quickly is critical to help early discovery of problems and to ensure you can iterate as often as possible throughout development.
But prototypes also need to represent the solution accurately where it matters - especially for complex interfaces - so finding a balance between easy to create and closely representing the intended experience is the aim of the game.
Tools
There's no right tool for this job, and what you choose varies depending on the technical requirements of the prototype. At the moment, most of the prototypes I create are for reasonably complex interfaces, i.e. image manipulation and other creative tools, and this influences what I use:
- Axure
Axure is great for a huge variety of really quite complex interfaces and even very good looking, slick interactions.
- React/JS/HTML/CSS
Obviously building an actual UI opens the door to using specific technologies to achieve something, such as image upload etc, but it's also much easier to achieve a responsive layout.
Examples
The following examples are some typical, highly interactive prototypes I’ve created for various experiences in the Taopix photo commerce platform.
The challenges we face when testing concepts for user journeys are that for users to behave naturally, they need to be in the right frame of mind for creating a gift of precious memories, so whilst we might start with some basic wireframes, we often build up to much more complex prototypes so we can test the big-picture concepts of the user journey.
These are often buggy, ugly, and generally sketchy interfaces; have fun :D
Picture box interface
As part of a platform-wide usability research project, we recently identified that our users were experiencing significant friction when trying to place their pictures accurately on the page of their photobook.
To resolve this, it was clear we needed to completely redesign and rebuild this part of our interface. But we've always known that cropping tools are a minefield of different user expectations, numerous different design patterns and technical complexity.
That said, it was something we could prototype relatively simply in Axure. The below prototype link is to the final version of a string of 12 iterations that included changes to the crop box behaviour, and the icons, labels and button positions that were tested through 120 individual user tests.
It's worth pointing out, that this feature was enhance further after this through more testing of the actual product; this just demonstrates the level of prototyping I would use for this kind of feature.
Screenshots from various stages of the prototype testing and product build:
Ai Photobook Builder
The Smart Design Assistant represents the first time that Ai technology was used in the Taopix platform. This meant we were flying pretty blind when it came to finding a solution for this, so creating and testing prototypes played a large part in this user-centred project.
