CINXE.COM

<!DOCTYPE html><html class=no-touch lang=en-US xmlns=http://www.w3.org/1999/xhtml><head><link rel=stylesheet href=https://matthewcarlstrom.com/wp-content/cache/minify/ba505.default.include.4ad96d.css media=all><style>img.lazy{min-height:1px}</style><link href=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js as=script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel=profile href=https://gmpg.org/xfn/11><link rel=pingback href=https://matthewcarlstrom.com/xmlrpc.php><meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'><style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style><title>Android app design is a process I am very familiar with</title><meta name="description" content="Android app design I created for PodcastGuru is based heavily on Material Design. Identity and branding was also a large part of my responsibilities"><link rel=canonical href=https://matthewcarlstrom.com/portfolio/mobile-app-design/ ><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="og:title" content="Android app design is a process I am very familiar with"><meta property="og:description" content="Android app design I created for PodcastGuru is based heavily on Material Design. Identity and branding was also a large part of my responsibilities"><meta property="og:url" content="https://matthewcarlstrom.com/portfolio/mobile-app-design/"><meta property="og:site_name" content="Matthew Carlstrom Product Design"><meta property="article:publisher" content="https://www.facebook.com/matthew.carlstrom"><meta property="article:modified_time" content="2024-07-14T19:30:14+00:00"><meta property="og:image" content="https://matthewcarlstrom.com/wp-content/uploads/podcast_guru_header-copy@2x.jpg"><meta property="og:image:width" content="2400"><meta property="og:image:height" content="1256"><meta property="og:image:type" content="image/jpeg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@matyasjanos"><meta name="twitter:label1" content="Est. reading time"><meta name="twitter:data1" content="6 minutes"> <script type=application/ld+json class=yoast-schema-graph>{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/","url":"https://matthewcarlstrom.com/portfolio/mobile-app-design/","name":"Android app design is a process I am very familiar with","isPartOf":{"@id":"https://matthewcarlstrom.com/#website"},"primaryImageOfPage":{"@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/#primaryimage"},"image":{"@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/#primaryimage"},"thumbnailUrl":"https://matthewcarlstrom.com/wp-content/uploads/podcast_guru_header-copy@2x.jpg","datePublished":"2020-05-05T05:45:27+00:00","dateModified":"2024-07-14T19:30:14+00:00","description":"Android app design I created for PodcastGuru is based heavily on Material Design. Identity and branding was also a large part of my responsibilities","breadcrumb":{"@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://matthewcarlstrom.com/portfolio/mobile-app-design/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/#primaryimage","url":"https://matthewcarlstrom.com/wp-content/uploads/podcast_guru_header-copy@2x.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/podcast_guru_header-copy@2x.jpg","width":2400,"height":1256,"caption":"Matthew Carlstrom - Podcast Guru"},{"@type":"BreadcrumbList","@id":"https://matthewcarlstrom.com/portfolio/mobile-app-design/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://matthewcarlstrom.com/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https://matthewcarlstrom.com/portfolio/"},{"@type":"ListItem","position":3,"name":"Mobile App Design – Podcast Guru"}]},{"@type":"WebSite","@id":"https://matthewcarlstrom.com/#website","url":"https://matthewcarlstrom.com/","name":"Matthew Carlstrom Product Design","description":"Design for Digital Products","publisher":{"@id":"https://matthewcarlstrom.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://matthewcarlstrom.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://matthewcarlstrom.com/#organization","name":"Matthew Carlstrom UI/UX/Design","url":"https://matthewcarlstrom.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/#/schema/logo/image/","url":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","width":248,"height":106,"caption":"Matthew Carlstrom UI/UX/Design"},"image":{"@id":"https://matthewcarlstrom.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/matthew.carlstrom","https://x.com/matyasjanos","https://www.instagram.com/matyasjanos/","https://tr.linkedin.com/in/matthew-carlstrom-80a5351","https://pinterest.com/matthewcarlstrom/"]}]}</script> <link rel=dns-prefetch href=//www.googletagmanager.com><link rel=dns-prefetch href=//fonts.googleapis.com><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Feed" href=https://matthewcarlstrom.com/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Comments Feed" href=https://matthewcarlstrom.com/comments/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Mobile App Design – Podcast Guru Comments Feed" href=https://matthewcarlstrom.com/portfolio/mobile-app-design/feed/ ><style id=classic-theme-styles-inline-css>/*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}</style><style id=global-styles-inline-css>/*<![CDATA[*/:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}/*]]>*/</style><link rel=stylesheet id=uncodefont-google-css href='//fonts.googleapis.com/css?family=Nunito+Sans%3A200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CMontserrat%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CCabin%3Aregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%7CMerriweather%3A300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic&subset=vietnamese%2Clatin%2Clatin-ext%2Ccyrillic%2Ccyrillic-ext&ver=2.9.1.3' type=text/css media=all><style id=uncode-style-inline-css>@media (min-width: 960px) { .limit-width { max-width: 1200px; margin: auto;}} .menu-primary ul.menu-smart > li > a, .menu-primary ul.menu-smart li.dropdown > a, .menu-primary ul.menu-smart li.mega-menu > a, .vmenu-container ul.menu-smart > li > a, .vmenu-container ul.menu-smart li.dropdown > a { text-transform: uppercase; } #changer-back-color { transition: background-color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } #changer-back-color > div { transition: opacity 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } body.bg-changer-init.disable-hover .main-wrapper .style-light, body.bg-changer-init.disable-hover .main-wrapper .style-light h1, body.bg-changer-init.disable-hover .main-wrapper .style-light h2, body.bg-changer-init.disable-hover .main-wrapper .style-light h3, body.bg-changer-init.disable-hover .main-wrapper .style-light h4, body.bg-changer-init.disable-hover .main-wrapper .style-light h5, body.bg-changer-init.disable-hover .main-wrapper .style-light h6, body.bg-changer-init.disable-hover .main-wrapper .style-light a, body.bg-changer-init.disable-hover .main-wrapper .style-dark, body.bg-changer-init.disable-hover .main-wrapper .style-dark h1, body.bg-changer-init.disable-hover .main-wrapper .style-dark h2, body.bg-changer-init.disable-hover .main-wrapper .style-dark h3, body.bg-changer-init.disable-hover .main-wrapper .style-dark h4, body.bg-changer-init.disable-hover .main-wrapper .style-dark h5, body.bg-changer-init.disable-hover .main-wrapper .style-dark h6, body.bg-changer-init.disable-hover .main-wrapper .style-dark a { transition: color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; }</style><style id=uncode-custom-style-inline-css>@font-face { font-display:swap;}.share-button.share-inline .social.top li.social-linkedin,.share-button.share-inline .social.top li.social-xing,.share-button.share-inline .social.top li.social-facebook,.share-button.share-inline .social.top li.social-pinterest{display:none !important;} .portfolio-header .background-inner { filter:blur(8px); -webkit-filter:blur(8px); transform:scale(1.1);}</style> <script id=uncode-init-js-extra>var SiteParameters = {"days":"days","hours":"hours","minutes":"minutes","seconds":"seconds","constant_scroll":"on","scroll_speed":"2.5","parallax_factor":"0.2","loading":"Loading\u2026","slide_name":"slide","slide_footer":"footer","ajax_url":"https:\/\/matthewcarlstrom.com\/wp-admin\/admin-ajax.php","nonce_adaptive_images":"b92d9da80e","nonce_srcset_async":"c05d42ee51","enable_debug":"","block_mobile_videos":"","is_frontend_editor":"","main_width":["1200","px"],"mobile_parallax_allowed":"","listen_for_screen_update":"1","wireframes_plugin_active":"","sticky_elements":"off","resize_quality":"90","register_metadata":"","bg_changer_time":"1000","update_wc_fragments":"1","optimize_shortpixel_image":"","menu_mobile_offcanvas_gap":"45","custom_cursor_selector":"[href], .trigger-overlay, .owl-next, .owl-prev, .owl-dot, input[type=\"submit\"], input[type=\"checkbox\"], button[type=\"submit\"], a[class^=\"ilightbox\"], .ilightbox-thumbnail, .ilightbox-prev, .ilightbox-next, .overlay-close, .unmodal-close, .qty-inset > span, .share-button li, .uncode-post-titles .tmb.tmb-click-area, .btn-link, .tmb-click-row .t-inside, .lg-outer button, .lg-thumb img, a[data-lbox], .uncode-close-offcanvas-overlay, .uncode-nav-next, .uncode-nav-prev, .uncode-nav-index","mobile_parallax_animation":"","lbox_enhanced":"","native_media_player":"1","vimeoPlayerParams":"?autoplay=0","ajax_filter_key_search":"key","ajax_filter_key_unfilter":"unfilter","index_pagination_disable_scroll":"","index_pagination_scroll_to":"","uncode_wc_popup_cart_qty":"","disable_hover_hack":"","uncode_nocookie":"","menuHideOnClick":"1","smoothScroll":"","smoothScrollDisableHover":"","smoothScrollQuery":"960","uncode_force_onepage_dots":"","uncode_smooth_scroll_safe":"","uncode_lb_add_galleries":", .gallery","uncode_lb_add_items":", .gallery .gallery-item a"};</script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/init.min.js id=uncode-init-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id=jquery-core-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id=jquery-migrate-js></script> <script src="https://www.googletagmanager.com/gtag/js?id=G-LML7MQXSDH" id=google_gtagjs-js async></script> <script id=google_gtagjs-js-after>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag("set","linker",{"domains":["matthewcarlstrom.com"]}); gtag("js", new Date()); gtag("set", "developer_id.dZTNiMT", true); gtag("config", "G-LML7MQXSDH");</script> <script></script><link rel=https://api.w.org/ href=https://matthewcarlstrom.com/wp-json/ ><link rel=alternate title=JSON type=application/json href=https://matthewcarlstrom.com/wp-json/wp/v2/portfolio/4653><link rel=alternate title="oEmbed (JSON)" type=application/json+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fportfolio%2Fmobile-app-design%2F"><link rel=alternate title="oEmbed (XML)" type=text/xml+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fportfolio%2Fmobile-app-design%2F&format=xml"><meta name="generator" content="Site Kit by Google 1.140.0"><script src=//use.typekit.com/xou4kyp.js></script> <script>try{Typekit.load();}catch(e){}</script> <style>.broken_link, a.broken_link { text-decoration: line-through; }</style><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-32x32.png sizes=32x32><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-192x192.png sizes=192x192><link rel=apple-touch-icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-180x180.png><meta name="msapplication-TileImage" content="https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-270x270.png"> <noscript><style>.wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head><body data-rsssl=1 class="portfolio-template-default single single-portfolio postid-4653 style-color-lxmt-bg hormenu-position-left hmenu hmenu-position-right header-full-width main-center-align textual-accent-color menu-mobile-default mobile-parallax-not-allowed ilb-no-bounce unreg qw-body-scroll-disabled menu-sticky-fix no-qty-fx wpb-js-composer js-comp-ver-7.8 vc_responsive" data-border=0><div id=vh_layout_help></div><div class=body-borders data-border=0><div class="top-border body-border-shadow"></div><div class="right-border body-border-shadow"></div><div class="bottom-border body-border-shadow"></div><div class="left-border body-border-shadow"></div><div class="top-border style-light-bg"></div><div class="right-border style-light-bg"></div><div class="bottom-border style-light-bg"></div><div class="left-border style-light-bg"></div></div><div class=box-wrapper><div class=box-container> <script id=initBox>UNCODE.initBox();</script> <div class="menu-wrapper menu-sticky"><header id=masthead class="navbar menu-primary menu-light submenu-light style-light-original menu-with-logo"><div class="menu-container menu-hide style-color-xsdn-bg menu-borders"><div class="row-menu limit-width"><div class=row-menu-inner><div id=logo-container-mobile class="col-lg-0 logo-container middle"><div id=main-logo class="navbar-header style-light"> <a href=https://matthewcarlstrom.com/ class=navbar-brand data-minheight=20 aria-label="Matthew Carlstrom Product Design"><div class="logo-image main-logo logo-light" data-maxheight=18 style="height: 18px;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div><div class="logo-image main-logo logo-dark" data-maxheight=18 style="height: 18px;display:none;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div></a></div><div class=mmb-container><div class=mobile-additional-icons></div><div class="mobile-menu-button mobile-menu-button-light lines-button"><span class=lines><span></span></span></div></div></div><div class="col-lg-12 main-menu-container middle"><div class="menu-horizontal "><div class=menu-horizontal-inner><div class="nav navbar-nav navbar-main navbar-nav-last"><ul id=menu-main-menu class="menu-primary-inner menu-smart sm"><li id=menu-item-5287 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5287 menu-item-link"><a title=Work href=https://matthewcarlstrom.com/#my-work>Work<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-15 class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-15 menu-item-link"><a title=Blog href=https://matthewcarlstrom.com/blog/ >Blog<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-4826 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4826 menu-item-link"><a title=About href=https://matthewcarlstrom.com/about/ >About<i class="fa fa-angle-right fa-dropdown"></i></a></li></ul></div><div class="uncode-close-offcanvas-mobile lines-button close navbar-mobile-el"><span class=lines></span></div><div class="desktop-hidden menu-accordion-secondary"></div></div></div></div></div></div></div></header></div> <script id=fixMenuHeight>UNCODE.fixMenuHeight();</script> <div class=main-wrapper><div class=main-container><div class=page-wrapper><div class=sections-container> <script>UNCODE.initHeader();</script><div class="page-body style-light-bg"><div class="portfolio-wrapper portfolio-wrapper-- portfolio-wrapper--with-builder"><div class=portfolio-body><div class=post-content><div data-parent=true class="vc_row row-container" id=row-unique-0><div class="row limit-width row-parent" data-height-ratio=full><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="fontsize-576976" ><span>Podcast Guru Mobile App</span></h1><div><p>Product Design / UX Design / UI Design / Branding</p></div></div><div class=clear></div></div><div class="vc_row inverted-device-order row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-middle pos-center align_left column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="h1" ><span>Designing A Simpler Podcast Listening Experience</span></h1></div><div class=clear></div></div><div class=uncode_text_column ><p>The problem with podcast apps is that their screens are cluttered with too many features. Users just want to listen to and manage their episodes without wading through a mass of icons! My solution was to design a simpler podcast app with features centered around the user’s immediate needs. The result is a podcast player with the right features for every function on the right screen, and that has a loyal user base that has grown exponentially year over year.</p></div><span class=btn-container ><a href=#ux-design class="custom-link btn border-width-2 btn-default btn-icon-left">Read More</a></span></div></div></div></div></div><div class="wpb_column pos-bottom pos-center align_left column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 80%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img fetchpriority=high decoding=async class="wp-image-5163 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20952%201332'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/Group-2@2x.jpg width=952 height=1332 alt="Matthew Carlstrom - Podcast Guru App" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/Group-2@2x.jpg 952w, https://matthewcarlstrom.com/wp-content/uploads/Group-2@2x-768x1075.jpg 768w" data-sizes="(max-width: 952px) 100vw, 952px"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-0 data-row=script-row-unique-0 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-0"));</script></div></div></div><div data-parent=true class="vc_row row-container onepage-section" data-label="UX Design" data-name=ux-design id=row-unique-1><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="h1" ><span>UX + UI Design</span></h1><hr class=separator-break></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>Podcast app users want podcast content</span></h2></div><div class=clear></div></div><div class="uncode_text_column text-lead" ><p style="text-align: left;">It seems obvious to write in black and white, but the basic problem <a href=https://podcastguru.io target=_blank rel="noopener noreferrer">Podcast Guru</a> had to solve was how to help users subscribe and start listening to their content in 30 seconds or less. If I could design a podcast app that by-passed extraneous features and let users enjoy their content quickly, I and my team knew we would have a competitive podcast app.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-half" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-1 data-row=script-row-unique-1 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-1"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-2><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 mobile-hidden single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h3 class="h4 text-color-154755-color" ><span>Problem - It takes too long to play a podcast</span></h3></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">I designed a few iterations of first-run subscribe and play flows. They were complicated at first. I eventually simplified the flow down to this viable wireframe that shows a user could subscribe in 3 taps, and play in 4 or 5 taps.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-5326 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202400%201528'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3.jpg width=2400 height=1528 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3.jpg 2400w, https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3-1536x978.jpg 1536w, https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3-2048x1304.jpg 2048w, https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3-470x300.jpg 470w, https://matthewcarlstrom.com/wp-content/uploads/discover-play-subscribe3-768x489.jpg 768w" data-sizes="(max-width: 2400px) 100vw, 2400px"></div></div></div></div></div></div></div><div class="empty-space empty-double" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h3 class="h4 text-color-121684-color" ><span>Solution - Let users listen in a few seconds</span></h3></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">Based on the exploration in wireframes, I found the solution was to design a simple podcast discovery experience that let the user perform three key actions in a matter seconds: 1. discover a podcast, 2. play a podcast, and 3. subscribe to a podcast.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-5327 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202400%201528'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3.jpg width=2400 height=1528 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3.jpg 2400w, https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3-1536x978.jpg 1536w, https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3-2048x1304.jpg 2048w, https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3-470x300.jpg 470w, https://matthewcarlstrom.com/wp-content/uploads/play-subscribe3-768x489.jpg 768w" data-sizes="(max-width: 2400px) 100vw, 2400px"></div></div></div></div></div></div></div><div class="empty-space empty-double" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-2 data-row=script-row-unique-2 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-2"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-3><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>The First Run Must Add Value</span></h2></div><div class=clear></div></div><div class="uncode_text_column text-lead" ><p style="text-align: left;">The user’s library is empty on first run, how do users search and subscribe to their first podcast? While I was designing the user’s library, I didn’t presume to know what content they wanted to subscribe to. There are many different categories, etc. So, I didn’t want to design a complex solution to suggest content which may not be universally interesting.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-half" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-3 data-row=script-row-unique-3 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-3"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-4><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 mobile-hidden single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h3 class="h4 text-color-154755-color" ><span>Problem - It’s complicated finding “good” podcasts</span></h3></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">The user’s library is empty on first run, how do users search and subscribe to their first podcast? How do we solve it simply?</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-5328 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202400%201528'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3.jpg width=2400 height=1528 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3.jpg 2400w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3-1536x978.jpg 1536w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3-2048x1304.jpg 2048w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3-470x300.jpg 470w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe3-768x489.jpg 768w" data-sizes="(max-width: 2400px) 100vw, 2400px"></div></div></div></div></div></div></div><div class="empty-space empty-double" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h3 class="h4 text-color-121684-color" ><span>Solution - Search is simple and known, use it.</span></h3></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">I decided the leanest way to help users find their content was to design a short call-to-action to “Search.” This allowed the team to roll out a simple feature for users to fill up their library, while we got user-data that helped me design improvements and additional ways to discover and subscribe.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-5330 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202400%201528'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31.jpg width=2400 height=1528 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31.jpg 2400w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31-1536x978.jpg 1536w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31-2048x1304.jpg 2048w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31-470x300.jpg 470w, https://matthewcarlstrom.com/wp-content/uploads/find-subscribe31-768x489.jpg 768w" data-sizes="(max-width: 2400px) 100vw, 2400px"></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-4 data-row=script-row-unique-4 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-4"));</script></div></div></div><div data-parent=true class="vc_row style-color-lxmt-bg limit-width boxed-row row-container" id=row-unique-5><div class="row row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>Information Architecture</span></h2><div><p>Screen Flow</p></div></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4712 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201578%20330'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/screen-map@2x.png width=1578 height=330 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/screen-map@2x.png 1578w, https://matthewcarlstrom.com/wp-content/uploads/screen-map@2x-768x161.png 768w, https://matthewcarlstrom.com/wp-content/uploads/screen-map@2x-1536x321.png 1536w" data-sizes="(max-width: 1578px) 100vw, 1578px"></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-5 data-row=script-row-unique-5 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-5"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-6><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="divider-wrapper " ><hr class="border-,Default-color separator-no-padding"></div></div></div></div></div></div><script id=script-row-unique-6 data-row=script-row-unique-6 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-6"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-7><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>UI Design</span></h2><hr class=separator-break></div><div class=clear></div></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p style="text-align: left;">I designed the UI leveraging off of <a href=https://material.io/design target=_blank rel="noopener nofollow noreferrer">Material Design</a>. I found that it’s fast and lean to work with an existing design system because Google’s designers solved many problems for me. It’s so well spec’ed, that it allowed me to work focus more on designing the app’s functionality, visual design, and the UI design, rather than reinventing the wheel for UI basics.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-half" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div id=gallery-172655 class="justified-system grid-general-light"><div class="justified-wrapper single-gutter" ><div class=justified-fixer><div class="justified-container justified-gallery justified-layout style-masonry" data-gutter=single-gutter data-row-height=400 data-max-row-height data-last-row=nojustify><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5263 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 203.8%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-first-run@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:970,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-first-run@2x-470x300.png'" data-lb-index=0><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5263 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20970'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-first-run@2x.png width=476 height=970 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5264 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 202.9%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-library@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:966,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-library@2x-470x300.png'" data-lb-index=1><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5264 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20966'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-library@2x.png width=476 height=966 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5265 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 202.9%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-list@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:966,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-list@2x-470x300.png'" data-lb-index=2><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5265 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20966'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-list@2x.png width=476 height=966 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5267 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 202.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:964,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing@2x-470x300.png'" data-lb-index=3><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5267 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20964'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing@2x.png width=476 height=964 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5262 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 202.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-episode-notes@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:964,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-episode-notes@2x-470x300.png'" data-lb-index=4><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5262 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20964'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-episode-notes@2x.png width=476 height=964 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w4 tmb-iso-h4 tmb-light tmb-overlay-text-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-5266 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside animate_when_almost_visible bottom-t-top" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 202.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing-dark@2x.png class=pushed data-skin=white data-notmb=1 data-lbox=ilightbox_gallery-172655 data-options="width:476,height:964,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing-dark@2x-470x300.png'" data-lb-index=5><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-dark-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-5266 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20476%20964'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-now-playing-dark@2x.png width=476 height=964 alt></a></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-half" ><span class=empty-space-inner></span></div><div class="divider-wrapper " ><hr class="border-color-uydo-color separator-no-padding"></div></div></div></div></div></div><script id=script-row-unique-7 data-row=script-row-unique-7 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-7"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-8><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>Visual Language</span></h2><div><p>Design Library</p></div></div><div class=clear></div></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p class=p1 style="text-align: left;"><span class=s1>My goal was to create a visual design language that was as consistent, unique and memorable at it was scalable to support new features and platforms. I achieved this by designing artifacts and assets that leverage the app’s branding. Material Design is a great resource as a guide to help layout an Android app, but I took the app’s design in a distinctive direction. I designed many custom icons, and created many specifically modified UI elements for Podcast Guru.</span></p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-4 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4710 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20822%201430'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/ui-1@2x.png width=822 height=1430 alt="UI Elements 1" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/ui-1@2x.png 822w, https://matthewcarlstrom.com/wp-content/uploads/ui-1@2x-768x1336.png 768w" data-sizes="(max-width: 822px) 100vw, 822px"></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-4 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4711 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20692%201306'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/ui-2@2x.png width=692 height=1306 alt="UI Elements 2"></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="divider-wrapper " ><hr class="border-color-uydo-color separator-no-padding" style="width: 100%;"></div></div></div></div></div></div><script id=script-row-unique-8 data-row=script-row-unique-8 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-8"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-9><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>Branding</span></h2><hr class=separator-break></div><div class=clear></div></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p class=p1 style="text-align: left;"><span class=s1>When I designed the Podcast Guru branding, my goal was to express simplicity, bounty, and inclusiveness in one simple mark. Its <a href=https://matthewcarlstrom.com/portfolio/app-icon-design/#podcast-guru-logo target=_blank rel="noopener noreferrer">lotus flower mark</a> signifies enlightened design and simple functionality. Its microphone symbol floats on lotus petals that represent the myriad of podcast content. Its colors are a reflection of the diversity of people and their vast variety of tastes. Its approachability is inline with the fact that the app is free of ads and free of charge.</span></p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-9 data-row=script-row-unique-9 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-9"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-10><div class="row single-top-padding single-bottom-padding no-h-padding full-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row unequal col-no-gutter row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell single-block-padding style-color-xsdn-bg unshadow-sm" ><div class=uncont ><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 200px;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4716 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/white@2x.png width=400 height=400 alt></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 360px;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4718 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20716%20126'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/on-white@2x.png width=716 height=126 alt></div></div></div></div></div></div></div><div class="empty-space empty-double" ><span class=empty-space-inner></span></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-6 single-internal-gutter"><div class="uncol style-dark" ><div class=uncoltable><div class="uncell single-block-padding style-color-919101-bg unshadow-sm" ><div class=uncont ><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 200px;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4715 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/dark@2x.png width=400 height=400 alt></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 360px;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4720 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20716%20126'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/on-dark@2x.png width=716 height=126 alt></div></div></div></div></div></div></div><div class="empty-space empty-double" ><span class=empty-space-inner></span></div></div></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-10 data-row=script-row-unique-10 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-10"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-11><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>Color</span></h2></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-3 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h5 class="h5 text-color-wvjs-color" ><span>Brand Colors</span></h5></div><div class=clear></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4721 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20488%20488'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/colors-brand-copy@2x.png width=488 height=488 alt></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-3 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h5 class="h5 text-color-wvjs-color" ><span>Alternative Colors</span></h5></div><div class=clear></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4722 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20488%20488'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/color-alt-copy@2x.png width=488 height=488 alt></div></div></div></div></div></div></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h5 class="h5 text-color-wvjs-color" ><span>Greys</span></h5></div><div class=clear></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 91%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-5391 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20938%20478'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/grays.png width=938 height=478 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/grays.png 938w, https://matthewcarlstrom.com/wp-content/uploads/grays-768x391.png 768w" data-sizes="(max-width: 938px) 100vw, 938px"></div></div></div></div></div></div></div><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h5 class="h5 text-color-wvjs-color" ><span>Background colors</span></h5></div><div class=clear></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 47%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><img decoding=async class="wp-image-4724 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20488%20248'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/colors-background-copy@2x.png width=488 height=248 alt></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="divider-wrapper " ><hr class="border-color-uydo-color separator-no-padding"></div></div></div></div></div></div><script id=script-row-unique-11 data-row=script-row-unique-11 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-11"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-12><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h1" ><span>Typography</span></h2></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 34.3%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x.png class=pushed data-active=1 data-lbox=ilightbox_single-4726 data-options="width:2400,height:824,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x-470x300.png'"><img decoding=async class="wp-image-4726 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202400%20824'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x.png width=2400 height=824 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x.png 2400w, https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x-768x264.png 768w, https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x-1536x527.png 1536w, https://matthewcarlstrom.com/wp-content/uploads/podcast-guru-typography-copy@2x-2048x703.png 2048w" data-sizes="(max-width: 2400px) 100vw, 2400px"></a></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div></div></div></div></div></div><script id=script-row-unique-12 data-row=script-row-unique-12 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-12"));</script></div></div></div></div></div></div></div><div class="row-container row-navigation row-navigation-light"><div class="row row-parent style-light limit-width"><nav class=post-navigation><ul class=navigation><li class=page-prev><span class=btn-container><a class="btn btn-link text-default-color btn-icon-left" href=https://matthewcarlstrom.com/portfolio/prototype-wireframes/ rel=prev><i class="fa fa-angle-left"></i><span>Prev</span></a></span></li><li class=page-next><span class=btn-container><a class="btn btn-link text-default-color btn-icon-right" href=https://matthewcarlstrom.com/portfolio/figure-drawing/ rel=next><span>Next</span><i class="fa fa-angle-right"></i></a></span></li></ul></nav></div></div></div></div><footer id=colophon class=site-footer><div data-parent=true class="vc_row style-color-919101-bg row-container" id=row-unique-13><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-dark" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p><a href=mailto:designer@matthewcarlstrom.com target=_top rel="noopener noreferrer">designer@matthewcarlstrom.com</a></p></div><div class=uncode_text_column ><p><a href=https://matthewcarlstrom.com/my-resume/ target=_blank rel="noopener noreferrer">Resume</a></p></div><div class=uncode-vc-social><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://www.linkedin.com/in/matthew-john-carlstrom-80a5351/ target=_blank><i class="fa fa-linkedin"></i></a></div><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://x.com/matyasjanos target=_blank><i class="fa fa-twitter-x-fa"></i></a></div></div></div></div></div></div></div><script id=script-row-unique-13 data-row=script-row-unique-13 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-13"));</script></div></div></div><div class="row-container style-color-130326-bg footer-last"><div class="row row-parent style-dark limit-width no-top-padding no-h-padding no-bottom-padding"><div class="site-info uncell col-lg-6 pos-middle text-left">© 2024 Matthew Carlstrom Product Design. All rights reserved</div></div></div></footer></div></div></div></div> <script type=text/html id=wpb-modifications>window.wpbCustomElement = 1;</script><script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/plugins.min.js id=uncode-plugins-js></script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/app.min.js id=uncode-app-js></script> <script></script><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js></script></body></html>