arrow-forward arrow-back hamburger facebook linkedin medium twitter modal-dismiss caret menu cross telephone map-marker
Skip to main content

Blog

CloudGenix: A New Model for Delivering Design to Developers

Just one year ago, we published a blog post on the coming demise of paper-based design deliverables. At the core of this “quiet revolution” is the idea that, with UX now so integral to the success of digital products and services, the practices and tools used by code developers should also be applied to design. In other words, instead of delivering a thick PDF detailing design specs that information should come to clients as either a prototype or a fully realized front-end that brings the UX to life.

Today the implications of this revolution, which is not so quiet anymore, are in full swing at DesignMap. A host of trends, including new tools that speed front-end development and client teams using agile development methods, allow us to work check by jowl with product development teams both in the real world and in virtual space. Today, we not only translate user needs to product specifications but we also bridge the design world with product development.

Building Out a Front-End

This changing role of design is now pervasive enough that clients have taken note. CloudGenix, a cutting-edge networking start-up founded by Cisco veterans, is on a mission to transform traditional IT networking infrastructure from a rigid, expensive, extremely complex and hardware-based domain into a radically simplified, flexible, cost-effective, software-defined service. They came to us looking for a partner who would help create a product design that would embody that mission. They wanted a UX that network managers would find instantly intuitive and pleasing to use.

CG_Tag

The company wanted to transform how networks are built. Instead of asking users to create networks using arcane protocols and mechanisms, CloudGenix had the radical idea that users should only have to specify application behaviors. They hired DesignMap to contribute the UX creativity and expertise that truly disruptive applications require. “We are networking experts and networking people is who we know,” explains vice president of engineering Venkataraman Anand. “We wouldn’t have been able to get the out-of-the box thinking we wanted if we had tried to hire designers internally. We felt strongly from the very beginning that cross-domain design expertise would be critical to success.”

Thinking outside tables. Throughout the project, we stayed away from tables—the traditional method of interacting with infrastructure functionality. We used a pyramid image to visualize network bandwidth segmentation, making it easier for network managers to see how much bandwidth is devoted to which level of traffic.
Thinking outside tables. Throughout the project, we stayed away from tables—the traditional method of interacting with infrastructure functionality. We used a pyramid image to visualize network bandwidth segmentation, making it easier for network managers to see how much bandwidth is devoted to which level of traffic.

As with many of our client engagements, we devoted the first few months of the project to defining and refining CloudGenix features, flow and functionality through persona and storyboard development.

“As we worked, it became clear that this product was not going to be just tables of data and standard interactions,” explains designer Michael Aurelio. “We were moving in the direction of a lot of rich customer interactions and it would be more efficient and better for the overall quality to have development and design working side-by-side.”

More thinking outside the table. DesignMap’s translation of table-based data into an interface that literally ‘maps’ the networks’ design and function.
More thinking outside the table. DesignMap’s translation of table-based data into an interface that literally ‘maps’ the networks’ design and function.

If Product Development Was a Sandwich…

Since the CloudGenix project included both the UX and product’s front end we put together a special team. We had the designers and the experience building prototypes but we needed some bodies with deep and proficient HTML, CSS and JavaScript skills to build out the design. In the absence of an industry term for this role we came up with our own job title: visual developer.

“If you think of the process as a sandwich, designers are one piece of bread, programmers are the other and the visual developers are in the middle,” says DesignMap partner Nathan Kendrick.

The new role of visual development. This project timeline shows how the roles of UX design, visual design and visual development interact. With the implementation of visual development (green), time spent on visual design (blue) was significantly reduced. In some cases, UX design (red) was immediately added to the app through visual development (green) without requiring any separate visual design (blue).
The new role of visual development. This project timeline shows how the roles of UX design, visual design and visual development interact. With the implementation of visual development (green), time spent on visual design (blue) was significantly reduced. In some cases, UX design (red) was immediately added to the app through visual development (green) without requiring any separate visual design (blue).

To fill in the sandwich middle we hired our visual designers, or experts in translating design specs into code for cloud-based application front-ends. We worked side-by-side with this team to tweak the implementation of the UX we designed.

Tweaking pixels and propagating change throughout the app. An example of what our designers and visual developers would see as they stood side by side tweaking pixels in the browser together. After recording the final thoughts, locations, object sizes and more for a UX element, the visual developer would implement the exact specs into code, which then propagated throughout the application’s front end.
Tweaking pixels and propagating change throughout the app. An example of what our designers and visual developers would see as they stood side by side tweaking pixels in the browser together. After recording the final thoughts, locations, object sizes and more for a UX element, the visual developer would implement the exact specs into code, which then propagated throughout the application’s front end.

With the team in place, we started by putting tools and infrastructure in place to ensure a smooth process working with this new model. DesignMap had to be in constant communication with the CloudGenix’s development team, so we set up a Slack channel devoted to messaging between DesignMap and CloudGenix. We handled project management with Trello and Basecamp, as well as that old standard email. We conducted “daily synch-ups” via WebEx with the entire team and every four months held day-long, in-person sessions for idea exchange.

Using apps to support app development. Our Slack channel provided a direct line of communication so that DesignMap and CloudGenix could be in communication when they needed to. In this conversation, Anand from CloudGenix and DesignMap’s visual developer discuss a UX component and the code repository where Anand can see the component in action.
Using apps to support app development. Our Slack channel provided a direct line of communication so that DesignMap and CloudGenix could be in communication when they needed to. In this conversation, Anand from CloudGenix and DesignMap’s visual developer discuss a UX component and the code repository where Anand can see the component in action.

With the team in place, we started by putting tools and infrastructure in place to ensure a smooth process working with this new model. DesignMap had to be in constant communication with the CloudGenix’s development team, so we set up a Slack channel devoted to messaging between DesignMap and CloudGenix. We handled project management with Trello and Basecamp, as well as that old standard email. We conducted “daily synch-ups” via WebEx with the entire team and every four months held day-long, in-person sessions for idea exchange.

Code Repository as a Collaborative Tool

Another critical element to keep the project on track was using a code repository to make the front-end code available to the development team while keeping it independent from the main production environment. With this setup, DesignMap was able to work on the design and front-end at its own pace, while development proceeded on a different timeline.

“We had section on the CloudGenix repository,” explained DesignMap front-end developer Morgan Lester. “This system was a key collaborative tool for us.”

In addition to serving as a home for our front-end code, we also were able to use the set up to log visual development bugs. When CloudGenix hooked their code into the front-end the design would frequently break in a few places. With notes on those bugs available to us we could easily circle back and fix them.

High-Quality Delivered

With DesignMap responsible for both the design and development of the front-end, CloudGenix was freed up to focus their expertise on the product’s core networking technology.

“The technology for the front-end was so new to us that working with a partner like DesignMap who can rapidly iterate was key,” says Anand. “The implementation model they provided and the cross-domain knowledge they brought to bear was crucial.”

The end result is a product that embodies quality in all its layers. With the addition of visual developers to handle translation between design and product code, we were able to spend more time on design and stretch our creativity even further. The front-end was created by programmers whose role was to implement the design in a way that would work with the code generated by CloudGenix. Their input informed both what we could do design-wise as well as how the developers could implement their code without compromising the design.

“This project bridged gaps between the user and the product through design and between design and implementation through this new model for product development,” concludes Aurelio.

Design Director

Mike Aurelio

Contact icon

Let's talk about your needs and how we can help. Get in touch

Contact icon

Interested in joining the DesignMap team? Let us know