3 Tips for better visual design on an agile team.

In product design, there’s a hierarchy that all great companies or teams move through. First, create a product that solves a problem or satisfies a desire. Second, make it easy to understand and use. And thirdly, make it beautiful.

I’ve noticed that most product designers will try to focus on one of these three aspects at a time. Often repressing visual design until the team is ready for it. That doesn’t necessarily have to be the case.

Here are 3 tips for moving toward improving your visual design in a highly iterative environment, on a fast paced collaborative team.

1. Create a design system.

An example of a styleguide page within your sketch file.

Starting with a template will help you move quickly. Then continuously build upon a set of UI components that will help you iterate faster — and set them up to easily update throughout your iterations. Here’s the one that I use for myself.

A very specific example would be your margin and padding system — are you choosing 15–30–60px? Are you applying it to all the new screens you’re creating? Something small like this is easy to keep track of, and you’ll see the effects of the visual consistency moving forward.

2. Get comfortable with increasing your fidelity earlier.

Make those daunting decisions more often — choose colors, take a stance on form field styles and so on. Sometimes you might think “nah, I’ll do that later. It’ll take too long to come up with a good solution”. But give it your best shot, and move on.

Now you might be confused by this. Jeff Gothelf says you shouldn’t spend a lot of time polishing your product before understanding what problem you’re solving. I’m not saying to sit there and spend hours on your iconography. But I’m starting to see some designers shy away from making those micro-decisions during wireframing. I think it’s totally fine to spend a few minutes here and there updating your styleguide, or your button style. If you’ve got an idea then why wouldn’t you try it out? Don’t let fidelity constrain you.

Google has been sharing their popular design sprint methodology these past months, and one key part is that on the 4th day of your 5 day sprint you’ll hammer out a high-fidelity prototype.

If you set up your design system well (updatable with symbols for example) then you’ll be able to iterate quickly in higher fidelity.

3. Build expectations with your team.

Setting up the design calendar at the beginning of a project.

Create polish expectations for each chunk of work your team works on. Tell your team you want to pair with your devs during any front end work, or at least when it’s time to accept a story. If you don’t get to it then you should accrue time to spend on it. And better yet, set aside an hour or two for front end pairing at the end of the week. That way you can get to anything you’ve missed along the way.

I’d love to hear more about your thoughts. Leave a comment and lets continue the conversation!

Thanks to Joyce, Amy and Prianka for all their feedback.