{"id":129,"date":"2026-06-24T23:38:37","date_gmt":"2026-06-24T13:38:37","guid":{"rendered":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/"},"modified":"2026-06-24T23:43:39","modified_gmt":"2026-06-24T13:43:39","slug":"ui-ux-playbook-ux-tools-deliverables","status":"publish","type":"post","link":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/","title":{"rendered":"UI\/UX Playbook Part 5: UX Tools, Technologies &#038; Deliverables"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is Part 5, the final part of the <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-complete-framework\/\">complete UI\/UX Playbook<\/a>. With principles, strategy, UI tactics, and governance covered, we arrive at the practical toolkit: the communication tools, technologies, and deliverables used to design the best UX. Creating great experiences requires thought experiments that need to be documented and shared \u2014 and these deliverables are how that thinking is captured, communicated, and tested.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Note on Standards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The biggest challenge with UX deliverables is that there are no universally fixed standards. You&#8217;ll find many terminology variations and definitions, and a lot of differing opinions on structure, format, timing, and naming. This part isn&#8217;t meant to be an exhaustive list or the single &#8220;right way&#8221; to create these outputs \u2014 instead, it offers an overview and examples of how each deliverable can be created, and with which kinds of tools. (The classic reference catalogue here is usability.gov&#8217;s methods index.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Personas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Personas target and define users \u2014 building empathy, understanding goals, wishes, and limitations, and creating the user and user groups for a design. They give users a name, face, and characteristics to keep their definitions front and centre throughout the design experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The key benefits: personas help stakeholders and leaders focus their decisions; they inform classification, interface behaviours, and labelling; designers can tailor the experience&#8217;s look and feel to them; project managers and developers decide which approaches to use based on user behaviour; and UX analysts can build a content strategy to target each audience. Develop personas at the start of every project \u2014 they inform functionality, reveal gaps, and highlight new opportunities. The goal isn&#8217;t to represent every possible user but to focus on the core needs of the main users; three or four personas is best, and they should be updated often as innovation and competition change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User Journey Maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A user journey map is a visual interpretation of the overall story of a user&#8217;s interaction with an organisation, service, product, or brand over time and across channels. Its core components are personas, a timeline, emotion (the peaks and crashes of frustration, anxiety, happiness), touchpoints (the things the user does), and channels (where interaction happens \u2014 website, app, call centre, in-store).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Journey maps help you understand your user better by highlighting emotions and pain points; help teams &#8220;stand in the user&#8217;s shoes&#8221;; identify specific operational inefficiencies; reveal white space where you can differentiate your experience; and provide insight into the user&#8217;s larger motivations and triggers. They should be created at the start of a project, right after persona development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User Story Maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Created as part of Agile methodology, a user story map contains the user stories that make up various product features and future releases. The map tells a big story about the experience you&#8217;re trying to build. At the top are epics \u2014 &#8220;really big stories&#8221; without complex detail \u2014 which are then broken into smaller stories or &#8220;user tasks.&#8221; (User story maps also play a central role in governance, covered in <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-governance\/\">Part 4<\/a>.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Arrange the map chronologically left to right (earlier actions left, later actions right) and vertically by priority within themes \u2014 items toward the bottom can be addressed in later sprints. Walk through your map often to test it; it should evolve as sprints progress and new features and gaps are identified. Common digitisation and collaboration tools include Jira plugins, StoriesOnBoard, FeatureMap, Sketch boards, Figma\/FigJam, Miro, Mural, and Storyboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User Flows &amp; DoGo Maps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">User flows and DoGo maps are useful for documenting complex experiences that don&#8217;t have a single direct path. A <strong>user flow<\/strong> differs from a user story because decisions are mapped and it takes a tree shape rather than a grid \u2014 sometimes called a process diagram or process flow. User flows show the user&#8217;s behaviour as they move through the system, support &#8220;branching&#8221; (decision splits), and help clarify the desired end goal and where a user goes after facing a choice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>DoGo map<\/strong> is a lightweight, scalable information-architecture tool that gives a high-level understanding of a site&#8217;s classification and can easily be folded into a development team&#8217;s UX testing and daily workflow \u2014 especially in lean and agile environments. Each DoGo card documents a node (a page or view) with five key pieces of information: <strong>Name<\/strong> (descriptive label for the screen), <strong>Reference No<\/strong> (for quick reference), <strong>Fields<\/strong> (important form fields), <strong>Do<\/strong> (actions for the screen), and <strong>Go<\/strong> (neighbours, or where you can go from this node).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Taxonomy Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In UX, taxonomy design is how content and data are organised within an experience \u2014 the &#8220;parent and child&#8221; navigation relationships. It&#8217;s sometimes called a site map, navigation map, information architecture (IA) map, or site flow. It typically consists of a diagram that organises website pages or data into a hierarchy, making the basic structure and navigation easy to visualise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Taxonomy design goes hand in hand with content strategy, defines the conceptual models used to plan and structure an experience, influences wireframes and navigation, helps create &#8220;boxes&#8221; for content, and can be tested to see how easily users find what they&#8217;re looking for. Traditional site maps often need an additional set of documents called user flows to capture branching and user decisions \u2014 and a DoGo map is a good solution for capturing both the site map and the user flow together. Example tools include Treejack and UserZoom. This is the practical application of <a href=\"https:\/\/www.gokhanmeric.com\/blog\/information-architecture-2026-how-to-structure-digital-products-that-scale\/\">information architecture<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Storyboards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Storyboards are a way of graphically organising and sequencing illustrations viewed in order. Traditionally used to pre-visualise a film or animation, they&#8217;re rapidly gaining interest in experience design because they can combine separate elements like person, situation, location, and emotion \u2014 making it about the entire experience, not just the user interface. They can be done in many styles, from stick figures to comics to a Pixar-like style. As a modelling tool, a storyboard helps bring together personas, user stories, and various constraints; it helps review a scenario as a persona and see the triggers, channels, process, and decisions along the way; and it can test concepts, enable team brainstorming, surface more ideas, and examine them for authenticity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wireframes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wireframes are skeletal diagrams representing the basic visual structure of a user interface \u2014 the page layout and arrangement of content and interface elements. They typically lack typographic style, graphics, and colour; they focus on what a screen <em>does<\/em>, not how it looks. Don&#8217;t confuse them with the final design \u2014 they aim to quickly explore UI options early in a process without wasting time on colour or style.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Low-fidelity wireframes resemble a rough sketch and lack detail and interactions, giving a fast UI perspective. High-fidelity wireframes are often used for documentation and early user testing, with more detail that more closely matches the final product. They often use placeholder content or &#8220;lorem ipsum&#8221; text. Benefits: they let the team test and improve navigation; preview how content is arranged without spending time on colour, typography, or images; examine and rapidly improve interface design including web forms and interactive elements; evaluate the overall effectiveness of a page layout; and identify development and programming requirements. Tools range from a single sheet of white paper to Sketch, Photoshop, Illustrator, Balsamiq, UXPin, Axure, Figma, and Keynote.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design Mockups<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Design mockups are the visual design layer placed on top of wireframes. By the house metaphor: if a wireframe is the technical drawing of a house, mockups are the scale models built from those drawings. They&#8217;re typically high-fidelity, but because they&#8217;re static (they don&#8217;t pull data), content and components may be representations. Static design examples let UX designers refine details like icons, interactions, and styles, and creating mockups is an important part of building a pattern library because the designer needs to see how the orchestra of elements within a page works together.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A well-designed UI benefits from a design framework of consistent colours, elements, and modules \u2014 and a pattern library or style guide helps document these for consistency and efficiency. When designing responsive experiences, designers often target several breakpoints, which has a multiplier effect on workload as the number of required screens grows. Tools like Figma are frequently preferred because they let you quickly copy and modify these designs. Good UI mockups can produce quality prototypes. Example tools: Sketch, Figma, Adobe XD, Illustrator, Photoshop, Marvel, InVision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design System<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A design system \u2014 a living style guide \u2014 creates a consistent user experience with reusable UI elements, builds a reusable framework for efficiency in design elements, makes design styles easier to maintain through pattern libraries, and encourages cross-functional skills between design and development processes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI patterns are standard, reusable ways of solving UI challenges. The library is a set of patterns and HTML components with documented guidelines for usage that can be used across the whole site. It&#8217;s an efficient approach to building pages by leveraging these reusable components, contributing to a consistent, &#8220;on-brand&#8221; look and feel. Example library components include the grid system, typography, form elements, navigation, tables, lists, icons, animations, search and results, breadcrumbs, moveable panels, carousels, error and success messages, media galleries, tooltips, feedback, dialogs, date selectors, shopping carts, and product comparisons. Material UI and Apple&#8217;s design system are well-known references. This is the heart of the work I detail in <a href=\"https:\/\/www.gokhanmeric.com\/blog\/building-scalable-design-system-figma-lessons-enterprise-startup\/\">building a scalable design system in Figma<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prototypes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prototypes are interactive models that can have varying degrees of fidelity \u2014 from low-fidelity paper prototypes to high-fidelity, clickable, polished presentations. A prototype is an excellent method for early UX testing and analysis: you can gather insights through your defined usability-testing user groups, detect many major problems before a project enters development (reducing the development burden), and reach the stage where you decide \u2014 and effectively &#8220;shake hands&#8221; with the user on \u2014 the final form of the design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A prototype is not the final product; in most cases it won&#8217;t even look like it, and it doesn&#8217;t need to be pixel-perfect. It&#8217;s a simulation of a final product \u2014 it can test a product&#8217;s flow or sometimes serve as a sales tool to align stakeholders on a future vision. Not every element in a prototype needs to be clickable, but using tooltip descriptions for certain features is a good way to communicate the intent behind specific decisions. Example tools: Figma, UXPin, InVision, Justinmind, ProtoPie, Adobe XD, Sketch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deliverables Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Personas help you understand your main audiences. User journey maps are the flows that let you &#8220;walk in the user&#8217;s shoes.&#8221; User story maps are the collection of stories or tasks a user must complete to reach a goal. User flows and DoGo maps are two ways to visualise a non-linear experience flow. Storyboards are great for visualising an experience from the user&#8217;s point of view. Taxonomies or site maps organise content and data. Wireframes organise site structure and vary in fidelity. Design mockups are the design layer added to wireframe structure. The design system is the collection of elements or modules that create an experience. Collaboration and communication tools support teamwork and are an important aspect of creating UX. And prototypes are not the final product, but they allow early testing of the final product&#8217;s features. User testing and research can be conducted in many ways with many tools \u2014 just make sure you prepare accordingly and summarise the findings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Playbook, Complete<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">That completes the five-part UI\/UX Playbook \u2014 from <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-principles-foundations\/\">principles<\/a>, through <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-strategy\/\">strategy<\/a> and <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ui-tactics\/\">UI tactics<\/a>, to <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-governance\/\">governance<\/a> and this final toolkit. Together they form the complete methodology I developed for putting users at the centre of every digital product.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Previous: <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-governance\/\">\u2190 Part 4 \u2014 UX Governance<\/a> \u00b7 Back to: <a href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-complete-framework\/\">The Complete UI\/UX Playbook Overview<\/a><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>This playbook was developed and authored by G\u00f6khan Meri\u00e7, originally as the Ar\u00e7elik DigITal UI\/UX Playbook. <a href=\"https:\/\/www.gokhanmeric.com\/#contact\">Get in touch.<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part 5 of the UI\/UX Playbook: the complete UX toolkit \u2014 personas, user journey maps, user story maps, user flows &amp; DoGo maps, taxonomy design, storyboards, wireframes, design mockups, design systems, and prototypes, with the tools to build each.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[32,31,33,121,117],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-ui-ux-playbook","tag-design-systems","tag-figma","tag-information-architecture","tag-personas-journey-maps","tag-ux-deliverables"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UI\/UX Playbook Part 5: UX Tools, Technologies &amp; Deliverables | G\u00f6khan Meri\u00e7<\/title>\n<meta name=\"description\" content=\"Part 5 of the UI\/UX Playbook: the complete UX toolkit \u2014 personas, journey maps, story maps, user flows, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI\/UX Playbook Part 5: UX Tools &amp; Deliverables | G\u00f6khan Meri\u00e7\" \/>\n<meta property=\"og:description\" content=\"The complete UX toolkit: personas, journey maps, story maps, user flows &amp; DoGo maps, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/\" \/>\n<meta property=\"og:site_name\" content=\"G\u00f6khan Meri\u00e7\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-24T13:38:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-24T13:43:39+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"UI\/UX Playbook Part 5: UX Deliverables\" \/>\n<meta name=\"twitter:description\" content=\"The complete UX toolkit: personas, journey maps, wireframes, mockups, design systems, prototypes, and more.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#\\\/schema\\\/person\\\/9b8dc2c7ea80d8c610a72ef42dc4aca9\"},\"headline\":\"UI\\\/UX Playbook Part 5: UX Tools, Technologies &#038; Deliverables\",\"datePublished\":\"2026-06-24T13:38:37+00:00\",\"dateModified\":\"2026-06-24T13:43:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/\"},\"wordCount\":1934,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#organization\"},\"keywords\":[\"Design Systems\",\"Figma\",\"Information Architecture\",\"Personas &amp; Journey Maps\",\"UX Deliverables\"],\"articleSection\":[\"UI\\\/UX Playbook\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/\",\"url\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/\",\"name\":\"UI\\\/UX Playbook Part 5: UX Tools, Technologies & Deliverables | G\u00f6khan Meri\u00e7\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#website\"},\"datePublished\":\"2026-06-24T13:38:37+00:00\",\"dateModified\":\"2026-06-24T13:43:39+00:00\",\"description\":\"Part 5 of the UI\\\/UX Playbook: the complete UX toolkit \u2014 personas, journey maps, story maps, user flows, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/ui-ux-playbook-ux-tools-deliverables\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI\\\/UX Playbook Part 5: UX Tools, Technologies &#038; Deliverables\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/\",\"name\":\"G\u00f6khan Meri\u00e7\",\"description\":\"UI\\\/UX Architect Life Time Learning Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#organization\",\"name\":\"G\u00f6khan Meri\u00e7\",\"url\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/favicon.png\",\"contentUrl\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/favicon.png\",\"width\":32,\"height\":32,\"caption\":\"G\u00f6khan Meri\u00e7\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/uiuxarchitect\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/#\\\/schema\\\/person\\\/9b8dc2c7ea80d8c610a72ef42dc4aca9\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/uiuxarchitect\"],\"url\":\"https:\\\/\\\/www.gokhanmeric.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI\/UX Playbook Part 5: UX Tools, Technologies & Deliverables | G\u00f6khan Meri\u00e7","description":"Part 5 of the UI\/UX Playbook: the complete UX toolkit \u2014 personas, journey maps, story maps, user flows, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/","og_locale":"en_US","og_type":"article","og_title":"UI\/UX Playbook Part 5: UX Tools & Deliverables | G\u00f6khan Meri\u00e7","og_description":"The complete UX toolkit: personas, journey maps, story maps, user flows & DoGo maps, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.","og_url":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/","og_site_name":"G\u00f6khan Meri\u00e7","article_published_time":"2026-06-24T13:38:37+00:00","article_modified_time":"2026-06-24T13:43:39+00:00","author":"admin","twitter_card":"summary_large_image","twitter_title":"UI\/UX Playbook Part 5: UX Deliverables","twitter_description":"The complete UX toolkit: personas, journey maps, wireframes, mockups, design systems, prototypes, and more.","twitter_misc":{"Written by":"admin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/#article","isPartOf":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/"},"author":{"name":"admin","@id":"https:\/\/www.gokhanmeric.com\/blog\/#\/schema\/person\/9b8dc2c7ea80d8c610a72ef42dc4aca9"},"headline":"UI\/UX Playbook Part 5: UX Tools, Technologies &#038; Deliverables","datePublished":"2026-06-24T13:38:37+00:00","dateModified":"2026-06-24T13:43:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/"},"wordCount":1934,"commentCount":0,"publisher":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/#organization"},"keywords":["Design Systems","Figma","Information Architecture","Personas &amp; Journey Maps","UX Deliverables"],"articleSection":["UI\/UX Playbook"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/","url":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/","name":"UI\/UX Playbook Part 5: UX Tools, Technologies & Deliverables | G\u00f6khan Meri\u00e7","isPartOf":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/#website"},"datePublished":"2026-06-24T13:38:37+00:00","dateModified":"2026-06-24T13:43:39+00:00","description":"Part 5 of the UI\/UX Playbook: the complete UX toolkit \u2014 personas, journey maps, story maps, user flows, taxonomy, storyboards, wireframes, mockups, design systems, and prototypes.","breadcrumb":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.gokhanmeric.com\/blog\/ui-ux-playbook-ux-tools-deliverables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gokhanmeric.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI\/UX Playbook Part 5: UX Tools, Technologies &#038; Deliverables"}]},{"@type":"WebSite","@id":"https:\/\/www.gokhanmeric.com\/blog\/#website","url":"https:\/\/www.gokhanmeric.com\/blog\/","name":"G\u00f6khan Meri\u00e7","description":"UI\/UX Architect Life Time Learning Blog","publisher":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gokhanmeric.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gokhanmeric.com\/blog\/#organization","name":"G\u00f6khan Meri\u00e7","url":"https:\/\/www.gokhanmeric.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gokhanmeric.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.gokhanmeric.com\/blog\/wp-content\/uploads\/2026\/06\/favicon.png","contentUrl":"https:\/\/www.gokhanmeric.com\/blog\/wp-content\/uploads\/2026\/06\/favicon.png","width":32,"height":32,"caption":"G\u00f6khan Meri\u00e7"},"image":{"@id":"https:\/\/www.gokhanmeric.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/uiuxarchitect\/"]},{"@type":"Person","@id":"https:\/\/www.gokhanmeric.com\/blog\/#\/schema\/person\/9b8dc2c7ea80d8c610a72ef42dc4aca9","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8439acf748590a4afa155328572ffc08bf622937145359ef69d5845681ea0229?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/www.gokhanmeric.com\/blog","https:\/\/www.linkedin.com\/in\/uiuxarchitect"],"url":"https:\/\/www.gokhanmeric.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":2,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/posts\/129\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gokhanmeric.com\/blog\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}