Project

Graduation Project

Company

XPLCT Studios

Role

User Research
Concepting
Usability Testing
Wireframing
Prototyping
Visual Design

👕 XPLCT Studios

XPLCT is an Amsterdam-based streetwear clothing brand that sells its clothing through more than 50 retailers across Europe.

These retailers place purchase orders with XPLCT more than 4 times a year, which involves a complex procurement process. I designed a B2B tool for both parties so they can keep track of this process.

🚩 The Problem

All communication between XPLCT and their retailers takes place via WhatsApp or mail, which may feel personal but lacks professionalism and often leads to significant uncertainties regarding this procurement process.

🙋 The Ask

Design a digital B2B (Business to Business) tool for XPLCT & especially their retailers that allows both parties to keep track of the procurement process.

Schedule/Phases

🔍 1. Research (5 weeks)

Developing insight into the users needs

✏️ 2. Design & Concept (4 weeks)

Translating insights into concepts.

🧪 3. Testing & Finalising (4 weeks)

Conducting usability tests and wrapping up

🔍 1. Research Phase

Research Methods

🎙 6 qualitative interviews

Qualitative interviews with the most loyal retailers of XPLCT, mapping the current procurement process and identifying their pain points.

👔 2 qualitative interviews

Qualitative interviews with the 2 partners of XPLCT .

📝 22 responses to survey

The survey contained questions that helped quantifying the severity of the multiple pain points and problems. This data served as directional input.

⌨️ Desk Research

Research about the B2B market and how differs from the B2C market. What are the latest trends and do there exist solutions for this problem?

👓 2 Participant observations

By observing the process of the retailers coming by XPLCT’s showroom I can gain insights that will help me with understand the retailers needs better.

🔎 Day in the life

By being at the xplct office once a week, I aim to immerse myself in their work environment and understand and feel the brand and the world surrounding it.

The Fist Step: Customer Journeys

The first step is to map out the procurement process for both parties.

Based on the interviews with both parties and the survey, the Customer Journey has been established below, along with the pain points of both parties.

Customer Journey: Main Pain Points

🙉 There is no clear overview of the ordered clothing

The order confirmation is unclear, with many collections overlapping. As a result, the retailer lacks visibility into when each collection will be delivered.

👥 All communication takes place through different platforms

Most communication takes place on Whatsapp or over the Phone what feels personal but lacks professionalism.

🙅🏽‍♀️ The retailer can't find content

This consists of visual materials such as webshop photos, campaign photos & videos, and photos for social media. These are stored in an unorganized Google Drive.

👕 The retailer wants to re-stock sold out items

The retailer wants to place a repeat order for popular items that are sold out. However, requests for these orders don’t always reach XPLCT, causing the retailer to miss out on potential revenue.

Conclusion: Survey And Interviews

A visit to the showroom is unique and important.

The retailer physically visits XPLCT’s showroom to purchase clothing for their store.

This makes the buying experience at XPLCT personal and unique compared to other brands. To maintain this unique feeling, this step is therefore not digitized.

Competitor Analysis

I have conducted research on 4 B2B platforms that offer similar solutions and compared them with each other.

💡Research Conclusion

Many B2B platforms already exist that digitize the procurement process. However, since these platforms cannot convey the unique brand identity of XPLCT, I will explore ways to incorporate this identity into the application I will design for XPLCT during this project.

✏️ 2. Design & Concept Phase

Main functionalities

Home

A dashboard page with notifications will indicate when new content is available or when a new collection is available in the showroom for purchasing.

Orders

The retailer has an overview of all their orders, receiving notifications for orders that require action.

Content

The retailer can find all content photos per season here. They can view, download, and directly share them on social media via the app.

Stock

The retailer can restock sold-out items.

Sketching, Feedback & Iterating

Iteration Process

Added pictures to make the page visually more appealing & to make the order more distinguishable
I applied xplcts branding by adding their blue colorn to the order.
The delivery text was unclear so i emphasied it by making the text bald

Iteration Process

One primary action per screen
A clear ‘make appointment’ button
A clear text that calls for action

🧪 3. The End Result

XPLCT APP

“How can a digital product support the entire purchasing process for XPLCT retailers, thereby enhancing the purchasing experience?”

Home

Dashboard page where the retailer is constantly reminded of important things, such as getting a notification that new content is available or that a new collection is available in the showroom to make purchases.

Orders

Here the retailer has an overview of all his orders. He receives notifications of orders that require action. These orders are listed under “important”. Furthermore, under ‘dispatched’ and ‘delivered’ he can see which orders have already been delivered and which are still arriving.

Content

A page where the retailer can find all the content per season. He can view it, download it and share it directly on social media through the app.

Stock

These are all items that XPLCT stocks and makes available for the retailer to order at any time. These are known as repeat orders. If well-run items are in danger of selling out, the retailer can re-order that item here. He can immediately see which sizes are in stock and when his order will be delivered.

Make an appointment

The retailer picks a date when he wants to visit and a time that is convenient for him.

Order details

An overview of all details of the order.