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>Productivity app UI design is a process of empathy and point of view</title><meta name="description" content="Productivity App UI Design about the right point of view. Users a looking for a break from the tedium of mundane tasks, and good design is the solution."><link rel=canonical href=https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/ ><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="og:title" content="Productivity app UI design is a process of empathy and point of view"><meta property="og:description" content="Productivity App UI Design about the right point of view. Users a looking for a break from the tedium of mundane tasks, and good design is the solution."><meta property="og:url" content="https://matthewcarlstrom.com/portfolio/productivity-app-ui-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="2020-06-04T03:25:17+00:00"><meta property="og:image" content="https://matthewcarlstrom.com/wp-content/uploads/header-csuite.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="906"><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="2 minutes"> <script type=application/ld+json class=yoast-schema-graph>{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/","url":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/","name":"Productivity app UI design is a process of empathy and point of view","isPartOf":{"@id":"https://matthewcarlstrom.com/#website"},"primaryImageOfPage":{"@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/#primaryimage"},"image":{"@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/#primaryimage"},"thumbnailUrl":"https://matthewcarlstrom.com/wp-content/uploads/header-csuite.jpg","datePublished":"2016-11-11T13:22:44+00:00","dateModified":"2020-06-04T03:25:17+00:00","description":"Productivity App UI Design about the right point of view. Users a looking for a break from the tedium of mundane tasks, and good design is the solution.","breadcrumb":{"@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-design/#primaryimage","url":"https://matthewcarlstrom.com/wp-content/uploads/header-csuite.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/header-csuite.jpg","width":1200,"height":906,"caption":"Productivity App UI"},{"@type":"BreadcrumbList","@id":"https://matthewcarlstrom.com/portfolio/productivity-app-ui-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":"cSuite Productivity App"}]},{"@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/ ><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":"a36cf9b6a0","nonce_srcset_async":"dc8c94e52e","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/259><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%2Fproductivity-app-ui-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%2Fproductivity-app-ui-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-259 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 menu-transparent menu-add-padding style-light-original menu-absolute 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"><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="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="h1" ><span>Productivity App UI Design</span></h1><div><p>UI Design, Interaction Design, Visual Design</p></div></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>Pixel-perfect mock ups</span></h2></div><div class=clear></div></div><div id=gallery-208582 class="isotope-system isotope-general-light grid-general-light"><div class="isotope-wrapper grid-wrapper half-gutter" ><div class="isotope-container isotope-layout style-masonry" data-type=masonry data-layout=masonry data-lg=1000 data-md=600 data-sm=480><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-567 tmb-img-ratio tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 50%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1875,height:1416,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-300x227.jpg'" data-lb-index=0><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img fetchpriority=high decoding=async class="wp-image-567 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201875%20937'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-uai-1875x937.jpg width=1875 height=937 alt></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-564 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 75.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1875,height:1416,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender-300x227.jpg'" data-lb-index=1><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-564 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201875%201416'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender.jpg width=1875 height=1416 alt="Productivity App UI" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender.jpg 1875w, https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender-300x227.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender-768x580.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/Nexus-calender-1024x773.jpg 1024w" data-sizes="(max-width: 1875px) 100vw, 1875px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-752 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 75.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1875,height:1416,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details-300x227.jpg'" data-lb-index=2><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-752 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201875%201416'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details.jpg width=1875 height=1416 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details.jpg 1875w, https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details-300x227.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details-768x580.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-details-1024x773.jpg 1024w" data-sizes="(max-width: 1875px) 100vw, 1875px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-753 tmb-img-ratio tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 50%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-conversation.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1875,height:1416,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-conversation-300x227.jpg'" data-lb-index=3><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-753 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201875%20937'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite-email-conversation-uai-1875x937.jpg width=1875 height=937 alt></a></div></div></div></div></div></div></div></div><div class=uncode_text_column ><p>The <a href=https://www.crunchbase.com/organization/csuite target=_blank rel="noopener nofollow noreferrer">cSuite App</a> was a mobile app conceived to revolutionize the user experience and utility of the standard email, calendar, and file manager app. It did so by making the features fit the “spheres” of our digital lives.</p><p>The design goal was to create a light uncluttered and calm user interface. I designed it to provide the user with just the right functionality for the tasks they need to perform most.聽I took high-level concepts and distilled them down to implementable user interface designs.</p></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" 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_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="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>User Interface Design</span></h2></div><div class=clear></div></div><div id=gallery-208582 class="isotope-system isotope-general-light grid-general-light"><div class="isotope-wrapper grid-wrapper half-gutter" ><div class="isotope-container isotope-layout style-masonry" data-type=masonry data-layout=masonry data-lg=1000 data-md=600 data-sm=480><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-260 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 68.7%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1784,height:1226,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2-300x206.jpg'" data-lb-index=0><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-260 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201784%201226'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2.jpg width=1784 height=1226 alt="Productivity app - Email inbox" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2.jpg 1784w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2-300x206.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2-768x528.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI2-1024x704.jpg 1024w" data-sizes="(max-width: 1784px) 100vw, 1784px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-261 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 68.7%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1784,height:1226,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3-300x206.jpg'" data-lb-index=1><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-261 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201784%201226'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3.jpg width=1784 height=1226 alt="Productivity app - Month calendar" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3.jpg 1784w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3-300x206.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3-768x528.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI3-1024x704.jpg 1024w" data-sizes="(max-width: 1784px) 100vw, 1784px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-262 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 68.7%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1784,height:1226,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4-300x206.jpg'" data-lb-index=2><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-262 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201784%201226'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4.jpg width=1784 height=1226 alt="Productivity app - Week calendar" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4.jpg 1784w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4-300x206.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4-768x528.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI4-1024x704.jpg 1024w" data-sizes="(max-width: 1784px) 100vw, 1784px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-263 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 68.7%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1784,height:1226,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5-300x206.jpg'" data-lb-index=3><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-263 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201784%201226'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5.jpg width=1784 height=1226 alt="Productivity app - Day Calendar" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5.jpg 1784w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5-300x206.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5-768x528.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI5-1024x704.jpg 1024w" data-sizes="(max-width: 1784px) 100vw, 1784px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-264 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 68.7%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-208582 data-options="width:1784,height:1226,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6-300x206.jpg'" data-lb-index=4><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-264 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201784%201226'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6.jpg width=1784 height=1226 alt="Productivity app - Docs" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6.jpg 1784w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6-300x206.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6-768x528.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_guidelines_MDPI6-1024x704.jpg 1024w" data-sizes="(max-width: 1784px) 100vw, 1784px"></a></div></div></div></div></div></div></div></div><div class=uncode_text_column ><p>Finally, I created pixel-perfect mocks with coordinates to guide the developers. Then, where needed, I output final assets at the appropriate pixel densities. Below you can see the pixel-perfect mocks I created. They are a helpful design artifact that guides the developers on how to implement the design.</p></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 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>Main Menu Design</span></h2><div><p>Interaction Design</p></div></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-557 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%20986'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/cSuite_flower_construction.jpg width=2000 height=986 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/cSuite_flower_construction.jpg 2000w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_flower_construction-300x148.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_flower_construction-768x379.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/cSuite_flower_construction-1024x505.jpg 1024w" data-sizes="(max-width: 2000px) 100vw, 2000px"></div></div></div></div></div></div></div><div class=uncode_text_column ><p>As an innovation in productivity app UI design, I helped design cSuite’s main menu to be an expanding petal-like flower. Each petal was a different menu option. The goal of the schematic below was to show the relationship between the central circle area compared to the number of petals.</p><p>This menu featured a unique icon set that I designed. You can see on my <a href=https://matthewcarlstrom.com/portfolio/custom-icon-design/ >Icon Design</a> page.</p></div><div class="empty-space empty-single" ><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_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="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>App Design and Flow</span></h2></div><div class=clear></div></div><div id=gallery-120506 class="isotope-system isotope-general-light grid-general-light"><div class="isotope-wrapper grid-wrapper half-gutter" ><div class="isotope-container isotope-layout style-masonry" data-type=masonry data-layout=masonry data-lg=1000 data-md=600 data-sm=480><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-754 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1224,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout-300x188.jpg'" data-lb-index=0><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-754 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout.jpg width=1224 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout.jpg 1224w, https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/1-cSuite-layout-1024x640.jpg 1024w" data-sizes="(max-width: 1224px) 100vw, 1224px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-755 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1224,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav-300x188.jpg'" data-lb-index=1><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-755 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav.jpg width=1224 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav.jpg 1224w, https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/2-cSuite-nav-1024x640.jpg 1024w" data-sizes="(max-width: 1224px) 100vw, 1224px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-756 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1224,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation-300x188.jpg'" data-lb-index=2><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-756 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation.jpg width=1224 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation.jpg 1224w, https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/3-cSuite-conversation-1024x640.jpg 1024w" data-sizes="(max-width: 1224px) 100vw, 1224px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-763 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1224,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose-300x188.jpg'" data-lb-index=3><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-763 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose.jpg width=1224 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose.jpg 1224w, https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/4-cSuite-email-compose-1024x640.jpg 1024w" data-sizes="(max-width: 1224px) 100vw, 1224px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-757 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.4%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1225,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example-300x187.jpg'" data-lb-index=4><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-757 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201225%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example.jpg width=1225 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example.jpg 1225w, https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example-300x187.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/5-cSuite-scroll-example-1024x639.jpg 1024w" data-sizes="(max-width: 1225px) 100vw, 1225px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-761 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.4%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1225,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example-300x187.jpg'" data-lb-index=5><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-761 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201225%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example.jpg width=1225 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example.jpg 1225w, https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example-300x187.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/6-cSuite-menu-example-1024x639.jpg 1024w" data-sizes="(max-width: 1225px) 100vw, 1225px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-759 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.5%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1224,height:765,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect-300x188.jpg'" data-lb-index=6><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-759 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201224%20765'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect.jpg width=1224 height=765 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect.jpg 1224w, https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect-768x480.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/7-cSuite-navigation-effect-1024x640.jpg 1024w" data-sizes="(max-width: 1224px) 100vw, 1224px"></a></div></div></div></div></div><div class="tmb tmb-iso-w6 tmb-iso-h4 tmb-light tmb-overlay-anim tmb-overlay-middle tmb-overlay-text-left tmb-id-762 tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox" ><div class="t-inside no-anim" ><div class=t-entry-visual><div class=t-entry-visual-tc><div class=t-entry-visual-cont><div class=dummy style="padding-top: 62.6%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select.jpg class=pushed data-active=1 data-lbox=ilightbox_gallery-120506 data-options="width:1225,height:767,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select-300x188.jpg'" data-lb-index=7><div class=t-entry-visual-overlay><div class="t-entry-visual-overlay-in style-color-xsdn-bg" style="opacity: 0.5;"></div></div><img decoding=async class="wp-image-762 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201225%20767'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select.jpg width=1225 height=767 alt data-srcset="https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select.jpg 1225w, https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select-300x188.jpg 300w, https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select-768x481.jpg 768w, https://matthewcarlstrom.com/wp-content/uploads/8-cSuite-multi-select-1024x641.jpg 1024w" data-sizes="(max-width: 1225px) 100vw, 1225px"></a></div></div></div></div></div></div></div></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></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/app-icon-design/ 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/seo-content-platform/ 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-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 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-4 data-row=script-row-unique-4 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-4"));</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>