Gianni J. Favaretto

My Work & Experience

Due to confidentiality reasons, I have omitted and obfuscated detailed information. The information shared is my own and does not necessarily reflect the views of my employer.

Delivering Design Thinking in Ocado

Ocado Smart Platform (OSP)

Role: User Experience & Design Lead

Year: 2015 - Today

“Ocado has invested over the last fifteen years to create the best grocery e-commerce solution in the world. From our user-friendly mobile interface to our highly efficient automated warehouse technology, we can now offer this best-in-class customer experience and highly efficient end-to-end supply chain solution to retail partners globally. As a solutions business we are entirely focused on helping our partners build winning grocery e-commerce businesses in their markets.”

― Luke Jensen, CEO - Ocado Smart Platform

In a nutshell

Build and lead a 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 executing the user experience vision, strategy, team's code of conduct, user-centered design direction and guidelines.

Facilitating multidisciplinary teams' collaboration.

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

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

My story

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 Shops (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 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 are currently satisfying the design need of more than twenty autonomous development teams.

In 2017, Morrisons in the UK started using OSP with store pick. Groupe Casino in France, Sobeys in Canada, and another major international retailer (which cannot yet be disclosed) recently signed up with OSP as well.

Team's success stories

Aeris: the Design System for OSP

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, incorporating all the high-level actions that must be taken by the retailer and shopper to make OSP efficient. Every new functionality 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, Store Pick, Van Delivery and many more apps

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.

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.

UX team (graffiti day)

Want to learn more about how we work?

Photo of a dimly lit room with a computer interface terminal.

A first reveal of the amazing UX work at Ocado Technology

By Anat Treanor (Senior UX Designer, OSP UX Team)

... UX spans the entire business, meaning no two days are ever the same, and we have no set ‘formulas’ in place. We have to be quick to adapt and keen to innovate...

Read it on Medium

OSP E-commerce

Role: User Experience & Design Lead

Year: 2015 - Today

OSP includes a webshop and native mobile apps that can be fully tailored to reflect the look and feel of your banner and offer a personalised customer experience in line with your brand requirements.

Wireframing, designing and prototyping.

In a nutshell

Build and lead a multi-disciplinary UX team (Researchers, Architects, Designers and UI Engineers).

Responsible for all aspects of UX and the UI design of the OSP e-commerce customer-facing web and native apps.

Defined and executing the user experience vision, strategy, design principles, team's code of conduct, user-centered design direction and guidelines.

Facilitating multidisciplinary teams' collaboration.

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

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

My story

The main reason why I was so thrilled to be part of the Ocado Smart Platform family 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-man 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 already looking forward on supporting the customer's experience for the retailers that signed up to use OSP: Morrisons (UK), Groupe Casino (France), Sobeys (Canada), and another major international retailer (which cannot yet be disclosed).

Team's success stories

Prototyping

The first two challenges in a design and developer relationship are communication and expectation. The developer expects to receive a final graphic outcome that will survive storms and fire. Unfortunately, that almost never 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 patience. With time, such cases build frustration on both sides, and the project pays the final price. We started investing time and resources (hiring an extra UI engineer) 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.

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 introduced Storybook, a UI development environment, for all our UI components. With Storybook, we can 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 the product development by iterating faster than before.

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.

Team practises

To validate our outcomes while embracing collaboration, we regularly practise the following:

Openness

Something we are always striving for is to engage all players in our design process to increase their sense of product ownership. That is far from easy, but it is an efficient and usually the only way to obtain approval and commitment from all parties outside design.

Ownership

We want our team members to move beyond just showing up for work. We want to see consistent commitment and success. In situations where nobody took ownership of a task, that task failed many times or was completed late or sloppily – it was evident that care was missing.

Every single UX team member is the owner of his or her work. They are responsible for the team’s success – their mission is to see it through to the end.

Pairing

One way to help designers succeed is pairing. Pair design involves taking two designers who work together as one. To maintain order, there is a distinct differentiation between roles and responsibilities. The perfect pair comprises an owner and a wingman. The wingman's responsibility is to support the owner through the design process; the wingman doesn't participate in the creative and production phase, if not explicitly requested. In the absence of the owner, the wingman should be able to respond to any request to avoid blocking. The wingman might view the problem from a different angle – challenging one idea can be very productive and time-saving. Both owner and wingman should be open to constructive criticism and feedback.

Design Checklist

To make sure we always deliver the best possible design, we follow what we call the checklist of happiness. Every design outcome should pass the following (straight yes or no):

Fabled by Marie Claire

Role: User Experience & Design Lead

Year: 2014 - 2016

Website: www.fabled.com

Beauty as you know it has changed forever, Fabled by Marie Claire – a unique beauty and wellness destination in collaboration with Ocado – has finally launched and it’s set to become the one-stop-beauty-shop for beauty junkies everywhere.

The new business also brings a first for Ocado in the form of a bricks and mortar store. Fabled is open on Tottenham Court Walk, London W1 in August 2016, stocking brands including Chanel, Benefit, YSL, Clinique, Elemis and Lancôme, and gives expert advice in what is billed as a “beauty haven of products.

In a nutshell

Led all aspects of the UX and UI design.

Built, grew and curated an in-house agile UX and UI design team.

Defined and executed the design language, UX strategy, and UI.

Contributed on the brand development.

Liaised with developers, analysts, marketing and merchandise personnel, and product owners to deliver user-centered and business validated outcomes.

A user's feedback in Trustpilot

My Story

We launched Fabled.com, in partnership with Marie Claire, in the summer of 2016. Fabled was the result of the work started in 2012 when we initiated the General Merchandise department to offer top products lines not appropriate for a supermarket.
Differently from Fetch and Sizzle, with Fabled, we worked under the exciting collaboration of Marie Claire's stakeholders. Their high understanding of the beauty business and its customers, helped us to define a robust brand and an appropriate online user experience.

My responsibilities in Fabled were very hands-on. The most significant challenge was, for most of the journey, being a very small team facing several and diverse discipline groups. As with every challenging ride, there were ups and downs. Defining a UX vision and practice, understanding the beauty market and its users through research, acknowledging business objectives from both Ocado and Marie Claire, listening to the data analyst team's outcomes, supporting and meeting the merchandise and marketing teams' high expectations, were some of the requirements to fulfil my role successfully.

In all honesty, we didn't innovate the beauty experience, not yet at least. We intentionally worked on maturing our mobile-first and responsive e-commerce platform so to enable us to challenge the market with a new proposition.

We lived with our assumptions; we learned how our users interacted with our product by ongoing quantitative analysis and data mining, and we listened to our customers' feedback as well as staying focused on business goals.

In one sentence, we didn't follow the"UX from the book" way.

Our strategy was to validate our assumptions with real customers through Continuous Delivery. We launched changes of all types—including new features, configuration changes, bug fixes and experiments—into the hands of users safely and quickly in a sustainable way. By doing so, we were able to deliver a higher quality product faster into the market while keeping costs low and making teams content.

Between 2015 and 2016, I build a product and a UX team efficient and experienced enough for me to intake a new Ocado challenge, the Ocado Smart Platform.

A user's feedback in Trustpilot

Ocado GM, Fetch, and Sizzle

Role: User Experience & Design Lead

Year: 2012 - 2016

Website: www.fetch.co.uk, www.sizzle.co.uk

While Ocado has been growing its online grocery business at 15% over the past year (with a 65% year-on-year increase in profit before tax), its general merchandise operation has become the fastest growing part of Ocado.com. It currently represents 7 – 8% of the total business.

An essential element of its growth strategy is the launch of new ‘destination’ sites. These are specialist sites selling items not usually found in a supermarket setting but which can be sold on the same technology and fulfilment offering as Ocado.com, enabling customers to enjoy the benefits of online grocery shopping such as same- or next-day delivery.

In a nutshell

Led all aspects of the UX and UI design.

Designed from scratch the user experience and visual interface of the multi-brand e-commerce platform (responsive and with a mobile-first approach).

Built, grew and curated an in-house agile UX and UI design team.

Defined the design language and strategy.

Liaised with developers, analysts, marketing and merchandise personnel, and product owners to deliver user-centered and business validated outcomes.

My Story

We just released the newly branded ocado.com when they offered me the opportunity to start-up and lead the UX of the new general merchandise operation. After two intense years in the Ocado grocery's department, I moved to something new and exciting. As a matter of fact, and considering the number of players, I jumped into a real start-up experience.

Being actively hands-on, I didn't need many resources. My team was intentionally small but truly capable, agile, and creative.

We started with facing a white canvas. Eight months later, after extensive research and proofs-of-concept, we launched the first version of Fetch.co.uk. It was some sort of minimum viable product, powerful enough to kick-off the operation.

Soon after, though, we learned that it wasn't scalable enough to meet the mobile and tablet users' expectations. Resources and timing made us move towards the idea of making the platform responsive instead of developing native apps.

Six to eight months later, after working side by side with the development teams, we released our mobile-first and responsive platform proudly. In this rework, we significantly improved our design by defining a design language and arranging the UI elements in a way to imply importance in a hierarchical structure; we created a visual style to guide the users and enhance their experience.

Fetch and Sizzle were now not only mobile-friendly and more accessible for users, but also more scalable for future features implementations.

In 2016, Fetch was one the top e-commerce destinations for pet owners in the UK.

Ocado.com

Role: User Experience Manager & Designer

Year: 2010 - 2012

Website: www.ocado.com

Ocado is a British online supermarket. In contrast to its main competitors, the company has no chain of stores and does all home deliveries from its warehouses. Ocado has been voted the best online supermarket in the UK by Which? readers every year since 2010

In a nutshell

UX and UI design direction on the webshop and on the IOS iPhone and iPad apps (both awarded"App of the year").

Delivery of detailed front-end development guidelines.

Liaised with developers, analysts, marketing and merchandise personnel to deliver user-centered and business validated outcomes.

My Story

I was freelancing in Italy when I was invited to have a phone interview with Ocado. Ocado who? I asked myself. I did some research, and my heart started hammering when I read about Ocado's vision was to disrupt the online shopping for grocery.

In Ocado, I joined a young growing team made by designers and front-end developers. With the support of the Head of UX, I was able to revamp some user experience patterns as well as most of the UI design of the under-construction webshop to make it as user-friendly and visually appealing as I could.

In partnership with the retail team, headed up by a visionary Head, with instinct and madness, we broke apart and reinvented any user-centred design process; we defined what the user experience for grocery in the UK would be for years to come.

The madness (sarcastically) continued when six months later we decided to rebrand Ocado entirely. Pure adventure for a passionate designer as myself. I welcomed the madness because it gave us the chance to fix many UX and design issues that, in the meantime, we learnt from our users.

Before the new work started, I was promoted to Manager. Together with Cantara, a talented young designer which I hired, we started redesigning ocado.com and the award-winning IOS apps with the new branding.

We released the new ocado.com and IOS apps in 2012, and most that work is still (early 2018) proudly standing regardless of the many well visible design issues.

Soon after the release, I considered my work done. Luckily, a new adventure was waiting for me. I moved to the new General Merchandise department to design and lead the UX efforts for the new Ocado's specialised shops.

Freelance

Role: User Experience, Design & UI Development

Year: 2002 - 2010

Website: Behance portfolio

Clients include Macromedia, Sun Microsystem, Nasa, ENI, Accor, Novartis, Thomson Reuters, CIM e-Banking, Sacbo International Airport, Lovable, Fila, several government portals and many other high profile companies.

In a nutshell

Leading projects and designing user interfaces (user research, wireframing, prototyping, and visual design) for both conventional websites/portals and web applications.

Art direction and brand development with graphic design and video production.

Consultant, trainer and speaker on Web Design and Accessibility.

Hand coding (X)HTML, CSS, Actionscript 3, JavaScript, XML / XSL.

Worked on projects based on PHP, Java, .Net and ColdFusion.

Macromedia

Role: Certified consultant, speaker and instructor

Year: 2002 - 2004

Selected to be part of the Macromedia Specialist Group (20/25 over 600 professionals). Trained and qualified Consultant, instructor and speaker during road shows and conferences held by Macromedia Italia.

Macromedia was an American graphics, multimedia and web development software company headquartered in San Francisco, California that produced such products as Flash and Dreamweaver. Its rival, Adobe Systems, acquired Macromedia on December 3, 2005.

ColumbusNet

Role: Web Art Director

Year: 2001 - 2002

ANS

Role: Principle Web Designer

Year: 2000 - 2001

Utah Valley University

Role: Professor Assistant and Web Designer/Dev

Year: 1999 - 2001

Photos copyright: giannijfavaretto @ gmail.com

marathon runner Father of two explorer
hiker & climber wilderness backpacker