The issue: A disjointed user experience
When Weebly was acquired by Square, the design systems were very visually different from one another. This made the user experience feel very disjointed.
The solution: Build a new system inspired by Weebly’s Orbit design system
In the past few years, Weebly had been working on very robust design system called “Orbit”. Myself and other designers worked closely with design engineering to create a dynamic and flexible system that we were very proud of. It was much more modern looking than Square’s current system and there was a very clear contrast between the two. Square luckily decided to leverage the research, design efforts, and engineering thought put into Orbit to prioritize a new, global design system for Square that would later be called “Square Market”.
Much of Square Market and even Square’s new primary brand color were highly influenced by Orbit. Over the next few years, myself and designers from teams across Square worked with the Design Systems team to collaborate on component designs and design guidelines.
Designing at this scale is no easy feat
Even with the existing research and development done for the Orbit design system, we still had out work cut out for us. Square has numerous teams and product areas that have very specific use cases and needs, so the process of designing a flexible design system without bloating it with excessive components or team specific functionality wasn’t easy. You can learn a little more about the cross-functional process that was used during this journey in this article. Some things we needed to keep in mind were:
The needs of numerous use cases across Square
Responsiveness between large and small screens
Requirements for native apps on Android and iOS
My Contributions
I collaborated closely with the Design Systems team, particularly while working with Omnichannel Platform, contributing to components now used across Square’s web, mobile, and native products. Notably, I led design efforts on:
Advanced table functionality (image support, nesting, drag & drop, bulk actions, advanced filtering)
Autocomplete patterns
Multi & single-select dropdowns
