Designing a scalable B2B Platform

DKSH

• 7 min read

ROLE

Project & Design Lead

UX Strategy

COMPANY

Day Seven

OVERVIEW

DKSH, the world's leading provider of Market Expansion Services, aimed to enhance the User Experience of DKSH Connect, their global client and customer engagement platform. We collaborated with their team to deliver a new Design System, meeting the needs of users and Business Units across the globe.

connect.dksh.com


INTRODUCTION
DKSH Logo

DKSH offers an extensive range of services, which includes the organising and management of the full value chain for many well known products. The business goal for the DKSH Connect platform was clear: bring everyone together in one dedicated platform, including all the DKSH services, B2B Clients and B2C Customers.

Working with an existing technology partner, the first phase of the project had been successfully developed using IBM websphere commerce. The DKSH team needed our assistance to establish a direction for the User Experience and design a scalable approach to the system.


THE PROBLEM

To fully understand the business requirements, we ran an onsite workshop with the DKSH Digital team in Kuala Lumpar. This provided a dedicated opportunity to set KPIs, share domain knowledge and discuss any feedback from the initial phase of the project. It also allowed the wider team to become familiar with the UX process that would be used throughout the course of the project.

UX Process
UX Process Overview used to guide the project delivery

During the kick-off workshop, two things became apparent. Number one, there was a diverse range of roles and stakeholders that the platform would need to cater for. Number two, our understanding of the customer channel would need to be indirect, through the DKSH project team.

UNDERSTANDING THE USERS

The targeted end users of the platform were DKSH customers with businesses in rural areas across Asia. The types of businesses ranged from an independently-owned pharmacy to a family-owned consumer goods store.

DKSH User Interviews
Images from User Interviews – Image Source: DKSH

DKSH were able to share extracts of their transcribed User Interviews from across Asia. The behavioural input of the subjects was mapped, and distinct customer profiles created to guide the design of the experience.

DKSH Connect Behavioural Mapping
Mapping Behavioural Variables to generate Personas

Lesson 1.

There is more than one side to any problem. to find the right solution, try to empathise with each intended user.

After completing empathy building with DKSH customers, we were still too unfamiliar with the potential internal DKSH users to understand their needs. To remedy this issue, we led a series of calls 📞 focused on stakeholders from the main Business Units in Europe and APAC.

We prepared User Scripts for each interaction and used the responses to help define the user stories for eight key modules: Order, Pay, Track, Returns, Rewards, Sales, Explore & Contact.


THE SOLUTION

For a large project such as this, which included liaising with multiple teams across regions, special care had to be taken to design our own team structure and the project approach. We formed a dedicated squad with a mixture of Business Management, UX, UI, and Front-end Development skills. Once all parties were familiar with the business strategy, we collectively discussed the right recipe for the Design and began adding the necessary ingredients.

CONCEPTUAL DESIGN

Research had shown that our customer profiles were familiar with social media and basic Internet browsing. However, little to none had experience with more sophisticated e-commerce, which was one of the platforms key functions. Matching the users mental model with a conceptual model, quickly became one of the primary project concerns.

We needed to align around the overall product vision and some of the core challenges before diving deeper into the detail of the Design. Three concepts were created with example Design applications, and then later refined through discussion to a form a hybrid direction, ‘Supporting the B2B Buyer.’

DKSH Conceptual Design
Artboard extracts demonstrating applications of the product concept

Lesson 2.

Conceptual design is a rapid litmus test for a design approach but explain its purpose.

We used a Conceptual Design process to solve the principle challenges and promote interaction with the DKSH Brand guardians at the earliest possible opportunity. However, as we collectively discussed the concept with the wider business team, it began to cause confusion 😕. We learnt to describe the purpose of this phase very clearly and ensure that input was directed towards the overall experience as opposed to the concept functionality.

DESIGN DETAILING

DKSH had already generated a number of interaction models. Our responsibility was to design the final information architecture in unison with the technology provider. Discussion at the conceptual stage meant that there was pressure to begin wireframing the solution, but we focused on the user flow first.

DKSH Order Module User Flow Diagram
Order Module User Flow Diagram

Lesson 3.

When thinking about how a user moves through a product, you need to consider the scenarios.

By studying the flow of the product first, we were able to determine the relationships between the modules and raise important questions related to the KPIs, such as: How can we ensure onboarding is simple and adoption of the product is high? This reflection, created by the user flow, allowed us to also consider important scenarios:

  1. The First Time User: Helping the user to understand the platform and become an active user
  2. The New User: Consideration for the Empty Case with no information available in Connect
  3. The Returning User: Remembering the preferences of the user and personalising the experience accordingly

A mobile first philosophy was agreed and detailed wireframes produced that catered for each scenario. These clickable wireframes helped tell the story to the business team and plan the system using Atomic Design Principles.

DKSH Connect Wireframes
Wireframes using a atomic components divided into scenarios

Lesson 4.

Design guidelines must now consider the changing nature of customer touchpoints.

VISUAL DESIGN

DKSH had recently fully re-developed their Digital Brand Guidelines to release a new version of their corporate website. Our team worked closely within the established patterns but reached an early stumbling block...the guidelines only catered for large devices 😬. To deliver the final User Interfaces, we produced a guideline extension based on our component system.

DKSH Connect Interfaces
DKSH Connect Mobile & Tablet User Interfaces
PROTOYPING

We combined the logic of the clickable wireframes with the UI to produce a rapid UI prototype for both the mobile and tablet experience. The prototypes were then used to perform further user testing in order to analyse gaps and opportunities. Combined with the component annotation, the prototypes also greatly reduced the development handover time required.

REFLECTION

DKSH Connect had many positive affects on our growing team. From a management perspective, it forced me to re-evaluate the way our team collaborated and delivered at scale.

Despite the project output being Design centric, the involvement of different viewpoints helped to maintain a balanced solution. The project was also a big learning curve of how to manage changes across a large number of stakeholders.

WHAT WOULD I DO DIFFERENTLY?

  1. Place a greater emphasis on defining a measurement plan at the start of the project.
  2. Recommend that all major breakpoints are maintained at a component level.
  3. Establish a Design Ops leader to deal with the volume of processing required to share updates.
DKSH Desktop