“DesignOps” is an elastic concept which can adapt to the scope and scale of an organization, but its overall purpose is improving the teamwork between designers and developers, whether they’re working within the same agency or in tandem with a client’s own staff. It is not so much a strict methodology than an agile mindset for interdisciplinary collaboration, workflows, and maximizing quality.
STRG and its clients benefit from DesignOps in that potential roadblocks are avoided; interdependencies are recognized; project costs are kept within expectations; and the overall quality of the end-user experience is made measurably better.
We talked with STRG’s Art Director, Pavel Guzenko, and Lead Developer, Ralf Traunsteiner, about how STRG practices DesignOps, what software tools enable it, and how Agile processes make it all work as efficiently as possible.
A long time ago, in a webiverse far, far away…
… a designer could draw up some graphic mockups for a website, pitch them to the client, and pass them on to the developer, who wrote the code and ironed out all the details with the client. Check! On to the next project. Often, such a design-driven “waterfall” approach worked well enough and the designer required little to no technological knowledge. As technology advanced, however, it became increasingly difficult to reconcile a designer’s intentions with what the developers determined would be feasible and affordable..
Today’s digital environment demands much more from a designer. For example, there are so many variables with responsive site design – screen size, page orientation, end-user device, mobile vs. desktop mode, browser vs. app, operating systems…. There’s no way that a few mock-up sketches can capture every possible state and dynamic output users might experience. Today’s digital-content publishers demand maximum flexibility, user-specific (yet coherent) UI and a seamless UX.
Overlapping Roles
More than ever before, the designer must be deeply involved throughout the conception and development process, in constant coordination with the backend developers, product managers and clients while working through all the iterations of a site’s component features. Likewise, developers need to get involved even before the designer drafts a mock-up, in order to assess the cost-benefits or feasibility of a component or feature.
As the traditionally separate roles of designer and developer became increasingly blurred, STRG knew that the complexity of contemporary digital design required a completely different organizational mindset. Not only did we hire designers familiar with technical development and engineers who grasp the importance of UI and UX design, but we put in place operational structures that provide the best workflows, tools and communication channels that enable everyone to work together, create better quality design, and satisfy the client’s needs and budget.
A New Way of Working Together
Once the plan is in hand, “wireframes” and “wireflows” (a skeletal blueprint conveying basic features and user interactions) for the product can be created to establish what features are desired. “We make the wireframe as simple as possible, without any beautification, almost as if sketched with a pencil or Sharpie, just showing the content areas, user inputs and outputs,” admits Guzenko. Indeed, software tools that emulate hand-drawn wireframes, such as Balsamiq, are used.
Next comes an analysis phase, where backend and frontend tasks are decoupled from the design. “We do a technical assertion of the content,” says Traunsteiner. “Do we have the technical means and datasets necessary to build it? Once we can make some rough cost estimates, the front-end design can proceed to the mock-up stage, as well as defining user-journey and UX flows.”
Collaborative Tools
Before development and implementation can begin, another review cycle takes place to ensure designers and developers are on the same page. Helpful here is using collaborative design software such as Figma or Miro, which allows the developer to recognize the design specs and analyze the assets necessary for creating the frontend. “The UI design is continuously improved during the review cycles,” Traunstein believes, “even during implementation, when issues of missing component details are solved.”
State of the art reactive-framework software, such as Vue or React implement components in Storybook, help designers and developers streamline the development-review cycles by allowing them to collaborate on separate component details and see their impact on the front-end in real time. “In the end, this improves quality a lot and prevents problems from popping up later on, especially when we work together with a client’s own developers and designers,” says Traunsteiner.
Guzenko agrees: “One of the biggest challenges designers face is how to present the dynamic nature of most content. Often, a developer will review a static design and ask me, ‘what if the headline is longer?’ or ‘what if there is no lead image to display?’ A designer can’t show every possible scenario, but the collaborative software tools we use as part of our cyclical review process allow us to test and iterate whenever such a question arises.”
Traunsteiner adds, “Storybook allows us to isolate a component and manipulate it with dummy data and placeholder images in order to inspect all the layout variations, change properties and styles on a shared screen, so that a developer and designer – as well as the client – can discuss and preview changes on the fly, and see how that component will work across multiple tenants.”
Agile Mindset for DesignOps
Tools such as Figma and Storybook streamline the DesignOps process by facilitating dialogue and managing the assets throughout the development and implementation cycles. What is even more important, however, is building a DesignOps mindset. As an Agile organization, STRG has in place the necessary operational infrastructure for DesignOps. “DesignOps is deeply integrated into our scrum/Agile workflows,” says Traunsteiner. “From concept to development until the finished product, we go through reviews and iterations in an Agile way.” These workflows can scale according to the client’s own capacities (i.e., whether it has its own designers and/or developers working on the product).
Traunsteiner cites STRG’s work with ÖGB or Salzburger Nachrichten, where “we integrate their natives into our Agile workflows so that specific roles can be defined. Whether a client wants us to take over all the heavy lifting, or assign their own staff to work on the product, we can adapt our Agile workflow structure accordingly. STRG is very much an agency, but we always work together with a customer and integrate them into the DesignOps process.”
Traunsteiner adds, “When we work together in an Agile way, going through iterations, we build it from the ground up and gradually add features, alter the scope, notice that some things are more important than others in the original plan. In the process, a client might better understand what the core values are and how to focus on what is the best UX.”
Additional Resources:
- Call STRG's CEO Jürgen, or write a mail juergen.schmidt@strg.at Mobile: +43 699 1 7777 165
