One solid technique that keeps you from screwing up your app redesign

The world of app redesign can be a place of wonder or of terror. Maybe you’ve tried to update your app just to have all your expectations shattered because the design team did not capture your vision.

Or you’re the designer who spent countless hours on a redesign just to hear the most dreaded words, “it’s not what I am looking for”. Whatever the case it is sure to drain the life out of you and your creative process. But not where mood boards are concerned…

A time-saving solution to help determine your visual preferences before the design team gets to work

Mood boards have been around long before the digital world took notice, and thanks to clever thinking it has been tweaked for digital use. They consist of a large number of different images usually united by one central theme. But what can it do for you?

• It helps synchronize visual preferences: Understand the mood of the product team before designers start working on the product by demonstrating certain preferences, and get into the mind of the product team.
• Practice involvement: This is an essential part of the process for designers and managers. And sometimes it’s easier for people to agree with results of the work in which they’re involved in even if it’s different than expected.
• Save time: Everyone comes to agreement faster, work is completed in record time and products enter the market faster.

Sounds promising right? Make sure to grab your gift at the end of this post!

What does a modern mood board structure consist of?

Describe the audience and its environment

It’s important to present photos that match the content of the project and its target audience. The focus should be on your target audience. Do not be afraid of making mistakes since the goal is to start a discussion and remove any misunderstandings.

• We use Figma to design, prototype and gather feedback. It’s web based.
• In Figma you can download several images at once by using the shortcut ⇧⌘K.
• To search for photos you can use Unsplash or other free photo stock resources.

Provide general references

Here we show references that are close in style, content, or both. It’s more about the overall impression. Find examples that you like and create results.

• For product sites, use directories like Lapa Ninja.
• Try to show examples from similar spheres.

Narrow down the best interface solutions

Before creating a mood board you should ensure that you know the product you’re working on. Determine what is most important to your target audience and why. Based on this information you can select the best solutions or present them with examples they don’t know about.

• You can add auxiliary explanations.
• Or select examples with a common relationship.
• Try to find examples that can be applied to the product.

Talk about the color

Colors are often defined. If you’re dealing with a new product show the colors that seem like a good fit to you. The goal is to show basic and additional colors based on your experience and the background information you have. Remember that less is more. You only need a few basic and secondary colors.

• If there’s a brand book, use it as a guide.
• Colors in the brand book can be slightly tweaked on the needs of the modern digital product world.

Focus on the font

Present clients with several choices of font pairs. Do not tell clients what led you to the decision but rather just share your general impression with them.

• Use Google Fonts or Typekit — they are easier to maintain on the web.
• Show the font of the title, content and their combination.
• Do not forget about multi-language support even if it’s not needed for the relevant project.

So the mood board is ready, what now?

The best thing to do is share a link to the commentary section. Ask clients to describe what they like and do not like and why. They should not spend too much time on it. In Figma you can keep all your comments in one place and discuss the changes with your team.

Here are a few resources to help you fast-track the redesign process:

• Inspiration: Dribbble or Behance
• Animations: Awwwards
• Landing pages collection: Landbook or Lapa Ninja
• UI patterns: UI Garage
• Colors explorers: Color Hunt OR Adobe Color CC

Here’s 10 helpful tips to keep in mind:

1. A mood board is not an adjustment to the taste of the client — do NOT try to please.
2. Always explain the process and its purpose to the client.
3. Do not limit the format of the reviews. The task is to identify the pain points and start a dialogue.
4. Do not skip the mood board process with the design team. Start a discussion with the client.
5. Try to connect with your target audience, determine the value proposition, and other available strategic information before working on mood board.
6. Do not just upload your favourite animations or concepts from Dribble. It will most likely only be extra noise.
7. Set the initial vector and listen to the opinions. Do not argue about trifle things.
8. Do not make the project team choose — ask them to share their impressions.
9. If you do not like something — ask for the context or reasoning behind it.
10. Do not be afraid of negative comments — they will save you time.

• Exact Figma mood board template I use working with digital products
• Cool resources for designers and product owners created by my team

If you have anything to say or ask — please. Maybe questions on mood board or ideas for future articles? I’ll do my best to answer.