Home

Gianni J. Favaretto

Get in touch via LinkedIn
Argos Home Fabled
Read about my work at Zopa Read about my work at Argos Read about my work at Ocado Smart Platform Read about my work at Fabled Read about my work at Fetch Read about my work at Ocado

Ocado Smart Platform

UX and Design Chapter Lead

Ocado has invested over the last fifteen years to create the best grocery e-commerce solution in the world. From the user-friendly mobile interface to the highly efficient automated warehouse technology, Ocado can now offer this best-in-class customer experience and highly efficient end-to-end supply chain solution to retail partners globally.

My role

Built, scaled, and coached an international multi-disciplinary UX team (Researchers, Architects, Designers and UI Engineers).

Responsible for all aspects of UX and the UI design of the Ocado Smart Platform (Desktop and Mobile B2B and B2C applications).

Defined and executed the user experience vision, strategy, team's code of conduct, user-centred design direction and guidelines.

Enriched a strong technology-based culture by injecting a more user-centred and problem-solving mindset and process.

Liaised with designers, developers, and product owners to implement new conceptual ideas.

Facilitated multi-disciplinary teams' collaboration across Ocado's international offices (UK, Poland, and Barcelona).

My journey

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.

Foster empathy for stronger collaborations. Would you like to know how it feels to be a designer? We have a two weeks programme for engineers and product owners who are looking for experience working as a UXer.

Aeris Design System

We built Aeris, an OSP-branded development framework that helps create consistent, responsive layouts using user-friendly patterns and code for all our diverse contexts. To satisfy the high demand to use it appropriately, the Aeris team, made up of front-end engineers and designers, is currently updating Aeris to facilitate its fit with applications built on different frameworks such as React and Angular. We are delivering a state-of-the-art and well-documented tool that will shape design while cutting the development time of all our products.

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).

Apps & Systems

Regardless of the UX team size, we were able to meet the minimum requirements of more than twenty B2B applications and deliver major mobile apps such as Store Pick and Delivery. Each UXer was able to take responsibility for more than one system at a time and significantly contributed, through effective planning, workshops and collaboration, to make the OSP a user-friendly product.

CMS, Payment & Fraud, Store Pick, Click&Collect, Fleet Management, Supply Chain, Customer Care, and many more.

My journey

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.

We are aiming to humanise technology through empathy and design to deliver software that sell grocery with ease. Individuals and interactions over processes and tools.

Fraisy Design System: Component-based UI in React

We, the designers and developers, asked ourselves how to optimise our development and design time in delivering a consistent and customisable UI. While the UX team focused on prototyping in HTML, CSS and Javascript, the development team came up with the brilliant idea to push the UI kit to a new level. They created a UI development environment for all our UI components. We could easily visualise all the different states of our UI components, and, as UXers, we were able to design and prototype more realistically, using the same elements utilised in the production environment. With this process, we not only save time and improve collaboration but also definitely boost product development by iterating faster than before.

Prototyping

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 for customisation

One of our challenges was to design an experience that met most retailer's customers' expectations as well as delivering a UI that could be easily customised with the retailers' brand look and feel.

Design Thinking

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.

Plan for emergencies and the long term. Build a team where everybody is needed, but no one is essential.

UX Academy

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.

Don't ask me to plan a leadership event if ...

I organised two days in the woods in total survival mode. We learned how to make water's pond drinkable, to build a shelter, to start and maintain a fire, and how to cook a fresh-caught fish. Tough times and challenges bring people together.

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.

Adventures' team

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.