{"id":1251,"date":"2023-06-06T22:26:07","date_gmt":"2023-06-06T22:26:07","guid":{"rendered":"https:\/\/www.trevorhcurtis.com\/?page_id=1251"},"modified":"2023-09-29T22:15:10","modified_gmt":"2023-09-29T22:15:10","slug":"chicos-design-system","status":"publish","type":"page","link":"https:\/\/www.trevorhcurtis.com\/case-studies\/chicos-design-system\/","title":{"rendered":"Chico&#8217;s Design System"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1251\" class=\"elementor elementor-1251\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-80e8598 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"80e8598\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b233efd\" data-id=\"b233efd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-53a6667 elementor-widget elementor-widget-qi_addons_for_elementor_info_cards\" data-id=\"53a6667\" data-element_type=\"widget\" data-widget_type=\"qi_addons_for_elementor_info_cards.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"qodef-shortcode qodef-m  qodef-qi-info-cards qodef-layout--top qodef-link-overlay qodef--icon-pack\">\n\t\t\t<div class=\"qodef-m-icon-wrapper\">\n\t\t\t\t\t<div class=\"qodef-m-icon-holder\">\n\t\t\t<i aria-hidden=\"true\" class=\"far fa-gem\"><\/i>\t\t<\/div>\n\t\t<\/div>\n\t\t<div class=\"qodef-m-content\">\n\t\t\t<h5 class=\"qodef-m-subtitle\">\n\t\tCase Study\t<\/h5>\n\t\t\t\t\t<p class=\"qodef-m-text\">This case study focuses on the creation of a Sketch app design system for Chico\u2019s FAS to meet the demand of four unique e-commerce brands. The design system allows designers to rapidly create mockups for a complete site during weekly design sprints and make quick foundation-level adjustments that will propagate through the system for each brand. All updates to the Sketch-based system will be pushed to designers in a planned series of updates, allowing previously created mockups to update automatically.<\/p>\n\t<\/div>\n\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-254b5a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"254b5a8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1ccb83b\" data-id=\"1ccb83b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d38b32 elementor-widget elementor-widget-image\" data-id=\"5d38b32\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 17-10-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"740\" src=\"https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-1024x740.png\" class=\"attachment-large size-large wp-image-390\" alt=\"Screenshot from White House Black Market website\" srcset=\"https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-1024x740.png 1024w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-300x217.png 300w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-768x555.png 768w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-1536x1110.png 1536w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM-600x434.png 600w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-23-at-4.06.20-PM.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Chico's White House | Black Market e-commerce website<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f9eeabc elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"f9eeabc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c12254f\" data-id=\"c12254f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c682baf elementor-widget elementor-widget-spacer\" data-id=\"c682baf\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 17-10-2023 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-868e870 elementor-widget elementor-widget-heading\" data-id=\"868e870\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 17-10-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h3 class=\"elementor-heading-title elementor-size-default\">Problem statement<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c28c2fe elementor-widget elementor-widget-text-editor\" data-id=\"c28c2fe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 17-10-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p style=\"font-weight: 400;\">Design a completely new e-commerce website experience for a new brand at Chico\u2019s FAS with a robust and scalable design system to speed up the process of creating mockups. Designers need the new design system to be flexible, allowing adjustments and changes during weekly sprints, and they want to rely on solid libraries in Sketch that make designing a pleasant and rapid experience.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99edf3d elementor-widget elementor-widget-qi_addons_for_elementor_image_gallery\" data-id=\"99edf3d\" data-element_type=\"widget\" data-widget_type=\"qi_addons_for_elementor_image_gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"qodef-shortcode qodef-m  qodef-qi-image-gallery qodef-qi-fslightbox-popup qodef-popup-gallery qodef-image--hover-zoom  qodef-qi-grid qodef-layout--qi-columns  qodef-col-num--2   qodef-responsive--predefined\">\n\t<div class=\"qodef-grid-inner\">\n\t\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35c989e elementor-widget elementor-widget-spacer\" data-id=\"35c989e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ffecf0 elementor-widget elementor-widget-heading\" data-id=\"6ffecf0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Research and analysis<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f60651 elementor-widget elementor-widget-qi_addons_for_elementor_tabs_horizontal\" data-id=\"1f60651\" data-element_type=\"widget\" data-widget_type=\"qi_addons_for_elementor_tabs_horizontal.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"qodef-shortcode qodef-m  qodef-qi-tabs-horizontal qodef-qi-clear qodef-layout--simple qodef-title-hover--underline-draw qodef-title-underline-from-left\">\n\t<ul class=\"qodef-tabs-horizontal-navigation\">\n\t\t<li>\n\t<h5 class=\"qodef-tab-title\">\n\t\t<a href=\"#qodef-tab-3424933\">\n\t\t\t<span class=\"q-text\">\n\t\t\t\tUser Research\t\t\t<\/span>\n\t\t<\/a>\n\t<\/h5>\n<\/li>\n<li>\n\t<h5 class=\"qodef-tab-title\">\n\t\t<a href=\"#qodef-tab-2f8c7ee\">\n\t\t\t<span class=\"q-text\">\n\t\t\t\tCompetitive analysis\t\t\t<\/span>\n\t\t<\/a>\n\t<\/h5>\n<\/li>\n<li>\n\t<h5 class=\"qodef-tab-title\">\n\t\t<a href=\"#qodef-tab-2af802d\">\n\t\t\t<span class=\"q-text\">\n\t\t\t\tAnalytics reviews\t\t\t<\/span>\n\t\t<\/a>\n\t<\/h5>\n<\/li>\n\t<\/ul>\n\t<div class=\"qodef-tabs-horizontal-content\" id=\"qodef-tab-3424933\">\n\t<p>I interviewed two freelance designers working on the website design project for Chico\u2019s and began creating a clear inventory of design system elements and categories that would need to be built to launch the design system rapidly.<\/p><\/div>\n<div class=\"qodef-tabs-horizontal-content\" id=\"qodef-tab-2f8c7ee\">\n\t<p>I began studying comparable e-commerce design system libraries that had already been built and were available for use. I downloaded and inspected libraries from Shopify Polaris, Salesforce Lightning, and IBM Carbon, among others. I also built on the foundation of a system I had already created earlier for American Airlines called Aileron.<\/p><\/div>\n<div class=\"qodef-tabs-horizontal-content\" id=\"qodef-tab-2af802d\">\n\t<p style=\"font-weight: 400\">I did research on ways to optimize the design system itself, including using macOS tools like Reduce App to slim down the size of the individual Sketch files required to load as libraries for the design system. I also looked at documentation on how to create scalable design systems through inheritance and began planning out basic shapes, color schemes, and other elements that could be inherited throughout the system so new brand styles could be added with very little effort.<\/p><\/div>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-708006b elementor-widget elementor-widget-spacer\" data-id=\"708006b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd7e27 elementor-widget elementor-widget-heading\" data-id=\"dcd7e27\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Key findings<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d0c3ec elementor-widget elementor-widget-text-editor\" data-id=\"8d0c3ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>Using atomic design principles became very important as I began building the design system<\/strong>. Atomic inheritance allowed me to create libraries that could be quickly customized for each brand and allow elements to automatically update in response to the changes. Brad Frost\u2019s Atomic Design principles inspired much of the early work for the design system.<\/p>\n<p><strong>Sketch app was prone to bugs and issues when updated, so the design system was versioned and tested on multiple versions of Sketch<\/strong>. I coordinated with the designers to ensure they were using the correct version of Sketch to properly install the design system libraries.<\/p>\n<p><strong>I regularly met with the designers to discuss bugs, changes, and improvements that could be made to the system once they began using it to create mockups<\/strong>. As new icons, colors, or type styles were requested, I was able to keep new versions of the libraries coming weekly so they could use them during the next design sprint.<\/p>\n<p>Using formatted layer names and grouping for design system elements helped developers better understand how to build the designs in code. <strong>Nesting design elements by naming Sketch groups with HTML-like tags made it clear how I intended for headers, cards, tables, and other components to be built<\/strong>.<\/p>\n<p style=\"font-weight: 400;\">I also began experimenting with new Sketch plug-ins like Anima to create design elements that would auto-resize as new content was added. <strong>Responsive buttons, cards, and tables were created that all adhered closely to the design system specification and allowed for a variety of content to quickly be placed into page mockups<\/strong>. Designers could put valid content into buttons or other elements and judge effectiveness without having to break the component and make manual adjustments.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f9bc1e elementor-widget elementor-widget-image\" data-id=\"2f9bc1e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"627\" src=\"https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-1024x627.png\" class=\"attachment-large size-large wp-image-520\" alt=\"\" srcset=\"https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-1024x627.png 1024w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-300x184.png 300w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-768x470.png 768w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-1536x941.png 1536w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM-600x368.png 600w, https:\/\/www.trevorhcurtis.com\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-25-at-9.40.00-AM.png 2029w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Chico's Design System - Button components and states<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e212631 elementor-widget elementor-widget-spacer\" data-id=\"e212631\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d62d337 elementor-widget elementor-widget-heading\" data-id=\"d62d337\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Design delivery<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-708515a elementor-widget elementor-widget-text-editor\" data-id=\"708515a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p style=\"font-weight: 400;\">I began by creating individual libraries of elements starting with basic colors, typography, and shapes, as well as simple grid and spacing helpers. I built on top of those libraries with molecular elements such as buttons, cards, tables, and more. When complete, I had created 17 design system library files total. Files were distributed and managed on Sketch Cloud and locally using Git version management.<\/p><p style=\"font-weight: 400;\">I worked closely with freelance designers to give training and support for using the libraries, including helping them install fonts and set up Sketch app so they could successfully use the design system.<\/p><p>Weekly design sprints with Chico&#8217;s leadership began, and I would update the libraries or fix bugs as needed.<\/p><p>Freelance designers were able to complete all the planned design sprints for an entire e-commerce website experience in around 10 months, which was well ahead of the internal goal to complete the entire project in 12 months.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a4d80c elementor-widget elementor-widget-spacer\" data-id=\"1a4d80c\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a96a8f5 elementor-widget elementor-widget-heading\" data-id=\"a96a8f5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Performance optimization<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-249a57b elementor-widget elementor-widget-text-editor\" data-id=\"249a57b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Sketch app\u2019s frequent and sometimes buggy updates proved to be a challenge, requiring me to constantly test and evaluate if the design system or software was solid and reliable so that design work would not be interrupted.<\/p><p style=\"font-weight: 400;\">The new libraries rapidly accelerated the development of new mockups, and the auto-layout features appearing in Sketch app natively as well as through the Anima plug-in allowed me to create components that automatically adjusted as real content was placed into them. This allowed designer to avoid relying on Lorem ipsum or placeholder text, so they could experiment with proper sizing and layout based on the client\u2019s actual content and copy.<\/p><p style=\"font-weight: 400;\">Designers became comfortable with the new libraries after only four or five design sprint weeks, making maintenance and additions easier. I was able to focus on creating new icons for the brand and to continue creating more complicated templates of elements to speed design work.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7182b92 elementor-widget elementor-widget-spacer\" data-id=\"7182b92\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a30113b elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"a30113b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d95192f\" data-id=\"d95192f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f1effcb elementor-widget elementor-widget-heading\" data-id=\"f1effcb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Evaluation and results<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64741b5 elementor-widget elementor-widget-text-editor\" data-id=\"64741b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p style=\"font-weight: 400;\"><strong>Building a modular design system based on atomic design principles resulted in a fast turnaround for 640 mockups to be delivered in only ten months<\/strong>. Design sprints were a breeze, and developers were able to get started right away due to the layer naming based on HTML5 elements and code structure.<\/p><p style=\"font-weight: 400;\">When complete, this initial brand website could easily be re-skinned to accommodate new brands and visual styles. Typography and color changes no longer required large amounts of re-work or copying of libraries. Elements were kept consistent in structure but could take a variety of different UI forms by swapping out base libraries.<\/p><p style=\"font-weight: 400;\"><strong>Chico\u2019s FAS was able to take their complete website design and begin work on a custom Oracle Commerce Cloud solution for their new brand ahead of schedule<\/strong>.<\/p><p style=\"font-weight: 400;\"><strong>I gained a great deal of experience building and managing design systems from the ground up<\/strong>, and became convinced that atomic design systems built on an inherited base of libraries could be scaled to work in large organizations.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1e3f3f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"1e3f3f1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a3e02b3\" data-id=\"a3e02b3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f6dd334 elementor-widget elementor-widget-spacer\" data-id=\"f6dd334\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f1d763 elementor-widget elementor-widget-heading\" data-id=\"4f1d763\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Key takeaways<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfc3dcc elementor-widget elementor-widget-text-editor\" data-id=\"cfc3dcc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Even though I work solo, a robust design tool with auto-layout capabilities, combined with atomic design principles as a foundation allows me to quickly create a design system for a corporate brand to meet the demand of weekly design sprints.<\/p>\n<p style=\"font-weight: 400;\">Keeping designers and developers happy requires a combination of planning and constant diligence to keep the design system reliable and current.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0861868 elementor-widget elementor-widget-spacer\" data-id=\"0861868\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Case Study This case study focuses on the creation of a Sketch app design system for Chico\u2019s FAS to meet the demand of four unique e-commerce brands. The design system allows designers to rapidly create mockups for a complete site during weekly design sprints and make quick foundation-level adjustments that will propagate through the system [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":744,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/1251"}],"collection":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/comments?post=1251"}],"version-history":[{"count":82,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/1251\/revisions"}],"predecessor-version":[{"id":2440,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/1251\/revisions\/2440"}],"up":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/744"}],"wp:attachment":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/media?parent=1251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}