As part of a significant re-design and complete re-architecture of our web-based editors, I'm leading the design and development of a comprehensive new accessible Design System for our online editing experiences.
The main purpose is to provide our development team with a quick and easy way of creating interfaces that conform to our accessibility standards, UI standards and design language, which is also documented in the design system platform.
However, we have also created a way for the Design System to be used by customers for building their own editing experiences in external websites, so it's far more than just a tool for our own team, but a product in itself.
Approach
With only a small team available for this project, and a limited time to get something useful up and running, it was critical to approach the project with a lean methodology.
We started it in the early design stages of our new UI project, so we had our existing UI for reference to help us think of scenarios and intricacies, and the design work for the new UI to give us an idea of which components that would be required.
The UI design
In terms of interactive and visual design, we were setting ourselves a high bar by ensuring we sat confidently amongst contemporary online creative editing apps such as Canva, Photobox and Picsart. However, we didn't have the luxury of spending weeks refining a slick look and feel straight off the bat.
The answer to this was that to focus on creating components iteratively. Just like any other product evolution, we would start with just what we needed - in this case basic components that served their purpose, but may not have looked great or included any slick interaction.
We also made sure that we were building them in a way that would allow us to evolve the design easily. To do this we built in theming from the beginning and ensured that our CSS was incredibly well controlled, allowing us to make changes quickly and easily across the entire component library.
As we built the components we tried out various styles right there in the browser, utilising the ability to switch between dozens of variables to modify lots of characteristics across all components at the flick of a switch.
Who said UI design can't be agile and iterative? We're still refining the visual design, but here's a look at some of the main components:
The Technology
The decisions about which technology we should use are just as important as the UX/UI design work, since a Design System is about enabling its users. If the technology behind it doesn't fulfil this, it would be useless.
React was chosen for its performance, accessibility and of course our internal skillset.
SASS and Tailwind were chosen for CSS to give us powerful centralisation and logic, as well as developer-accessible CSS creation (Tailwind) to help us with spreading the load of building out the components when we only have a couple of UI engineers.
We're using Storybook as our documentation platform. Storybook is an amazing application that allows us to document and test our components as we build them, with the absolute minimum of effort (see screenshot above).
The prototype
We deliberately timed the creation of this design system before the development team actually needed it to start building the new UI. This allowed us to move in whatever direction we wanted through the design and build, and avoid external pressures, but it also meant that we wouldn't have an actual product to user test the components in.
However, being components, we could simply throw them together in a UI of our own that served simply to see how they worked together and to test them:
As of writing, this project is still underway, and we're enjoying the benefits of keeping this process lean, iterative and lightweight. The design is evolving and already showing signs of being a really beautiful, easy to use interface.