{"id":21256,"date":"2021-12-29T10:03:08","date_gmt":"2021-12-29T10:03:08","guid":{"rendered":"https:\/\/marvelapp.com\/blog\/?p=21256"},"modified":"2022-02-01T10:49:00","modified_gmt":"2022-02-01T10:49:00","slug":"gender-inclusivity-in-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/","title":{"rendered":"Gender Inclusivity in Design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Every designer is playing a part in the image and feeling that their users get from their products and companies. Interactions are influenced in a powerful and meaningful way, beyond just completing a task. Inclusive design isn\u2019t new, but it\u2019s becoming noticed more and more as companies begin to realise that it\u2019s not only good for people and culture, but also good for business. <\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What is gender inclusive design?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Inclusive design is simply designing a product\/service that is equally as accessible, engaging and effective for as many different users as possible. When we define this around gender, it\u2019s ensuring the same for all who may be outside of the socially constructed binary gender markers (male\/female).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The best way to ensure any design is gender inclusive, is to include the awareness within the design process itself. <\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Key Terms to Understand before starting<\/h2>\n<div id='gallery-1' class='gallery galleryid-21256 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1365\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-scaled.jpg\" class=\"attachment-full size-full\" alt=\"Whiteboard asking viewers which pronouns\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-scaled.jpg 2048w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-1500x1000.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-768x512.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/sharon-mccutcheon-IDxuUey3M5E-unsplash-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This isn\u2019t a glossary, but there are a few terms that should be familiar across the team before the journey begins. There are many more, but these should support in the beginning to ensure all team members have the same understanding:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Gender -<\/em> It\u2019s complex. It\u2019s personal. It\u2019s individual. It\u2019s way beyond the realms of he\/she. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Sex -<\/em> This isn\u2019t gender. We\u2019ve split them into two bullet points to ensure this comes across! Sex refers to the biological differences between females, male and intersex people.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Gender expression (or presentation) -<\/em> This can relate to how a person may look, dress or act that may affect how others perceive their gender. However, gender presentation isn\u2019t an excuse to immediately apply a label. A persons pronouns are what they tell you they are, no matter what you may perceive from their expression.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Cisgender -<\/em> This term refers to when a persons gender expression matches that of their assigned sex at birth. to give you an example. If a person were assigned male (sex) at birth and identify as a man (gender), they are a cisgender person. However, if you were assigned male (sex) at birth and identify as female\/nonbinary (gender) you are not cisgender.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Trans -<\/em> This is a term for people who\u2019s sex at birth does not align with their gender. <\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">How to use gender-inclusive language<\/h2>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Avoid gendered words -<\/em> Try not to use words such as ** \u201cguys,\u201d \u201cgirls,\u201d \u201cladies,\u201d \u201cpostman\u201d \u201chostess\u201d. With these, there is an implication that the person you\u2019re trying to describe falls into a binary gender group. It most scalable to avoid gendered words as much as possible, to ensure you don\u2019t segregate an audience.<\/li>\n<li><em>Normalise the use of They -<\/em> Pronouns are really important. It\u2019s always best to ask your subjects pronouns instead of making an assumption on their gender expression. Normalising the use of They\/Them\/Theirs means that you have less chance of making anyone feel excluded when talking to or about a group of people.<\/li>\n<li><em>Let a user define their name -<\/em> In many cases, it can be difficult when a user is completing a form field that requires them to enter their legal name. Their legal name may not match their preferred name. When we use this data in communication or marketing it can be emotionally jarring to see it. Let the user tell you their name to avoid frustration or emotional upset.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Gender vs Sexuality<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As a proud member of the LGBTQIA+ community, this is one of the most common mistakes that I have seen many make when reflecting on gender inclusivity. Gender and sexuality are very different. Whilst we talk about gender &amp; sex, sex in this capacity is related to defined, socially constructed binary markers. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sexuality is the word used to define the sexual feeling of attraction that we have towards another person. It\u2019s just as deeply personal as gender, and should be approached with the same sensibility, however it has no impact on someones gender.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Create a vision of what inclusion looks like for you<\/h2>\n<div id='gallery-2' class='gallery galleryid-21256 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1521\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-scaled.jpg\" class=\"attachment-full size-full\" alt=\"sign illustrating gender neutral bathroom\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-scaled.jpg 2048w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-600x446.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-1500x1114.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-768x571.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/the-creative-exchange-8Xm3NDLsvUA-unsplash-2-1536x1141.jpg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Within the Design process we often create a design system, focused on ensuring that all designers are creating content\/products that live and breathe the brand image or ethos. This usually involves colours, typefaces etc. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating an Inclusion System can be a great step to ensuring that the designs\/products being created by your team are not only on brand, but also represent the brands values of a gender neutral vision. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can begin by reviewing the colour themes\/typography to ensure they aren\u2019t inherently feminine or masculine. Make sure your imagery represents a wide array of genders and isn\u2019t too binary. Finally, if you\u2019re going to use icons to suggest gender within a design, make sure you understand their meaning fully.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People feel comfortable in a place where they feel represented. Focusing your design system or themes too heavily towards a binary gender could be causing you to miss out on a wider audience of wonderful users.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Gender Inclusive language is the way forward<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Attitudes towards gender are beginning to evolve and see some steps in a more inclusive direction. Whilst many don\u2019t believe that we will ever fully lose the need for some gender specific products or services, there\u2019s no denying that a conversation is being had on how much precedence it has in todays world of design. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The route to a more expansive and less restrictive look towards gender is good for everyone. By following and responding to the message that\u2019s being expressed socially, continuing the conversation around gender being less binary means you ensure that your audience of users feels valued and represented, thus providing them more of a reason to continue to use any product or service you provide.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Start your journey to designing a more gender inclusive product in Marvel, using our in-built design tool and prototyping features. Want to test your your users response to your designs? Capture important feedback through audio and video by creating a User Test from your Prototype.<br \/>\nMarvel provides you with a tool to support you in every step of the design process. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every designer is playing a part in the image and feeling that their users get from their products and companies. Interactions are influenced in a powerful and meaningful way, beyond just completing a task. Inclusive design isn\u2019t new, but it\u2019s becoming noticed more and more as companies begin to realise that it\u2019s not only good for people and culture, but&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":361,"featured_media":21257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-21256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Start your journey to designing a more gender inclusive product - learn about gender inclusive language and how to value a wider audience of users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gender Inclusivity in Design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Start your journey to designing a more gender inclusive product - learn about gender inclusive language and how to value a wider audience of users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-29T10:03:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-01T10:49:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/what-is-gender-inclusive-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1388\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/12\/what-is-gender-inclusive-scaled.jpg\",\"width\":2048,\"height\":1388,\"caption\":\"a line of people of different genders stood together\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/\",\"name\":\"Gender Inclusivity in Design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#primaryimage\"},\"datePublished\":\"2021-12-29T10:03:08+00:00\",\"dateModified\":\"2022-02-01T10:49:00+00:00\",\"description\":\"Start your journey to designing a more gender inclusive product - learn about gender inclusive language and how to value a wider audience of users.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3108320a2d15892154f321ecad0d4d8b\"},\"headline\":\"Gender Inclusivity in Design\",\"datePublished\":\"2021-12-29T10:03:08+00:00\",\"dateModified\":\"2022-02-01T10:49:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#primaryimage\"},\"articleSection\":\"Blog\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/gender-inclusivity-in-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3108320a2d15892154f321ecad0d4d8b\",\"name\":\"Lain Bader\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dfe8a4f083c5d4fe1a1bf25b3d6ce42f40bb5661486590468f143dca572689de?s=96&d=mm&r=g\",\"caption\":\"Lain Bader\"},\"description\":\"Senior Customer Support Manager at Marvel\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/361"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=21256"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21257"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=21256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=21256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=21256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}