<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Wes Dearborn]]></title><description><![CDATA[Say hi in the mean time – hi@wesdearborn.com]]></description><link>https://gatsby.ghost.org/</link><image><url>https://gatsby.ghost.org/favicon.png</url><title>Wes Dearborn</title><link>https://gatsby.ghost.org/</link></image><generator>Ghost 2.9</generator><lastBuildDate>Mon, 12 Jul 2021 17:57:30 GMT</lastBuildDate><atom:link href="https://gatsby.ghost.org/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[LiveWatch: Internal Projects]]></title><description><![CDATA[Customer Journey Map (2017) In 2017, I audited and mapped LiveWatch's customer onboarding journey – from the purchase of a home security system through the installation and activation of that system. The goal was to give our teams an updatable, shared source of truth for this complex process, which until then had been loosely tracked and managed, often lacking consensus across teams. My role for the project was as a solo in-house researcher, gathering input from all teams involved in the p]]></description><link>https://ghost.wesdearborn.com/livewatch-customer-onboarding-audit/</link><guid isPermaLink="false">Ghost__Post__60ec56fab747860a52193b69</guid><dc:creator><![CDATA[Wes Dearborn]]></dc:creator><pubDate>Mon, 12 Jul 2021 17:43:18 GMT</pubDate><content:encoded><![CDATA[<h2 id="customer-journey-map-2017">Customer Journey Map (2017)</h2><p/><p>In 2017, I audited and mapped LiveWatch's customer onboarding journey – from the purchase of a home security system through the installation and activation of that system. </p><p>The goal was to give our teams an updatable, shared source of truth for this complex process, which until then had been loosely tracked and managed, often lacking consensus across teams. </p><p>My role for the project was as a solo in-house researcher, gathering input from all teams involved in the process: sales, hardware, and customer service. </p><figure class="kg-card kg-image-card kg-width-full"><img src="https://ghost.wesdearborn.com/content/images/2021/07/livewatch-journey-map-2880-2.png" class="kg-image" alt="" loading="lazy" width="2880" height="966"/></figure><hr><h2 id="customer-onboarding-optimization-2017">Customer Onboarding Optimization (2017)</h2><p/><p>Building on the onboarding audit I conducted while creating the Customer Journey Map above, I proposed a set of changes to optimize the onboarding process, particularly to address the comparatively low service activation rate among eCommerce customers.</p><p>As part of the research and design process, I: </p><ul><li>Interviewed recently onboarded customers. </li><li>Conducted a survey of recently onboarded customers. </li><li>Interviewed Customer Service Reps and Fulfillment Technicians. </li><li>Improved our user personas to ensure the new process would accommodate our core demographics. </li></ul><figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/07/livewatch-onboarding-redesign.png" class="kg-image" alt="" loading="lazy" width="3200" height="1321"><figcaption>Service design diagram of the updated onboarding process</figcaption></img></figure><hr><h2 id="activation-call-tool-2016">Activation Call Tool (2016)</h2><p>As part of the setup process for LiveWatch's self-install home security systems, a customer service rep would schedule a call with the customer to activate their alarm monitoring service, troubleshoot any installation issues, and run a series of safety checks.</p><p>As the customer service team grew, it became clear that the loose set of tools training they used to conduct these calls was not scalable. </p><p>As part of the design process, I designed and built this low-fidelity clickable prototype to use as a low-cost user testing option to get feedback from the customer service team and vet the technical feasibility of certain features.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://ghost.wesdearborn.com/content/images/2021/07/lw-activation-tool-1.gif" class="kg-image" alt="" loading="lazy" width="1366" height="764"/></figure></hr></hr>]]></content:encoded></item><item><title><![CDATA[Prototype: HHS Vaccine Signup Flow]]></title><description><![CDATA[This prototype is a thought experiment for what a COVID-19 vaccination signup process could look like as a national program administered by Health & Human Services. For fun, I also gave the HHS brand and logo a small facelift, using the recent Dept. of State redesign as inspiration. Click expand to view the full prototype.]]></description><link>https://ghost.wesdearborn.com/hhs-vaccine-signup-flow/</link><guid isPermaLink="false">Ghost__Post__60cd50e9b747860a52193aa1</guid><dc:creator><![CDATA[Wes Dearborn]]></dc:creator><pubDate>Sat, 19 Jun 2021 02:10:52 GMT</pubDate><content:encoded><![CDATA[<p>This prototype is a thought experiment for what a COVID-19 vaccination signup process could look like as a national program administered by Health & Human Services.</p><p>For fun, I also gave the HHS brand and logo a small facelift, using the recent Dept. of State redesign as inspiration. </p><p>Click expand to view the full prototype.</p><!--kg-card-begin: html--><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FXvsztcN1LDOVvAKPFU8yfI%2FHHS-Covid%3Fpage-id%3D183%253A0%26node-id%3D308%253A0%26viewport%3D-3240%252C413%252C0.5%26scaling%3Dmin-zoom" allowfullscreen=""/><!--kg-card-end: html-->]]></content:encoded></item><item><title><![CDATA[Iowa Covid Monitor]]></title><description><![CDATA[Background In late 2020, in response to the lack of user-friendly, county-level covid data from the official Iowa dashboard, a friend and I decided to build a covid monitoring dashboard for our home county. Role UX/UI design, User Research, and Front-end Development (React).]]></description><link>https://ghost.wesdearborn.com/iowa-covid-monitor/</link><guid isPermaLink="false">Ghost__Post__60cd48c8b747860a52193a70</guid><dc:creator><![CDATA[Wes Dearborn]]></dc:creator><pubDate>Sat, 19 Jun 2021 01:36:38 GMT</pubDate><content:encoded><![CDATA[<h3 id="background">Background</h3><p>In late 2020, in response to the lack of user-friendly, county-level covid data from the official Iowa dashboard, a friend and I decided to build a covid monitoring dashboard for our home county. </p><h3 id="role">Role </h3><p>UX/UI design, User Research, and Front-end Development (React).</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://ghost.wesdearborn.com/content/images/2021/06/screely-1624066552344.png" class="kg-image" alt="" loading="lazy" width="3200" height="1707"/></figure>]]></content:encoded></item><item><title><![CDATA[ASAPer: Reimagining Emergency Communication for Security Alarms]]></title><description><![CDATA[The ASAPer Mobile Web AppBackground As of 2014, home security alarms were still operating on 20th century technology. When an alarm went off, a call center agent would call a list of emergency contacts one-by-one, often from an 800 number that was easily ignored. The result was a high percentage of false alarms and customers who were left in the dark as serious emergencies occurred at their homes. -------------------------------------------------------------------------------- Challenge Ou]]></description><link>https://ghost.wesdearborn.com/asaper-reimagining-emergency-response-in-home-security/</link><guid isPermaLink="false">Ghost__Post__60ccef13b747860a5219377d</guid><dc:creator><![CDATA[Wes Dearborn]]></dc:creator><pubDate>Sat, 19 Jun 2021 01:19:20 GMT</pubDate><content:encoded><![CDATA[<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/asaper-dual-screenshot-2.png" class="kg-image" alt="" loading="lazy" width="2480" height="1705"><figcaption>The ASAPer Mobile Web App</figcaption></img></figure><h2 id="background">Background</h2><p>As of 2014, home security alarms were still operating on 20th century technology. When an alarm went off, a call center agent would call a list of emergency contacts one-by-one, often from an 800 number that was easily ignored. </p><p>The result was a high percentage of false alarms and customers who were left in the dark as serious emergencies occurred at their homes. </p><hr><h2 id="challenge">Challenge</h2><p>Our high-level goal was to modernize the alarm response process and make it:</p><ol><li><strong>Faster</strong> – the existing average time to notify a customer of an alarm was 5.5 minutes.</li><li><strong>More transparent </strong>– provides customers more details on the alarm status process beyond the initial notification. </li><li><strong>More accessible</strong> – doesn't require answering a phone call at the exact right moment. </li></ol><h3 id="role-team-timeline">Role, Team, & Timeline</h3><p>My role was a hybrid Product Manager/Designer. I collaborated with ASAPer's founder/business lead and four engineers. </p><p>We designed and built the ASAPer MVP over the course of year starting in late 2013.</p><h3 id="constraints">Constraints</h3><p>Our primary constraint was the nature of the alarm monitoring industry, which is understandably risk-averse and highly regulated. Additionally, alarm monitoring centers operate on closed, legacy software that's not conducive to 3rd-party integrations.</p><hr><h2 id="research-preparation">Research & Preparation</h2><p>To kick things off, we conducted semi-structured interviews with:</p><ul><li>Home security customers</li><li>Alarm monitoring center agents</li><li>Industry experts</li><li>Law Enforcement</li></ul><p>Next, we analyzed dozens of agent call recordings provided by an alarm monitoring center we had partnered with. </p><h3 id="key-findings">Key Findings</h3><p>For customers:</p><ul><li><strong>Peace of mind is the top priority –</strong> They want to know as quickly as possible that their family and belongings are safe. After receiving the alarm notification call, they would often immediately track down their family members to make sure they were out of harms' way.</li><li><strong>Alarms are hard to cancel – </strong>It's very easy to accidentally trigger false on their systems, but the only way to cancel an alarm was to wait for the call from the monitoring agent.</li><li><strong>Alarm notifications are easy to miss – </strong>calls were often seen as spam or customers were not in situations where they could pick up the phone. </li><li><strong>A wide range of preferred notification channels – </strong>some customers were fine with alarm notification calls, while others preferred SMS or email. Younger customers expected an app-like solution. </li></ul><p>For monitoring agents:</p><ul><li><strong>Calls frequently go unanswered – </strong>agents reported often calling the entire emergency contact list without a single person answering.</li></ul><p>For law enforcement:</p><ul><li><strong>Frequent false alarms erode trust in the system – </strong>police in many jurisdictions began imposing fines in response to excessive false alarms. This incentivized customers to stop using their security systems all together.</li></ul><h3 id="technical-research">Technical Research</h3><p>Another key component of the process was to determine what was technically feasible. A very smart engineer on our team was able to find a hidden read-only API in the Alarm Monitoring software. This gave us access fine-grain chronological alarm data that could be used keep customers informed.</p><hr><h3 id="solution">Solution</h3><h2 id="a-multi-channel-communication-platform-for-resolving-alarms">A multi-channel communication platform for resolving alarms.</h2><p/><p>Instead of sequentially contacting each person on the call list, our solution was to immediately alert all contact list members via their preferred medium of communication. </p><figure class="kg-card kg-image-card"><img src="https://ghost.wesdearborn.com/content/images/2021/06/asaper-hub-diagram.svg" class="kg-image" alt="" loading="lazy"/></figure><p>SMS or Email alerts provided information on the alarm and the option to continue to the ASAPer web app:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/screely-1624061818051.png" class="kg-image" alt="" loading="lazy" width="1274" height="1288"><figcaption>ASAPer Email Alert</figcaption></img></figure><p>A key choice we made was to have ASAPer require no setup on the part of the users. Many call list members are simply friends and neighbors, and in an emergency, there's little time to download and sign up for an iOS or Android App.</p><p>To quickly onboard users, we used coach marks to provide clear instructions on how to use the web app.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/asaper-screenshot-coachmarks.png" class="kg-image" alt="" loading="lazy" width="2480" height="1705"><figcaption>ASAPer Onboarding Coach Marks, rendered using HTML Canvas. </figcaption></img></figure><p>The core web app experience is the chat and activity feed. The feed begins with the initial alarm notification. From there, users can chat with each other and receive automated updates on the alarm's status.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/asaper-feed-screenshot.png" class="kg-image" alt="" loading="lazy" width="2480" height="1705"><figcaption>The ASAPer activity feed</figcaption></img></figure><p>Prominent in the Navbar are alarm actions. Here, all members can get emergency assistance, while authorized members can disarm false alarms.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/asaper-screenshot-actions.png" class="kg-image" alt="" loading="lazy" width="2480" height="1705"><figcaption>ASAPer Actions</figcaption></img></figure><h2 id="marketing-launch">Marketing & Launch </h2><p>We initially marketed ASAPer as a whitelabel-able SaaS service for alarm monitoring companies, but ultimately joined LiveWatch, becoming an exclusive feature of their self-install home security systems.</p><p>After a successful test launch with a subset of LiveWatch customers, ASAPer was rolled out to their entire customer base and awarded a U.S. Patent.</p><p>As a result of the rapid, multi-channel alerts and false alarm disarm button, average alarm resolution times dropped to around one minute from 5.5 minutes. </p></hr></hr></hr>]]></content:encoded></item><item><title><![CDATA[The LiveWatch/Brinks Design System: From Creation Through Rebranding]]></title><description><![CDATA[Background Unmanageable Design & Technical Debt In 2016, LiveWatch's web ecosystem hit a breaking point. After several years of rapid growth, our CSS was bloated, conflict-ridden, and inconsistent. Site performance suffered and simple design changes often triggered a series of mysterious bugs. To make matters worse – we had four web platforms, each with their own CSS quirks, meaning global style changes often required four bespoke solutions. On the design side, we had a high-level brand st]]></description><link>https://ghost.wesdearborn.com/livewatch-brinks-design-system/</link><guid isPermaLink="false">Ghost__Post__607a0f97b747860a5219299d</guid><dc:creator><![CDATA[Wes Dearborn]]></dc:creator><pubDate>Fri, 18 Jun 2021 15:11:30 GMT</pubDate><content:encoded><![CDATA[<figure class="kg-card kg-image-card kg-width-wide"><img src="https://ghost.wesdearborn.com/content/images/2021/06/screely-1623957717200.png" class="kg-image" alt="" loading="lazy" width="3200" height="1709"/></figure><h3 id="background">Background</h3><h2 id="unmanageable-design-technical-debt">Unmanageable Design & Technical Debt</h2><p/><p>In 2016, LiveWatch's web ecosystem hit a breaking point.</p><p>After several years of rapid growth, our CSS was bloated, conflict-ridden, and inconsistent. Site performance suffered and simple design changes often triggered a series of mysterious bugs. </p><p>To make matters worse – we had four web platforms, each with their own CSS quirks, meaning global style changes often required four bespoke solutions. </p><p>On the design side, we had a high-level brand style guide, but no formal UI standards, leading to rogue landing page and email designs that barely resembled our main site. </p><p>Our designer-developer handoff also suffered. Without detailed design specs, even the nicest wireframes came out looking lackluster, requiring multiple rounds of cleanup. </p><hr><h3 id="challenge">Challenge</h3><h2 id="reimagine-how-we-build-uis-from-the-ground-up">Reimagine how we build UIs from the ground up </h2><p>Instead of simply rewriting our CSS and improving our design documentation, it was clear we needed to hit reset and approach our issues holistically. </p><p>Our high-level goal for the project was a lofty one:</p><p><em>Empower developers to build UIs as quickly as possible without sacrificing consistency, scalability, and performance.</em></p><h3 id="additional-goals-constraints">Additional Goals & Constraints</h3><ul><li>Compatible with our 4 web platforms (Rails, Angular, .NET, Hubspot).</li><li>A S<em>ingle Source of Truth</em> for global styles. </li><li>Usable by team members with only entry-level front-end dev skills. </li><li>Flexible – It can't be so rigid and dogmatic that it impedes experiment-driven projects, such as landing pages.</li><li>Light on process changes – with mostly self-managed devs and relatively few technical managers, introducing new dev processes was hard to sustain. </li></ul><h3 id="role-team">Role & Team</h3><p>In my role as Lead UX Designer & Developer, I proposed and managed the project, collaborating with a Front-end Developer and a Junior UX Designer to design and implement it. </p><hr><h3 id="research-preparation">Research & Preparation</h3><h2 id="finding-common-threads-learning-from-existing-tools">Finding common threads & learning from existing tools</h2><p>At the time, design systems as we know them were a nascent concept. A few large brands had released stunning, comprehensive design systems, but those felt neither realistic nor appropriate for our small team. </p><p>Our theme was pragmatism:</p><ul><li><em>Don't Reinvent The Wheel – </em> leverage existing tools and methodologies where possible.</li><li>Design a system to address <em>our </em>problems rather than emulate what's trendy. </li></ul><h3 id="research-area-1css-methodologies">Research Area 1 - CSS Methodologies</h3><p>Much of our scalability and performance issues were the direct result of poor CSS management. While CSS is one of the easiest language to learn, we learned the hard way that it's also one of the hardest to scale and maintain. </p><p>To address this, we immersed ourselves in the newish concept of CSS Methodologies—rubrics for naming, structuring, and organizing CSS. With strong overlap in their principles, we were able to pull common themes and best practices from each of them.</p><ul><li>Atomic CSS</li><li>ITCSS</li><li>SMACSS</li><li>BEM</li></ul><p><em><strong>Key Finding</strong> - ITCSS, with its data-backed approach to organizing CSS to improve maintainability and scalability seemed like a no-brainer for us. </em></p><h3 id="research-area-2team-feedback">Research Area 2 - Team Feedback</h3><p>With our internal dev team (including ourselves) as our users, we asked devs to reflect on times when building UIs was hard and why, as well as times when building UIs was easy and why.</p><p><em><strong>Key Finding</strong> - most devs dreaded writing CSS and preferred UI frameworks, such as Bootstrap, which allowed them to make something nice looking without writing any CSS. </em></p><h3 id="research-area-3ui-frameworks">Research Area 3 - UI Frameworks</h3><p>Building on feedback from our dev team, we evaluated three popular UI frameworks to distill the ways they made development easy and apply those to our own solution.</p><ul><li>Foundation</li><li>Semantic UI</li><li>Bootstrap</li></ul><p><em><strong>Key Finding</strong> - the soon-to-be-released version of Bootstrap (v4) will allow a level of visual customization that wasn't possible with UI frameworks. Perhaps we could build on top of it rather than just emulating it?</em></p><h3 id="preparationecosystem-wide-ui-audit">Preparation - Ecosystem-wide UI Audit</h3><p>We ran a full visual audit of our site, cataloguing UI elements and states, eliminating redundancies, and selecting a canonical version of each element. </p><hr><h3 id="the-result">The Result</h3><h2 id="a-dedicated-space-to-build-test-document-and-host-global-styles-ui">A dedicated space to build, test, document, and host global styles & UI</h2><figure class="kg-card kg-image-card kg-width-wide"><img src="https://ghost.wesdearborn.com/content/images/2021/06/design-system-livewatch-button-section_framed.png" class="kg-image" alt="" loading="lazy" width="1521" height="1009"/></figure><p>Beyond a shift to new tools and methodologies, our system involved an organizational shift – UI specialists should do as much of the heavy lifting as possible for UI development, enabling busy full-stack and marketing developers to focus on their core work.</p><p>To support this shift, we created a new code repository to serve as a sandboxed hub for developing and testing global UI and styles. </p><p>This repo consisted of: </p><ol><li>All-new global CSS: a combination of a themed Bootstrap 4 components and custom UI components, organized using the ITCSS methodology . Building on top of Bootstrap solved two problems: (1) provided us with free code and documentation for many of the UI elements we needed, and (2) sped up onboarding, since many developers were already familiar with Bootstrap.</li><li>A Pattern Library for showcasing and documenting any custom elements and patterns that weren't part of Bootstrap. As a live site in itself, this library also served as a sandbox to test and refine changes before releasing them to production sites. </li><li>Static Asset Hosting (CDN) for global CSS, JS, and Fonts. CSS/JS were also made available as modules for use by NPM-enabled apps. </li></ol><hr><h3 id="first-impression-iteration">First Impression & Iteration</h3><h2 id="doubling-down-on-css-utility-classes">Doubling Down on CSS Utility Classes </h2><p>After launching the new system, we noticed many of the benefits we hoped for –</p><ul><li>Quicker dev times. </li><li>Reduced complexity in the designer-developer handoff.</li><li>One-and-done global style changes. </li><li>Improved site performance. </li></ul><p>One new Bootstrap feature was a particular hit – CSS Utility classes. These offered developers easy-to-use code for things beyond just UI components – presets for spacing, colors, font-sizes, and more. Even better, they helped reduce CSS file sizes, a win for performance. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/design-system-util-classes.png" class="kg-image" alt="" loading="lazy" width="1840" height="906"><figcaption>Utility classes turn commonly used CSS rules into simple, reusable classes.</figcaption></img></figure><p>This feature was key in addressing one of our constraints: <em>Flexibility. </em>These classes empowered our Landing Page Optimization team to quickly build more experimental designs without introducing bugs and straying <em>too </em>far from our brand. </p><p>These were so easy to use that even two non-developers, a Designer and a Business Analyst, were able to comfortably code entire pages. And as a designer-developer, I was to skip the wireframing stage for simple projects, prototyping directly in code. </p><p>Given the success of this approach, we expanded our library of custom utility classes, giving them a dedicated place in the Pattern Library:</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://ghost.wesdearborn.com/content/images/2021/06/design-system-util-classes-section.png" class="kg-image" alt="" loading="lazy" width="3200" height="1709"/></figure><hr><h3 id="curveball">Curveball </h3><h2 id="a-simultaneous-merger-rebrand">A simultaneous merger & rebrand </h2><p>2018 brought a big, but positive surprise – LiveWatch merged with its acquirer, Monitronics, the second-largest home security provider in the US after ADT. On top of that, in a partnership with Brinks', the combined company rebranded as Brinks Home Security.</p><p>I was promoted to UX Director of the merged company and was tasked with overseeing the re-skinning of the newly merged companies' 8+ consumer-facing web platforms, followed by a redesign of the core website. </p><p>This was the ultimate test for the LiveWatch design system. Could it go from being a tool for a startup to powering a publicly traded company with a team multitudes larger?</p><p>The timeline – 3 months for the re-skin, followed by 3 months for the redesign.</p><h3 id="re-skinning">Re-skinning</h3><p>The first step was to re-skin the design system itself, and Bootstrap made this a piece of cake – we updated global variables (now commonly known as Design Tokens) to match the new visual identity, and voilà! </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/Screen-Shot-2021-06-17-at-3.26.04-PM.png" class="kg-image" alt="" loading="lazy" width="1830" height="538"><figcaption>Setting Bootstrap's global color variables to the new Brinks' colors. </figcaption></img></figure><p>That was all that was needed to re-skin of the former LiveWatch portions of the ecosystem. For the Monitronics portions, we dropped in the global stylesheet generated by our design system and used utility classes to clean up any visual bugs.</p><p>Overall – the design system helped us finish in a matter of weeks what leadership feared would be the most time-consuming part of the rebrand, buying us time to get ahead on other tasks, like rebranding our internal tools.</p><h3 id="redesign">Redesign</h3><p>The second phase of the rebrand, the redesign, required the biggest change to our design system yet.</p><p>One obstacle was that the redesign wasn't done by our team, but was contracted out to an agency before the rebrand was announced. As such, we had to work with what we were given–static wireframes for pages–rather than follow the component-centric approach we would've preferred. </p><p>Using a process similar to the Audit step in the Research section, we broke down the wireframes into common elements and patterns, coded them in accordance with our CSS standards, and added them to the Pattern Library.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/design-system-brinks-type-section-4.png" class="kg-image" alt="" loading="lazy" width="3196" height="1771"><figcaption>The new type scale for the Brinks Home brand</figcaption></img></figure><p>Once the Design System updated and the new elements well-tested, our developers, many new the team, swiftly built the new pages. </p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://ghost.wesdearborn.com/content/images/2021/06/brinks-home-homepage-framed.png" class="kg-image" alt="" loading="lazy" width="2775" height="4160"><figcaption>Brinks Home homepage in 2019, built almost fully using design system elements. Source: Archive.org</figcaption></img></figure><hr><h3 id="learnings">Learnings</h3><h2 id="looking-back">Looking Back</h2><p/><p>All in all, this project accomplished the main problems we set out to solve:</p><ul><li>It made building UIs much faster and easier.</li><li>It improved the consistency of our user experience and made it less bug-prone. </li><li>It made our CSS more lightweight & performant. </li><li>And it passed the ultimate scalability test during the merger and rebranding.</li></ul><p>I'm also proud to see that we happened upon some approaches that have since become popular in UI development:</p><ol><li>Sandboxes for both developing, testing, and documenting UI, such as Storybook.js (which we later began using) </li><li>Utility Class-driven CSS development, which now has entire UI frameworks devoted to it, such as Tailwind and Tachyons.</li></ol><h3 id="opportunities-for-improvement">Opportunities for improvement</h3><ul><li>Become an interdisciplinary knowledge base – while our design system was mostly developer-centric, many great design systems are centralized documentation hubs for a variety of teams. </li><li>Better versioning – tracking and managing which version of a global asset was used by each platform in our ecosystem was a primary pain point. </li><li>Consider moving off Bootstrap – Bootstrap served as an excellent bootstrap earlier on in the project, but became less and less relevant as time went on. Bootstrap upgrades, particularly those with breaking changes were very time-consuming. </li><li>Improved methodologies for A/B testing UI – once an element is in the design system, it can make it feel like that element is set in stone. We developed an informal process for A/B testing UI and folding winning variants into the design system, but baking split testing tool into the design system itself would be a huge improvement. </li></ul></hr></hr></hr></hr></hr></hr>]]></content:encoded></item><item><title><![CDATA[Data schema]]></title><description><![CDATA[This is a data schema stub for Gatsby.js and is not used. It must exist for builds to function]]></description><link>https://demo.ghost.io/data-schema-page/</link><guid isPermaLink="false">Ghost__Post__5bbafb3cb7ec4135e42fce56</guid><category><![CDATA[Data schema primary]]></category><dc:creator><![CDATA[Data Schema Author]]></dc:creator><pubDate>Tue, 04 Dec 2018 13:59:14 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ&s=a88235003c40468403f936719134519d" medium="image"/><content:encoded><![CDATA[<img src="https://images.unsplash.com/photo-1532630571098-79a3d222b00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ&s=a88235003c40468403f936719134519d" alt="Data schema"/><p>This is a data schema stub for Gatsby.js and is not used. It must exist for builds to function</p>]]></content:encoded></item></channel></rss>