Agile by design

Design can make or break your product. But it's not the exclusive domain of designers any more.

Design is an important part of any software project. Yet agile teams often struggle with "what to do about design?" because of these four factors:

  • Many teams focus on high-fidelity designs during the planning process, which forces a waterfall culture throughout implementation
  • Designers are often shared across teams and have limited time to spend with any given team
  • Designers don't always have an easy way to report feedback to the engineering team
  • The logic and presentation layers aren't always clearly separated in the code base, making style changes difficult

Design: agile, just like development

Before we go deeper, I want to introduce another concept: collaborative design. Iterating on product design won't yield great results if you're doing it in a vacuum. Seeking the perspectives of your customers and developers at the outset of a project will help that first stab at design stike closer to the mark, and guide your iterations on it as you move along. Let's take a look at how Atlassian designers get collaborative in this short webinar recording. 

As you just saw, the product owner and the designer will spend time brainstorming and iterating on the product plan early on. Their goal is to validate the business case and make sure the engineering team's time is well spent solving actual problems that actual customers face.

ProTip: This phase is not "sprint zero". It's important to get these fundamentals right, rather than time box them. Starting the program off on sound footing pays dividends throughout the project. So take the time you need. 

After the initial planning and ideation, the product manager and the designer will begin to engage with the development team. Throughout the program, visual and interaction design is iterative–just like the software architecture: figure out the most important problem to solve, and add just enough design (and code) to get feedback on the solution.

As the team engages in sprint planning and backlog grooming, involve the designers. Getting their input when making decisions about the product's future direction will make getting there easier.

Developers and product owners can design too!

In many organizations, designers span multiple teams (or even products!). This is true at Atlassian too. So we set out to make better use of our designers' precious time.

We gave product owners and devs tools to engage in a product's design directly–and it's working.

The Atlassian Design Guidelines are a set of principles, guidelines, and assets for designing and building awesome experiences. Our design guidelines not only cover the elements of visual design, they also encapsulate our values in user experience design. This allows multiple agile teams to develop consistent experiences across our product families. And as mentioned above, we include developers and product owners in the design process. As the full team works together using the Atlassian Design Guidelines, developers and product owners become better designers. That skill set then becomes shared across the team, which is a fundamental value in agile culture.

While having a shared mindset is important, we wanted to go further in how we approach agile design. The Atlassian Design Guidelines are delivered through three main channels:

  • The Atlassian Design Guidelines website, which contains the ethos and methodology behind our design decisions
  • The Atlassian User Interface (AUI) flat pack, a set of HTML, JavaScript, and CSS templates that implement all of our design elements in code
  • Keynote and PowerPoint templates with the visual representations of all of our components

Developers can download the AUI flatpack and create mock-ups. Likewise, product owners can make product experiences in slide decks that look like the actual product without writing a single line of code. It's an effective way to get meaningful and actionable design feedback. These assets also strengthen the design partnership across the entire agile team. A single designer takes the lead in the planning process, but the rest of the team contributes to decisions throughout iterations. This removes the bottleneck for decisions about design and allows the entire team to become more agile. 

Design for a great experience

Every feature travels two paths as it's being developed: user experience design and visual design. User experience design employs design thinking to focus on the information architecture and workflows throughout the new feature. Visual design encompasses interaction design and how a feature is styled. Sometimes teams focus too heavily on visual design because it's an emotional part of the product development process. (Plus, it's all shiny and fun and stuff.) But, while important, visual design cannot eclipse good user experience design. Indeed, without good user experience design, even the most stunning visual design won't make users fall in love with the product.

With their highly-tuned empathy for the user's experience, and sixth sense for spotting abnormalities in typography and goofy layouts, designers are an incredibly valuable source of feedback. Make sure they can easily capture screenshots, mark them up, and report defects or suggest improvements. 

Flexible design is future-proof design

Much like development paradigms, design changes over time. Modern technologies like CSS make it easy to separate the look of an application from the logic in an application. Likewise, make sure to structure automated tests so they will be resilient when the visual design evolves. Design will change, and it's important to ensure the code base can easily follow new trends.