Saturday, April 5, 2014

Say hi to the Nansen Encore framework and the Nansen Wireframe tool.


During the Wintercamp we have been improving and developing our internal tools: Encore, and the (so far nameless) wireframe boilerplate.

Here is a short description of the two.

Encore
Nansen Encore is the name of our internal framework that we use as the starting point for every EPiServer project that we start.

Encore contains a lot of the base functionality that normally has to be developed and setup from scratch for each client and project. Encore is an important fundamental tool at Nansen since it frees up time in projects for us to focus on cutting edge development and more advanced functionality and intergrations.  It also provides a consistent, standard, and reliable base which helps us maintain the excellent quality Nansen is known for.

Wireframe boilerplate
For the last couple of months we have been building our own UX wireframing tool for development of responsive wireframes and interactive prototypes.

We have seen over the years how disjointed the user experience design process normally is:


  1. Wireframes have mostly been produced as flat and static pages.
  2. User interactions are described in static step-by-step annotations to the wireframes.
  3. Prototypes are built separate from the wireframes, and often in isolated tools or services and trashed after user testings.
  4. Front-end development begins after all wireframes are approved and tested, with little or no work being done beforehand.
  5. No single place for the client to follow project status and preview wireframes, design, and development.

The problem is that you loose quality, tactility and a real feel for the interactions in the product being designed when the four steps are separated. Simply put, it's a dysfunctional user experience design process.

To fix this we needed a tool that could facilitate all four steps of the UX design process. But, as of today, there was nothing on the market. So we sat down and built our own wireframeing tool. Its a ”brick and mortar”-tool containing all the blocks you need to rapidly create interactive wireframes in the browser: forms, menus, buttons, search functions, lists, accordions, tabs, calendars, and date pickers etc. The blocks are fully developed front-end snippets complying to web standards best practices.

With the tool we combine the four steps of the user experience into one tool. The result, for the projects where we have used it, is that we provide an improved and solid user experience design focused on UX and real interactions from day one. We end up with responsive wireframes in the form of an interactive prototype which is built upon real, usable front-end code.

Here is a very basic demo of the output of the wireframe tool.

Encore and the wireframe boilerplate post Wintercamp.
Integrating the wireframe boilerplate and Encore will give us a continous workflow.

Up until today, the two tools have been completely separate entities.  One of the main goals of the Wintercamp is to integrate them so that we can improve our internal workflow.  This will result in consistant, standardized front-end code and a much more reliable workflow for both us and our clients.