{"id":45,"date":"2021-09-17T18:22:00","date_gmt":"2021-09-17T18:22:00","guid":{"rendered":"https:\/\/mathmagi.com\/wordpress\/?p=45"},"modified":"2021-10-29T11:27:45","modified_gmt":"2021-10-29T11:27:45","slug":"gateway-design-system","status":"publish","type":"post","link":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/","title":{"rendered":"Gateway design system"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The first version of our digital freight platform Shipa Freight was built in six months. Our design agency did a great job with the initial design, giving us something that looked professional and enabled us to go live quickly. Once we validated our business model and committed to funding the business, it was time to get more serious about our brand. With the help of a branding agency, we defined the core elements of our brand, created logos, and developed brand identity guidelines. This was a good start, but it did little to help us with the many design decisions we needed to make when building our apps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our head of UX\/UI, Atishay Goyal, took on the assignment of creating a design system that would let us build UIs quickly, consistently and professionally. Based on Material UI, our Gateway design system includes over 200 resuable design components that form the basis for our web, iOS and Andriod app designs. It consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Atoms &#8211; Basic design elements like typography, color palette, grid, and shadows.<\/li><li>Molecules &#8211; Simple composite elements like buttons, form controls and notifications.<\/li><li>Organisms &#8211; More complex structures like navigation elements and content organizers.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"463\" src=\"https:\/\/i0.wp.com\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png?resize=729%2C463&#038;ssl=1\" alt=\"\" class=\"wp-image-49\" srcset=\"https:\/\/i0.wp.com\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png?w=729&amp;ssl=1 729w, https:\/\/i0.wp.com\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png?resize=300%2C191&amp;ssl=1 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.figma.com\/file\/yHaHEwJeq59mBAYto13zNJ\/Gateway-Design-System-Demo\">Sample Figma file here<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why did we use Material UI? It&#8217;s well established, very extensive, and well documented. We didn&#8217;t have a compelling reason to build a design system from scratch. And it was customizable enough to express our brand effectively.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s now been in use for a few years and we see the benefits of it every day. While we need to tweak it from time to time, the cost of doing that is small compared to the value we&#8217;ve gotten out of it. For our designers, they can focus on the unique user experience requirements of each part of our apps rather than the common design patterns. For our development team, they can implement the common elements once and reuse them across the site. For our business, we present our brand consistently across all platforms. And for our customers, they have a consistent experience across the whole user journey.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While I was a believer in the value of our design system before, I was even more convinced when we started supporting white label versions of our platform for partners. This required us to tailor the fonts, colors and logos of our site for each partner, quickly and at scale. Because of the modularity of the Gateway design system, it lended itself to cloning and modification in a way that is easy to manage. The result: beautiful partner sites reflecting their brands yet with all our product functionality, requiring minimal maintenance on our part. That&#8217;s a win for all.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first version of our digital freight platform Shipa Freight was built in six months. Our design agency did a great job with the initial design, giving us something that looked professional and enabled us to go live quickly. Once we validated our business model and committed to funding the business, it was time to&hellip; <a class=\"more-link\" href=\"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/\">Continue reading <span class=\"screen-reader-text\">Gateway design system<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[7],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-design","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gateway design system - Paul Rehmet<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gateway design system - Paul Rehmet\" \/>\n<meta property=\"og:description\" content=\"The first version of our digital freight platform Shipa Freight was built in six months. Our design agency did a great job with the initial design, giving us something that looked professional and enabled us to go live quickly. Once we validated our business model and committed to funding the business, it was time to&hellip; Continue reading Gateway design system\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Paul Rehmet\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-17T18:22:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-29T11:27:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png\" \/>\n<meta name=\"author\" content=\"Paul Rehmet\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Rehmet\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/\"},\"author\":{\"name\":\"Paul Rehmet\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/3a8256ddba2d0a1ebb141e2adaa296b7\"},\"headline\":\"Gateway design system\",\"datePublished\":\"2021-09-17T18:22:00+00:00\",\"dateModified\":\"2021-10-29T11:27:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/\"},\"wordCount\":454,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/image-1.png\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/\",\"url\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/\",\"name\":\"Gateway design system - Paul Rehmet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/image-1.png\",\"datePublished\":\"2021-09-17T18:22:00+00:00\",\"dateModified\":\"2021-10-29T11:27:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/3a8256ddba2d0a1ebb141e2adaa296b7\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/mathmagi.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/image-1.png?fit=729%2C463&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/mathmagi.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/image-1.png?fit=729%2C463&ssl=1\",\"width\":729,\"height\":463},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/gateway-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gateway design system\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/\",\"name\":\"Paul Rehmet\",\"description\":\"Product Manager    |   Software Engineer    |    Digital Marketer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/3a8256ddba2d0a1ebb141e2adaa296b7\",\"name\":\"Paul Rehmet\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g\",\"caption\":\"Paul Rehmet\"},\"url\":\"https:\\\/\\\/mathmagi.com\\\/wordpress\\\/author\\\/prehmet\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gateway design system - Paul Rehmet","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/","og_locale":"en_US","og_type":"article","og_title":"Gateway design system - Paul Rehmet","og_description":"The first version of our digital freight platform Shipa Freight was built in six months. Our design agency did a great job with the initial design, giving us something that looked professional and enabled us to go live quickly. Once we validated our business model and committed to funding the business, it was time to&hellip; Continue reading Gateway design system","og_url":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/","og_site_name":"Paul Rehmet","article_published_time":"2021-09-17T18:22:00+00:00","article_modified_time":"2021-10-29T11:27:45+00:00","og_image":[{"url":"https:\/\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png","type":"","width":"","height":""}],"author":"Paul Rehmet","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Paul Rehmet","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#article","isPartOf":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/"},"author":{"name":"Paul Rehmet","@id":"https:\/\/mathmagi.com\/wordpress\/#\/schema\/person\/3a8256ddba2d0a1ebb141e2adaa296b7"},"headline":"Gateway design system","datePublished":"2021-09-17T18:22:00+00:00","dateModified":"2021-10-29T11:27:45+00:00","mainEntityOfPage":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/"},"wordCount":454,"commentCount":0,"image":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png","articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/","url":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/","name":"Gateway design system - Paul Rehmet","isPartOf":{"@id":"https:\/\/mathmagi.com\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#primaryimage"},"image":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png","datePublished":"2021-09-17T18:22:00+00:00","dateModified":"2021-10-29T11:27:45+00:00","author":{"@id":"https:\/\/mathmagi.com\/wordpress\/#\/schema\/person\/3a8256ddba2d0a1ebb141e2adaa296b7"},"breadcrumb":{"@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#primaryimage","url":"https:\/\/i0.wp.com\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png?fit=729%2C463&ssl=1","contentUrl":"https:\/\/i0.wp.com\/mathmagi.com\/wordpress\/wp-content\/uploads\/2021\/10\/image-1.png?fit=729%2C463&ssl=1","width":729,"height":463},{"@type":"BreadcrumbList","@id":"https:\/\/mathmagi.com\/wordpress\/gateway-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mathmagi.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Gateway design system"}]},{"@type":"WebSite","@id":"https:\/\/mathmagi.com\/wordpress\/#website","url":"https:\/\/mathmagi.com\/wordpress\/","name":"Paul Rehmet","description":"Product Manager    |   Software Engineer    |    Digital Marketer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mathmagi.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mathmagi.com\/wordpress\/#\/schema\/person\/3a8256ddba2d0a1ebb141e2adaa296b7","name":"Paul Rehmet","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/14bb0002b8b8fb23514cfa5aad495c6261676ab4afe3de213e13ef3bd5d7312f?s=96&d=mm&r=g","caption":"Paul Rehmet"},"url":"https:\/\/mathmagi.com\/wordpress\/author\/prehmet\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":3,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/posts\/45\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mathmagi.com\/wordpress\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}