CINXE.COM

<!doctype html><html lang="en"><head><title data-rh="true">Uplifting Shopify Polaris. The process of evolving a large scale… | by José Torre | Shopify UX | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2023-08-03T11:54:09.238Z"/><meta data-rh="true" name="title" content="Uplifting Shopify Polaris. The process of evolving a large scale… | by José Torre | Shopify UX | Medium"/><meta data-rh="true" property="og:title" content="Uplifting Shopify Polaris"/><meta data-rh="true" property="al:android:url" content="medium://p/7c54fc6564d9"/><meta data-rh="true" property="al:ios:url" content="medium://p/7c54fc6564d9"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="For years, Polaris’s design language has been relatively unchanged. It was heavily influenced by the once-pervasive flat design trend, and although there was a minor update in 2020 with new colors…"/><meta data-rh="true" property="og:description" content="The process of evolving a large scale Design System."/><meta data-rh="true" property="og:url" content="https://medium.com/shopify-ux/uplifting-shopify-polaris-7c54fc6564d9"/><meta data-rh="true" property="al:web:url" content="https://medium.com/shopify-ux/uplifting-shopify-polaris-7c54fc6564d9"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*247B8K14YiHZH7hjuvG2Zg.png"/><meta data-rh="true" property="article:author" content="https://halfool.medium.com"/><meta data-rh="true" name="author" content="José Torre"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Uplifting Shopify Polaris"/><meta data-rh="true" name="twitter:site" content="@Medium"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/7c54fc6564d9"/><meta data-rh="true" property="twitter:description" content="The process of evolving a large scale Design System."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*247B8K14YiHZH7hjuvG2Zg.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:creator" content="@halfool_draws"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="15 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/resize:fill:256:256/1*7uZW5TYHanffvCImGRBkZw.jpeg"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://halfool.medium.com"/><link data-rh="true" rel="canonical" href="https://medium.com/shopify-ux/uplifting-shopify-polaris-7c54fc6564d9"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/7c54fc6564d9"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*247B8K14YiHZH7hjuvG2Zg.png"],"url":"https:\u002F\u002Fmedium.com\u002Fshopify-ux\u002Fuplifting-shopify-polaris-7c54fc6564d9","dateCreated":"2023-07-25T19:22:46.196Z","datePublished":"2023-07-25T19:22:46.196Z","dateModified":"2024-01-31T18:40:33.259Z","headline":"Uplifting Shopify Polaris - Shopify UX - Medium","name":"Uplifting Shopify Polaris - Shopify UX - Medium","description":"For years, Polaris’s design language has been relatively unchanged. It was heavily influenced by the once-pervasive flat design trend, and although there was a minor update in 2020 with new colors…","identifier":"7c54fc6564d9","author":{"@type":"Person","name":"José Torre","url":"https:\u002F\u002Fhalfool.medium.com"},"creator":["José Torre"],"publisher":{"@type":"Organization","name":"Shopify UX","url":"https:\u002F\u002Fmedium.com\u002Fshopify-ux","logo":{"@type":"ImageObject","width":60,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:120\u002F1*7uZW5TYHanffvCImGRBkZw.jpeg"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fshopify-ux\u002Fuplifting-shopify-polaris-7c54fc6564d9"}</script><style type="text/css" data-fela-rehydration="543" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="543" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(26, 137, 23, 1)}.es{border-color:rgba(26, 137, 23, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(26, 137, 23, 1)}.ez:disabled:hover{border-color:rgba(26, 137, 23, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{clear:both}.gt{margin-top:0px}.gu{max-width:100%}.gv{height:auto}.gw{line-height:1.23}.gx{letter-spacing:0}.gy{font-style:normal}.gz{font-weight:700}.hu{margin-bottom:-0.27em}.hv{line-height:1.394}.iq{align-items:baseline}.ir{width:48px}.is{height:48px}.it{border:2px solid rgba(255, 255, 255, 1)}.iu{z-index:0}.iv{box-shadow:none}.iw{border:1px solid rgba(0, 0, 0, 0.05)}.ix{margin-left:-12px}.iy{width:28px}.iz{height:28px}.ja{z-index:1}.jb{width:24px}.jc{margin-bottom:2px}.jd{flex-wrap:nowrap}.je{font-size:16px}.jf{line-height:24px}.jh{margin:0 8px}.ji{display:inline}.jj{color:rgba(26, 137, 23, 1)}.jk{fill:rgba(26, 137, 23, 1)}.jn{flex:0 0 auto}.jq{flex-wrap:wrap}.jt{white-space:pre-wrap}.ju{margin-right:4px}.jv{overflow:hidden}.jw{max-height:20px}.jx{text-overflow:ellipsis}.jy{display:-webkit-box}.jz{-webkit-line-clamp:1}.ka{-webkit-box-orient:vertical}.kb{word-break:break-all}.kd{padding-left:8px}.ke{padding-right:8px}.lf> *{flex-shrink:0}.lg{overflow-x:scroll}.lh::-webkit-scrollbar{display:none}.li{scrollbar-width:none}.lj{-ms-overflow-style:none}.lk{width:74px}.ll{flex-direction:row}.lm{z-index:2}.lp{-webkit-user-select:none}.lq{border:0}.lr{fill:rgba(117, 117, 117, 1)}.lu{outline:0}.lv{user-select:none}.lw> svg{pointer-events:none}.mf{cursor:progress}.mg{cursor:not-allowed}.mh{opacity:1}.mi{padding:4px 0}.mj{opacity:0.25}.mk{width:16px}.mm{display:inline-flex}.ms{padding:8px 2px}.mt svg{color:#6B6B6B}.nl{line-height:1.58}.nm{letter-spacing:-0.004em}.nn{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.og{margin-bottom:-0.46em}.oh{margin-left:auto}.oi{margin-right:auto}.oj{max-width:3840px}.oq{cursor:zoom-in}.or{z-index:auto}.ot{margin-top:10px}.ou{max-width:728px}.ox{line-height:1.12}.oy{letter-spacing:-0.022em}.oz{font-weight:600}.ps{margin-bottom:-0.28em}.py{list-style-type:disc}.pz{margin-left:30px}.qa{padding-left:0px}.qg{list-style-type:decimal}.qh{max-width:7680px}.qi{max-width:3402px}.qj{max-width:2350px}.qk{max-width:2788px}.ql{max-width:3006px}.qm{max-width:960px}.qn{margin-bottom:26px}.qo{margin-top:6px}.qp{margin-top:8px}.qq{margin-right:8px}.qr{padding:8px 16px}.qs{border-radius:100px}.qt{transition:background 300ms ease}.qv{white-space:nowrap}.qw{border-top:none}.qx{margin-bottom:14px}.qy{height:52px}.qz{max-height:52px}.ra{box-sizing:content-box}.rb{position:static}.rd{max-width:155px}.rj{margin-right:20px}.rp{height:0px}.rq{margin-bottom:40px}.rr{margin-bottom:48px}.sf{border-radius:2px}.sh{height:64px}.si{width:64px}.sj{align-self:flex-end}.sk{flex:1 1 auto}.sq{padding-right:4px}.sr{font-weight:500}.te{margin-top:16px}.tf{color:rgba(255, 255, 255, 1)}.tg{fill:rgba(255, 255, 255, 1)}.th{background:rgba(25, 25, 25, 1)}.ti{border-color:rgba(25, 25, 25, 1)}.tl:disabled{opacity:0.1}.tm:disabled:hover{background:rgba(25, 25, 25, 1)}.tn:disabled:hover{border-color:rgba(25, 25, 25, 1)}.tt{border-bottom:solid 1px #E5E5E5}.tu{margin-top:72px}.tv{padding:24px 0}.tw{margin-bottom:0px}.tx{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(15, 115, 12, 1)}.eu:hover{border-color:rgba(15, 115, 12, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jg:hover{text-decoration:underline}.jl:hover:not(:disabled){color:rgba(15, 115, 12, 1)}.jm:hover:not(:disabled){fill:rgba(15, 115, 12, 1)}.lt:hover{fill:rgba(8, 8, 8, 1)}.ml:hover{color:#000000}.mu:hover svg{color:#000000}.mv:hover p{color:#000000}.qu:hover{background-color:#F2F2F2}.sg:hover{background-color:none}.tj:hover{background:#000000}.tk:hover{border-color:#242424}.bd:focus-within path{fill:#242424}.ls:focus{fill:rgba(8, 8, 8, 1)}.mw:focus svg{color:#000000}.os:focus{transform:scale(1.01)}.lx:active{border-style:none}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.hq{font-size:42px}.hr{margin-top:1em}.hs{line-height:52px}.ht{letter-spacing:-0.011em}.ii{font-size:22px}.ij{margin-top:0.92em}.ik{line-height:28px}.ip{align-items:center}.kr{border-top:solid 1px #F2F2F2}.ks{border-bottom:solid 1px #F2F2F2}.kt{margin:32px 0 0}.ku{padding:3px 8px}.ld> *{margin-right:24px}.le> :last-child{margin-right:0}.me{margin-top:0px}.mr{margin:0}.oc{font-size:20px}.od{margin-top:2.14em}.oe{line-height:32px}.of{letter-spacing:-0.003em}.oo{margin-top:56px}.po{font-size:24px}.pp{margin-top:1.95em}.pq{line-height:30px}.pr{letter-spacing:-0.016em}.px{margin-top:0.94em}.qf{margin-top:1.14em}.ri{display:inline-block}.ro{margin-bottom:104px}.rs{flex-direction:row}.rv{margin-bottom:0}.rw{margin-right:20px}.sl{max-width:500px}.tc{line-height:24px}.td{letter-spacing:0}.ts{padding-top:72px}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.md{margin-top:0px}.ov{margin-left:auto}.ow{text-align:center}.rh{display:inline-block}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mc{margin-top:0px}.rg{display:inline-block}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.ma{margin-top:0px}.mb{margin-right:0px}.rf{display:inline-block}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{line-height:38px}.hd{letter-spacing:-0.014em}.hw{font-size:18px}.hx{margin-top:0.79em}.hy{line-height:24px}.il{align-items:flex-start}.jo{flex-direction:column}.jr{margin-bottom:2px}.kf{margin:24px -24px 0}.kg{padding:0}.kv> *{margin-right:8px}.kw> :last-child{margin-right:24px}.ln{margin-left:0px}.ly{margin-top:0px}.lz{margin-right:0px}.mn{margin:0}.mx{border:1px solid #F2F2F2}.my{border-radius:99em}.mz{padding:0px 16px 0px 12px}.na{height:38px}.nb{align-items:center}.nd svg{margin-right:8px}.no{margin-top:1.56em}.np{line-height:28px}.nq{letter-spacing:-0.003em}.ok{margin-top:40px}.pa{font-size:20px}.pb{margin-top:1.2em}.pc{letter-spacing:0}.pt{margin-top:0.67em}.qb{margin-top:1.34em}.re{display:inline-block}.rk{margin-bottom:96px}.sd{margin-bottom:20px}.se{margin-right:0}.sp{max-width:100%}.ss{font-size:24px}.st{line-height:30px}.su{letter-spacing:-0.016em}.to{padding-top:48px}.nc:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hm{font-size:42px}.hn{margin-top:1em}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.if{font-size:22px}.ig{margin-top:0.92em}.ih{line-height:28px}.io{align-items:center}.kn{border-top:solid 1px #F2F2F2}.ko{border-bottom:solid 1px #F2F2F2}.kp{margin:32px 0 0}.kq{padding:3px 8px}.lb> *{margin-right:24px}.lc> :last-child{margin-right:0}.mq{margin:0}.ny{font-size:20px}.nz{margin-top:2.14em}.oa{line-height:32px}.ob{letter-spacing:-0.003em}.on{margin-top:56px}.pk{font-size:24px}.pl{margin-top:1.95em}.pm{line-height:30px}.pn{letter-spacing:-0.016em}.pw{margin-top:0.94em}.qe{margin-top:1.14em}.rn{margin-bottom:104px}.rt{flex-direction:row}.rx{margin-bottom:0}.ry{margin-right:20px}.sm{max-width:500px}.ta{line-height:24px}.tb{letter-spacing:0}.tr{padding-top:72px}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.hi{font-size:42px}.hj{margin-top:1em}.hk{line-height:52px}.hl{letter-spacing:-0.011em}.ic{font-size:22px}.id{margin-top:0.92em}.ie{line-height:28px}.in{align-items:center}.kj{border-top:solid 1px #F2F2F2}.kk{border-bottom:solid 1px #F2F2F2}.kl{margin:32px 0 0}.km{padding:3px 8px}.kz> *{margin-right:24px}.la> :last-child{margin-right:0}.mp{margin:0}.nu{font-size:20px}.nv{margin-top:2.14em}.nw{line-height:32px}.nx{letter-spacing:-0.003em}.om{margin-top:56px}.pg{font-size:24px}.ph{margin-top:1.95em}.pi{line-height:30px}.pj{letter-spacing:-0.016em}.pv{margin-top:0.94em}.qd{margin-top:1.14em}.rm{margin-bottom:104px}.ru{flex-direction:row}.rz{margin-bottom:0}.sa{margin-right:20px}.sn{max-width:500px}.sy{line-height:24px}.sz{letter-spacing:0}.tq{padding-top:72px}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.he{font-size:32px}.hf{margin-top:1.01em}.hg{line-height:38px}.hh{letter-spacing:-0.014em}.hz{font-size:18px}.ia{margin-top:0.79em}.ib{line-height:24px}.im{align-items:flex-start}.jp{flex-direction:column}.js{margin-bottom:2px}.kh{margin:24px 0 0}.ki{padding:0}.kx> *{margin-right:8px}.ky> :last-child{margin-right:8px}.lo{margin-left:0px}.mo{margin:0}.ne{border:1px solid #F2F2F2}.nf{border-radius:99em}.ng{padding:0px 16px 0px 12px}.nh{height:38px}.ni{align-items:center}.nk svg{margin-right:8px}.nr{margin-top:1.56em}.ns{line-height:28px}.nt{letter-spacing:-0.003em}.ol{margin-top:40px}.pd{font-size:20px}.pe{margin-top:1.2em}.pf{letter-spacing:0}.pu{margin-top:0.67em}.qc{margin-top:1.34em}.rl{margin-bottom:96px}.sb{margin-bottom:20px}.sc{margin-right:0}.so{max-width:100%}.sv{font-size:24px}.sw{line-height:30px}.sx{letter-spacing:-0.016em}.tp{padding-top:48px}.nj:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="print">.rc{display:none}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kc{max-height:none}</style><style type="text/css" data-fela-rehydration="543" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.op{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F7c54fc6564d9&amp;%7Efeature=LoOpenInAppButton&amp;%7Echannel=ShowPostUnderCollection&amp;source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav----------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fnew-story&amp;source=---top_nav_layout_nav-----------------------new_post_topnav-----------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav----------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="gs bh"><figure class="gt gs bh paragraph-image"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 1100w, https://miro.medium.com/v2/resize:fit:4800/format:webp/1*247B8K14YiHZH7hjuvG2Zg.png 4800w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 100vw" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*247B8K14YiHZH7hjuvG2Zg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*247B8K14YiHZH7hjuvG2Zg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*247B8K14YiHZH7hjuvG2Zg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*247B8K14YiHZH7hjuvG2Zg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*247B8K14YiHZH7hjuvG2Zg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*247B8K14YiHZH7hjuvG2Zg.png 1100w, https://miro.medium.com/v2/resize:fit:4800/1*247B8K14YiHZH7hjuvG2Zg.png 4800w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 100vw"/><img alt="" class="bh gu gv c" width="2400" height="1874" loading="eager" role="presentation"/></picture></figure></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="0dc5" class="pw-post-title gw gx gy bf gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu bk" data-testid="storyTitle">Uplifting Shopify Polaris</h1></div><div><h2 id="2cae" class="pw-subtitle-paragraph hv gx gy bf b hw hx hy hz ia ib ic id ie if ig ih ii ij ik cq du">The process of evolving a large scale design system</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="il im in io ip ab"><div><div class="ab iq"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@halfool?source=post_page---byline--7c54fc6564d9--------------------------------"><div class="l ir is by it iu"><div class="l fj"><img alt="José Torre" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*UVVl3noG-W8A5Uf_mHOquw.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="iv by l dd de fs n iw ft"></div></div></div></a></div></div><div class="ix ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/shopify-ux?source=post_page---byline--7c54fc6564d9--------------------------------" rel="noopener follow"><div class="l iy iz by it ja"><div class="l fj"><img alt="Shopify UX" class="l fd by br jb cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*7uZW5TYHanffvCImGRBkZw.jpeg" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="iv by l br jb fs n iw ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="jc ab q"><div class="ab q jd"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b je jf bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jg" data-testid="authorName" rel="noopener follow" href="/@halfool?source=post_page---byline--7c54fc6564d9--------------------------------">José Torre</a></p></div></div></div><span class="jh ji" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b je jf du"><span><a class="jj jk ah ai aj ak al am an ao ap aq ar ex jl jm" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F463659dc147f&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;user=Jos%C3%A9+Torre&amp;userId=463659dc147f&amp;source=post_page-463659dc147f--byline--7c54fc6564d9---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l jn"><span class="bf b bg z du"><div class="ab cn jo jp jq"><div class="jr js ab"><div class="bf b bg z du ab jt"><span class="ju l jn">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jg ab q" data-testid="publicationName" href="https://medium.com/shopify-ux?source=post_page---byline--7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b bg z jv jw jx jy jz ka kb kc bk">Shopify UX</p></a></div></div></div><div class="h k"><span class="jh ji" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">15 min read</span><div class="kd ke l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Jul 25, 2023</span></div></span></div></span></div></div></div><div class="ab cp kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku"><div class="h k w fg fh q"><div class="lk l"><div class="ab q ll lm"><div class="pw-multi-vote-icon fj ju ln lo lp"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fshopify-ux%2F7c54fc6564d9&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;user=Jos%C3%A9+Torre&amp;userId=463659dc147f&amp;source=---header_actions--7c54fc6564d9---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lq ao lr ls lt lu am lv lw lx lp"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ly lz ma mb mc md me"><p class="bf b dv z du"><span class="mf">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="mg lq mh mi ab q fk" aria-label="responses" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg fk mj"><path fill-rule="evenodd" d="M18.472 20.272c-1.194 0-2.335-.355-3.39-1.052a8 8 0 0 1-.676-.499 8.7 8.7 0 0 1-2.284.307C7.638 19.028 4 15.668 4 11.54c.001-4.148 3.64-7.508 8.123-7.508 4.475 0 8.118 3.36 8.118 7.49 0 1.977-.816 3.826-2.307 5.231.022.163.058.336.114.528.184.662.515 1.325.985 1.958.144.202.165.461.055.672a.66.66 0 0 1-.588.365h-.029z" clip-rule="evenodd"></path></svg></button></div></div></div><div class="ab q kv kw kx ky kz la lb lc ld le lf lg lh li lj"><div class="mk k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F7c54fc6564d9&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;source=---header_actions--7c54fc6564d9---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du ml" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mm cn"><div class="l ae"><div class="ab cb"><div class="mn mo mp mq mr gu ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al ms an ao ap ex mt mu mv mw mx my mz na s nb nc nd ne nf ng nh u ni nj nk"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al ms an ao ap ex mt mu mv mw mx my mz na s nb nc nd ne nf ng nh u ni nj nk"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="59d1" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">For years, Polaris’s design language has been relatively unchanged. It was heavily influenced by the once-pervasive flat design trend, and although there was a minor update in 2020 with new colors and illustrations, the core design philosophy barely evolved.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*UjGm02zEBdwKVexXxjwCng.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*UjGm02zEBdwKVexXxjwCng.png 640w, https://miro.medium.com/v2/resize:fit:720/1*UjGm02zEBdwKVexXxjwCng.png 720w, https://miro.medium.com/v2/resize:fit:750/1*UjGm02zEBdwKVexXxjwCng.png 750w, https://miro.medium.com/v2/resize:fit:786/1*UjGm02zEBdwKVexXxjwCng.png 786w, https://miro.medium.com/v2/resize:fit:828/1*UjGm02zEBdwKVexXxjwCng.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*UjGm02zEBdwKVexXxjwCng.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*UjGm02zEBdwKVexXxjwCng.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Shopify’s Admin in 2017</figcaption></figure><p id="f814" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Before flat design took hold in the early 2010s, software had more dimensionality and tried to mimic the real world. Then, new minimalism fostered cleaner interfaces, made things easier to understand, and made experiences feel more efficient. This was fantastic. Whenever Shopify removes complexity from its product, merchant success goes up. Flat design definitely had a role in that.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*uzjW7llxAsLyp-tAl39cdg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*uzjW7llxAsLyp-tAl39cdg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*uzjW7llxAsLyp-tAl39cdg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*uzjW7llxAsLyp-tAl39cdg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*uzjW7llxAsLyp-tAl39cdg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*uzjW7llxAsLyp-tAl39cdg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*uzjW7llxAsLyp-tAl39cdg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*uzjW7llxAsLyp-tAl39cdg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Shopify’s Admin in 2020</figcaption></figure><p id="c30c" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Minimalism had run its course when merchants started classifying the Admin experience as “dull”, “depressing” and “bland”. Polaris helped standardize this sterile feeling, with a UI that was not optimized for the kind of work merchants have to do everyday.</p><p id="8a99" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Shopify’s Admin is not just a website, it’s a professional tool. So it should feel like that — but one with soul. So we set about making it feel that way.</p><h1 id="0304" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">The starting point</h1><p id="af17" class="pw-post-body-paragraph nl nm gy nn b hw pt np nq hz pu ns nt nu pv nw nx ny pw oa ob oc px oe of og gn bk">With that realization, at the end of last year, Thomas Jonkajtys — a fellow designer — and I teamed up with the mission of uplifting Polaris’s design language.</p><p id="0a28" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The initial brief was pretty simple, we wanted to make the Admin feel more like a “pro tool”.<br/>What does that actually mean? A few different things:</p><ul class=""><li id="a690" class="nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og py pz qa bk">A pro tool is effective in the way it organizes and displays information.</li><li id="569b" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">A pro tool is highly functional, with straightforward visuals, while not being intrusive or decorative.</li><li id="4d17" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">A pro tool is responsive, and provides interactions that feel almost real.</li></ul><p id="64a6" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Ultimately, our design language had to make the product feel more effective and coherent in the context of commerce, while being aesthetically pleasing, and able to create moments of joy.</p><p id="0460" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">With that said, at this point in the process, these are just words. Design needs visuals, so we started collecting inspiration from products we thought spoke a similar design language to what we were aiming for. Most of them were actual physical products, and not software. We didn’t want to follow any particular digital trend, as the world of merchants is more than just a screen.</p><p id="1f70" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">To define the visual design direction, we created two clusters: one for “this”, and another for “not this”. At this stage it’s important to capture what we want our design language to convey as well as what we want it to avoid.This helps narrow down our options and defines the range in which we’ll be directing, pivoting, and adjusting the language.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*6ER1sV6obgEC8CUJYtf-2g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*6ER1sV6obgEC8CUJYtf-2g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*6ER1sV6obgEC8CUJYtf-2g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*6ER1sV6obgEC8CUJYtf-2g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*6ER1sV6obgEC8CUJYtf-2g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*6ER1sV6obgEC8CUJYtf-2g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*6ER1sV6obgEC8CUJYtf-2g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*6ER1sV6obgEC8CUJYtf-2g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Inspiration clusters</figcaption></figure><p id="693c" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We also started digging for photos and recordings from previous research studies to get a better understanding of the environment in which merchants operate: Where do they work? What’s on their desk? What objects do they often use?<br/>This helped us understand merchants at a different level, and find inspiration in objects that could bring a sense of familiarity.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*vR6KyI59GHD9yxTkXgZ_Iw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*vR6KyI59GHD9yxTkXgZ_Iw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*vR6KyI59GHD9yxTkXgZ_Iw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*vR6KyI59GHD9yxTkXgZ_Iw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*vR6KyI59GHD9yxTkXgZ_Iw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*vR6KyI59GHD9yxTkXgZ_Iw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*vR6KyI59GHD9yxTkXgZ_Iw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*vR6KyI59GHD9yxTkXgZ_Iw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Merchants’ true mission control (photos from a research study).</figcaption></figure><p id="195f" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Good design can be dictated, but great design comes from understanding the way your users function in their space and offering solutions that make their lives easier.</p><h1 id="d21c" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">Diverging</h1><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*nkOQVUx6k10e1037TIBG9Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*nkOQVUx6k10e1037TIBG9Q.png 640w, https://miro.medium.com/v2/resize:fit:720/1*nkOQVUx6k10e1037TIBG9Q.png 720w, https://miro.medium.com/v2/resize:fit:750/1*nkOQVUx6k10e1037TIBG9Q.png 750w, https://miro.medium.com/v2/resize:fit:786/1*nkOQVUx6k10e1037TIBG9Q.png 786w, https://miro.medium.com/v2/resize:fit:828/1*nkOQVUx6k10e1037TIBG9Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*nkOQVUx6k10e1037TIBG9Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*nkOQVUx6k10e1037TIBG9Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="c7f9" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">With a more concrete understanding of the range we wanted to explore, we worked with fellow Polaris designers Sara Hill and Joe Thomas, to broaden and accelerate our exploration.</p><p id="7f2f" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Design needs constraints and instructions, so we defined a few rules:</p><ol class=""><li id="328f" class="nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og qg pz qa bk">Keep existing behavior and patterns. Our focus was to evolve the design language, not the entire merchant experience.</li><li id="34d6" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og qg pz qa bk">Design extremes. We’re not looking for subtlety at this state, and we can always pull back and calibrate afterwards.</li><li id="53cd" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og qg pz qa bk">Keep it high-fidelity, but high-level. Details can be refined later.</li><li id="8968" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og qg pz qa bk">Mimic real merchants. Our design language needed to flex and adapt to merchants, working with idealized data doesn’t help achieve this.</li><li id="369c" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og qg pz qa bk">Diversify. We wanted to have more visual diversity, more options, and wanted to prevent folks from falling in love with one idea, because most of them would be left on the drawing board.</li></ol><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qh"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*4vCN8mMJbffBmlXnuVw0xw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*4vCN8mMJbffBmlXnuVw0xw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*4vCN8mMJbffBmlXnuVw0xw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*4vCN8mMJbffBmlXnuVw0xw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*4vCN8mMJbffBmlXnuVw0xw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*4vCN8mMJbffBmlXnuVw0xw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*4vCN8mMJbffBmlXnuVw0xw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*4vCN8mMJbffBmlXnuVw0xw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="591" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">A small sample of our divergent explorations.</figcaption></figure><p id="a36e" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This divergent exploration brought up many fun ideas. A broader use of color, ambitious skeuomorphism, more 3D, usage of blend modes, you name it. We had covered enough ground to reduce the team back to two, and started the next step in defining the design language.</p><h1 id="428a" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">Converging</h1><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*SZlKCfwOf0QxcTYRShiE3Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*SZlKCfwOf0QxcTYRShiE3Q.png 640w, https://miro.medium.com/v2/resize:fit:720/1*SZlKCfwOf0QxcTYRShiE3Q.png 720w, https://miro.medium.com/v2/resize:fit:750/1*SZlKCfwOf0QxcTYRShiE3Q.png 750w, https://miro.medium.com/v2/resize:fit:786/1*SZlKCfwOf0QxcTYRShiE3Q.png 786w, https://miro.medium.com/v2/resize:fit:828/1*SZlKCfwOf0QxcTYRShiE3Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*SZlKCfwOf0QxcTYRShiE3Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*SZlKCfwOf0QxcTYRShiE3Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="6065" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Two very opinionated designers executing on a vision is challenging. We had to build trust throughout the entire process.<br/>The divergent exploration gave us an outlet to experiment, but also gave us exposure to the perspective of other designers. It also served as a way to figure out how we could lean on each other’s strengths.</p><p id="4199" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Some decisions were easy, like finding a font that felt appropriate to Shopify. We both picked Inter independently, so it became obvious that was the way to go.</p><p id="8c21" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Other decisions took a bit more fine-tuning:</p><p id="b658" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gz">Clean but tactile</strong></p><p id="e517" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">It’s easy to lean too far in a direction, go overboard, and end up with something that feels monotone. As we analyzed our divergent explorations, we found valuable elements in both ends of the spectrum.</p><p id="c2f1" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The real challenge was striking the right balance, and finding the combination of elements that complemented each other.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qi"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*FBjbuywx8oCiSbT7oOn1nw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*FBjbuywx8oCiSbT7oOn1nw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*FBjbuywx8oCiSbT7oOn1nw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*FBjbuywx8oCiSbT7oOn1nw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*FBjbuywx8oCiSbT7oOn1nw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*FBjbuywx8oCiSbT7oOn1nw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*FBjbuywx8oCiSbT7oOn1nw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*FBjbuywx8oCiSbT7oOn1nw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="405" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Vibrant exploration, with bold use of color and 3D objects.</figcaption></figure><p id="fd43" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">When we leaned too much into the dimensionality and vibrancy, everything became busy, and demanded too much attention.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qi"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*iDAy9gjYIPe2a6doDRDh0w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*iDAy9gjYIPe2a6doDRDh0w.png 640w, https://miro.medium.com/v2/resize:fit:720/1*iDAy9gjYIPe2a6doDRDh0w.png 720w, https://miro.medium.com/v2/resize:fit:750/1*iDAy9gjYIPe2a6doDRDh0w.png 750w, https://miro.medium.com/v2/resize:fit:786/1*iDAy9gjYIPe2a6doDRDh0w.png 786w, https://miro.medium.com/v2/resize:fit:828/1*iDAy9gjYIPe2a6doDRDh0w.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*iDAy9gjYIPe2a6doDRDh0w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*iDAy9gjYIPe2a6doDRDh0w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="405" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Clean exploration, reducing containers to a minimum.</figcaption></figure><p id="7a16" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">When we tried to lean in the opposite direction, it started to feel flat.</p><p id="0163" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Through experimentation and some trial and error we started to narrow down the list of elements that deserved a spotlight, and the ones that should play a supporting role.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qi"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*jHptQQJ6YvBqcfrraQ9wjQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*jHptQQJ6YvBqcfrraQ9wjQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*jHptQQJ6YvBqcfrraQ9wjQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*jHptQQJ6YvBqcfrraQ9wjQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*jHptQQJ6YvBqcfrraQ9wjQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*jHptQQJ6YvBqcfrraQ9wjQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*jHptQQJ6YvBqcfrraQ9wjQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*jHptQQJ6YvBqcfrraQ9wjQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="405" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Bringing both worlds together.</figcaption></figure><p id="1595" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Since we wanted to move away from a sterile feeling, we started with an extreme that was more tactile, and from there we started designing by subtraction, removing unnecessary complexity until we reached the point where we felt we couldn’t remove anything else.</p><p id="5df8" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Interactions became our main vehicle to deliver joy in the experience. We concluded that we wanted joy to come with the accomplishment of a task, and avoid it to be obtrusive and void of meaning.</p><p id="fe2e" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gz">A button that feels just right</strong></p><p id="3b3f" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Buttons are one of the most important pieces of a UI, because they are the main visual indicators for the actions a user can take. It didn’t come as a surprise the level of scrutiny our buttons went through, and to get it right, we went through a good amount of iterations.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*7_0c0RT8bZQeV0dyFeFxzg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*7_0c0RT8bZQeV0dyFeFxzg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*7_0c0RT8bZQeV0dyFeFxzg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*7_0c0RT8bZQeV0dyFeFxzg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*7_0c0RT8bZQeV0dyFeFxzg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*7_0c0RT8bZQeV0dyFeFxzg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*7_0c0RT8bZQeV0dyFeFxzg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*7_0c0RT8bZQeV0dyFeFxzg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Defining buttons based on real materials.</figcaption></figure><p id="e910" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We wanted to make buttons feel real, so we started from mimicking the real world. From there it was an iterative process of making sure the buttons hit the right notes.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*jy-fAaVvfq3yPJxEUI4AiA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*jy-fAaVvfq3yPJxEUI4AiA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*jy-fAaVvfq3yPJxEUI4AiA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*jy-fAaVvfq3yPJxEUI4AiA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*jy-fAaVvfq3yPJxEUI4AiA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*jy-fAaVvfq3yPJxEUI4AiA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*jy-fAaVvfq3yPJxEUI4AiA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*jy-fAaVvfq3yPJxEUI4AiA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="196" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">6 iteration on the buttons style</figcaption></figure><p id="8d92" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">They had to feel tactile, but not too imposing.<br/>They had to feel like plastic, not glass.<br/>Last, and probably more importantly, the interaction had to feel juicy.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*veIqvFlwac_wvzjjD0F_Uw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*veIqvFlwac_wvzjjD0F_Uw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*veIqvFlwac_wvzjjD0F_Uw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*veIqvFlwac_wvzjjD0F_Uw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*veIqvFlwac_wvzjjD0F_Uw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*veIqvFlwac_wvzjjD0F_Uw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*veIqvFlwac_wvzjjD0F_Uw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*veIqvFlwac_wvzjjD0F_Uw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="238" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">10 iterations on the primary button tactility</figcaption></figure><p id="c9b8" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The primary button became a challenge, since we initially lacked darker values to make it feel three dimensional. We partially solved it with a “shine”, but then realized the pressed state needed some attention too.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*_GRKl9duR1zRR8xuaVvd2w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*_GRKl9duR1zRR8xuaVvd2w.png 640w, https://miro.medium.com/v2/resize:fit:720/1*_GRKl9duR1zRR8xuaVvd2w.png 720w, https://miro.medium.com/v2/resize:fit:750/1*_GRKl9duR1zRR8xuaVvd2w.png 750w, https://miro.medium.com/v2/resize:fit:786/1*_GRKl9duR1zRR8xuaVvd2w.png 786w, https://miro.medium.com/v2/resize:fit:828/1*_GRKl9duR1zRR8xuaVvd2w.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*_GRKl9duR1zRR8xuaVvd2w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*_GRKl9duR1zRR8xuaVvd2w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="464" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Before and after. Going from glossy glass to matte plastic.</figcaption></figure><p id="764b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">After making the default button a touch lighter, we landed on a solution that had the level of juiciness we were looking for.</p><p id="f4cf" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gz">Icons with just enough weight</strong></p><p id="0ec4" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Icons are instrumental in reducing text overload and augmenting efficiency. We saw in the iconography an opportunity to inject a dash of joy and make the experience more approachable.</p><p id="883c" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The challenge with icons was finding the appropriate scale and weight. We strived for icons that were in harmony with typography, noticeable without being overpowering, and with a unique personality that doesn’t dominate the interface.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*NlyFDA-SqXoHgDveFcK-lA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*NlyFDA-SqXoHgDveFcK-lA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*NlyFDA-SqXoHgDveFcK-lA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*NlyFDA-SqXoHgDveFcK-lA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*NlyFDA-SqXoHgDveFcK-lA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*NlyFDA-SqXoHgDveFcK-lA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*NlyFDA-SqXoHgDveFcK-lA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*NlyFDA-SqXoHgDveFcK-lA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">One of the many sets we designed that was discarded.</figcaption></figure><p id="3cdd" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">For each style iteration, we designed dozens of icons, because we had to see them in context to find which performed the best.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*A54aPKF6pUXDRF8P8Cnp_Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*A54aPKF6pUXDRF8P8Cnp_Q.png 640w, https://miro.medium.com/v2/resize:fit:720/1*A54aPKF6pUXDRF8P8Cnp_Q.png 720w, https://miro.medium.com/v2/resize:fit:750/1*A54aPKF6pUXDRF8P8Cnp_Q.png 750w, https://miro.medium.com/v2/resize:fit:786/1*A54aPKF6pUXDRF8P8Cnp_Q.png 786w, https://miro.medium.com/v2/resize:fit:828/1*A54aPKF6pUXDRF8P8Cnp_Q.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*A54aPKF6pUXDRF8P8Cnp_Q.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*A54aPKF6pUXDRF8P8Cnp_Q.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="587" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Some of the variants we tried: 1.5px outline; duotone with 1px outline; 1px outline; 1.5px outline; filled.</figcaption></figure><p id="e1a8" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">After numerous iterations, we settled on a set with 1.5px outline, with filled variants used for navigation.<br/>These icons performed well in a dense interface, drawing just the right amount of attention, while the filled navigation icons anchor the user’s experience.</p><p id="6239" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk"><strong class="nn gz">From green to black</strong></p><p id="1ced" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The initial choice to retain green as the primary color was driven by its association with Shopify’s brand. However, as the design evolved, we found that green didn’t align well with the professional tone we were aiming for.</p><p id="83a7" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Green is often associated with a friendly, approachable interface and positive outcomes, but it didn’t lend itself to the neutrality we sought. We wanted our interface to be neutral, allowing colors to be used semantically and with purpose.</p><p id="c64b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We turned to black, because it’s commonly associated with “Pro” products. Black brings impact and contrast, which is exactly what we needed for our interactive states.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*OigXY0WSnZKuQlqbd5WZxg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*OigXY0WSnZKuQlqbd5WZxg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*OigXY0WSnZKuQlqbd5WZxg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*OigXY0WSnZKuQlqbd5WZxg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*OigXY0WSnZKuQlqbd5WZxg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*OigXY0WSnZKuQlqbd5WZxg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*OigXY0WSnZKuQlqbd5WZxg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*OigXY0WSnZKuQlqbd5WZxg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Mockup defining different interactive states, only using black.</figcaption></figure><p id="0b75" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">While being neutral, using black as a primary color ensured other colors used in the interface wouldn’t be overshadowed, but instead, carry their intended meanings.</p><p id="55c1" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We made all our decisions through debates, experimentation, prototyping and more debates. After a while we found something we were ready to push forward. But how did we know it was the right direction?</p><ul class=""><li id="cc81" class="nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og py pz qa bk">It was something we were excited to push forward.</li><li id="e66d" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">The design language aligned with the brief and the “this” and “not this”.</li><li id="fed6" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">And as we were applying our design language to more surfaces, the before and after became progressively more dramatic and appealing.</li></ul><p id="e2d3" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">At this point, our positioning was strong, and the design language we carefully crafted was ready for its next trial: reviews with key stakeholders.</p><h1 id="ef2b" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">Getting buy-in</h1><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*gVTRO8XrpcldWkiTqziSiA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*gVTRO8XrpcldWkiTqziSiA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*gVTRO8XrpcldWkiTqziSiA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*gVTRO8XrpcldWkiTqziSiA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*gVTRO8XrpcldWkiTqziSiA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*gVTRO8XrpcldWkiTqziSiA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*gVTRO8XrpcldWkiTqziSiA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*gVTRO8XrpcldWkiTqziSiA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="ceab" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Reviews can be hard, but they are key to turn stakeholders into advocates for our work. We knew it was crucial to listen and address concerns, without forgetting we had to be assertive, and showing the value in our design direction.</p><p id="c49b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Coming in with a strong point of view for the design language was vital. And reacting to relevant feedback from stakeholders by showing — not telling — the value in our solution gave us more credibility and increased trust. We gave each piece of feedback its fair shot, and we had to be willing to accept when some things actually strengthened the new design language.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qk"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*JEMCG5YcAcWrf78taROxRw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*JEMCG5YcAcWrf78taROxRw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*JEMCG5YcAcWrf78taROxRw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*JEMCG5YcAcWrf78taROxRw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*JEMCG5YcAcWrf78taROxRw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*JEMCG5YcAcWrf78taROxRw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*JEMCG5YcAcWrf78taROxRw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*JEMCG5YcAcWrf78taROxRw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="498" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Snapshot of a portion of one of our Figma decks.</figcaption></figure><p id="6bd0" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Each presentation deck was tailored for individual stakeholders, enabling discussion to happen at appropriate levels without alienating anyone. We found that leading with visuals rather than design principles shifted the conversations from theory to practicality, and this helped us move forwards.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*nFIkMD12bamMT4mwRhWNOw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*nFIkMD12bamMT4mwRhWNOw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*nFIkMD12bamMT4mwRhWNOw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*nFIkMD12bamMT4mwRhWNOw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*nFIkMD12bamMT4mwRhWNOw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*nFIkMD12bamMT4mwRhWNOw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*nFIkMD12bamMT4mwRhWNOw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*nFIkMD12bamMT4mwRhWNOw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Slide from a review, showing a before and after.</figcaption></figure><p id="db76" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We used a lot of “before and after’’ comparisons, to show folks the value in the change, but that wasn’t enough to capture the feeling of the new design language, so worked with Guilherme Santos — a developer in the Polaris team — and created a working prototype that gave people something more tangible than mockups to interact with, and react to.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi ql"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*ezz52ktH2tnFRHnIH-nglQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*ezz52ktH2tnFRHnIH-nglQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*ezz52ktH2tnFRHnIH-nglQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*ezz52ktH2tnFRHnIH-nglQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*ezz52ktH2tnFRHnIH-nglQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*ezz52ktH2tnFRHnIH-nglQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*ezz52ktH2tnFRHnIH-nglQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*ezz52ktH2tnFRHnIH-nglQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="425" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Quick walkthorugh our working prototype.</figcaption></figure><h1 id="4b69" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">Make it happen. Fast!</h1><p id="f206" class="pw-post-body-paragraph nl nm gy nn b hw pt np nq hz pu ns nt nu pv nw nx ny pw oa ob oc px oe of og gn bk">Our last review was with Tobi, the CEO. And in all honesty, we couldn’t have asked for a better outcome. He saw the value in the direction and we were all excited to ship this to Merchants as fast as possible.</p><p id="013f" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The best time to do that was the upcoming Summer Edition 2023 — in 10 weeks. Previously, it would have been impossible to ship a holistic design change across a complex application like the admin in 10 weeks time. Luckily, the Polaris team had spent the past year gearing up for this moment, with a mission to get the admin to 90% Polaris mainline coverage. The team overhauled Polaris tokens, simplified the release process from 3 steps to 1, created migration and linting tools, and created a coverage dashboard to help product teams get on Polaris mainline. We advocated, incentivized and partnered with feature teams to use Polaris components and tokens. We updated hundreds of lines of code to make sure the product leveraged Polaris.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*QeSIteM8HPRnVK8YhiImVQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*QeSIteM8HPRnVK8YhiImVQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*QeSIteM8HPRnVK8YhiImVQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*QeSIteM8HPRnVK8YhiImVQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*QeSIteM8HPRnVK8YhiImVQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*QeSIteM8HPRnVK8YhiImVQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*QeSIteM8HPRnVK8YhiImVQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*QeSIteM8HPRnVK8YhiImVQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Expectation: Linear effect.</figcaption></figure><p id="555b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">After a year, the admin was at 86.6% coverage. This effort required an initial investment, with improvements “below the surface” that didn’t yield a noticeable return for a year. But these small improvements stacked up, and had a compounding effect that enabled us to make such a drastic change to the Admin in a matter of weeks.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*1hU9WAus9_rGwxGH5ZuOMw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*1hU9WAus9_rGwxGH5ZuOMw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*1hU9WAus9_rGwxGH5ZuOMw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*1hU9WAus9_rGwxGH5ZuOMw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*1hU9WAus9_rGwxGH5ZuOMw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*1hU9WAus9_rGwxGH5ZuOMw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*1hU9WAus9_rGwxGH5ZuOMw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*1hU9WAus9_rGwxGH5ZuOMw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ot ff ou oh oi ov ow bf b bg z du">Reality: Compounding effect</figcaption></figure><p id="6dc4" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The rapid and effective execution of this transformation wouldn’t be possible without the hands-on leadership and exceptional dedication from Chloe Rice, Kyle Durand, and Sam Rose. They didn’t just direct the Polaris engineering team, but were deeply involved in the implementation details.<br/>Our team’s technical prowess and commitment to quality turned designs into a tangible, functioning reality.</p><p id="4213" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">It took about 3 weeks to update Polaris with the uplift styles and we were happy to see that when we updated Polaris, about 86% of the admin changed automatically. The hard work was updating the remaining 14% that had gone off Polaris mainline. Anytime we made a holistic spacing change in Polaris, it would inadvertently break components that had custom spacing.</p><p id="bee8" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Releasing this change was also a big operational feat, we had to:</p><ul class=""><li id="cdf0" class="nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og py pz qa bk">Make sure the implementation of the new design language stood up to our high quality bar.</li><li id="9811" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">Coordinate with dozens of other teams that were not only releasing new functionality, but now had to be guided through adapting those features to the new design language.</li><li id="cb58" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">Become de-facto owners of multiple areas in the admin that had no clear owners.</li><li id="ba11" class="nl nm gy nn b hw qb np nq hz qc ns nt nu qd nw nx ny qe oa ob oc qf oe of og py pz qa bk">Provide support to designers and developers.</li></ul><p id="f0cd" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This was all great on-the-ground research to show us how Polaris needs to continue to evolve to be a better system for the consumers and for the admin.</p><h1 id="d082" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">So… what shipped?</h1><p id="7764" class="pw-post-body-paragraph nl nm gy nn b hw pt np nq hz pu ns nt nu pv nw nx ny pw oa ob oc px oe of og gn bk">This design language is the most significant design change to Shopify’s Admin in 7 years. More than just a visual update, it elevates the admin by incorporating tactility, depth. Mirroring the tools merchants rely on in their daily operations.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Tuw0kt7EyL8kgJlrn0brbg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Tuw0kt7EyL8kgJlrn0brbg.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*Tuw0kt7EyL8kgJlrn0brbg.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*Tuw0kt7EyL8kgJlrn0brbg.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*Tuw0kt7EyL8kgJlrn0brbg.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*Tuw0kt7EyL8kgJlrn0brbg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*Tuw0kt7EyL8kgJlrn0brbg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Tuw0kt7EyL8kgJlrn0brbg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="56a7" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">The desire to bring satisfaction and joy to our merchant’s journey it’s part of Shopify’s DNA.</p><p id="a251" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We wanted to transpose some of that feeling to their mission control — the Shopify Admin — and make even the simplest actions, like the buttons they interact with every day, feel satisfying and fun — just like the “cha-ching” sound every time a sale is made.<br/>These are the moments when the experience feels alive and delivers small moments of joy in a merchant’s day.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*KGDD84qbNnTa1SWVuvO3zg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*KGDD84qbNnTa1SWVuvO3zg.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*KGDD84qbNnTa1SWVuvO3zg.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*KGDD84qbNnTa1SWVuvO3zg.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*KGDD84qbNnTa1SWVuvO3zg.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*KGDD84qbNnTa1SWVuvO3zg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*KGDD84qbNnTa1SWVuvO3zg.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*KGDD84qbNnTa1SWVuvO3zg.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="6cec" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">This is still a tool for work, so we balance these moments of joy with our increased focus on efficiency, by optimizing the UI to the type of work merchants do.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*hKnCCPQfL04-5Y4nWV1YuQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="76ea" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">While dealing with a lot of data, merchants desire to see more of it at once, so we reduced text sizes across the board, to use space more efficiently. We’re streamlining typography and chose Inter as the Admin’s typeface. Inter was crafted specifically for computer screens, and its enhanced legibility of small text is now available to all merchants, no matter the platform or browser they use.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*bRWbQSEOMXrxtiWI1H3EyQ.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="4983" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We decided to lean more on icons as intuitive shortcuts that allow merchants to navigate and interact swiftly across the interface, while avoiding an excessive amount of text that gets in your way to get things done. Common actions like editing are replaced with space-saving icons. Icons that have been redesigned to perfectly match our typography. Lightweight and efficient, they feel approachable and have a soul that intertwines well with the new design language.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*-gRZ8JZP4HBzFplKpwurLw.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*-gRZ8JZP4HBzFplKpwurLw.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*-gRZ8JZP4HBzFplKpwurLw.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*-gRZ8JZP4HBzFplKpwurLw.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*-gRZ8JZP4HBzFplKpwurLw.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*-gRZ8JZP4HBzFplKpwurLw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*-gRZ8JZP4HBzFplKpwurLw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*-gRZ8JZP4HBzFplKpwurLw.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="82f9" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Our new color palette is daring and vibrant. When we use color, we use full vibrancy to communicate meaning consistently. Green means go. Red means danger. Not half measures.</p><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*jQWjpzczVRz9gbdN9FnLnA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*jQWjpzczVRz9gbdN9FnLnA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*jQWjpzczVRz9gbdN9FnLnA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*jQWjpzczVRz9gbdN9FnLnA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*jQWjpzczVRz9gbdN9FnLnA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*jQWjpzczVRz9gbdN9FnLnA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*jQWjpzczVRz9gbdN9FnLnA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*jQWjpzczVRz9gbdN9FnLnA.gif 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="383b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Interactions are being given the attention they deserve. <br/>We defined a signature motion curve called Snappy. Snappy is quick, but still gives merchants a cue as to where something comes from, instead of things just appearing instantly. Snappy is progressively going to appear in many areas of the Admin over time.</p><p id="e555" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We’re combining motion, color, and depth to make the UI feel responsive and alive, and we’re creating affordances that enable merchants to interact with the interface intuitively, without having to pause to understand if something is interactive or not.</p><h1 id="46ea" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">Merchants’ “fresh eyes”</h1><figure class="ok ol om on oo gs oh oi paragraph-image"><div role="button" tabindex="0" class="op oq fj or bh os"><div class="oh oi oj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*6IPNVjHbWhWeglJV08iwpQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*6IPNVjHbWhWeglJV08iwpQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*6IPNVjHbWhWeglJV08iwpQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*6IPNVjHbWhWeglJV08iwpQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*6IPNVjHbWhWeglJV08iwpQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*6IPNVjHbWhWeglJV08iwpQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*6IPNVjHbWhWeglJV08iwpQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*6IPNVjHbWhWeglJV08iwpQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh gu gv c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="d1bd" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Before shipping the new design language, we wanted to know what merchants thought about it. So as soon as the implementation reached a good quality level, we conducted a study, where we gave temporary access to the new experience to several merchants.</p><p id="f2ab" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We weren’t looking for validation. We wanted to get an understanding whether merchants’ perceptions were lining up with the intentions behind the new design language. We were also getting ready for a preview of the kind of feedback merchants would have in regards to such a dramatic change in visual design versus the level of disruption this would have on their habits in the Admin, which is to be expected.</p><p id="3ab3" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Good news, the new design language was well received. “Familiar”, “refined”, “denser”, “useful” were terms that were used to describe the impact of the new design language. Merchants who also noticed the change called out the value in the “cleaner” design, and appreciated a higher density of information. Button styling and tactility was also called out as easier to see, and fun to interact with.</p><p id="20d9" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Even for merchants that thought such an update “doesn’t really matter”, we heard some acknowledgement of the UI feeling “fresher” and making their job “a little less boring”. Every small adjustment and improvement stacks up to exactly this. Although undisruptive, making menial tasks more enjoyable was exactly what we were aiming for.</p><p id="4784" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Sweating the details down to the pixel, discussing the tiniest things you can imagine… details aren’t just details. They make the product. And that product gives entrepreneurs the superpowers to achieve their goals.</p><h1 id="7c13" class="ox oy gy bf oz pa pb hy pc pd pe ib pf pg ph pi pj pk pl pm pn po pp pq pr ps bk">More to come</h1><p id="8055" class="pw-post-body-paragraph nl nm gy nn b hw pt np nq hz pu ns nt nu pv nw nx ny pw oa ob oc px oe of og gn bk">Like a curtain drawing back on a performance, what goes on behind the scenes can be chaotic and messy until the moment of the reveal. We hope that this peek at the process of building this new design language shows how the many actors, set designers and directors involved can come together when putting together such a substantial production. And I want to take a moment to acknowledge everyone from the Polaris team who contributed to this effort: Aaron Casanova, Alex Page, Aveline Thelen, Bernardo Garcia, Charles Lee, Chloe Rice, Dominik Wilkowski, Guilherme Santos, Jared Fanning, Jess Telford, JJ Galipeau, Joe Thomas, Johan Stromqvist, Kyle Durand, Laura Griffen, Lo Kim, Marten Bjork, Mateus Ferreira, Melanie Tayler, Natasha Lloyd, Nayeob Kim, Raquel Breternitz, Sam Rose, Sara Hill, Selene Hinkley, Sophie Schneider, Susie Simon, Thomas Jonkajtys, Yesenia Perez-Cruz, Yuraima Estevez.</p><p id="3812" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">We’re far from finished.</p><p id="2a3b" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">Our goal is to make Shopify’s admin the best place for our merchants to run their businesses, and we’ll keep evolving our design language to be the best, most professional tool they can rely on. That means always looking to the future and never letting ourselves grow stale.</p><p id="1c48" class="pw-post-body-paragraph nl nm gy nn b hw no np nq hz nr ns nt nu nv nw nx ny nz oa ob oc od oe of og gn bk">When you open Shopify’s admin today, some areas might still feel untouched — new illustrations, for example, are still being evolved and will roll out alongside ambitious updates and evolutions of our design patterns. But before we do that, we want to lean in and listen to what our merchants think about this powerful tool that we have the privilege to design. So stay tuned for more.</p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qn qo ab jq"><div class="qp ab"><a class="qq ay am ao" rel="noopener follow" href="/tag/design?source=post_page-----7c54fc6564d9--------------------------------"><div class="qr fj cx qs ge qt qu bf b bg z bk qv">Design</div></a></div><div class="qp ab"><a class="qq ay am ao" rel="noopener follow" href="/tag/ux?source=post_page-----7c54fc6564d9--------------------------------"><div class="qr fj cx qs ge qt qu bf b bg z bk qv">UX</div></a></div><div class="qp ab"><a class="qq ay am ao" rel="noopener follow" href="/tag/design-systems?source=post_page-----7c54fc6564d9--------------------------------"><div class="qr fj cx qs ge qt qu bf b bg z bk qv">Design Systems</div></a></div><div class="qp ab"><a class="qq ay am ao" rel="noopener follow" href="/tag/shopify?source=post_page-----7c54fc6564d9--------------------------------"><div class="qr fj cx qs ge qt qu bf b bg z bk qv">Shopify</div></a></div><div class="qp ab"><a class="qq ay am ao" rel="noopener follow" href="/tag/polaris?source=post_page-----7c54fc6564d9--------------------------------"><div class="qr fj cx qs ge qt qu bf b bg z bk qv">Polaris</div></a></div></div></div></div><div class="l"></div><footer class="qw qx qy qz ra ab q rb ja c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rc"><div class="ab q ll"><div class="rd l"><span class="l re rf rg e d"><div class="ab q ll lm"><div class="pw-multi-vote-icon fj ju ln lo lp"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fshopify-ux%2F7c54fc6564d9&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;user=Jos%C3%A9+Torre&amp;userId=463659dc147f&amp;source=---footer_actions--7c54fc6564d9---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lq ao lr ls lt lu am lv lw lx lp"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ly lz ma mb mc md me"><p class="bf b dv z du"><span class="mf">--</span></p></div></div></span><span class="l h g f rh ri"><div class="ab q ll lm"><div class="pw-multi-vote-icon fj ju ln lo lp"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fshopify-ux%2F7c54fc6564d9&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;user=Jos%C3%A9+Torre&amp;userId=463659dc147f&amp;source=---footer_actions--7c54fc6564d9---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lq ao lr ls lt lu am lv lw lx lp"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ly lz ma mb mc md me"><p class="bf b dv z du"><span class="mf">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="mg lq mh mi ab q fk" aria-label="responses" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg fk mj"><path fill-rule="evenodd" d="M18.472 20.272c-1.194 0-2.335-.355-3.39-1.052a8 8 0 0 1-.676-.499 8.7 8.7 0 0 1-2.284.307C7.638 19.028 4 15.668 4 11.54c.001-4.148 3.64-7.508 8.123-7.508 4.475 0 8.118 3.36 8.118 7.49 0 1.977-.816 3.826-2.307 5.231.022.163.058.336.114.528.184.662.515 1.325.985 1.958.144.202.165.461.055.672a.66.66 0 0 1-.588.365h-.029z" clip-rule="evenodd"></path></svg></button></div></div></div></div><div class="ab q"><div class="rj l jn"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F7c54fc6564d9&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fshopify-ux%2Fuplifting-shopify-polaris-7c54fc6564d9&amp;source=---footer_actions--7c54fc6564d9---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du ml" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="rj l jn"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al ms an ao ap ex mt mu mv mw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="rk rl rm rn ro l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="rp bh r rq"></div><div class="rr l"><div class="ab rs rt ru jp jo"><div class="rv rw rx ry rz sa sb sc sd se ab cp"><div class="h k"><a href="https://medium.com/shopify-ux?source=post_page---post_publication_info--7c54fc6564d9--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Shopify UX" class="sf ir is cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*7uZW5TYHanffvCImGRBkZw.jpeg" width="48" height="48" loading="lazy"/><div class="sf l is ir fs n fr sg"></div></div></a></div><div class="j i d"><a href="https://medium.com/shopify-ux?source=post_page---post_publication_info--7c54fc6564d9--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Shopify UX" class="sf si sh cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*7uZW5TYHanffvCImGRBkZw.jpeg" width="64" height="64" loading="lazy"/><div class="sf l sh si fs n fr sg"></div></div></a></div><div class="j i d sj jn"><div class="ab"></div></div></div><div class="ab co sk"><div class="sl sm sn so sp l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/shopify-ux?source=post_page---post_publication_info--7c54fc6564d9--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf sr ss st su sv sw sx nu sy sz ny ta tb oc tc td bk"><span class="gn sq">Published in <!-- -->Shopify UX</span></h2></a><div class="qp ab iq"><div class="l jn"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jg" rel="noopener follow" href="/shopify-ux/followers?source=post_page---post_publication_info--7c54fc6564d9--------------------------------">70K Followers</a></span></div><div class="bf b bg z du ab jt"><span class="jh l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jg" rel="noopener follow" href="/shopify-ux/uplifting-shopify-polaris-7c54fc6564d9?source=post_page---post_publication_info--7c54fc6564d9--------------------------------">Last published <span>Jul 25, 2023</span></a></div></div><div class="te l"><p class="bf b bg z bk"><span class="gn">The latest thinking on commerce, craft, and culture from the Shopify UX team.</span></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab rs rt ru jp jo"><div class="rv rw rx ry rz sa sb sc sd se ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@halfool?source=post_page---post_author_info--7c54fc6564d9--------------------------------"><div class="l fj"><img alt="José Torre" class="l fd by is ir cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*UVVl3noG-W8A5Uf_mHOquw.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l is ir fs n ay sg"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@halfool?source=post_page---post_author_info--7c54fc6564d9--------------------------------"><div class="l fj"><img alt="José Torre" class="l fd by sh si cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*UVVl3noG-W8A5Uf_mHOquw.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l sh si fs n ay sg"></div></div></a></div><div class="j i d sj jn"><div class="ab"><span><button class="bf b bg z tf qr tg th ti tj tk ev ew tl tm tn fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sk"><div class="sl sm sn so sp l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@halfool?source=post_page---post_author_info--7c54fc6564d9--------------------------------"><h2 class="pw-author-name bf sr ss st su sv sw sx nu sy sz ny ta tb oc tc td bk"><span class="gn sq">Written by <!-- -->José Torre</span></h2></a><div class="qp ab iq"><div class="l jn"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jg" rel="noopener follow" href="/@halfool/followers?source=post_page---post_author_info--7c54fc6564d9--------------------------------">9.2K Followers</a></span></div><div class="bf b bg z du ab jt"><span class="jh l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jg" rel="noopener follow" href="/@halfool/following?source=post_page---post_author_info--7c54fc6564d9--------------------------------">160 Following</a></div></div><div class="te l"><p class="bf b bg z bk"><span class="gn">Designer. Working at Shopify by day, being Halfool by night.</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z tf qr tg th ti tj tk ev ew tl tm tn fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="to tp tq tr ts l bx"><div class="h k j"><div class="rp bh tt tu"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="tv ab ll jq"><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&amp;source=post_page-----7c54fc6564d9--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----7c54fc6564d9--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="tw tx l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----7c54fc6564d9--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="tw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----7c54fc6564d9--------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241126-181518-0cb59a020f"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-7c54fc6564d9","user-463659dc147f","collection-bbc664515c9e"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"77880f42-8ea1-4dbe-9314-c8644cc1018f","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-13c55214856ddbace1d39b9786e80d2c-616812517ae04058-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fshopify-ux\u002Fuplifting-shopify-polaris-7c54fc6564d9","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20241126-181518-0cb59a020f","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241126-181518-0cb59a020f","commit":"0cb59a020f4453d0900f671f1a6576feecc55e74"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"shopify-ux\"})":{"__ref":"Collection:bbc664515c9e"},"postResult({\"id\":\"7c54fc6564d9\"})":{"__ref":"Post:7c54fc6564d9"}},"ImageMetadata:1*7uZW5TYHanffvCImGRBkZw.jpeg":{"__typename":"ImageMetadata","id":"1*7uZW5TYHanffvCImGRBkZw.jpeg","originalWidth":1080,"originalHeight":1080},"Collection:bbc664515c9e":{"__typename":"Collection","id":"bbc664515c9e","favicon":{"__ref":"ImageMetadata:1*7uZW5TYHanffvCImGRBkZw.jpeg"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFFFFF","point":0},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.1},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.2},{"__typename":"ColorPoint","color":"#FFD1E7D1","point":0.6},{"__typename":"ColorPoint","color":"#FFA3D0A2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF1A8917","point":0},{"__typename":"ColorPoint","color":"#FF11800E","point":0.1},{"__typename":"ColorPoint","color":"#FF0F730C","point":0.2},{"__typename":"ColorPoint","color":"#FF095407","point":1}]},"tintBackgroundSpectrum":null},"domain":null,"slug":"shopify-ux","googleAnalyticsId":"UA-49178120-14","editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:98e946043b16"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:3189460bdcf9"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:10d5261c1710"}}],"name":"Shopify UX","avatar":{"__ref":"ImageMetadata:1*7uZW5TYHanffvCImGRBkZw.jpeg"},"description":"The latest thinking on commerce, craft, and culture from the Shopify UX team.","subscriberCount":70130,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:7c54fc6564d9"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:bbc664515c9e-viewerId:lo_32cf315d2087"},"twitterUsername":null,"facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*7uZW5TYHanffvCImGRBkZw.jpeg"}},"User:98e946043b16":{"__typename":"User","id":"98e946043b16"},"User:3189460bdcf9":{"__typename":"User","id":"3189460bdcf9"},"User:10d5261c1710":{"__typename":"User","id":"10d5261c1710"},"User:463659dc147f":{"__typename":"User","id":"463659dc147f","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"halfool.medium.com"}},"hasSubdomain":true,"username":"halfool","name":"José Torre","newsletterV3":{"__ref":"NewsletterV3:407eabcc27bc"},"linkedAccounts":{"__ref":"LinkedAccounts:463659dc147f"},"isSuspended":false,"imageId":"1*UVVl3noG-W8A5Uf_mHOquw.jpeg","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":9206,"followingCount":128,"collectionFollowingCount":32},"bio":"Designer. Working at Shopify by day, being Halfool by night.","isPartnerProgramEnrolled":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:463659dc147f-viewerId:lo_32cf315d2087"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":"halfool_draws"},"Post:7c54fc6564d9":{"__typename":"Post","id":"7c54fc6564d9","firstPublishedAt":1690312966196,"creator":{"__ref":"User:463659dc147f"},"collection":{"__ref":"Collection:bbc664515c9e"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fshopify-ux\u002Fuplifting-shopify-polaris-7c54fc6564d9","sequence":null,"uniqueSlug":"uplifting-shopify-polaris-7c54fc6564d9","content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"90df","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:97dd109d399e_0"},{"__ref":"Paragraph:97dd109d399e_1"},{"__ref":"Paragraph:97dd109d399e_2"},{"__ref":"Paragraph:97dd109d399e_3"},{"__ref":"Paragraph:97dd109d399e_4"},{"__ref":"Paragraph:97dd109d399e_5"},{"__ref":"Paragraph:97dd109d399e_6"},{"__ref":"Paragraph:97dd109d399e_7"},{"__ref":"Paragraph:97dd109d399e_8"},{"__ref":"Paragraph:97dd109d399e_9"},{"__ref":"Paragraph:97dd109d399e_10"},{"__ref":"Paragraph:97dd109d399e_11"},{"__ref":"Paragraph:97dd109d399e_12"},{"__ref":"Paragraph:97dd109d399e_13"},{"__ref":"Paragraph:97dd109d399e_14"},{"__ref":"Paragraph:97dd109d399e_15"},{"__ref":"Paragraph:97dd109d399e_16"},{"__ref":"Paragraph:97dd109d399e_17"},{"__ref":"Paragraph:97dd109d399e_18"},{"__ref":"Paragraph:97dd109d399e_19"},{"__ref":"Paragraph:97dd109d399e_20"},{"__ref":"Paragraph:97dd109d399e_21"},{"__ref":"Paragraph:97dd109d399e_22"},{"__ref":"Paragraph:97dd109d399e_23"},{"__ref":"Paragraph:97dd109d399e_24"},{"__ref":"Paragraph:97dd109d399e_25"},{"__ref":"Paragraph:97dd109d399e_26"},{"__ref":"Paragraph:97dd109d399e_27"},{"__ref":"Paragraph:97dd109d399e_28"},{"__ref":"Paragraph:97dd109d399e_29"},{"__ref":"Paragraph:97dd109d399e_30"},{"__ref":"Paragraph:97dd109d399e_31"},{"__ref":"Paragraph:97dd109d399e_32"},{"__ref":"Paragraph:97dd109d399e_33"},{"__ref":"Paragraph:97dd109d399e_34"},{"__ref":"Paragraph:97dd109d399e_35"},{"__ref":"Paragraph:97dd109d399e_36"},{"__ref":"Paragraph:97dd109d399e_37"},{"__ref":"Paragraph:97dd109d399e_38"},{"__ref":"Paragraph:97dd109d399e_39"},{"__ref":"Paragraph:97dd109d399e_40"},{"__ref":"Paragraph:97dd109d399e_41"},{"__ref":"Paragraph:97dd109d399e_42"},{"__ref":"Paragraph:97dd109d399e_43"},{"__ref":"Paragraph:97dd109d399e_44"},{"__ref":"Paragraph:97dd109d399e_45"},{"__ref":"Paragraph:97dd109d399e_46"},{"__ref":"Paragraph:97dd109d399e_47"},{"__ref":"Paragraph:97dd109d399e_48"},{"__ref":"Paragraph:97dd109d399e_49"},{"__ref":"Paragraph:97dd109d399e_50"},{"__ref":"Paragraph:97dd109d399e_51"},{"__ref":"Paragraph:97dd109d399e_52"},{"__ref":"Paragraph:97dd109d399e_53"},{"__ref":"Paragraph:97dd109d399e_54"},{"__ref":"Paragraph:97dd109d399e_55"},{"__ref":"Paragraph:97dd109d399e_56"},{"__ref":"Paragraph:97dd109d399e_57"},{"__ref":"Paragraph:97dd109d399e_58"},{"__ref":"Paragraph:97dd109d399e_59"},{"__ref":"Paragraph:97dd109d399e_60"},{"__ref":"Paragraph:97dd109d399e_61"},{"__ref":"Paragraph:97dd109d399e_62"},{"__ref":"Paragraph:97dd109d399e_63"},{"__ref":"Paragraph:97dd109d399e_64"},{"__ref":"Paragraph:97dd109d399e_65"},{"__ref":"Paragraph:97dd109d399e_66"},{"__ref":"Paragraph:97dd109d399e_67"},{"__ref":"Paragraph:97dd109d399e_68"},{"__ref":"Paragraph:97dd109d399e_69"},{"__ref":"Paragraph:97dd109d399e_70"},{"__ref":"Paragraph:97dd109d399e_71"},{"__ref":"Paragraph:97dd109d399e_72"},{"__ref":"Paragraph:97dd109d399e_73"},{"__ref":"Paragraph:97dd109d399e_74"},{"__ref":"Paragraph:97dd109d399e_75"},{"__ref":"Paragraph:97dd109d399e_76"},{"__ref":"Paragraph:97dd109d399e_77"},{"__ref":"Paragraph:97dd109d399e_78"},{"__ref":"Paragraph:97dd109d399e_79"},{"__ref":"Paragraph:97dd109d399e_80"},{"__ref":"Paragraph:97dd109d399e_81"},{"__ref":"Paragraph:97dd109d399e_82"},{"__ref":"Paragraph:97dd109d399e_83"},{"__ref":"Paragraph:97dd109d399e_84"},{"__ref":"Paragraph:97dd109d399e_85"},{"__ref":"Paragraph:97dd109d399e_86"},{"__ref":"Paragraph:97dd109d399e_87"},{"__ref":"Paragraph:97dd109d399e_88"},{"__ref":"Paragraph:97dd109d399e_89"},{"__ref":"Paragraph:97dd109d399e_90"},{"__ref":"Paragraph:97dd109d399e_91"},{"__ref":"Paragraph:97dd109d399e_92"},{"__ref":"Paragraph:97dd109d399e_93"},{"__ref":"Paragraph:97dd109d399e_94"},{"__ref":"Paragraph:97dd109d399e_95"},{"__ref":"Paragraph:97dd109d399e_96"},{"__ref":"Paragraph:97dd109d399e_97"},{"__ref":"Paragraph:97dd109d399e_98"},{"__ref":"Paragraph:97dd109d399e_99"},{"__ref":"Paragraph:97dd109d399e_100"},{"__ref":"Paragraph:97dd109d399e_101"},{"__ref":"Paragraph:97dd109d399e_102"},{"__ref":"Paragraph:97dd109d399e_103"},{"__ref":"Paragraph:97dd109d399e_104"},{"__ref":"Paragraph:97dd109d399e_105"},{"__ref":"Paragraph:97dd109d399e_106"},{"__ref":"Paragraph:97dd109d399e_107"},{"__ref":"Paragraph:97dd109d399e_108"},{"__ref":"Paragraph:97dd109d399e_109"},{"__ref":"Paragraph:97dd109d399e_110"},{"__ref":"Paragraph:97dd109d399e_111"},{"__ref":"Paragraph:97dd109d399e_112"},{"__ref":"Paragraph:97dd109d399e_113"},{"__ref":"Paragraph:97dd109d399e_114"},{"__ref":"Paragraph:97dd109d399e_115"},{"__ref":"Paragraph:97dd109d399e_116"},{"__ref":"Paragraph:97dd109d399e_117"},{"__ref":"Paragraph:97dd109d399e_118"},{"__ref":"Paragraph:97dd109d399e_119"},{"__ref":"Paragraph:97dd109d399e_120"},{"__ref":"Paragraph:97dd109d399e_121"},{"__ref":"Paragraph:97dd109d399e_122"},{"__ref":"Paragraph:97dd109d399e_123"},{"__ref":"Paragraph:97dd109d399e_124"},{"__ref":"Paragraph:97dd109d399e_125"},{"__ref":"Paragraph:97dd109d399e_126"},{"__ref":"Paragraph:97dd109d399e_127"}]},"validatedShareKey":"","shareKeyCreator":null},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"design"}],"isPublished":true,"latestPublishedVersion":"97dd109d399e","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":25},"clapCount":2215,"allowResponses":false,"isLimitedState":false,"title":"Uplifting Shopify Polaris","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1691063649238,"readingTime":14.18679245283019,"previewContent":{"__typename":"PreviewContent","subtitle":"The process of evolving a large scale Design System."},"previewImage":{"__ref":"ImageMetadata:1*247B8K14YiHZH7hjuvG2Zg.png"},"isShortform":false,"seoTitle":"","updatedAt":1706726433259,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:7c54fc6564d9-viewerId:lo_32cf315d2087"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:design"},{"__ref":"Tag:ux"},{"__ref":"Tag:design-systems"},{"__ref":"Tag:shopify"},{"__ref":"Tag:polaris"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":3150,"layerCake":1,"responsesLocked":false},"LinkedAccounts:463659dc147f":{"__typename":"LinkedAccounts","mastodon":null,"id":"463659dc147f"},"UserViewerEdge:userId:463659dc147f-viewerId:lo_32cf315d2087":{"__typename":"UserViewerEdge","id":"userId:463659dc147f-viewerId:lo_32cf315d2087","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:407eabcc27bc":{"__typename":"NewsletterV3","id":"407eabcc27bc","type":"NEWSLETTER_TYPE_AUTHOR","slug":"463659dc147f","name":"463659dc147f","collection":null,"user":{"__ref":"User:463659dc147f"}},"ImageMetadata:1*247B8K14YiHZH7hjuvG2Zg.png":{"__typename":"ImageMetadata","id":"1*247B8K14YiHZH7hjuvG2Zg.png","originalHeight":1874,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_0":{"__typename":"Paragraph","id":"97dd109d399e_0","name":"6c75","type":"IMG","href":null,"layout":"FULL_WIDTH","metadata":{"__ref":"ImageMetadata:1*247B8K14YiHZH7hjuvG2Zg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_1":{"__typename":"Paragraph","id":"97dd109d399e_1","name":"0dc5","type":"H3","href":null,"layout":null,"metadata":null,"text":"Uplifting Shopify Polaris","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_2":{"__typename":"Paragraph","id":"97dd109d399e_2","name":"2cae","type":"H4","href":null,"layout":null,"metadata":null,"text":"The process of evolving a large scale design system","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_3":{"__typename":"Paragraph","id":"97dd109d399e_3","name":"59d1","type":"P","href":null,"layout":null,"metadata":null,"text":"For years, Polaris’s design language has been relatively unchanged. It was heavily influenced by the once-pervasive flat design trend, and although there was a minor update in 2020 with new colors and illustrations, the core design philosophy barely evolved.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*UjGm02zEBdwKVexXxjwCng.png":{"__typename":"ImageMetadata","id":"1*UjGm02zEBdwKVexXxjwCng.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_4":{"__typename":"Paragraph","id":"97dd109d399e_4","name":"25a3","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*UjGm02zEBdwKVexXxjwCng.png"},"text":"Shopify’s Admin in 2017","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_5":{"__typename":"Paragraph","id":"97dd109d399e_5","name":"f814","type":"P","href":null,"layout":null,"metadata":null,"text":"Before flat design took hold in the early 2010s, software had more dimensionality and tried to mimic the real world. Then, new minimalism fostered cleaner interfaces, made things easier to understand, and made experiences feel more efficient. This was fantastic. Whenever Shopify removes complexity from its product, merchant success goes up. Flat design definitely had a role in that.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*uzjW7llxAsLyp-tAl39cdg.png":{"__typename":"ImageMetadata","id":"1*uzjW7llxAsLyp-tAl39cdg.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_6":{"__typename":"Paragraph","id":"97dd109d399e_6","name":"96c3","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*uzjW7llxAsLyp-tAl39cdg.png"},"text":"Shopify’s Admin in 2020","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_7":{"__typename":"Paragraph","id":"97dd109d399e_7","name":"c30c","type":"P","href":null,"layout":null,"metadata":null,"text":"Minimalism had run its course when merchants started classifying the Admin experience as “dull”, “depressing” and “bland”. Polaris helped standardize this sterile feeling, with a UI that was not optimized for the kind of work merchants have to do everyday.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_8":{"__typename":"Paragraph","id":"97dd109d399e_8","name":"8a99","type":"P","href":null,"layout":null,"metadata":null,"text":"Shopify’s Admin is not just a website, it’s a professional tool. So it should feel like that — but one with soul. So we set about making it feel that way.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_9":{"__typename":"Paragraph","id":"97dd109d399e_9","name":"0304","type":"H3","href":null,"layout":null,"metadata":null,"text":"The starting point","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_10":{"__typename":"Paragraph","id":"97dd109d399e_10","name":"af17","type":"P","href":null,"layout":null,"metadata":null,"text":"With that realization, at the end of last year, Thomas Jonkajtys — a fellow designer — and I teamed up with the mission of uplifting Polaris’s design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_11":{"__typename":"Paragraph","id":"97dd109d399e_11","name":"0a28","type":"P","href":null,"layout":null,"metadata":null,"text":"The initial brief was pretty simple, we wanted to make the Admin feel more like a “pro tool”.\nWhat does that actually mean? A few different things:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_12":{"__typename":"Paragraph","id":"97dd109d399e_12","name":"a690","type":"ULI","href":null,"layout":null,"metadata":null,"text":"A pro tool is effective in the way it organizes and displays information.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_13":{"__typename":"Paragraph","id":"97dd109d399e_13","name":"569b","type":"ULI","href":null,"layout":null,"metadata":null,"text":"A pro tool is highly functional, with straightforward visuals, while not being intrusive or decorative.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_14":{"__typename":"Paragraph","id":"97dd109d399e_14","name":"4d17","type":"ULI","href":null,"layout":null,"metadata":null,"text":"A pro tool is responsive, and provides interactions that feel almost real.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_15":{"__typename":"Paragraph","id":"97dd109d399e_15","name":"64a6","type":"P","href":null,"layout":null,"metadata":null,"text":"Ultimately, our design language had to make the product feel more effective and coherent in the context of commerce, while being aesthetically pleasing, and able to create moments of joy.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_16":{"__typename":"Paragraph","id":"97dd109d399e_16","name":"0460","type":"P","href":null,"layout":null,"metadata":null,"text":"With that said, at this point in the process, these are just words. Design needs visuals, so we started collecting inspiration from products we thought spoke a similar design language to what we were aiming for. Most of them were actual physical products, and not software. We didn’t want to follow any particular digital trend, as the world of merchants is more than just a screen.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_17":{"__typename":"Paragraph","id":"97dd109d399e_17","name":"1f70","type":"P","href":null,"layout":null,"metadata":null,"text":"To define the visual design direction, we created two clusters: one for “this”, and another for “not this”. At this stage it’s important to capture what we want our design language to convey as well as what we want it to avoid.This helps narrow down our options and defines the range in which we’ll be directing, pivoting, and adjusting the language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*6ER1sV6obgEC8CUJYtf-2g.png":{"__typename":"ImageMetadata","id":"1*6ER1sV6obgEC8CUJYtf-2g.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_18":{"__typename":"Paragraph","id":"97dd109d399e_18","name":"a61c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*6ER1sV6obgEC8CUJYtf-2g.png"},"text":"Inspiration clusters","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_19":{"__typename":"Paragraph","id":"97dd109d399e_19","name":"693c","type":"P","href":null,"layout":null,"metadata":null,"text":"We also started digging for photos and recordings from previous research studies to get a better understanding of the environment in which merchants operate: Where do they work? What’s on their desk? What objects do they often use?\nThis helped us understand merchants at a different level, and find inspiration in objects that could bring a sense of familiarity.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*vR6KyI59GHD9yxTkXgZ_Iw.png":{"__typename":"ImageMetadata","id":"1*vR6KyI59GHD9yxTkXgZ_Iw.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_20":{"__typename":"Paragraph","id":"97dd109d399e_20","name":"6f61","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*vR6KyI59GHD9yxTkXgZ_Iw.png"},"text":"Merchants’ true mission control (photos from a research study).","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_21":{"__typename":"Paragraph","id":"97dd109d399e_21","name":"195f","type":"P","href":null,"layout":null,"metadata":null,"text":"Good design can be dictated, but great design comes from understanding the way your users function in their space and offering solutions that make their lives easier.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_22":{"__typename":"Paragraph","id":"97dd109d399e_22","name":"d21c","type":"H3","href":null,"layout":null,"metadata":null,"text":"Diverging","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*nkOQVUx6k10e1037TIBG9Q.png":{"__typename":"ImageMetadata","id":"1*nkOQVUx6k10e1037TIBG9Q.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_23":{"__typename":"Paragraph","id":"97dd109d399e_23","name":"cb99","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*nkOQVUx6k10e1037TIBG9Q.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_24":{"__typename":"Paragraph","id":"97dd109d399e_24","name":"c7f9","type":"P","href":null,"layout":null,"metadata":null,"text":"With a more concrete understanding of the range we wanted to explore, we worked with fellow Polaris designers Sara Hill and Joe Thomas, to broaden and accelerate our exploration.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_25":{"__typename":"Paragraph","id":"97dd109d399e_25","name":"7f2f","type":"P","href":null,"layout":null,"metadata":null,"text":"Design needs constraints and instructions, so we defined a few rules:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_26":{"__typename":"Paragraph","id":"97dd109d399e_26","name":"328f","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Keep existing behavior and patterns. Our focus was to evolve the design language, not the entire merchant experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_27":{"__typename":"Paragraph","id":"97dd109d399e_27","name":"34d6","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Design extremes. We’re not looking for subtlety at this state, and we can always pull back and calibrate afterwards.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_28":{"__typename":"Paragraph","id":"97dd109d399e_28","name":"53cd","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Keep it high-fidelity, but high-level. Details can be refined later.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_29":{"__typename":"Paragraph","id":"97dd109d399e_29","name":"8968","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Mimic real merchants. Our design language needed to flex and adapt to merchants, working with idealized data doesn’t help achieve this.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_30":{"__typename":"Paragraph","id":"97dd109d399e_30","name":"369c","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Diversify. We wanted to have more visual diversity, more options, and wanted to prevent folks from falling in love with one idea, because most of them would be left on the drawing board.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*4vCN8mMJbffBmlXnuVw0xw.png":{"__typename":"ImageMetadata","id":"1*4vCN8mMJbffBmlXnuVw0xw.png","originalHeight":6480,"originalWidth":7680,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_31":{"__typename":"Paragraph","id":"97dd109d399e_31","name":"673f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*4vCN8mMJbffBmlXnuVw0xw.png"},"text":"A small sample of our divergent explorations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_32":{"__typename":"Paragraph","id":"97dd109d399e_32","name":"a36e","type":"P","href":null,"layout":null,"metadata":null,"text":"This divergent exploration brought up many fun ideas. A broader use of color, ambitious skeuomorphism, more 3D, usage of blend modes, you name it. We had covered enough ground to reduce the team back to two, and started the next step in defining the design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_33":{"__typename":"Paragraph","id":"97dd109d399e_33","name":"428a","type":"H3","href":null,"layout":null,"metadata":null,"text":"Converging","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*SZlKCfwOf0QxcTYRShiE3Q.png":{"__typename":"ImageMetadata","id":"1*SZlKCfwOf0QxcTYRShiE3Q.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_34":{"__typename":"Paragraph","id":"97dd109d399e_34","name":"f4c1","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*SZlKCfwOf0QxcTYRShiE3Q.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_35":{"__typename":"Paragraph","id":"97dd109d399e_35","name":"6065","type":"P","href":null,"layout":null,"metadata":null,"text":"Two very opinionated designers executing on a vision is challenging. We had to build trust throughout the entire process.\nThe divergent exploration gave us an outlet to experiment, but also gave us exposure to the perspective of other designers. It also served as a way to figure out how we could lean on each other’s strengths.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_36":{"__typename":"Paragraph","id":"97dd109d399e_36","name":"4199","type":"P","href":null,"layout":null,"metadata":null,"text":"Some decisions were easy, like finding a font that felt appropriate to Shopify. We both picked Inter independently, so it became obvious that was the way to go.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_37":{"__typename":"Paragraph","id":"97dd109d399e_37","name":"8c21","type":"P","href":null,"layout":null,"metadata":null,"text":"Other decisions took a bit more fine-tuning:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_38":{"__typename":"Paragraph","id":"97dd109d399e_38","name":"b658","type":"P","href":null,"layout":null,"metadata":null,"text":"Clean but tactile","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":17,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_39":{"__typename":"Paragraph","id":"97dd109d399e_39","name":"e517","type":"P","href":null,"layout":null,"metadata":null,"text":"It’s easy to lean too far in a direction, go overboard, and end up with something that feels monotone. As we analyzed our divergent explorations, we found valuable elements in both ends of the spectrum.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_40":{"__typename":"Paragraph","id":"97dd109d399e_40","name":"c2f1","type":"P","href":null,"layout":null,"metadata":null,"text":"The real challenge was striking the right balance, and finding the combination of elements that complemented each other.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*FBjbuywx8oCiSbT7oOn1nw.png":{"__typename":"ImageMetadata","id":"1*FBjbuywx8oCiSbT7oOn1nw.png","originalHeight":1968,"originalWidth":3402,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_41":{"__typename":"Paragraph","id":"97dd109d399e_41","name":"1f31","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*FBjbuywx8oCiSbT7oOn1nw.png"},"text":"Vibrant exploration, with bold use of color and 3D objects.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_42":{"__typename":"Paragraph","id":"97dd109d399e_42","name":"fd43","type":"P","href":null,"layout":null,"metadata":null,"text":"When we leaned too much into the dimensionality and vibrancy, everything became busy, and demanded too much attention.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*iDAy9gjYIPe2a6doDRDh0w.png":{"__typename":"ImageMetadata","id":"1*iDAy9gjYIPe2a6doDRDh0w.png","originalHeight":1968,"originalWidth":3402,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_43":{"__typename":"Paragraph","id":"97dd109d399e_43","name":"a932","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*iDAy9gjYIPe2a6doDRDh0w.png"},"text":"Clean exploration, reducing containers to a minimum.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_44":{"__typename":"Paragraph","id":"97dd109d399e_44","name":"7a16","type":"P","href":null,"layout":null,"metadata":null,"text":"When we tried to lean in the opposite direction, it started to feel flat.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_45":{"__typename":"Paragraph","id":"97dd109d399e_45","name":"0163","type":"P","href":null,"layout":null,"metadata":null,"text":"Through experimentation and some trial and error we started to narrow down the list of elements that deserved a spotlight, and the ones that should play a supporting role.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*jHptQQJ6YvBqcfrraQ9wjQ.png":{"__typename":"ImageMetadata","id":"1*jHptQQJ6YvBqcfrraQ9wjQ.png","originalHeight":1968,"originalWidth":3402,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_46":{"__typename":"Paragraph","id":"97dd109d399e_46","name":"690a","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*jHptQQJ6YvBqcfrraQ9wjQ.png"},"text":"Bringing both worlds together.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_47":{"__typename":"Paragraph","id":"97dd109d399e_47","name":"1595","type":"P","href":null,"layout":null,"metadata":null,"text":"Since we wanted to move away from a sterile feeling, we started with an extreme that was more tactile, and from there we started designing by subtraction, removing unnecessary complexity until we reached the point where we felt we couldn’t remove anything else.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_48":{"__typename":"Paragraph","id":"97dd109d399e_48","name":"5df8","type":"P","href":null,"layout":null,"metadata":null,"text":"Interactions became our main vehicle to deliver joy in the experience. We concluded that we wanted joy to come with the accomplishment of a task, and avoid it to be obtrusive and void of meaning.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_49":{"__typename":"Paragraph","id":"97dd109d399e_49","name":"fe2e","type":"P","href":null,"layout":null,"metadata":null,"text":"A button that feels just right","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":30,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_50":{"__typename":"Paragraph","id":"97dd109d399e_50","name":"3b3f","type":"P","href":null,"layout":null,"metadata":null,"text":"Buttons are one of the most important pieces of a UI, because they are the main visual indicators for the actions a user can take. It didn’t come as a surprise the level of scrutiny our buttons went through, and to get it right, we went through a good amount of iterations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*7_0c0RT8bZQeV0dyFeFxzg.png":{"__typename":"ImageMetadata","id":"1*7_0c0RT8bZQeV0dyFeFxzg.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_51":{"__typename":"Paragraph","id":"97dd109d399e_51","name":"e081","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*7_0c0RT8bZQeV0dyFeFxzg.png"},"text":"Defining buttons based on real materials.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_52":{"__typename":"Paragraph","id":"97dd109d399e_52","name":"e910","type":"P","href":null,"layout":null,"metadata":null,"text":"We wanted to make buttons feel real, so we started from mimicking the real world. From there it was an iterative process of making sure the buttons hit the right notes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*jy-fAaVvfq3yPJxEUI4AiA.png":{"__typename":"ImageMetadata","id":"1*jy-fAaVvfq3yPJxEUI4AiA.png","originalHeight":1072,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_53":{"__typename":"Paragraph","id":"97dd109d399e_53","name":"f096","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*jy-fAaVvfq3yPJxEUI4AiA.png"},"text":"6 iteration on the buttons style","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_54":{"__typename":"Paragraph","id":"97dd109d399e_54","name":"8d92","type":"P","href":null,"layout":null,"metadata":null,"text":"They had to feel tactile, but not too imposing.\nThey had to feel like plastic, not glass.\nLast, and probably more importantly, the interaction had to feel juicy.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*veIqvFlwac_wvzjjD0F_Uw.png":{"__typename":"ImageMetadata","id":"1*veIqvFlwac_wvzjjD0F_Uw.png","originalHeight":1304,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_55":{"__typename":"Paragraph","id":"97dd109d399e_55","name":"da78","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*veIqvFlwac_wvzjjD0F_Uw.png"},"text":"10 iterations on the primary button tactility","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_56":{"__typename":"Paragraph","id":"97dd109d399e_56","name":"c9b8","type":"P","href":null,"layout":null,"metadata":null,"text":"The primary button became a challenge, since we initially lacked darker values to make it feel three dimensional. We partially solved it with a “shine”, but then realized the pressed state needed some attention too.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*_GRKl9duR1zRR8xuaVvd2w.png":{"__typename":"ImageMetadata","id":"1*_GRKl9duR1zRR8xuaVvd2w.png","originalHeight":2540,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_57":{"__typename":"Paragraph","id":"97dd109d399e_57","name":"f808","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*_GRKl9duR1zRR8xuaVvd2w.png"},"text":"Before and after. Going from glossy glass to matte plastic.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_58":{"__typename":"Paragraph","id":"97dd109d399e_58","name":"764b","type":"P","href":null,"layout":null,"metadata":null,"text":"After making the default button a touch lighter, we landed on a solution that had the level of juiciness we were looking for.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_59":{"__typename":"Paragraph","id":"97dd109d399e_59","name":"f4cf","type":"P","href":null,"layout":null,"metadata":null,"text":"Icons with just enough weight","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":29,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_60":{"__typename":"Paragraph","id":"97dd109d399e_60","name":"0ec4","type":"P","href":null,"layout":null,"metadata":null,"text":"Icons are instrumental in reducing text overload and augmenting efficiency. We saw in the iconography an opportunity to inject a dash of joy and make the experience more approachable.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_61":{"__typename":"Paragraph","id":"97dd109d399e_61","name":"883c","type":"P","href":null,"layout":null,"metadata":null,"text":"The challenge with icons was finding the appropriate scale and weight. We strived for icons that were in harmony with typography, noticeable without being overpowering, and with a unique personality that doesn’t dominate the interface.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*NlyFDA-SqXoHgDveFcK-lA.png":{"__typename":"ImageMetadata","id":"1*NlyFDA-SqXoHgDveFcK-lA.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_62":{"__typename":"Paragraph","id":"97dd109d399e_62","name":"6c1f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*NlyFDA-SqXoHgDveFcK-lA.png"},"text":"One of the many sets we designed that was discarded.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_63":{"__typename":"Paragraph","id":"97dd109d399e_63","name":"3cdd","type":"P","href":null,"layout":null,"metadata":null,"text":"For each style iteration, we designed dozens of icons, because we had to see them in context to find which performed the best.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*A54aPKF6pUXDRF8P8Cnp_Q.png":{"__typename":"ImageMetadata","id":"1*A54aPKF6pUXDRF8P8Cnp_Q.png","originalHeight":1968,"originalWidth":2350,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_64":{"__typename":"Paragraph","id":"97dd109d399e_64","name":"6e15","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*A54aPKF6pUXDRF8P8Cnp_Q.png"},"text":"Some of the variants we tried: 1.5px outline; duotone with 1px outline; 1px outline; 1.5px outline; filled.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_65":{"__typename":"Paragraph","id":"97dd109d399e_65","name":"e1a8","type":"P","href":null,"layout":null,"metadata":null,"text":"After numerous iterations, we settled on a set with 1.5px outline, with filled variants used for navigation.\nThese icons performed well in a dense interface, drawing just the right amount of attention, while the filled navigation icons anchor the user’s experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_66":{"__typename":"Paragraph","id":"97dd109d399e_66","name":"6239","type":"P","href":null,"layout":null,"metadata":null,"text":"From green to black","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":19,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_67":{"__typename":"Paragraph","id":"97dd109d399e_67","name":"1ced","type":"P","href":null,"layout":null,"metadata":null,"text":"The initial choice to retain green as the primary color was driven by its association with Shopify’s brand. However, as the design evolved, we found that green didn’t align well with the professional tone we were aiming for.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_68":{"__typename":"Paragraph","id":"97dd109d399e_68","name":"83a7","type":"P","href":null,"layout":null,"metadata":null,"text":"Green is often associated with a friendly, approachable interface and positive outcomes, but it didn’t lend itself to the neutrality we sought. We wanted our interface to be neutral, allowing colors to be used semantically and with purpose.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_69":{"__typename":"Paragraph","id":"97dd109d399e_69","name":"c64b","type":"P","href":null,"layout":null,"metadata":null,"text":"We turned to black, because it’s commonly associated with “Pro” products. Black brings impact and contrast, which is exactly what we needed for our interactive states.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*OigXY0WSnZKuQlqbd5WZxg.png":{"__typename":"ImageMetadata","id":"1*OigXY0WSnZKuQlqbd5WZxg.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_70":{"__typename":"Paragraph","id":"97dd109d399e_70","name":"eadb","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*OigXY0WSnZKuQlqbd5WZxg.png"},"text":"Mockup defining different interactive states, only using black.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_71":{"__typename":"Paragraph","id":"97dd109d399e_71","name":"0b75","type":"P","href":null,"layout":null,"metadata":null,"text":"While being neutral, using black as a primary color ensured other colors used in the interface wouldn’t be overshadowed, but instead, carry their intended meanings.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_72":{"__typename":"Paragraph","id":"97dd109d399e_72","name":"55c1","type":"P","href":null,"layout":null,"metadata":null,"text":"We made all our decisions through debates, experimentation, prototyping and more debates. After a while we found something we were ready to push forward. But how did we know it was the right direction?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_73":{"__typename":"Paragraph","id":"97dd109d399e_73","name":"cc81","type":"ULI","href":null,"layout":null,"metadata":null,"text":"It was something we were excited to push forward.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_74":{"__typename":"Paragraph","id":"97dd109d399e_74","name":"e66d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"The design language aligned with the brief and the “this” and “not this”.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_75":{"__typename":"Paragraph","id":"97dd109d399e_75","name":"fed6","type":"ULI","href":null,"layout":null,"metadata":null,"text":"And as we were applying our design language to more surfaces, the before and after became progressively more dramatic and appealing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_76":{"__typename":"Paragraph","id":"97dd109d399e_76","name":"e2d3","type":"P","href":null,"layout":null,"metadata":null,"text":"At this point, our positioning was strong, and the design language we carefully crafted was ready for its next trial: reviews with key stakeholders.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_77":{"__typename":"Paragraph","id":"97dd109d399e_77","name":"ef2b","type":"H3","href":null,"layout":null,"metadata":null,"text":"Getting buy-in","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*gVTRO8XrpcldWkiTqziSiA.png":{"__typename":"ImageMetadata","id":"1*gVTRO8XrpcldWkiTqziSiA.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_78":{"__typename":"Paragraph","id":"97dd109d399e_78","name":"8037","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*gVTRO8XrpcldWkiTqziSiA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_79":{"__typename":"Paragraph","id":"97dd109d399e_79","name":"ceab","type":"P","href":null,"layout":null,"metadata":null,"text":"Reviews can be hard, but they are key to turn stakeholders into advocates for our work. We knew it was crucial to listen and address concerns, without forgetting we had to be assertive, and showing the value in our design direction.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_80":{"__typename":"Paragraph","id":"97dd109d399e_80","name":"c49b","type":"P","href":null,"layout":null,"metadata":null,"text":"Coming in with a strong point of view for the design language was vital. And reacting to relevant feedback from stakeholders by showing — not telling — the value in our solution gave us more credibility and increased trust. We gave each piece of feedback its fair shot, and we had to be willing to accept when some things actually strengthened the new design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*JEMCG5YcAcWrf78taROxRw.png":{"__typename":"ImageMetadata","id":"1*JEMCG5YcAcWrf78taROxRw.png","originalHeight":1980,"originalWidth":2788,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_81":{"__typename":"Paragraph","id":"97dd109d399e_81","name":"5c7a","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*JEMCG5YcAcWrf78taROxRw.png"},"text":"Snapshot of a portion of one of our Figma decks.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_82":{"__typename":"Paragraph","id":"97dd109d399e_82","name":"6bd0","type":"P","href":null,"layout":null,"metadata":null,"text":"Each presentation deck was tailored for individual stakeholders, enabling discussion to happen at appropriate levels without alienating anyone. We found that leading with visuals rather than design principles shifted the conversations from theory to practicality, and this helped us move forwards.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*nFIkMD12bamMT4mwRhWNOw.png":{"__typename":"ImageMetadata","id":"1*nFIkMD12bamMT4mwRhWNOw.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_83":{"__typename":"Paragraph","id":"97dd109d399e_83","name":"c216","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*nFIkMD12bamMT4mwRhWNOw.png"},"text":"Slide from a review, showing a before and after.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_84":{"__typename":"Paragraph","id":"97dd109d399e_84","name":"db76","type":"P","href":null,"layout":null,"metadata":null,"text":"We used a lot of “before and after’’ comparisons, to show folks the value in the change, but that wasn’t enough to capture the feeling of the new design language, so worked with Guilherme Santos — a developer in the Polaris team — and created a working prototype that gave people something more tangible than mockups to interact with, and react to.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*ezz52ktH2tnFRHnIH-nglQ.gif":{"__typename":"ImageMetadata","id":"1*ezz52ktH2tnFRHnIH-nglQ.gif","originalHeight":1824,"originalWidth":3006,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_85":{"__typename":"Paragraph","id":"97dd109d399e_85","name":"7352","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*ezz52ktH2tnFRHnIH-nglQ.gif"},"text":"Quick walkthorugh our working prototype.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_86":{"__typename":"Paragraph","id":"97dd109d399e_86","name":"4b69","type":"H3","href":null,"layout":null,"metadata":null,"text":"Make it happen. Fast!","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_87":{"__typename":"Paragraph","id":"97dd109d399e_87","name":"f206","type":"P","href":null,"layout":null,"metadata":null,"text":"Our last review was with Tobi, the CEO. And in all honesty, we couldn’t have asked for a better outcome. He saw the value in the direction and we were all excited to ship this to Merchants as fast as possible.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_88":{"__typename":"Paragraph","id":"97dd109d399e_88","name":"013f","type":"P","href":null,"layout":null,"metadata":null,"text":"The best time to do that was the upcoming Summer Edition 2023 — in 10 weeks. Previously, it would have been impossible to ship a holistic design change across a complex application like the admin in 10 weeks time. Luckily, the Polaris team had spent the past year gearing up for this moment, with a mission to get the admin to 90% Polaris mainline coverage. The team overhauled Polaris tokens, simplified the release process from 3 steps to 1, created migration and linting tools, and created a coverage dashboard to help product teams get on Polaris mainline. We advocated, incentivized and partnered with feature teams to use Polaris components and tokens. We updated hundreds of lines of code to make sure the product leveraged Polaris.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*QeSIteM8HPRnVK8YhiImVQ.png":{"__typename":"ImageMetadata","id":"1*QeSIteM8HPRnVK8YhiImVQ.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_89":{"__typename":"Paragraph","id":"97dd109d399e_89","name":"02ed","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*QeSIteM8HPRnVK8YhiImVQ.png"},"text":"Expectation: Linear effect.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_90":{"__typename":"Paragraph","id":"97dd109d399e_90","name":"555b","type":"P","href":null,"layout":null,"metadata":null,"text":"After a year, the admin was at 86.6% coverage. This effort required an initial investment, with improvements “below the surface” that didn’t yield a noticeable return for a year. But these small improvements stacked up, and had a compounding effect that enabled us to make such a drastic change to the Admin in a matter of weeks.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*1hU9WAus9_rGwxGH5ZuOMw.png":{"__typename":"ImageMetadata","id":"1*1hU9WAus9_rGwxGH5ZuOMw.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_91":{"__typename":"Paragraph","id":"97dd109d399e_91","name":"a095","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*1hU9WAus9_rGwxGH5ZuOMw.png"},"text":"Reality: Compounding effect","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_92":{"__typename":"Paragraph","id":"97dd109d399e_92","name":"6dc4","type":"P","href":null,"layout":null,"metadata":null,"text":"The rapid and effective execution of this transformation wouldn’t be possible without the hands-on leadership and exceptional dedication from Chloe Rice, Kyle Durand, and Sam Rose. They didn’t just direct the Polaris engineering team, but were deeply involved in the implementation details.\nOur team’s technical prowess and commitment to quality turned designs into a tangible, functioning reality.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_93":{"__typename":"Paragraph","id":"97dd109d399e_93","name":"4213","type":"P","href":null,"layout":null,"metadata":null,"text":"It took about 3 weeks to update Polaris with the uplift styles and we were happy to see that when we updated Polaris, about 86% of the admin changed automatically. The hard work was updating the remaining 14% that had gone off Polaris mainline. Anytime we made a holistic spacing change in Polaris, it would inadvertently break components that had custom spacing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_94":{"__typename":"Paragraph","id":"97dd109d399e_94","name":"bee8","type":"P","href":null,"layout":null,"metadata":null,"text":"Releasing this change was also a big operational feat, we had to:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_95":{"__typename":"Paragraph","id":"97dd109d399e_95","name":"cdf0","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Make sure the implementation of the new design language stood up to our high quality bar.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_96":{"__typename":"Paragraph","id":"97dd109d399e_96","name":"9811","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Coordinate with dozens of other teams that were not only releasing new functionality, but now had to be guided through adapting those features to the new design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_97":{"__typename":"Paragraph","id":"97dd109d399e_97","name":"cb58","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Become de-facto owners of multiple areas in the admin that had no clear owners.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_98":{"__typename":"Paragraph","id":"97dd109d399e_98","name":"ba11","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Provide support to designers and developers.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_99":{"__typename":"Paragraph","id":"97dd109d399e_99","name":"f0cd","type":"P","href":null,"layout":null,"metadata":null,"text":"This was all great on-the-ground research to show us how Polaris needs to continue to evolve to be a better system for the consumers and for the admin.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_100":{"__typename":"Paragraph","id":"97dd109d399e_100","name":"d082","type":"H3","href":null,"layout":null,"metadata":null,"text":"So… what shipped?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_101":{"__typename":"Paragraph","id":"97dd109d399e_101","name":"7764","type":"P","href":null,"layout":null,"metadata":null,"text":"This design language is the most significant design change to Shopify’s Admin in 7 years. More than just a visual update, it elevates the admin by incorporating tactility, depth. Mirroring the tools merchants rely on in their daily operations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Tuw0kt7EyL8kgJlrn0brbg.gif":{"__typename":"ImageMetadata","id":"1*Tuw0kt7EyL8kgJlrn0brbg.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_102":{"__typename":"Paragraph","id":"97dd109d399e_102","name":"c522","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Tuw0kt7EyL8kgJlrn0brbg.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_103":{"__typename":"Paragraph","id":"97dd109d399e_103","name":"56a7","type":"P","href":null,"layout":null,"metadata":null,"text":"The desire to bring satisfaction and joy to our merchant’s journey it’s part of Shopify’s DNA.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_104":{"__typename":"Paragraph","id":"97dd109d399e_104","name":"a251","type":"P","href":null,"layout":null,"metadata":null,"text":"We wanted to transpose some of that feeling to their mission control — the Shopify Admin — and make even the simplest actions, like the buttons they interact with every day, feel satisfying and fun — just like the “cha-ching” sound every time a sale is made.\nThese are the moments when the experience feels alive and delivers small moments of joy in a merchant’s day.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*KGDD84qbNnTa1SWVuvO3zg.gif":{"__typename":"ImageMetadata","id":"1*KGDD84qbNnTa1SWVuvO3zg.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_105":{"__typename":"Paragraph","id":"97dd109d399e_105","name":"8156","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*KGDD84qbNnTa1SWVuvO3zg.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_106":{"__typename":"Paragraph","id":"97dd109d399e_106","name":"6cec","type":"P","href":null,"layout":null,"metadata":null,"text":"This is still a tool for work, so we balance these moments of joy with our increased focus on efficiency, by optimizing the UI to the type of work merchants do.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*hKnCCPQfL04-5Y4nWV1YuQ.gif":{"__typename":"ImageMetadata","id":"1*hKnCCPQfL04-5Y4nWV1YuQ.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_107":{"__typename":"Paragraph","id":"97dd109d399e_107","name":"5964","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*hKnCCPQfL04-5Y4nWV1YuQ.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_108":{"__typename":"Paragraph","id":"97dd109d399e_108","name":"76ea","type":"P","href":null,"layout":null,"metadata":null,"text":"While dealing with a lot of data, merchants desire to see more of it at once, so we reduced text sizes across the board, to use space more efficiently. We’re streamlining typography and chose Inter as the Admin’s typeface. Inter was crafted specifically for computer screens, and its enhanced legibility of small text is now available to all merchants, no matter the platform or browser they use.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*bRWbQSEOMXrxtiWI1H3EyQ.gif":{"__typename":"ImageMetadata","id":"1*bRWbQSEOMXrxtiWI1H3EyQ.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_109":{"__typename":"Paragraph","id":"97dd109d399e_109","name":"84a6","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*bRWbQSEOMXrxtiWI1H3EyQ.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_110":{"__typename":"Paragraph","id":"97dd109d399e_110","name":"4983","type":"P","href":null,"layout":null,"metadata":null,"text":"We decided to lean more on icons as intuitive shortcuts that allow merchants to navigate and interact swiftly across the interface, while avoiding an excessive amount of text that gets in your way to get things done. Common actions like editing are replaced with space-saving icons. Icons that have been redesigned to perfectly match our typography. Lightweight and efficient, they feel approachable and have a soul that intertwines well with the new design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*-gRZ8JZP4HBzFplKpwurLw.gif":{"__typename":"ImageMetadata","id":"1*-gRZ8JZP4HBzFplKpwurLw.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_111":{"__typename":"Paragraph","id":"97dd109d399e_111","name":"0c61","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*-gRZ8JZP4HBzFplKpwurLw.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_112":{"__typename":"Paragraph","id":"97dd109d399e_112","name":"82f9","type":"P","href":null,"layout":null,"metadata":null,"text":"Our new color palette is daring and vibrant. When we use color, we use full vibrancy to communicate meaning consistently. Green means go. Red means danger. Not half measures.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*jQWjpzczVRz9gbdN9FnLnA.gif":{"__typename":"ImageMetadata","id":"1*jQWjpzczVRz9gbdN9FnLnA.gif","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_113":{"__typename":"Paragraph","id":"97dd109d399e_113","name":"a9dd","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*jQWjpzczVRz9gbdN9FnLnA.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_114":{"__typename":"Paragraph","id":"97dd109d399e_114","name":"383b","type":"P","href":null,"layout":null,"metadata":null,"text":"Interactions are being given the attention they deserve. \nWe defined a signature motion curve called Snappy. Snappy is quick, but still gives merchants a cue as to where something comes from, instead of things just appearing instantly. Snappy is progressively going to appear in many areas of the Admin over time.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_115":{"__typename":"Paragraph","id":"97dd109d399e_115","name":"e555","type":"P","href":null,"layout":null,"metadata":null,"text":"We’re combining motion, color, and depth to make the UI feel responsive and alive, and we’re creating affordances that enable merchants to interact with the interface intuitively, without having to pause to understand if something is interactive or not.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_116":{"__typename":"Paragraph","id":"97dd109d399e_116","name":"46ea","type":"H3","href":null,"layout":null,"metadata":null,"text":"Merchants’ “fresh eyes”","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*6IPNVjHbWhWeglJV08iwpQ.png":{"__typename":"ImageMetadata","id":"1*6IPNVjHbWhWeglJV08iwpQ.png","originalHeight":2160,"originalWidth":3840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:97dd109d399e_117":{"__typename":"Paragraph","id":"97dd109d399e_117","name":"0604","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*6IPNVjHbWhWeglJV08iwpQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_118":{"__typename":"Paragraph","id":"97dd109d399e_118","name":"d1bd","type":"P","href":null,"layout":null,"metadata":null,"text":"Before shipping the new design language, we wanted to know what merchants thought about it. So as soon as the implementation reached a good quality level, we conducted a study, where we gave temporary access to the new experience to several merchants.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_119":{"__typename":"Paragraph","id":"97dd109d399e_119","name":"f2ab","type":"P","href":null,"layout":null,"metadata":null,"text":"We weren’t looking for validation. We wanted to get an understanding whether merchants’ perceptions were lining up with the intentions behind the new design language. We were also getting ready for a preview of the kind of feedback merchants would have in regards to such a dramatic change in visual design versus the level of disruption this would have on their habits in the Admin, which is to be expected.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_120":{"__typename":"Paragraph","id":"97dd109d399e_120","name":"3ab3","type":"P","href":null,"layout":null,"metadata":null,"text":"Good news, the new design language was well received. “Familiar”, “refined”, “denser”, “useful” were terms that were used to describe the impact of the new design language. Merchants who also noticed the change called out the value in the “cleaner” design, and appreciated a higher density of information. Button styling and tactility was also called out as easier to see, and fun to interact with.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_121":{"__typename":"Paragraph","id":"97dd109d399e_121","name":"20d9","type":"P","href":null,"layout":null,"metadata":null,"text":"Even for merchants that thought such an update “doesn’t really matter”, we heard some acknowledgement of the UI feeling “fresher” and making their job “a little less boring”. Every small adjustment and improvement stacks up to exactly this. Although undisruptive, making menial tasks more enjoyable was exactly what we were aiming for.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_122":{"__typename":"Paragraph","id":"97dd109d399e_122","name":"4784","type":"P","href":null,"layout":null,"metadata":null,"text":"Sweating the details down to the pixel, discussing the tiniest things you can imagine… details aren’t just details. They make the product. And that product gives entrepreneurs the superpowers to achieve their goals.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_123":{"__typename":"Paragraph","id":"97dd109d399e_123","name":"7c13","type":"H3","href":null,"layout":null,"metadata":null,"text":"More to come","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_124":{"__typename":"Paragraph","id":"97dd109d399e_124","name":"8055","type":"P","href":null,"layout":null,"metadata":null,"text":"Like a curtain drawing back on a performance, what goes on behind the scenes can be chaotic and messy until the moment of the reveal. We hope that this peek at the process of building this new design language shows how the many actors, set designers and directors involved can come together when putting together such a substantial production. And I want to take a moment to acknowledge everyone from the Polaris team who contributed to this effort: Aaron Casanova, Alex Page, Aveline Thelen, Bernardo Garcia, Charles Lee, Chloe Rice, Dominik Wilkowski, Guilherme Santos, Jared Fanning, Jess Telford, JJ Galipeau, Joe Thomas, Johan Stromqvist, Kyle Durand, Laura Griffen, Lo Kim, Marten Bjork, Mateus Ferreira, Melanie Tayler, Natasha Lloyd, Nayeob Kim, Raquel Breternitz, Sam Rose, Sara Hill, Selene Hinkley, Sophie Schneider, Susie Simon, Thomas Jonkajtys, Yesenia Perez-Cruz, Yuraima Estevez.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_125":{"__typename":"Paragraph","id":"97dd109d399e_125","name":"3812","type":"P","href":null,"layout":null,"metadata":null,"text":"We’re far from finished.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_126":{"__typename":"Paragraph","id":"97dd109d399e_126","name":"2a3b","type":"P","href":null,"layout":null,"metadata":null,"text":"Our goal is to make Shopify’s admin the best place for our merchants to run their businesses, and we’ll keep evolving our design language to be the best, most professional tool they can rely on. That means always looking to the future and never letting ourselves grow stale.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:97dd109d399e_127":{"__typename":"Paragraph","id":"97dd109d399e_127","name":"1c48","type":"P","href":null,"layout":null,"metadata":null,"text":"When you open Shopify’s admin today, some areas might still feel untouched — new illustrations, for example, are still being evolved and will roll out alongside ambitious updates and evolutions of our design patterns. But before we do that, we want to lean in and listen to what our merchants think about this powerful tool that we have the privilege to design. So stay tuned for more.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:bbc664515c9e-viewerId:lo_32cf315d2087":{"__typename":"CollectionViewerEdge","id":"collectionId:bbc664515c9e-viewerId:lo_32cf315d2087","isEditor":false,"isMuting":false},"PostViewerEdge:postId:7c54fc6564d9-viewerId:lo_32cf315d2087":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:7c54fc6564d9-viewerId:lo_32cf315d2087"},"Tag:design":{"__typename":"Tag","id":"design","displayTitle":"Design","normalizedTagSlug":"design"},"Tag:ux":{"__typename":"Tag","id":"ux","displayTitle":"UX","normalizedTagSlug":"ux"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:shopify":{"__typename":"Tag","id":"shopify","displayTitle":"Shopify","normalizedTagSlug":"shopify"},"Tag:polaris":{"__typename":"Tag","id":"polaris","displayTitle":"Polaris","normalizedTagSlug":"polaris"}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"HIT"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.aa9242f7.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.e556b4ac.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3104.c3413b66.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.8ad8a900.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.21ff89d3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.094844de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.1387c5dc.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e9283aa1bb544c1',t:'MTczMjcxNDY2MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>

Pages： 1 2 3 4 5 6 7 8 9 10