illustration Creator

UX/UI Design

Interaction Logic

Built at Strichpunkt Design 2023

CONTENTS

INTRODUCTION

THE IMPACT

STARTING POINT

RESEARCH & UX

UI DESIGN

INTERACTION LOGIC

PROTYPING & TESTING

OUTCOME

Introduction

DHL needed a scalable digital tool to streamline how illustrations and visual components were used across its global digital ecosystem. The challenge was to design an internal tool that not only aligned with DHL’s robust design system but also introduced flexibility and delight enabling teams to build consistent yet engaging visual assets.In this project I lead the post discovery design efforts and feature development under the supervision of a senior UX designer, along with stake holder management, design presentations and developer handoffs.

Introduction

role

UX/UI Designer

Team

Sr. UX Designer

Head of Development

Graphic Designer

Developer

timeline

16 weeks

The Impact Created

Enabling 1000+ non-designer employees of DHL to create brand-consistent illustrations, supporting systematic creative excellence across DHL’s worldwide operations.

The Bridge to our impact

The starting point

Rather than following traditional user research-driven product, this project required a more hands on approach to bridge DHL’s business goals with the needs of the users for this tool.  

The starting point

Rather than following traditional user research-driven product, this project required a more hands on approach to bridge DHL’s business goals with the needs of the users for this tool.  

Challenge

I Entered the executional phase post project discovery with no access original research or analysis repots.

Challenge

I Entered the executional phase post project discovery with no access original research or analysis repots.

Approach

Conducted informal conversations with project stakeholders who had attended the discovery workshops.

Insights

The tool was part of DHL’s new advanced brand management strategy. Aiming towards reduction in time and money in design processes

Insights

The tool was part of DHL’s new advanced brand management strategy. Aiming towards reduction in time and money in design processes

Re-group

Facilitated alignment meetings with PMs and fellow designers to understand the ecosystem in which the product will live.

Research

Acknowledging the shared foundations with DHL Layout Creator. My aim was to map its user flows and interaction patterns and extract the reusable patterns while recognizing where the two tools would need to diverge.

I invested time understanding the ecosystem the tool would live in immersing myself in the DHL’s robust design system. Followed by a desk research conducted to systematically unpack the user experience of Layout Creator.

Challenge

I Entered the executional phase post project discovery with no access original research or analysis repots.

Challenge

I Entered the executional phase post project discovery with no access original research or analysis repots.

Approach

Conducted informal conversations with project stakeholders who had attended the discovery workshops.

Insights

The systematic nature of DHL's illustration framework presented an opportunity: instead of requiring users to design from scratch. The creation flow had to be an iterative one.

Brainstorming on this with the engineers and the head of development we arrived to the solution that the tool could generate pre-composed variations through intelligent permutations,

Users don't build illustration. They configure them through strategic parameters that generate brand consistent permutations and combinations

UI Design - Creation Phase

Interaction Logic - Creation Phase

Due to the systematic format, the logic was to provide users with permutation and combinations of an illustrated scene

Interaction Logic - Creation Phase

Due to the systematic format, the logic was to provide users with permutation and combinations of an illustrated scene

Composition Variation (Shuffle)

The system generates multiple composition variations for each scene, allowing users to shuffle through different visual arrangements of the same content.

Scene Complexity Slider

Users adjust how busy or simple their illustration looks using a slider. Lower settings give a clean scene with just
a few objects, while higher settings add more detail

Object Visibility

Users who need more control, this parameter allows toggling individual objects on or off to customize scene content without breaking the composition structure.

Locked

Locked objects are a designed constraint that limits the user form omiting the core objects of a comp.

Visible

Toggle between visible and hidden to manipulate the presence of the object on the canvas.

hidden

Toggle between visible and hidden to manipulate the presence of the object on the canvas.

Object Modification

Extends editing capabilities further by enabling
fine-tuning of specific object attributes

Prototyping & Testing

I tested the UI with internal staff members who were non designers to find proof.

Prototyping & Testing

I tested the UI with internal staff members who were non designers to find proof.

Test Insights

80% task success rate when using the illustration creator.

50% Users were able to complete the creation flow in less than 10 minutes.

The outcome

Illustration Creation made Simple, Smart, and Stress-Free saving DHL 💰 and global rollout with adoption in 100+ countries

The final designs excited stakeholders at DHL Group, and it was globally launched as an internal tool adoption in 100+ countries

Curious to collaborate?

Intagram

Curious to collaborate?

Intagram