MyArrow - B2B eCommerce website
MyArrow is a global provider of electronic components and computing solutions for businesses in the industrial and commercial markets. Meant to be a “lift-and-shift” became a multi million dollar website build with teams of software engineers, front-end developers and designers spanning three continents.
What we needed to do
Manage a “lift-and-shift” including a design update.
This meant an audit of dev and design, merging the two elements, with full consistency and visibility within our teams in the UK, US and Costa Rica. Working closely with teams spanning CX/UX, business analysts and product owners, we focused on understanding any future needs within changing scenarios.
“...freeing up our designers time and headspace to focus on the “why” behind their designs...”
Dev and design audit
During the audit we looked for common website elements that we were using on different platforms ranging from colours to elements like headers, footers and icons.
Once we had compiled examples of our most frequently used sections, we began breaking those down into the smaller levels of atomic design - creating the structure of atoms, molecules and organisms.
Creating the structure
Going through the above exercise gave us a good foundation to build the design system from scratch.
We worked out the grid system, applied base lines, researched text styles and colour pallettes. We were now able to reference the pattern library displaying our global styles at a glance.
Creating custom icon library
During our audit of the site we had compiled a list of icons to be created. We custom illustrated these within Sketch as symbols with override actions on changing the colours.
Sketch creates additional unnecessary code - but having the colour override for design is ideal. Between the front-end and ourselves, we ran a couple of hours of testing and got the code down to a single row to upload into the dev styleguide.
Growing the design system
Having put into place the foundation of the system we got to building out our molecules and organisms. At this point it was critical to involve our dev and design teams in the US and Costa Rica.
Over the next few months we had weekly UX/UI design standups ensuring everyone understands the importance of how it is organised and where everything can be accessed.
We used Abstract to control versioning and ensuring visibility of who is working on the various elements needed for the ATK.
Co-creation
Switching over to the design system has given us a consistent naming structure and aligned our teams by getting everybody talking the same language - including all our product owners and business analysts.
Our teams were now able to quickly see what design components we already had so as not to unnecessarily re-create elements - all the time ensuring our designs delivers the same high quality.
Managing the output
We started implementation of the ATK systematically ensuring each sprint brings into play the relevant elements.
Within an agile environment, we wrote detailed briefs of interactions on how all elements will be implemented together with the BA/PO with final approval at QA stage.
What was achieved
Atomic design has proven to be an incredibly powerful tool for the teams thus far, giving them the foundation to build off, rather than starting from scratch on every new project.
Freeing up our designers time and headspace to focus on the “why” behind their designs rather than the “how.” It has pushed us to do some real design thinking with the flexibility to grow and evolve as the business does.