Work Experience

Design & Leadership: 2015 - Today

Ocado Smart Platform: Customer-facing

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.

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.

Enriching

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

Liaise

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

Facilitating

multidisciplinary teams' collaboration.

My Journey

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 should aim to humanise technology through empathy and design to deliver software that sell grocery with ease. Individuals and interactions over processes and tools.

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.

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.

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.

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.

Your work should have purpose—addressing actual, urgent problems that people are facing. Make sure that you can clearly articulate the core of the issue before spending an ounce of time on developing the design. The true mark of an effective designer is the ability to answer "why?". Don't waste your time solving the wrong problems.

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.

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

  • Can you use one short sentence to describe the business problem you solved?
  • Is the user at the centre of the design process?
  • Did you answer yes to all the design process flow questions?
  • Can you tell a story with your design?
  • Can a five-year-old understand it and use it?
  • Is your design usable by people with the most common disabilities?
  • Did you show and tell your outcome to the UX team?
  • Have you used the design system (UI kit) components?
  • Are you proud of and happy with your outcome?

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.

Some of the world's largest brick-and-mortar grocery stores have selected OSP to sell groceries online profitably, scalably, and sustainably: