Problem statement
Design a completely new e-commerce website experience for a new brand at Chico’s 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.
Research and analysis
I interviewed two freelance designers working on the website design project for Chico’s and began creating a clear inventory of design system elements and categories that would need to be built to launch the design system rapidly.
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.
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.
Key findings
Using atomic design principles became very important as I began building the design system. 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’s Atomic Design principles inspired much of the early work for the design system.
Sketch app was prone to bugs and issues when updated, so the design system was versioned and tested on multiple versions of Sketch. I coordinated with the designers to ensure they were using the correct version of Sketch to properly install the design system libraries.
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. 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.
Using formatted layer names and grouping for design system elements helped developers better understand how to build the designs in code. 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.
I also began experimenting with new Sketch plug-ins like Anima to create design elements that would auto-resize as new content was added. 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. Designers could put valid content into buttons or other elements and judge effectiveness without having to break the component and make manual adjustments.
Design delivery
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.
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.
Weekly design sprints with Chico’s leadership began, and I would update the libraries or fix bugs as needed.
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.
Performance optimization
Sketch app’s 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.
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’s actual content and copy.
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.
Evaluation and results
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. 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.
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.
Chico’s 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.
I gained a great deal of experience building and managing design systems from the ground up, and became convinced that atomic design systems built on an inherited base of libraries could be scaled to work in large organizations.
Key takeaways
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.
Keeping designers and developers happy requires a combination of planning and constant diligence to keep the design system reliable and current.