{"id":21119,"date":"2021-03-30T13:29:02","date_gmt":"2021-03-30T12:29:02","guid":{"rendered":"https:\/\/marvelapp.com\/blog\/?p=21119"},"modified":"2023-06-27T00:10:26","modified_gmt":"2023-06-26T23:10:26","slug":"4-ways-customer-support-teams-can-use-prototypes","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/","title":{"rendered":"4 Ways Customer Support teams can use Prototypes"},"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\">You wouldn\u2019t be alone if you thought prototypes were just for designers. We used to think this too! But since all a prototype is, is a mockup of a digital experience, it turns out there are some interesting use-cases by the non-designers in our Customer Support Team.<\/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 way we use prototypes in Customer Support at Marvel is very similar to how they\u2019re used by designers, just in a different context. We use them to communicate concepts in a visual, clear and interactive way with users.<\/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\">Let\u2019s get into how we use prototypes to enhance our user interactions, and how our own Support Team uses prototypes.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">User walk-throughs &amp; troubleshooting<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of the most common ways we use prototypes in our day-to-day interactions with users is sending a walk-through prototype to solve a customer issue or to explain a concept. It helps us communicate clearly what we mean to the user and works great for step-by-step tutorials.<\/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\">We use hotspots as<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/floify.com\/blog\/how-to-build-trust-and-credibility-with-your-customers\"> a simple guiding tool<\/a> to show users where to click and how they can interact with Marvel to solve their issue.<\/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\">We\u2019ve found that using a prototype to communicate cuts to the chase to remove ambiguity, and solve the issue for the user. Creating a prototype in Marvel only takes a couple of minutes, so it usually means we can solve the issue for the user much more quickly than over several back and forth emails.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Inspiration on what can be built using Marvel<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another way we use prototypes in Support is to showcase what our product can do! We\u2019ll often send <a class=\"link link--blue fontWeight-4\"title=\"example prototypes like these\" href=\"https:\/\/marvelapp.com\/examples\">example prototypes like these<\/a> to show users the creative possibilities of prototyping in Marvel.<\/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\">Example prototypes are especially good for users who are starting out who could do with some project inspo. The example prototypes can be cloned to their own workspace if they want to copy any of the elements to give them a head start on their project.<\/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\">Showcasing the product can be equally useful for long-time Marvel users too! We might be able to introduce them to a new feature they haven\u2019t seen yet. Or if they\u2019re exploring what a paid feature can do, sending them a prototype means they can try out the feature without committing to it first.<\/p>\n<div id='gallery-1' class='gallery galleryid-21119 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=\"1440\" height=\"712\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Examples@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Examples@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Examples@2x-600x297.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Examples@2x-768x380.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Embedded prototypes in our Help Centre<\/h3>\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 <a class=\"link link--blue fontWeight-4\"title=\"Help Centre\" href=\"https:\/\/help.marvelapp.com\/hc\/en-us\">Help Centre<\/a> is a searchable resource answering the most common issues in Marvel. It gives users the ability to access the answers they need right away, rather than having to wait for a reply from a human (lightning fast that we are \ud83d\ude09\u26a1\ufe0f).<\/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\">Prototypes are very useful in the Help Centre. They can act as tutorials, demos, or a showcase for new features. They\u2019re a great way to bring text and static images to life, in a way that feels real to the user.<\/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\">In our Help Centre, we have embedded example prototypes into help articles wherever we think it adds clarity, to show users what they can make, and how they can solve problems with Marvel.<\/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\">One of my favourite examples is <a class=\"link link--blue fontWeight-4\"title=\"How to use animated GIFs in your prototypes\" href=\"https:\/\/help.marvelapp.com\/hc\/en-us\/articles\/360017022798-How-to-use-animated-GIFs-in-your-prototypes\">How to use animated GIFs in your prototypes<\/a>, which showcases a spiffy prototype with GIFs \ud83e\udd91<\/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\">Another good example is the article on <a class=\"link link--blue fontWeight-4\"title=\"Layers\" href=\"https:\/\/help.marvelapp.com\/hc\/en-us\/articles\/209299205-Layers-Add-modals-and-sidebar-menus\">Layers<\/a>, where the embedded prototype shows how you can use layers and sidebars to create a seamless shopping experience.<\/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\">Many of our Help Centre articles include videos too. But we\u2019ve found prototypes are often even better than videos because they are interactive. Allowing the user to click through a prototype is a level up from passively watching a video. It\u2019s more engaging, and more fun!<\/p>\n<div id='gallery-2' class='gallery galleryid-21119 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=\"1440\" height=\"712\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Help@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Help@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Help@2x-600x297.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Help@2x-768x380.jpg 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Redesigning our Help Centre<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Last but not least, we used prototypes as part of the redesign of our Help Centre. Prototypes are a great way to showcase a new design to your users, even if the product is not completely ready. They get to have a first glimpse of your product and input to the final outcome. While you get input from users to improve your design before shipping!<\/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\">When we decided to redesign our Help Centre, we followed the same process as if it were a page or feature in Marvel being redesigned. Like any good design process, we followed a systematic step-by-step process, involving prototypes:<\/p>\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>Identify user pain points<\/li>\n<li>Design wireframe prototype in Marvel<\/li>\n<li>Use Marvel User Testing to collect feedback<\/li>\n<li>Design low-fidelity prototype in Marvel based on feedback<\/li>\n<li>User test again<\/li>\n<li>Design high-fidelity prototype for final approval<\/li>\n<li>Use Developer Handoff to share the design with others<\/li>\n<li>Commit to code!<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Both Prototyping and User Testing were crucial aspects of this design process, because they enabled the quick and easy collection of user feedback. The Marvel Support Team were also involved as testers! It was fun to get to test the new Help Center and identify any wins and challenges to ensure it would be fit for purpose for our users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You wouldn\u2019t be alone if you thought prototypes were just for designers. We used to think this too! But since all a prototype is, is a mockup of a digital experience, it turns out there are some interesting use-cases by the non-designers in our Customer Support Team. The way we use prototypes in Customer Support at Marvel is very similar&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":289,"featured_media":21122,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429],"tags":[],"class_list":["post-21119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-tips-and-tricks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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\/4-ways-customer-support-teams-can-use-prototypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Ways Customer Support teams can use Prototypes | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"You wouldn\u2019t be alone if you thought prototypes were just for designers. We used to think this too! But since all a prototype is, is a mockup of a digital experience, it turns out there are some interesting use-cases by the non-designers in our Customer Support Team. The way we use prototypes in Customer Support at Marvel is very similar... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/\" \/>\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-03-30T12:29:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-26T23:10:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Blog@2x-3-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\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=\"3 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\/4-ways-customer-support-teams-can-use-prototypes\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/03\/Blog@2x-3-scaled.jpg\",\"width\":2048,\"height\":896},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/\",\"name\":\"4 Ways Customer Support teams can use Prototypes | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#primaryimage\"},\"datePublished\":\"2021-03-30T12:29:02+00:00\",\"dateModified\":\"2023-06-26T23:10:26+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/ff8730cdb62623ad2f5bf97f3cb24590\"},\"headline\":\"4 Ways Customer Support teams can use Prototypes\",\"datePublished\":\"2021-03-30T12:29:02+00:00\",\"dateModified\":\"2023-06-26T23:10:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#primaryimage\"},\"articleSection\":\"Product Tips &amp; Tricks\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/4-ways-customer-support-teams-can-use-prototypes\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/ff8730cdb62623ad2f5bf97f3cb24590\",\"name\":\"Lydia Koh\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b4a828fa7d882c7cecded83a0fd21b4f4bcdc4be09bb0777dc690240d461760?s=96&d=mm&r=g\",\"caption\":\"Lydia Koh\"},\"description\":\"Remote Support @ Marvel\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21119","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\/289"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=21119"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21122"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=21119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=21119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=21119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}