How GreenHouse by ICS Benefits User Experience Designers

User Experience (UX) designers work on a wide variety of projects, ranging from web and mobile apps to desktop and embedded devices to name a few. No matter the application, there is a common thread of persistent obstacles that designers on integrated teams encounter most — if not all — of the time. 

As the team gains knowledge through research and user testing, designers come up with new ideas. But at some point, innovation starts to bump against the constraints of budget and scope. 

In addition, there are delicate transfer points between the UX, design and engineering that have to be well-handled and documented, and one set of control artifacts (e.g. information architecture, wireframe or prototype) often gets replaced by another. Maintenance of previous control artifacts is tedious so it often falls by the wayside, mucking up definition and allowing for misinterpretation and mistakes. 

For those reasons, UX designers need workable solutions to avoid the potential for:

• Miscommunication between the design team and the software development team during hand-off, which can set a project back days or weeks.

• UX deliverables that are not updated downstream and disposable prototypes that lose relevance in the iterative design process because the code isn’t reusable.

• Expending resources less than optimally because designers have no way of knowing whether their ideas can be implemented within the client’s budget until it is too far into the product development timeline.

Our own pain in constantly navigating these obstacles has driven us to devise a solution that allows UX designers to focus even more closely on user needs while still accommodating business goals. GreenHouse by ICS, a rapid-development solution for embedded touch devices, bulldozes obstacles to project success and allows UX designers to have a greater influence throughout the life of a project. 

About GreenHouse

UX designers create using their usual workflow and then feed it directly into GreenHouse, which in turn generates the application structure that implements the UX. Through the use of a rules engine, environmental or user input can cause actions to be taken. With each development sprint the functional prototype evolves — meaning the code stays current with the design — until the whole application comes into existence. 

That means no more disposable prototypes. This is significant because GreenHouse allows you to avoid the “blind period” — the portion of the development lifecycle when the prototype is no longer relevant yet a demonstration version to use to gather market input and conduct user testing is not available — that is a hallmark of traditional product development processes. 

GreenHouse helps create the prototype, which actually becomes the real product though continual refinement. 

GreenHouse provides full project transparency so all stakeholders can see exactly what is being built. There’s no risk that the design effort gets in front of the engineering effort — no need to worry that the designers will create something that can’t be built — because the UX and the UI are the same development effort. There is not a separate set of UX deliverables that get tossed  along the way. 

Benefits to Designers

GreenHouse affords designers a number of additional benefits, including greater control over designs and the opportunity to integrate more deeply into other phases of the project. Additional benefits include:

• Closer collaboration with developers

• Ability to select from an ever-growing library of UX interactions as code-ready components. (Using reusable code accelerates creation of prototypes.)

• Easy access to documentation that evolves organically with the design and development environment

• More integrated QA processes and stronger support for usability testing and validation

Using GreenHouse means the UX designs are automatically converted into code. It is the  designer who is driving and QA-ing this work as it happens. There is little if anything lost in translation between designer and developer because, in fact, there's less translation. The process is automated.

"By using GreenHouse you don't lose control over your design when it travels downstream into engineering,” explained Boris Savic, Associate Director of User Experience at Boston UX. “GreenHouse affords a more active and dynamic collaboration with engineering throughout the life of the project, in design and especially in development, which leads to tighter QA and ultimately a better product.” 

“It also provides for greater repeatability and reusable code for prototypes, which allows me to focus on communicating ideas,” Savic said. “UX is an iterative process, and many of our best ideas come at a point when in a traditional environment it would be too late to integrate them. GreenHouse extends our ability to keep doing that without putting undue pressure on the engineers or creating overages.” 

How GreenHouse Works

Designers use Axure for wireframes and prototypes, and Figma for designs and design components, and then use GreenHouse’s Bridge tool to directly import the Figma designs. (Since Figma can import from Photoshop, Sketch and other tools, the GreenHouse Bridge effectively spans the most popular design tools.) 

Once the design is imported, the UX designer (or, in some cases the software engineer) can use GreenHouse Architect to fine tune the design for the chosen platform, for instance tweaking color or fonts, as well as use GreenHouse’s rules engine to determine the flow of the application. At this point, GreenHouse generates the application’s framework. 

With GreenHouse, there’s no opportunity for confusion or miscommunication between designer and developer. There’s no blind spot — the point in traditional development when the UX lead and product owner know what’s been designed but have no clue on what’s actually been built. (Read more about the perils of the blind spot in Want a Competitive Advantage? Focus on UX and Software.

The functional prototype GreenHouse creates is perfectly suited for usability testing and stakeholder buy-in.

The Takeaway

GreenHouse empowers designers by streamlining the process with and strengthening communication between UX and engineering — both essential to the success of any development project. For more about GreenHouse, download our on-demand webinar Rapid Development for Embedded Touch Devices.