How moodboards can help you create an excellent UI design?

What is a moodboard in UI design?

Digital product design can be very visually oriented. How a product looks is an important part of the user experience. But that visual element can be missing from the design process; there can be lots of discussion and notetaking but somehow the word “purple” on a notepad or screen never quite prepares you for a product that is actually purple…

A moodboard is essentially a collage, using all manner of visual elements to suggest, explore and decide on the look of a product. It might include images, photographs, textiles, text, colors, newspaper clippings, etc. A moodboard can be a highly engaging way of collaboratively creating brand designs and logos, physical items and, of course websites, apps and online platforms.

What might you use to create a moodboard?

Potentially, anything can be used to suggest the visual design attributes of your product. More specifically, that could mean:

• Images – stock photography, holiday snaps, logos, magazine features, hand-drawn illustrations, doodles… potentially any image can spark some visual creativity, whether intended literally or as a metaphor.
• Colors – a chance to explore your product’s color palette, whether matching or clashing. There is a number of widely accepted tools to help with that, such as the Pantone Matching System.
• Words – key descriptive phrases, alternate product names, the vocabulary to be used in a product’s text elements…
• Fonts – what words say is important, but so is how they look. The choice of font has a potentially huge impact on communicating your brand identity, but also on the readability and appeal of your text.
• Textures – even for digital products, ‘texture’ is important; screen backdrops, buttons, text callouts. They add to the flavour of your design and can make the entire product stand out from the crowd.

You might be also interested in the article:

The best awards come in a shade of purple

Naturally, there is nothing limiting you to creating just one moodboard. Creating multiple UI moodboards can be an excellent way to present alternative design options to the client, product owner or end-users. For example, when working on a luxury booking platform for ERES Yachting, Boldare offered the client three completely different moodboards, each in line with the original design brief.

Moodboards can be physical or digital. While a physical moodboard often feels more immediate, with potentially greater impact, the current reality of the world means we are often working (and sharing) from a distance. Luckily, there are a number of moodboard apps and software enabling you to create on-screen, including GoMoodboard, Mural, Moodzer, Readymag, and even Pinterest.

Benefits of using moodboards for UI design

Creating digital moodboards offers a very active way of discussing and exploring a product’s visuals (even if you’re moodboarding digitally, clicking & dragging is still more ‘hands-on’ than a conversation!) As a method, it’s highly engaging for everyone involved and is a technique in which the emotional reaction to items is essential – it’s as far as you can get from a dry discussion. The main benefits of using moodboards in your design process are:

• Effective way to pitch design ideas to stakeholders – As a designer, you may have a clear vision of the product in your head, but it’s one thing to think and say “minimalist” or “classy” or “bohemian” and another to show it. The problem with a verbal description is that the person hearing it imposes their own definitions (what’s “minimalist” to them may not be what you’re thinking of!) A moodboard can clearly express your design esthetic to a client or investors, and is more likely to result in useful feedback.
• Fewer design changes later in the project – Moodboards can be used to get early buy-in to core visual design elements from product owners and clients, resulting in fewer revisions or changes in direction later on.
• Coherence and consistency – You can incorporate all your visual elements in one place with a moodboard, ensuring that you have the level of consistency you’re looking for (or inconsistency, if that’s the goal!) A moodboard can help answer the question, Does it all fit together?
• A creativity catalyst – With moodboards, the strong visuals provoke emotional reactions, and the hands-on factor encourages everyone to think of additions or alternatives. The collage structure encourages a What happens if we add/change this? Mindset. Which is to say, just using a moodboard will encourage creative participation, to the benefit of the final product.
• Low-cost investment – Compared with producing a prototype or mock-up of the product, a moodboard is a low cost option that nevertheless conveys your design thinking.

You might be also interested in the article:

Principles of product design – how to design a successful digital product

Moodboards in digital product development

As part of your design approach, moodboards can enable a development team to:

• Ideate – In the ideation stage of product design and development, moodboards provoke and nourish creativity, encouraging ideas to build, one on top of the other.
• Involve the client – Constructing a moodboard with the client or product owner is a way of involving key stakeholders in the product’s aesthetics.
• Test with users – When looking for early feedback on a product, the visual appeal can be tested by using a moodboard with users from the target audience; as mentioned above, images and colors tend to produce emotional responses, which can be valuable feedback.
• Save time – Moodboarding is relatively quick to do (a few hours at the most) and lays a visual foundation for a prototype or other early iteration of the product.
• Be flexible – If circumstances change and the project needs to pivot, it is usually easy to return to the moodboard and edit it in line with recent feedback or a new direction.
• Create better UX/UI – By focusing on the visual elements of the design, moodboards home in on key elements of the user experience and user interface in a way that speaks directly to user wants and needs.

Once your UI design moodboard is done and approved, it serves as a strong visual reminder to the whole team throughout the project of what they are aiming for. This helps maintain a consistent esthetic style, one that fits the goals and expectations of the client.

You might be also interested in the article:

The ultimate guide to successful digital product design

A short moodboard case study: Boldare

In addition to the ERES project mentioned earlier, an example of moodboards being used to guide a project is when Boldare was born!

When merging Chilid and XSolve, two software design and development companies, the Boldare team was very conscious of the importance of getting the new branding right. This meant regular testing and feedback of ideas with the target audience (i.e. both employees and key clients of both businesses).

By creating multiple digital moodboards, the team could present the two strongest to the target group, in conjunction with a survey and focus group to ensure enough structure to product constructive feedback. While one board was preferred to the other, the process still produced some useful emotional responses:

• make it less cold,
• make it less old-school,
• make it much more optimistic,
• make it more smart,
• make it more likeable.

As well as these responses to the visuals, the focus group also provided information on how the target audience talked about digital product development, identifying the language to be used if Boldare was to appeal to that audience. This feedback was subsequently incorporated in the next design round, resulting in a much stronger brand identity for the market.

(For more detail, see the full case study.)

Moodboards - an important digital design tool

UI design moodboards can be a critical tool in ensuring that the UX and UI of a final product meets the needs of both the target audience and the client. By emphasizing visual appeal, moodboards can help hone a jointly-owned creative vision for a digital product, encourage wider collaboration in the design process, and provide a reference that guides the product’s look and feel.