Agile Design

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 strike 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.

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.

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.

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. 

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.

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.