Creating a 100% digital journey from machine selection to maintenance

International coffee giant Jacob Douwe Egberts Professional (JDEP) provides beverage solutions through machine leasing, stocking and maintenance. Their clients range from small enterprises such as hair salons to universities and corporations.

Conceptualise what a completely digital user journey could look like, from machine selection to contractual agreements, installation and maintenance. Validate with real clients on international scale.

Realise the MVP and MVP+ for large accounts focussing on machine management, maintenance and invoicing. Aiming to increase transparency and improve self-sufficiency for clients when issues occur. Validate with real large account clients.

JDEP is a huge company with a wide variety of stakeholders in different countries. Understanding their needs, getting them aligned and keeping them on board was quite challenging.

There was also a diverse range of data sources. From machines that had to manually be read every quarter to ones that were connected, updating every second of the day. Machines with active lease contracts that were moved to different locations or even put in storage. Lots of sensitive information that was relevant to show, but might not be as accurate as it seemed.

The entire platform was custom developed. Which was a great opportunity for design, but also required us to elaborately collaborate with the development team in India. Making sure every state was implemented and worked as designed.

I worked as a UX Designer side by side with Frank Boeree, a former UX colleague. Formally he was the Lead Designer, but we both carried end-to-end responsibility for our own areas. Sparring every day about approaches and prioritise, keeping each other sharp over the full one and a half year of our collaboration.

• Facilitate a customer journey mapping session to understand the business desires, complexities and priorities.
• Design a concept direction for what a fully digital journey could look like. Validate this with international clients. Helping business understand the value and potential.
• Work agile with architects and developers to realise the MVP for large accounts. Focussing on management, maintenance and invoicing. Align with business along the way through design reviews and demos.
• Validate MVP with real clients in the Netherlands. Improve and iterate from here. Use insights to shape desires and priorities. Building towards MVP+ step by step.

The JDEP My Environment for Large accounts contains a personal dashboard, an area for support ticket submission and tracking, insights in consumption monitoring and machine statuses. After a successful go-live of the MVP and MVP+ in The Netherlands, the platform continues to roll out internationally. Resulting as a validated digital foundation to support JDEP in consistent, high-quality service at scale.

Research

In the first phase of the project we aimed to learn more about JDEP, their existing services, digital presence and strategic ambitions. We did this through analysing relevant materials, websites and facilitating workshops.

Customer Journey Workshop

The project started with a Customer Journey workshop. We used this to bring all stakeholders together and create a shared understanding of the journey. This would also help us define and prioritise opportunities. For each stage of the journey we identified user needs, business goals, touchpoints and customer actions.

• JDEP is specialised in offering a full service solution to their customers.
• Their target group offers coffee as a service. It’s a cost for them.
• Customers are looking for an always working and hassle free coffee machine. This machine should be the right solution for their situation from service speed to machine cleaning.
• The improved digital experience should improve customer satisfaction from enabling new customers to servicing existing ones.

We summarised the workshop insights into a product statement to clearly define concept vision and prioritised key aspects of the digital experience per journey stage. We supported the statement with design principles to guide ourselves along the way.

Design

Our design process was end-to-end. Initially defining concept direction, then working on core features to realise MVP. And from there, iterate and elaborate moving towards MVP+ and go-live. Designing and building agile alongside architects and developers.

Concept

In this phase we worked together with a strategist. He had worked on a concept before that focused on orientation to purchase. His role was to redefine these steps based on insights from the new journey vision.

We focused on the My Services environment. Which covers the core aspects of a users journey after partnering with JDEP. Allowing to perform tasks such as placing orders, analysing downtime and machine statuses, troubleshooting and invoicing. Providing business with an impression of what a digital journey could look like and how customers receive this through validation.

• Create a scalable navigation and page structure, suitable for all organisation types.
• Define how customers can order products themselves through a subscription solution.
• Design how notifications can benefit users throughout their order and management process.
• Offer self-service and troubleshooting content to help users take action when issues occur.

We focused on a mobile experience, since we learned that our primary user group is not stuck behind a desk all day. They are often in facilitation roles or employees with additional coffee management tasks. We did validate our proposed solutions on responsiveness along the way. On top of this, we included impressions of different user stages such as new clients opposed to established ones.

• Define navigation structure and take into account key differences between small and large accounts.
• Create an impression per page what content we expect to display and how they are tied together.
• Design core flows to visualise concept vision and after alignment with research, fill in the gaps for validation flows.
• Validate concept direction and align with business on focus points for iterations.
• Elaborate on concept designs and further detail pages, journey states and differences in page behaviour between small and large accounts.
• Another round of validation on more detailed aspects of the concept. Followed by an iteration round to finalise the concept designs.

Along the way we aligned with the strategist and make sure everything aligned seamlessly. Which led to us covering the entire customer journey on concept level.

Detail design

In this phase, the focus returned solely to the My Services environment. Strategy was done for now and it was just me and Frank working on design.

• Align with architects on feasibility of concept designs in regards to data and limitations.
• Facilitate an MVP session with JDEP to define scope and share risks in regards to data.
• Scale back concept designs to MVP only designs and detail responsiveness, states and behaviour from there using only available data sources.
• Align with business on assumptions and gaps to determine focus for user tests.
• Validate and iterate on detail designs.
• Document desired interaction behaviour, scalability, states and responsiveness.
• QA developments deliverables to ensure design quality before release.

Machine Park

The Machine Park is an overview which allows users to view and manage their machines. It’s one of the most important pages specifically for large accounts, because machines are across a variety of locations and its often not directly noticed or flagged when something is wrong.

The initial concept design included a list and map view. The map view was an idea to allow users to see all their machines across a variety of locations at once. However, in the detail phase this was removed because it was too much to design two view types in our timeline.

Large accounts have Service Level Agreements in their contracts. Which should be presented on machine level at all times. In the concept design these were placed next to the machine name. This was the first thing we revisited in the detail phase due to its lack of scalability. Later we moved these to the bottom of the tile, allowing us to easily remove it for smaller clients and save space for other information such as statuses.

Due to the complexity in terminology and data discrepancies, it was important to provide context on definitions and data accuracy. What initially started as a small text button to clarify the difference between connected and non-connected machines, grew to a tooltip interaction pattern used across the entire platform.

On mobile and tablet devices the machine park was divided into three page layers. From a location overview to a machine on location overview to a machine detail page. To insure users would know what to pay attention to, an indicator was added on these screen sizes. Which instantly highlights which locations have machines in error on the location overview.

Every feature was designed but not implemented in MVP was documented and handed over. Assuring the possibility to continue building on this in the future.

Documentation

During the detail phase we had to elaborately document every decision. Development was working side by side, but due to the complexity of the information in the platform we ourselves struggled to remember decisions as well.

Our documentation covered anywhere from responsive behaviour on screen-sizes to detail content resizing of tiles within a breakpoint. We also defined scroll areas, page and content states, and interaction patterns. Helping ourselves, developers and future designers.

Reflection

This was one of my all time favourites. Throughout the project I realised how much I enjoy highly-complex products and collaborating elaborately with development.