Team
-
2 x Product managers
-
1 x Product designer
-
Engineering team
Role
-
Lead Designer
-
Design System
Background
About You Cloud (now SCAYLE) is as commerce engine that enables brands and retailers to scale their business across technology, operations, and online marketing. Reach customers on all channels, exploit new growth areas, and become a digital market leader. There are over 140 online shops currently using Cloud including Bayern Munich, Deichmann, Marc O'Polo and Depot.
It features a series of tools including PIM (product inventory management), OMS (order management system), check-out and a front end editor.
As the lead designer my job was to maintain and expand the Cloud Design System, solve UX issues and design new features along side a dedicated product team.
When I took over this role the new design system front end was unfinished and half implemented. So half the product was in the new design and half in the old design, which had many usability issues and was generally a very old system not fit for purpose.
Product Detail Page
One of the most important sections of the PIM is the product detail page. This is where you create your products and their variants, and assign them to different stores. The original version of this page was not very user-friendly, hard to use and overly complex.
The aim of this project was to reimagine this section, improving some of the known user experience issues and update to the new design system, creating new components where necessary.
I worked with customer services agents who use the product everyday to help customers get set up, to find out all their current paint points. We talked at length about the different types of customers and the needs of power users.
A customers natural flow is to go to a product and make changes to this product and it's variants across different shops and languages, rather than going into a specific store. This was hugely difficult to do with the old version. So we made the product page a central hub from which you could make bulk changes to images, categories, pricing and language all from one central areas and roll these changes out to each store. This proved to be a huge improvement to this page, with glowing feedback from customers and customer service agents.
Front-end Editor
The front-end editor allowed customers to make structural and layout changes to their site as well as make basic style changes to elements. Much like the product section it was a poor experience and was in drastic need of an update.
Every customer's editor is completely bespoke and has their requirements hardcoded. This is not very flexible for customers and creates a huge amount of work for engineers, who have to build unique customizable components for each customer. The goal of this project was to explore ways in which we could make the editor more flexible for customers and easier for engineers to maintain as well as improving the overall experience.
After much discussion with the product manager we decided to take a modular approach so each editable component could have a variety of layouts and customizable elements. You could simple add a new component, select a layout and then show and hide which parts of the component you wanted —making each component more applicable for more customers. We could continue to add unique components for customers who needed them, which would then be added to a new component library for other customers to use.
Design System
As we continued to work on updating the new product I continued to build a more and more robust design system, which could work across all the Cloud tools. This was a huge challenge as each tool was bloated and complex.
Firstly I cleaned up and streamlined the components we already had, getting rid of everything superfluous and reducing all the colours to only what is necessary. I then started to look at page layouts and creating a handful of templates which we could reuse across different types of pages.
This really helped to get us into the mind set of simplification, and getting into the habit of reusing component as a first instinct. Only creating new things when absolutely necessary.
When reduced to its simplest form the tools are made up of tables, drop downs, inputs and navigation, and don't really need to be anything more complex than this. I started to build out very flexible types of these components which would cover most scenarios with the aim of mixing and matching components, and then apply to the appropriate page layout. Meaning pages became more intuitive for users as patterns and layouts are reused everywhere, and easier for engineers to build with minimum design input.