Cover_OTB.jpg

Re-designing the selling/buying experience on a B2B platform of an international fashion group

Empowering sales assistants with the right digital tools

 

10 WEEK PROJECT / FULL REMOTE
Client: Retail
Project: Digital product creation (B2B)

 

We were asked to improve and re-design the B2B platform (for web and app - and 3 different users: sellers, buyers and merchandisers), of an international fashion group.

This platform allows sellers (of 3 different brands) and buyers to interact, and easily place orders.



OUTCOMES AND DELIVERABLES

— 3 complete reports for research activities

—6 prototypes in total for both Web and App
(2 per checkpoint)

— A fresher B2B experience with almost 100 screens for the web and the app - and the 3 users/views.



MY ROLE

During this project, I was involved in the whole process and more particularly in:

— Research activities: conducting interviews with users (stakeholders and sellers), working on benchmark and trends report, as well as analysing the as-is experience

— Creating different reports and presenting them to the client

— Design of wireframes for the 3 packs of features during the 4 weeks of design

— Preparation of prototypes for every design checkpoint with the client

 
DESIGN screens 2-01.png
 
 
 

Discover

01. Benchmark and Trends Report

We explored the fashion market & e-commerce ecosystem to look for digital solutions adopted by other B2B and B2C companies and brands.We summarized & highlighted some of the emerging Trends for 2020 in terms of Experience, Visual & Interaction design.

Discover -.001.jpeg
 

02. Analysis on the current/as-is Experience

We have conducted an Experience analysis on both, the website and app to assess the interface and overall experience of the users.

A report has been then created, to share with the client all of our findings - pain points (to improve) and power points (to keep and enhance) of the experience.

Experience analysis.001.jpeg
 

03. Conducted interviews with the users (stakeholders and sellers) as well as a simulation of a selling session

We have conducted stakeholder Interviews to explore project expectations and understand brand goals and specific needs, as well as user interviews with sellers to understand needs and collect specific insights regarding their experience with the tool.
We also conducted a quick simulation of a selling session to deep dive into the experience, and understand exactly where lies the pain points of the experience.

All of these activities led us to map a high level journey in which we mapped all our findings pain and power points, as well as identified possible suggestions to improve the experience.

The creation of an insight report was important, in order to explain the process and approach we had but also to detail well all of our findings and highlight the value of this phase (that is sometimes not considered very important.)

Interviews and insight report.001.jpeg
 

Define

01. Prioritized all features and involved the client

Together with my colleague, we mapped all of the features coming from insights of the different activities conducted, and evaluated them together with the development team and with the client.

We organized a two-hour workshop where we dedicated our time in going through all of the different features and mapping them on the importance/complexity matrix. This was crucial in order to understand which ones would be tackled first as a first priority.

Screenshot 2021-07-16 at 13.58.49.png

In the middle of the project, budget was cut…. And we needed to understand what were really the important things to do with the budget we have and leave the rest to understand with client if possibility of extension. 

 

02. Planning of the design phase in packs (sprints)

Every pack had to be designed, for the web as well as for the app (Ipad) touchpoint, for different views/users: sellers, buyers, but also in some cases merchandisers.

Screenshot 2021-07-16 at 13.44.52.png
Screenshot 2021-07-16 at 13.45.17.png
 

Design

01. Design of wireframes

The design of wireframes was done in a collaborative way on Figma, in which boards were well organised by web and app (landscape and portrait) - following the 3 main phases of the experience of a buyer.

For every PACK checkpoint, we designed the prioritized features and flows and created their representative prototypes.

Web wireframes - Figma
App (ipad) wireframes - Figma
 

02. Bringing it to life with UI/Visual work

This example below shows only some selected screens for the web experience.

DESIGN screens lon g-03.png
 

Team for this specific stream
• 1 senior service and interaction designer
• 2 service and interaction designer
• 1 visual designer