Product illustration guideline
As a Senior Product Designer (UX and UI) at Domain, I was responsible for creating user-friendly and visually captivating experiences across Domain's digital platforms, including their website and mobile app. The project I'm most proud in this role was the development of comprehensive guidelines on the strategic use of product illustrations within digital platforms.
The problem
In the context of the project, it was necessary to develop comprehensive guidelines as Domain lacked clarity on the distinction between marketing and product illustrations.
What
By creating these guidelines, we provided clarity on when and how to use illustrations effectively within the product interface, ensuring they served a functional purpose in enhancing the experience and conveying product-specific information.
Team: Lead Product (UX and UI) Designer (Victor Beltrame), Senior Product Manager.
Client: Domain
Discovery - Understanding the problem
The problem
Domain's digital platforms lacked guidelines on the use of meaningful and contextually relevant illustrations. Incorporating illustrations that added value to user experience and reflected context and emotional state was important, however there were no clear guidelines or principles in place for designers to create them.
The solution
To address this issue, I proposed the development of a guide to outline how designers can create and use product illustrations effectively within Domain.
The goal
The goal of the guide was to ensure illustrations served a purpose beyond mere decoration and contributed to enhancing the user experience by acknowledging and meeting users' particular needs. This approach emphasised the importance of authenticity and delivering tangible value to customers through thoughtful design choices.
Analysing the best in class
Why
I conducted desktop research before diving into solution mode. This ensured the end project was well-informed on current industry standards and user expectations.
By analysing the best in product illustration, I gained valuable insights into what did and didn’t work well. This enabled me to develop informed strategies and guidelines.
By grounding my solution in comprehensive research, I increased the likelihood of success by leveraging established principles and avoiding common pitfalls.
Brand consistency and identity
Product illustrations maintain consistency with the brand's identity, conveying values, tone, and aesthetic across various platforms and products. The consistent use of colour palettes, visual styles, and messaging reinforces brand recognition and trust among customers.
Clarity and communication
Product illustrations serve as powerful communication tools, conveying complex ideas or features in a clear and visually engaging manner. Effective illustrations simplify concepts, highlight key features, and guide users through interfaces, enhancing usability and the user experienc
Versatility and adaptability
Product illustrations often need to adapt to various contexts and platforms, such as websites, mobile apps, packaging. It's important to create versatile illustrations that can scale across different mediums while maintaining visual coherence and impact.
Emotional connection
Compelling product illustrations evoke emotional responses from users, fostering a deeper connection with the service and its offerings.
Product illustration
Focuses on visually representing specific products
Showcases the product's features, functions, and appearance
Used in manuals, product packaging, and catalogues
Includes technical drawings, diagrams, or detailed renderings
Accurately depict the product for informational or instructional purposes.
Product and marketing illustrations
In summary, both product and marketing illustrations aim to communicate information effectively, product illustrations tend to focus on functionality and usability, while marketing illustrations emphasise generating excitement and highlighting the value proposition of the product. Additionally, marketing illustrations may have more flexibility to deviate from the core product while still maintaining brand consistency.
Marketing illustrations
Promotes products or brands
Creates engaging and memorable imagery
Uses creative and stylised visuals
Often includes characters, scenes, or scenarios
Used in advertising campaigns, social media, and promotional materials
Prioritises aesthetic appeal and emotional resonance to attract and engage customers
Workshop and ideation
The process breakdown
Initiation and Objective Setting: Initially, I initiated a series of workshops aimed at drafting comprehensive product illustration guidelines for Domain.
Participant Selection and Diversity: These workshops involved designers from various domains and backgrounds, ensuring a diverse range of perspectives and expertise.
Collaborative Drafting Process: During the workshops, participants collaborated closely to define the principles and standards for product illustrations. This involved interactive discussions, brainstorming sessions, and sharing of insights and ideas.
Iterative Feedback and Refinement: Throughout the drafting process, we continuously gathered feedback from participants, iterating on the guidelines to ensure clarity, consistency, and alignment with our brand identity and communication objectives.
Cross-disciplinary Collaboration: The workshops provided a platform for cross-disciplinary collaboration, fostering knowledge sharing and learning across different design domains.
Finalisation and Implementation: After multiple iterations and refinements, we finalised the product illustration guidelines, ready for implementation across various projects within Domain.
The guide
The main purpose of this guide is to ensure that designers can effectively create and utilise illustrations that add value to our customers' experiences. By providing guidelines on creating meaningful illustrations that accurately reflect a user's context and emotional state, the guide ensures consistency and clarity in communication, ultimately enhancing user engagement and satisfaction.
One last thing
Remmember that ‘no one is really opening your app just to look at your illustrations.’ This is about being real and bringing value to our customers by acknowledging them and their particular needs.
Mood
We need to find a way to articulate what is happening in an easy and digestible way. It’s about guiding the user through the journey. The illustrations should have an inspirational and encouraging tone, guiding the customer and providing them with support, letting them know they are not alone, “Yo dawg, we got your back”.
Colours
Primary palette
The hero colour is Domain Green, which is complemented by Forest Green plus a secondary colour palette.
Secondary palette
Sage, Sandstone, Dusk, Oak - Our secondary colour palette includes four colours that can be used to balance and support the primary colours.
Tints
Tints of all colours are available for use in secondary applications, to provide flexibility through long-form designs such as annual reports or UI elements for online. NOTE: Tints are NOT to be used in place of the primary palette, as background colours or as text colours.
Gradient palette
The gradient colour palette provides a vibrant burst of colour to the Domain brand. Gradients can only be used in the combinations shown here and must never include other primary or secondary colours.
Diversity and inclusion
‘Normal’ is Diverse
Diversity and inclusion are the norm. For a long time, minorities and people with disabilities have not been represented in Domain illustrations.
Representation is complex, and it is much more than drawing a person as an outlined white space while their hair and clothing have colour, it’s too easy to assume they’re caucasian.
Embrace differences
Accurately represent different races, ages, abilities, and body types
Keep it real
Cast characters who aren’t all white men and find reference photos for every person drawn
Reflect everyone
Consider all types of diversity, including the disability community who make up 15% of the world’s population.
Shape and forms
The Domain brand comes to life with the use of the four iconic shapes that come directly from our logo. We refer to these shapes as portals or windows of possibility. We want to spark a sense of wonder and attribute that to the brand
Stroke
The product illustration’s main purpose is to inform and make the customer’s experience easier. We have decided not to include strokes where possible and to create depth using perspective.
Details
We encourage compositions within defined shapes, employing flat design with no shadows, and incorporating dynamic elements for visual interest, prompting thoughtful consideration of when to adhere to or deviate from these principles to best serve the intended purpose and brand identity.
Minimalist
Imperfect shapes – a handmade quality
Focus on the reason why the content
Stylised, suggestive detail
Be cliche in a classy way, e.g. pop of champagne or sparkless or confetti
Style
Just pick one perspective and don’t deviate from it
Composed within the portal and shapes
Flat, no shadows, front angle
Composition and movement – e.g. coin toss or trees moving
How should we do it? Should we not do it?
Humans
Should the illustration have a face?
We’re humans helping other humans with all of life’s property decisions
Use humans as much as you can
Use pets as much as you can, also be creative about pets, there are more than cats and dogs out there
Be positive
Use diverse families, gender, colour, race
Use people with disabilities and make sure it is not just tokenism.
Properties and scenarios
Objects
The objects need to help our customers make an informed decision, we need to be positive, e.g. if a chart is going down because rates have drop
Life objects: Car, BBQ Pool
Hobbies: Guitar, Surfboard and Rugby ball
Finances: Chats, Piggybank and Cash
Real estate objects: Action gavel, Microphone and Signage
House parts: Kitchen and bedroom
Narrative
Journey-based
To help users understand end states – we can illustrate the result e.g. Refinance = dream holiday
The illustration should always add to the message.
Also, the narrative may depend on the usage, for example when working on a full journey, the same character should be used through but in different scenarios, make the illustration connect through the narrative
Illustrations
In summary, having an Experience Vision was critical for the profile and contact details redesign because it provided alignment with goals, guided design decisions, facilitated communication, inspired creativity, emphasized user-centricity, and enabled evaluation and iteration based on the desired experience. This holistic approach ensures that the redesign delivers a compelling and effective user experience that meets both business objectives and user expectations.