{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/6JLcpeSWwzW8q5V4SGKu/ddgKs9w09mtFnLAEaaw0/eYjVamKDM.js"],
  "sourcesContent": ["import{jsx as e,jsxs as t}from\"react/jsx-runtime\";import{addPropertyControls as i,ControlType as a}from\"framer\";import*as r from\"react\";let s=\"C9XMQPpe_\",n=\"aHKgBzPwX\",o=\"aEWimqxU5\",c=\"sedcS5gHS\",l=\"DX4bID_RX\",d=\"CPf8zkTRJ\",h=(e,t)=>{if(e&&\"object\"==typeof e)return{...e,alt:t};},p=[{index:0,id:\"Pq6H70gNB\",[s]:\"\u2728Empathy Mapping in UX Design\u2728\",[n]:\"empathy-mapping-in-ux-design\",[o]:/*#__PURE__*/t(r.Fragment,{children:[/*#__PURE__*/e(\"p\",{children:\"Empathy mapping is a design technique that is used to gain a deeper understanding of the thoughts, feelings, and needs of a particular group of users. It is a powerful tool that is used by UX designers to create user-centered solutions that are intuitive, satisfying, and effective. The goal of empathy mapping is to help designers to create products and services that truly resonate with their users and meet their needs in the best possible way.\"}),/*#__PURE__*/e(\"p\",{children:\"Empathy mapping involves creating a visual representation of a user\u2019s experience with a product or service. This representation is created using a simple template with four quadrants: hear, see, think, and say. These four quadrants capture the different aspects of a user\u2019s experience and provide designers with a comprehensive understanding of their perspective.\"}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,NSTscnMgoHPleMjBYbNyL0FB60.png\",\"data-framer-height\":\"497\",\"data-framer-width\":\"720\",height:\"248\",src:\"https://framerusercontent.com/images/NSTscnMgoHPleMjBYbNyL0FB60.png\",srcSet:\"https://framerusercontent.com/images/NSTscnMgoHPleMjBYbNyL0FB60.png?scale-down-to=512 512w,https://framerusercontent.com/images/NSTscnMgoHPleMjBYbNyL0FB60.png 720w\",style:{aspectRatio:\"720 / 497\"},width:\"360\"}),/*#__PURE__*/e(\"p\",{children:\"Empathy Map showing four quadrants: See, hear, think, and say\"}),/*#__PURE__*/e(\"p\",{children:\"The \u201Csee\u201D quadrant records the visual elements that the user encounters while interacting with the product or service. This includes the design, layout, and overall appearance of the product or service. For example, a user might see a confusing layout or a poorly designed interface. Understanding the visual elements that the user encounters is important because it helps designers to create visually appealing and easy-to-use solutions that meet the user\u2019s needs and expectations.\"}),/*#__PURE__*/e(\"p\",{children:\"The \u201Chear\u201D quadrant captures the external influences and expectations the user experiences or hears from others during the interaction with the product or service. This can include things like rumors, media, and recommendations from friends or family. For example, a user might hear that a website is unreliable from a friend or read a negative review in the media. Understanding the external factors that influence the user\u2019s perception and behavior is important for designers because it helps them to create solutions that take into account the user\u2019s broader context and meet their needs and expectations.\"}),/*#__PURE__*/e(\"p\",{children:\"The \u201Cthinks\u201D quadrant records the user\u2019s thoughts while they are engaging with the product or service. This may encompass their objectives, any worries they might have, or their general evaluation of the product or service. For instance, a user might have the thought, \u201CI need to quickly locate the necessary information\u201D or \u201CI am uncertain about the reliability of this website.\u201D Grasping a user\u2019s thoughts is crucial because it aids designers in developing solutions that fulfill their requirements and tackles their anxieties.\"}),/*#__PURE__*/e(\"p\",{children:\"The \u201Csays\u201D quadrant records the statements made by the individual while utilizing the product or service. This can encompass any inquiries they might have, opinions they offer, or remarks they make. For instance, a user might express, \u201CI am unable to locate the search function\u201D or \u201CThis website takes too long to load.\u201D This type of data is important to designers as it provides them with a better understanding of the issues faced by users and the aspects that need enhancement.\"}),/*#__PURE__*/e(\"p\",{children:\"Empathy mapping is a valuable tool for UX designers, as it helps them to create products and services that are more intuitive and satisfying for users. It is a process that is done early on in the design process, often before any sketches or wireframes have been created. This allows designers to gain a deep understanding of their users and create solutions that meet their needs in the best possible way.\"}),/*#__PURE__*/e(\"p\",{children:\"In addition to UX designers, empathy mapping can also be used by other professionals, such as marketers, to gain insight into the experiences and motivations of their target audience. By understanding what users say, think, do, and feel, marketers can create marketing campaigns that are more effective and resonate with their target audience.\"}),/*#__PURE__*/e(\"p\",{children:\"Empathy mapping is an important part of the design process and should be considered by any professional who is looking to create user-centered solutions.\"}),/*#__PURE__*/e(\"p\",{children:\"\u201CThanks for reading my blog on empathy mapping, any feedback/comments/resources are always appreciated!\u201D \u2764\uFE0F\"})]}),[c]:\"03/02/2023\",[l]:h({src:\"https://framerusercontent.com/images/nGGLdAkxA6tfdNtHBfD14XFhyM.webp?scale-down-to=1024\"},\"\"),[d]:\"Process\"},{index:1,id:\"q2wi1mHPf\",[s]:\"My favourite Figma plugins\",[n]:\"fav-figma-plugins\",[o]:/*#__PURE__*/t(r.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Unsplash\"}),/*#__PURE__*/e(\"p\",{children:\"This plugin allows users to easily browse and insert high-quality images from the Unsplash library directly into their Figma designs. Users can search for specific keywords, filter by category, and select images to quickly enhance their designs.\"}),/*#__PURE__*/e(\"h2\",{children:\"Artboard Mockups\"}),/*#__PURE__*/e(\"p\",{children:\"The Artboard Mockups plugin for Figma allows users to effortlessly transform their Figma designs into realistic mockups with customizable templates, realistic rendering, and a streamlined workflow, all within the familiar Figma interface.\"}),/*#__PURE__*/e(\"h2\",{children:\"Morph\"}),/*#__PURE__*/e(\"p\",{children:\"Morphh, a powerful Figma plugin for creating stunning effects with ease. With Morphh, designers can add effects like Skeuomorph, Neon, Glitch, Reflection, Glass, Gradient, and more directly within Figma. With one-click transformation, adjusting properties, and the ability to mix and match effects, Morphh offers endless creative possibilities. Best of all, it's completely free to use, making it the perfect tool for enhancing your Figma designs.\"}),/*#__PURE__*/e(\"h2\",{children:\"Animate\"}),/*#__PURE__*/e(\"p\",{children:\"Animate is a plugin that enables designers to create interactive prototypes directly within Figma. It offers a range of animation options, including transitions, hover effects, and scroll animations, allowing designers to bring their designs to life and test user interactions more effectively\"})]}),[c]:\"12/02/2024\",[l]:h({src:\"https://framerusercontent.com/images/pP76wHMrv2GG0DaOmvoCEkkQK4Q.jpg?scale-down-to=1024\"},\"\"),[d]:\"Tools\"},{index:2,id:\"XyZ39wnkN\",[s]:\"My Wireframe Process\",[n]:\"wireframe-process\",[o]:/*#__PURE__*/t(r.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"What are wireframes?\"}),/*#__PURE__*/e(\"p\",{children:\"Wireframes serve as the skeletal framework of a digital interface, outlining the basic structure and functionality of a website or application. They are low-fidelity representations, focusing on layout, navigation, and content placement without incorporating design elements like colors, images, or fonts. Essentially, wireframes provide a blueprint for designers and stakeholders to visualize the user interface and ensure alignment with project objectives.\"}),/*#__PURE__*/e(\"h2\",{children:\"Why you should use wireframes in your design process\"}),/*#__PURE__*/e(\"p\",{children:\"Integrating wireframes into the design process offers numerous benefits. Firstly, they facilitate communication and collaboration among team members, allowing for clear visualization and understanding of the project's direction. Wireframes also enable early feedback from clients and stakeholders, helping to identify potential issues and iterate on design concepts efficiently. Additionally, wireframes streamline the development process by providing developers with a clear roadmap for implementation, reducing ambiguity and ensuring consistency across the final product.\"}),/*#__PURE__*/e(\"h2\",{children:\"Breaking down my process\"}),/*#__PURE__*/t(\"p\",{children:[\"My wireframe process begins with thorough research and analysis of user needs, project goals, and industry trends. This initial phase lays the foundation for creating wireframes that address specific user requirements and business objectives. Next, I sketch rough layouts and workflows, focusing on usability and accessibility. Once the basic structure is established, I transition to digital wireframing tools like Figma or Adobe XD to refine the design and incorporate feedback from stakeholders. \",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Throughout the process, I prioritize simplicity, clarity, and user-centered design principles, ensuring that the final wireframes effectively communicate the intended user experience.In conclusion, wireframes play a crucial role in the design process, serving as a valuable tool for conceptualizing, communicating, and refining digital interfaces. By incorporating wireframes into your design workflow, you can streamline collaboration, gather valuable feedback, and ultimately create more intuitive and engaging user experiences.\"]})]}),[c]:\"09/08/2022\",[l]:h({src:\"https://framerusercontent.com/images/7sBd0OoqrmZ4Z7hNcJok6RkmnbE.jpg?scale-down-to=1024\"},\"\"),[d]:\"Process\"}];for(let e of p)Object.freeze(e);i(p,{C9XMQPpe_:{defaultValue:\"\",title:\"Title\",type:a.String},aHKgBzPwX:{title:\"Slug\",type:a.String},aEWimqxU5:{defaultValue:\"\",title:\"Content\",type:a.RichText},sedcS5gHS:{defaultValue:\"\",placeholder:\"09/09/2022\",title:\"Date\",type:a.String},DX4bID_RX:{__defaultAssetReference:\"data:framer/asset-reference,v29H4qy8DzLQob2S6wIReWlWgCU.jpg?originalFilename=unknown.jpg&preferredSize=small\",title:\"Article Image\",type:a.ResponsiveImage},CPf8zkTRJ:{defaultValue:\"\",placeholder:\"Category\",title:\"Category\",type:a.String}}),p.displayName=\"Blog\";export default p;export const enumToDisplayNameFunctions={};export const utils={async getSlugByRecordId(e,t){var i;return null===(i=p.find(t=>t.id===e))||void 0===i?void 0:i[n];},async getRecordIdBySlug(e,t){var i;return null===(i=p.find(t=>t[n]===e))||void 0===i?void 0:i.id;}};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"data\",\"name\":\"data\",\"annotations\":{\"framerCollectionId\":\"eYjVamKDM\",\"framerContractVersion\":\"1\",\"framerRecordIncludedLocalesKey\":\"includedLocales\",\"framerEnumToDisplayNameUtils\":\"2\",\"framerData\":\"\",\"framerCollectionUtils\":\"1\",\"framerRecordIndexKey\":\"index\",\"framerRecordIdKey\":\"id\",\"framerSlug\":\"aHKgBzPwX\"}},\"enumToDisplayNameFunctions\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"utils\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "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",
  "names": ["s", "o", "c", "l", "d", "h", "e", "t", "p", "u", "x", "addPropertyControls", "ControlType", "eYjVamKDM_default", "enumToDisplayNameFunctions", "utils", "__FramerMetadata__"]
}