„DesignOps“ is a flexible concept that can adapt to the scope and size of a company, but its primary objective is to improve teamwork between designers and developers, regardless of whether they work within the same agency or in tandem with a client’s staff. It is less a strict methodology than an agile mindset for interdisciplinary collaboration, workflows and maximizing quality.STRG and its clients benefit from DesignOps by avoiding potential obstacles, identifying dependencies, keeping project costs within expectations and measurably improving the overall quality of the end-user experience.
Together with STRG’s Art Director, Pavel Guzenko, and Lead Developer, Ralf Traunsteiner, we discuss how STRG practices DesignOps, which software tools make this possible and how agile processes make the whole thing as efficient as possible.
A long time ago, in a web universe far, far away...
… a designer could create a few graphic mockups for a website, propose them to the client and hand them over to the developer, who wrote the code and worked through all the details with the client. Done!! On to the next project. Often, this kind of design-led “waterfall” approach worked well enough, and the designer needed little to no technical knowledge. As technology advanced, however, it became increasingly difficult to align the designer’s intentions with what developers considered feasible and affordable.
Today’s digital environment places much higher demands on designers. For example, there are so many variables in responsive web design: screen size, page orientation, end-user device, mobile vs. desktop mode, browser vs. app view, operating systems, etc. There is no way to capture all possible states and dynamic outputs that users might experience with a few sketches. Today’s publishers of digital content demand maximum flexibility, a user-specific (yet coherent) user interface and a seamless UX.
Overlapping Role Responsibilities
More than ever, the designer must remain in constant alignment with backend developers, product managers and clients throughout the entire conception and development process, while working through all iterations of a website’s component functionality. Likewise, developers must be involved even before the designer creates a mock-up, in order to assess the cost-benefit ratio or feasibility of a component or function.
As the traditionally separate roles of designers and developers increasingly overlap, we recognized that the complexity of modern digital design requires a completely different organizational mindset. We have not only hired designers who are familiar with technical development and engineers who understand the importance of UI and UX design, but also created operational structures that provide the best workflows, tools and communication channels, enabling everyone to collaborate, create better design quality and meet the client’s needs and budget.
A New Way of Collaborating
Once the plan is in place, “wireframes” and “wireflows” (a skeletal outline that conveys the basic functions and user interactions) can be created for the product to determine which functions are desired. „We make the wireframe as simple as possible, without any embellishment, almost as if drawn with a pencil or Sharpie, and show only the content areas, user inputs and outputs“, Guzenko notes. In fact, software tools such as Balsamiq are used, which emulate hand-drawn wireframes.
This is followed by an analysis phase in which backend and frontend tasks are decoupled from the design. „We conduct a technical review of the content“, says Traunsteiner. „Do we have the technical means and data sets required for the build? Once we can make some rough cost estimates, the frontend design can move into the mock-up phase and define the user journey and UX flows.“
Helpful Collaboration Tools
Before development and implementation can begin, another review cycle takes place to ensure that designers and developers are on the same page. Helpful here is the use of collaborative design software such as Figma or Miro, which enables the developer to identify the design specifications and analyze the assets required to build the frontend. „The UI design is continuously improved during the review cycles“, Traunstein says, „even during implementation, when issues with missing component details are resolved.“
Modern reactive frameworks such as Vueor React implement components in Storybook, and help designers and developers streamline development and review cycles by working together on individual component details and seeing their impact on the frontend in real time. „Ultimately, this significantly improves quality and prevents issues from emerging later, especially when we work with the client’s developers and designers“, says Traunsteiner.
Guzenko agrees: „One of the biggest challenges for designers is representing the dynamic nature of most content. Often, a developer reviews a static design and asks me: ‘What if the headline is longer?' or ‘What if no lead image should be displayed? A designer cannot 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: „With Storybook, we can isolate a component and manipulate it with dummy data and placeholder images to check all layout variants, change properties and styles on a shared screen, so that a developer and a designer – as well as the client – can discuss changes immediately and preview how the component will work across multiple tenants.“
Add Your Heading Text Here
Tools such as Figma and Storybook streamline the DesignOps process by facilitating dialogue and managing assets throughout the entire development and implementation cycle. Even more important, however, is developing a DesignOps mindset. As an agile company STRG has the necessary operational infrastructure for DesignOps. „DesignOps is deeply integrated into our Scrum/Agile workflows“, says Traunsteiner. „From concept through development to the finished product, we go through reviews and iterations in an agile way.“ These workflows can be scaled depending on the client’s own capacities (i.e. whether they have their own designers and/or developers working on the product).
Traunsteiner points to STRG's collaboration with the ÖGB or the Salzburger Nachrichten, „where we integrate the natives into our agile workflows so that specific roles can be defined. Whether a client wants us to take on all the heavy lifting or wants to assign its own employees to work on the product, we can adapt our agile workflow structure accordingly. STRG may be an agency, but we always work together with a client and integrate them into the DesignOps process.“
Traunsteiner added: „When we work together in an agile way and go through iterations, we build the product from the ground up and gradually add features, change the scope, and find that some things in the original plan are more important than others. In this process, a client can better understand what the core values are and how to focus on the best UX.“
Additional sources: