Three years have passed since I started working on the Ocado Smart Platform. From one man trying to kick off a more user-centred approach to problem-solving while delivering design outcomes, we are now a high-level multi-skilled UX team.
It has been an exciting, challenging and rewarding journey – a course full of obstacles and learning.
I was leading the UX efforts for the Ocado General Merchandise online stores (we were just about launching Fabled.com) when I was invited to look into Ocado Technology’s latest business challenge. From a user perspective, because of its inconsistency in functionality and visuality, the Ocado Smart Platform was not perceived as one product or one suite of products. As such, it could not yet be regarded as a sellable product.
To tackle this business matter, I partnered with a front-end engineer to deliver an MVP of a design system (named Aeris). In not much time, we were able to build a functional and professional-looking kit of components and patterns. Adopting Aeris made OSP systems appear as though they were part of one family suite.
Soon after, from just helping out, I was asked to move full time to OSP with the responsibility of building a team and leading the user experience and design forces.
By continuously observing and listening to the Aeris first users, we learned that, while we were improving it visually and giving it renewed functionality, we were making it harder for the developers to implement and maintain it.
It became apparent that the UX team could not develop Aeris alone. Today, we have a new ad hoc group made up primarily of passionate front-end engineers working on transforming a beautiful design system into a more distributive front-end solution for all OSP B2B applications.
In the meantime, the building of a UX team continued, and I was able to start transferring ownership and responsibilities to a broader group of motivated individuals. We defined our role and goal within the business, identified organisational and product challenges, designed a problem-solving framework and defined a code of conduct. Why a code of conduct? Because the strength of the UX team is measured by how healthy the relationship is between designers and the rest of the organisation, so we need to be aware that our behaviour, more than our design outcomes, strongly determines our success.
Pushing design in a tech-savvy environment such as Ocado Technology remains a tough challenge today, but one that our team was and will always be willing to tackle. We regularly conduct workshops, lead and facilitate design sprints and share our learning, facts and stories with the Ocado community through initiatives such as the UX Academy. We have a programme for software engineers and product owners who are looking for experience working as a UXer for a period of time. In OSP Systems, we currently satisfy the design needs of more than twenty autonomous development teams.
OSP journey mapping
The product team raised a concern: how can we clearly explain internally and externally how OSP works? We created a tube map of the platform's functionality, incorporating all the high-level actions that must be taken by the retailer and shopper to make OSP efficient. Every new feature will be regularly added to the map, and a beautiful, enormous printed wall version is easily accessible in our offices across Europe (often used efficiently in workshops and brainstorming).
CMS, Payment & Fraud, Store Pick, Click&Collect, Fleet Management, Supply Chain, Customer Care, and many more.
The main reason why I was so thrilled to be part of the Ocado Smart Platform project was the opportunity to contribute to the development of the next generation of customer-facing e-commerce platforms of Ocado.
I started with very high expectations and ambitions but soon realised that the journey to innovation and experimentation was, from a UX perspective at that time, just a utopia. We decided to have more of an MVP approach – start by delivering what we know works and improve later.
When I started working on the e-commerce platform, I was again a one-person team. I must admit, I truly enjoyed designing the user experience of what could, in my eyes, have been the next generation of the Ocado.com webshop. My extensive previous experience in e-commerce – in grocery and general merchandise – equipped me well for the task.
With the excitement of a child, I embraced the challenge, and I started planning the next steps. There were significant factors to consider. OSP was intended to accommodate retailers with a unique business model, location and, undoubtedly, different customer experiences of online shopping. Customisation unmistakably guided my design thinking.
I developed Fraisy, the design language for the OSP customer-facing online shop. My objective was to create a consistent, customisable and clean UI kit with UX patterns that could be easily understood and further developed by the team of UXers that I was, in the meantime, forming.
Two years have passed, and today we have outstanding UX individuals who regularly partner with engineers to deliver a technologically updated design system that answers our business goals and meets our customers’ expectations.
With a design system in place, we were able to fast prototype in high fidelity and obtain the answers we needed from our users. By demoing our ideas in a more factual setting, we facilitated all conversations with product owners, engineers and our customers’ retail teams.
Fraisy Design System: Component-based UI in React
The first two challenges in a designer and developer relationship are communication and expectations. The developer expects to receive a final graphic outcome that will survive storms and fire. Unfortunately, that rarely happens. The conversion from a static design file to code can sometimes reawaken the creative side of the designer’s brain. When that happens, the designer requests design adjustments (often called improvements) that test the developer’s tolerance. With time, such cases build frustration on both sides, and the project pays the final price. We started investing time and resources (hiring a precise UI engineer for the job) to prototype in high fidelity. We stopped sending Sketch files to developers and began delivering tested, validated and well-documented prototypes built with our design system. The advantages were clear: improved communication between all parties, increased confidence with the design team, clearer guidelines for the developers and a faster release process of the product’s features.
Design Thinking is most of the times misunderstood because of its over-complicated consultancy style definition. Design Thinking is a straightforward yet powerful process and mindset that when properly understood and applied, can open doors to extraordinary opportunities.
To deliver that message and to build a solid bridge between design and tech, I being running an intro to Design Thinking workshop across multiple and diverse teams in all the Ocado offices across Europe. Using dating and creating social events as a way to explain Design Thinking not only triggered much interest but helped the participants to understand the meaning of being human-centric quickly.
User Research & Testing Community
We found ourselves with the need to find an efficient way to listen to our users and validate our first hypothesis within a short period with not much of a budget. We had to be creative in finding a way to tackle the challenge. Our solution was to involve all the diverse employees of the Ocado group.
We were able to recruit more than 200 users from a good variety of departments. We conduct one-to-one interviews and tests and send a weekly coffee break quiz with surveys on specific topics or with A/B design tests. By doing this, not only do we regularly obtain plentiful quantitative and qualitative data cheaply, but we also infuse UX globally and connect with more diverse profiles within the company.
Our mission is to contribute positively to the growth of Ocado Technology’s culture by injecting a more user centred mindset across the business. We are trying to fulfil our mission by regularly planning events such as talks and workshops where we discuss UX principles and share our learning and results.
To reinforce collaboration and empathy (both ways), we started a UX work experience programme, where developers and product owners have the opportunity to work full time as a UXer for a typical time of two weeks.
Serving brands worldwide
Some of the world's largest brick-and-mortar grocery stores have selected OSP to sell groceries online profitably, scalably, and sustainably.
To build teams of influential individuals and team players, I organised and guided my colleagues into outdoor adventures. Adventures such as climbing to the peaks of the Dolomites and French Alps and backpacking across vulcanos and glaciers in Iceland undoubtedly boosted confidence, resilience, courage, problem-solving, and leadership skills.