Moodboards: An effective way to create the right visual design style for your SaaS product

Simon McCade

Don’t judge a tech product by its cover? Yeah, good luck with that. 

Whether they are picking up a book for the first time or opening your tech product for the first time, people will still have developed a lasting impression of it within moments.

Digital product design is no different to any other type of visual design when it comes to winning people over. Some studies have suggested that the window is as narrow as 0.05 seconds, which shows just how crucial it is to get the look and feel right when you take your tech product to market. 

Let’s take a look at visual design in more detail to explore how you can convince your users that your solution is the one for them from the moment they start onboarding.

What is visual design and why is it important?

Visual design helps to define the overall aesthetic appeal of your tech product. It is your way of organising complex information, encouraging particular actions and maintaining some level of legibility and familiarity.

Ultimately, the aim of good visual design is to pique interest and build trust with skeptical users.

This can be done by abiding by a set of design principles to give the appropriate content the attention it needs. 

These principles help to define the layout, hierarchy, colour palette, typography and iconography amongst other things, of the product to convince new users that you are a legitimate solution to the problem they are facing.

It’s a crucial phase of the design process because if the design doesn't meet users expectations, it’s going to take a significant effort to keep them and prevent them from leaving and using a competitor's product instead. 

What problems do early-stage tech companies encounter when creating the visual design for their product?

One of the most common issues is that developers rely far too heavily on front-end frameworks that promise a one-size-fits-all solution.

This simply doesn’t work. Most frameworks libraries don’t scale as your company grows, they introduce design principles you might not be familiar with and, perhaps worst of all, they basically make you look like everyone else. 

The dangers of hacking together a visual design language without design expertise

Some early-stage tech companies do try to develop their own visual design language, but their approach can often take inspiration from the wrong places, such as other irrelevant products and new trends, which leads to decisions based entirely on personal taste. It's a strategy that's rooted in a lack of design expertise, which is usually a recipe for disaster.

The end-results of designing in this manner often come undone because solid design principles are ignored.

The product lacks professionalism and therefore fails to build trust and credibility as a result.

How to establish an appropriate visual design with moodboards

Moodboards can be used to help define the direction of the product experience - and the clue is in the name that it relates to the kinds of emotional reactions that we want users to have when they engage.

Gathering the requirements for the tech product

The first place to start is to get in front of stakeholders and users to understand what they want from their product. What are they looking to achieve? Why does the current design language fail to resonate with users? 

The importance of gathering design requirements in planning meetings

You should also bring in competitor research here to understand how your target audience might compare to others on the market. 

Combine all of this with a deep understanding of the product and it's users will give you the full picture of requirements before you begin. 

If you don’t get into the mind of the stakeholders and users early on, there can be too much space for misunderstandings and the whole process will take longer than it needs to. 

Finding the design inspiration that will make the difference

This initial research phase will set you up for the creation of the moodboards to establish the visual direction of the product at hand. 

The inspiration can come from many places - I often use some or all of these sites as references before I start designing an interface: 

It’s important to keep an open mind at this stage, as you’ll be creating a series of moodboards not only for the interface, but also for a range of supporting elements, including buttons, navigations, widgets, typefaces, icons and data visualisation. 

Map My Diabetes - An example of a recent moodboard

See how each example makes you feel - the emotional reactions you have for the first time here won’t be too dissimilar to those of the new users of the tech product itself.

You might automatically take online influences onboard and be satisfied with that, but my recommendation is to bear one thing in mind: Don’t be afraid to take your inspiration offline.

If you love nature, get outside and take inspiration from the great outdoors. If you love photography, start capturing the look and feel of the colours in your favourite shots.

There are unlimited sources of inspiration out there, so don’t be afraid to take it offline to look for them. 

Using a variety of sources of inspiration for your moodboards is a really effective way of communicating a range of ideas to stakeholders as you head into the visual design phase.

From inspiration to realisation: Creating your visual design

Now we come to the actualisation of your preparation. Taking your moodboards forward into the visual design stage will feel much more comfortable with a foundation of knowledge and inspiration beneath you. 

Remember that it’s fine to lose certain elements of the moodboards you’ve collected - they were created to provide choices after all.

I tend to start by filtering through my findings to define the general art direction before I start designing any of the finer details. Stakeholders are involved at every logical step of the way, but I'm selective with how much I share to ensure (1) I keep them invested and (2) we stay on track with the design. 

Map My Diabetes - The new onboarding process

If you’re unsure, go with the onboarding screens - you can again replicate a similar scenario to your users seeing the product for the first time by showing stakeholders the same screens, so it can be fruitful to get feedback in this manner. 

This is where my experience as a digital product designer becomes most useful: I can execute the relevant points raised in the research phase and mould them into a visual style that resonates with the target audience.

This can’t be done alone, though, so collaboration is one of the key elements of this part of the process. 

I often involve stakeholders in the transition from moodboards to visual designs - it’s a great way to lead by design instead of relying on different people explaining their ideas in different ways, as some stakeholders might find it difficult to express their ideas in design terms.

It can quickly get complicated, but working together on a visual direction from the off is the best way to ensure a smooth transition into the production phase of the design as a whole.

That way, you'll achieve an end-product that everyone is comfortable with and, of course, everyone is invested in. 

Stick to your design principles

It’s not easy to create a visual experience that resonates with demanding tech savvy users, but it is not impossible when you follow a process and base it on solid design principles every step of the way.

Do your research, collaborate with the right people and sweat the small stuff and you’ll be well on your way to creating a user interface that is unique, professional and credible for the people you’re trying to reach. 

Map My Diabetes - The final visual designs influenced by the original moodboards

After all, people still judge a tech product by its cover whether we like it or not, so it’s more important than ever to develop a considered and calculated product that works from the very first touchpoint.

Let’s work together to improve your visual design

Many early-stage tech companies go through a trial and error process to work it out along the way, but this often leads to a substandard product. My guide to turning your ideas into finely tuned UI design should help get you started if you decided to go through the design process yourself.

If you want to make the right first impression, it’s crucial that you design your tech product with solid design principles in mind. Today’s products are often much more complex than their predecessors, so there is no excuse for sticking with standard, out-of-the-box frameworks that do your product no justice.

Let's look instead at creating a visual design language that is simple, easy to use and completely value-adding for your users at the earliest given opportunity. I help tech companies do this every day so that their products can attract more valuable customers than ever before.

Get in touch today to discuss the challenges you’re facing with your visual design and we’ll work together to find the solutions that solve the problems your users are facing all too often.

Continue reading