{"id":21131,"date":"2021-04-15T13:14:47","date_gmt":"2021-04-15T12:14:47","guid":{"rendered":"https:\/\/marvelapp.com\/blog\/?p=21131"},"modified":"2023-12-22T13:39:20","modified_gmt":"2023-12-22T13:39:20","slug":"how-to-go-from-idea-to-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/","title":{"rendered":"How to go from idea to 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\">Starting a project can be a daunting feat for even the most skilled designer, it\u2019s a time consuming and often difficult task. Having had the \u2018light bulb\u2019 moment but knowing what to do with it can be tricky.<\/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\">While creating products is a continuous process, the design process can help you test and validate the effectiveness of an initial idea. It also enables you to work collaboratively and involve cross functional teams, customers and bring lots of voices into design.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Define your customer problem<\/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 main starting point for your design process should always be to define the problem that you are trying to solve, but also understand the problem from the perspective of your customer. There are often many different perspectives you\u2019ll have to take into account dependant on how large your customer audience is.<\/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\">To ensure that you\u2019re approaching your design process with the very best understanding of what the problem is and why you are trying to solve it, it\u2019s important in these early stages to complete as much customer research as possible. This could involve customer surveys, interviewing prospects and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.indexbox.io\/search\/market-research\/\">completing market research<\/a> of competitors\/companies that solves a similar problem you\u2019ve identified.<\/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 more data you have at the beginning, the more you define the specifics of the problem you\u2019re solving and you begin to understand what the opportunities are in the market, where a competitor falls short or if the challenge is already solved somewhere else.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Validate your hypotheses<\/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\">Once you\u2019ve defined the details of the problem you\u2019re trying to solve, next comes one of many moments of validation. This is the time to talk with potential customers to receive feedback and validate that your ideas solve the problems that you\u2019ve defined. There are multiple ways that you could conduct this customer feedback:<\/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>Face to face interviews<\/li>\n<li>Remote interviews using tools like Zoom, Google Meet, Skype, Webex etc<\/li>\n<li>Surveys from TypeForm, Google Forms and SurveyMonkey etc<\/li>\n<li>Social polls on popular forums such as Linkedin, Facebook, Twitter &amp; Instagram<\/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\">Once you\u2019ve completed the validation with your potential customers, it\u2019s a great opportunity to create some Customer Personas. Personas help you to identify your different types of users. They create a representation of that customer group and support your future decisions being based on a persona instead of an individual 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\">Who are the people you should be targeting? How are they different, how differently would they use a product?<\/p>\n<div id='gallery-1' class='gallery galleryid-21131 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=\"808\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Interview@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Interview@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Interview@2x-600x337.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/User-Interview@2x-768x431.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\">Prototyping your ideas<\/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\">Prototyping will enable you to demostrate the possibilites of your design through mock ups that you share and adjust 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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Start with a User-Flow -<\/strong> Draw out a birds eye view of how your users might interact with your product, how will they achieve specific goals and what paths will they need to take to achieve these? This will help you plan out the designs you'll need. You can shape the journeys by following the typical shapes you\u2019d find in flow charts:<\/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><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Rectangles<\/strong>: represent different screens<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Diamonds<\/strong>: represent decisions the user will make<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Arrows<\/strong>: display the connections between the screens and the decisions<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating Wireframes -<\/strong> Wireframes are a non negotiable step in your journey to creating your prototype, they will give you an idea of what your users journey is going to look and feel like. You can design directly in the Marvel Design Tool or, get the pen and paper out with a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/sketchpad\">Marvel Sketch Pad<\/a> to draw your designs and upload to Marvel by taking pictures through the Marvel App.<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Bringing your Wireframes to life -<\/strong> Once you\u2019ve got your wireframes created you can move into the <a class=\"link link--blue fontWeight-4\"title=\"Prototyping Editor in Marvel\" href=\"https:\/\/marvelapp.com\/blog\/prototyping-basics-with-marvel\/\">Prototyping Editor in Marvel<\/a> and start to link the designs together using Hotspots, Transitions and Actions to make your prototype feel &amp; look more realistic.<\/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\">Not all of your ideas have to end up becoming high fidelity prototypes, you could keep the <a class=\"link link--blue fontWeight-4\"title=\"design paper based\" href=\"https:\/\/marvelapp.com\/blog\/the-magic-of-paper-prototyping\/\">design paper based<\/a> and be content with low fidelity for some parts of the solution you\u2019re trying to create. Whatever you decide, prototyping your ideas will give you the opportunity to try out lots of iterations, without the need to invest in developer resource, keeping costs down.<\/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\">Validate your prototype by sharing with others for feedback. Use the public share URL from a Marvel prototype or use <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ballparkhq.com\/?utm_campaign=Ballpark%20SEO&amp;utm_source=marvelblog\">Ballpark<\/a> to gain user feedback and improvements.<\/p>\n<div id='gallery-2' class='gallery galleryid-21131 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=\"806\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Wireframing@2x.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Wireframing@2x.jpg 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Wireframing@2x-600x336.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Wireframing@2x-768x430.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\">Developing your Minimum Viable Product (MVP)<\/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\">An MVP is a product in smallest and least feature rich version of an idea, it\u2019s purely a version of a solution that you\u2019ve created to demonstrate the product you\u2019ve created. It\u2019s part of the process of building a new product to test and validate how a target customer base would utilise it. Having this smaller feature set allows quicker iteration to happen with feedback from people early on. Once this is complete the fuller product with a wider range of features can be built.<\/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\">Once you're happy with your prototype, a MVP willl able to launch as quickly on a small budget and continue the iterative process of building, testing and launching new features.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Design Thinking Workshops<\/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\">We built Marvel to allow everyone to opportunity to sit at the designers table, why not start getting to grips with the design process by running your workshop using our free <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/workshops\">Design Thinking Workshop Kit.<\/a> This Workshop Kit will give you and your team a simple, inclusive and reusable approach for running sessions using the basic principles of Design Thinking. Learn how to identify, prototype and test any problem, in an interactive and fun session.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting a project can be a daunting feat for even the most skilled designer, it\u2019s a time consuming and often difficult task. Having had the \u2018light bulb\u2019 moment but knowing what to do with it can be tricky. While creating products is a continuous process, the design process can help you test and validate the effectiveness of an initial idea&#8230;. <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":360,"featured_media":21132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[500],"tags":[],"class_list":["post-21131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process"],"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=\"The design process can help you test and validate the effectiveness of an initial idea, whilst working collaboratively and involving cross functional teams to bring lots of voices into design.\" \/>\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\/how-to-go-from-idea-to-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to go from idea to design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The design process can help you test and validate the effectiveness of an initial idea, whilst working collaboratively and involving cross functional teams to bring lots of voices into design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-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-04-15T12:14:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-22T13:39:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\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\/how-to-go-from-idea-to-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/04\/Header.jpg\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/\",\"name\":\"How to go from idea to design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#primaryimage\"},\"datePublished\":\"2021-04-15T12:14:47+00:00\",\"dateModified\":\"2023-12-22T13:39:20+00:00\",\"description\":\"The design process can help you test and validate the effectiveness of an initial idea, whilst working collaboratively and involving cross functional teams to bring lots of voices into design.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eca6150f5c8b6dd6ffd4de4d9e390ef4\"},\"headline\":\"How to go from idea to design\",\"datePublished\":\"2021-04-15T12:14:47+00:00\",\"dateModified\":\"2023-12-22T13:39:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#primaryimage\"},\"articleSection\":\"Design Process\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/how-to-go-from-idea-to-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eca6150f5c8b6dd6ffd4de4d9e390ef4\",\"name\":\"Rich Crossley\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4015e27b9c2deb3562f8438ba2259d2ccfd95b020bafd89636e1ee92c1315fba?s=96&d=mm&r=g\",\"caption\":\"Rich Crossley\"},\"description\":\"Customer Experience Manager at Marvel\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21131","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\/360"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=21131"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21131\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21132"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=21131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=21131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=21131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}