Introduction

Ness is an internal software developed by Philips that allowed designers to export components straight into a Library through a JSON file. Once exported, developers could use the Builder to create interfaces for the Tasy, a clinical interface used for the management of hospitals.

My Role

Working as a Creative Leader with the team of Eggs Design, I helped with the development and creation a new visual concept for the application. Facing a fast paced project to be presented at the Philips headquarters in Netherlands, we explored several solutions and delivered components straight from a Sketch file that were taken by their front-end developers to craft this unique interface.

BRANDING

In a short summary, the proprietary software was capable of converting design assets into usable components of the Tasy interface. After exploring with several potential names, we decided to use _ness: a sufix capable of converting several adjectives into nouns. The name would represent exactly the power and flexibility of this system.

We proceeded to experiment with several applications of the name in different colors and interface visuals that translated both fluidity and structure at the same time.

NESS LIBRARY

The Ness Library allowed users to explore the available components and their recommended usage in the Ness Builder. Using the branding ideas we generated in the initial step, we proceeded with the experimentation of an UI that could accomodate random front-page images in the background that had the same style.

Once logged in, the users would find a repository of styles and guidelines for them to build their own applications using the sibling system. The initial pages with fewer categories were displayed in an organic way. As the user digs into the content, the entire layout becomes more geometrical and cleaner in style.

NESS BUILDER

By logging into the Ness Builder, users can create applications for Tasy using the guidelines and components documented in the Ness Library. The interface showed a simple dashboard with project drafts of each user.

The Builder worked with a simple drag and drop of components displayed on the left side and a code inspector on the right for more precise adjustments. The top bar showed different device formats while the bottom part allowed zooming in and out.

When creating a new application, the user would have a live preview of how this would be displayed in Tasy with precise accuracy. The idea was to give the chance to any person of creating something customized for their needs without mobilizing a big team of designers and engineers. If the application was approved, the implementation phase was much quicker due to the automatic output of the code.

INFOGRAPHICS

Following the international release of Ness, we created an infographic to be distributed to all stakeholders with a simple mapping of the process. Steps are explained in a visual way using the same branding applied for the whole interface.

The process consisted of 10 steps:

1. Designers created components to be available for Tasy;
2. The components were exported by the designer;
3. An internal plugin automatically converts the design into code;
4. A bot would analyses the code and approves if it is HTML5 compatible;
5. If the code fails, the design is sent back to designers with a notification;
6. The new component would be ready for approval by a Ness comittee;
7. If approved, the component's usage and guidelines is documented in the Ness Library;
8. Ness Builder displays the new component ready for use in new applications;
9. A bot handles the compilation and the application is ready to use in Tasy.

© 2018 VICTOR STELMASUK.  ALL RIGHTS RESERVED.