Killing the page – Part 3/3: the new digital toolbox
Based on the experiences we have had in past projects, we realised the need for a new digital toolbox, and started outlining it.
The problem was not that different tools didn’t exist; but that we had used too many seperate products and services. The problem was that they were separated.
To fix this we needed a tool that could facilitate all steps of the UX design process described in our previous article Killing the page – Part 2/3: the broken analog toolbox. After researching a different tools and frameworks we realised that there was nothing on the market as of today that could do that.
So we sat down and built what has become Nansen Blueprint. It is a ‘bricks and mortar-tool’ containing all parts of the user experience design process: interactive wireframes, annotations, prototyping, semantic and correct markup, css and javascript, all in the browser out of the box.
Nansen Blueprint in more detail
The blocks
Inspired by a bunch of other services and frameworks, we have created a library comprising all the blocks you need to rapidly create interactive wireframes in the browser; forms, menus, buttons, search functions, lists, accordions, tabs, calendars, date pickers, and so on.
The blocks are fully developed front-end snippets of html, css, and javascript that complies with web standards and best practices.
The blocks are used to create larger components or views/pages which function as wireframes.
The information architecture
To be able to create more complete prototypes we also built a information architecture feature (i.e. a sitemap) where we and/or the client can add and remove pages. The wireframes are glued together into a prototype by the information architecture feature where we add the full information hierarchy for the project. This makes every page in the sitemap clickable so that the client can get a better understanding of what content is needed on the page and how all interactions work.
Nansen Blueprint in the wild
The result for the projects involved is that we provide a much better user experience design focused on UX and real interactions from day one in a project, since we get responsive wireframes out of the box, in the form of an interactive prototype built upon real front-end code.
Another positive outcome of using Nansen Blueprint is that we always start discussions with the client by viewing the sitemap. This makes the client much more focused on the content instead of pages.
So by building Nansen Blueprint, we have taken a small but very important step to switching our own and the client’s focus from pages and design to content and functionality.
Read more from Nansen on our Blog
Andreas Carlsson
