When developers create networked digital products with rich functionality these networks often come with an inherent complexity that can either dampen their usefulness for the user. It is the role of design to look beyond the complexity and release the full power of the network for each user.
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.
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.”
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.”
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.
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.
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.
