TradeHub: Cross-border B2B buying & trading App — UX case study.

In this case study, I will take you through my process of designing an MVP.

When you start working on a new application as a UX designer, you never know beforehand what knowledge you might need this particular time. Of course, first of all, that’s knowledge of the various platforms, understanding the general principles of design, layout rules, the ability to design a complex user architecture, etc. But sometimes some users do not like to change anything, even if they have an easy option available.

Problem

International traders currently use multiple platforms (calls, email, WhatsApp, WeChat etc) for communication with their buyers/suppliers. In most cases, there are multiple persons within an organisation who are involved and there is significant back-and-forth. Since the parties have worked with each other before, the terms of the agreement are already in place and most of the discussion revolves primarily around product pricing. Most buyers reach out to multiple known suppliers to help discover the best price.

Tradehub aims to create a unified communication platform that simplifies the process of price-discovery for buyers.

Project

The task was to design an app which simplifies procurement and manage wholesale trade activity. The application is a solution to make global trade easier for SMEs. Traders across the world can use our proprietary negotiation platform to create and share requirements with sellers to get quotes instantly.

Project Goals

Based on discussions with 50+ international buyers, we mapped out the complete buyers’ journey from RFQ generation, sharing, negotiation and confirmation. Based on these conversations, we focussed on a few primary features that we wanted to validate user behaviour on-

1. A simple buyer-seller interaction journey where buyers generate RFQs and sellers bid on them.

2. Create a utility app to onboard buyers and sellers (organically) by leveraging existing buyer-seller relationships.

3. To create a platform where export/import orders are listed, negotiated and confirmed.

Target Users

Based on the meetings, the target users for the application have the below common traits-

1. 30–60-year-old traders.

2. Small offices with 5–10 members in each company. Apart from the owner (and his family members), most of the employees are tasked with documentation and accounting responsibilities

3. Always-on-the-move owners spend very little time on desktops/laptops- The mobile app was the only way forward

4. Moderate tech understanding- Not very tech-savvy, but the good design would help them use most applications.

Research

Despite our limited time, we made sure that we would definitely take views of users. The research was mostly focused towards the buyer side initially because when we did our secondary research, it was found that there is a need for a more smooth flow in the trade process for the buyers. Some of our team members went to Dubai to participate in trade shows and they talked to many people and tried to understand how they close their trade deals. They also tried to understand the entire trade deal process on both the buyer and seller side and noted down the important points which could become the primary features of our app. We found this part of the process very important because we wanted to ensure that the experience we create for the target users is catered towards them. There may be a lot of applications to base a design on, but knowing more about the buyers and sellers would allow us to create unique features that they may find useful as compared to those of other similar apps.

Findings

· Buyers are very communicative with their suppliers- On chats as well as calls.

· Every buyer has at least 5 known/preferred suppliers for any product/commodity

· Current RFQ process involves multiple channels and most users were eager for an easier solution

· Data privacy was their biggest concern- their suppliers/buyers are their biggest “trade-secret” and sharing their details with anyone could jeopardise their whole business.

· Getting the lowest price is the primary goal

Affinity Mapping

Affinity mapping is a crucial part of any UX research because it allows the designers to group the different user insights and find key gain and pain points to touch on when creating the user experience. We grouped the different insights from the user groups based on similar themes and subjects. From the affinity map, we were able what buyers need when they send any of their requirements to their sellers. We had to take into account, and some preferences to help us design the app in a way that would appeal to the user.

Journey map and Persona

Based on the insights that we had gathered and identified, I proceeded to develop a persona — a buyer. These personas described a typical user, their demographics, behaviours, goals, pain points and frustrations. User journey maps were also created for the persona. Users’ thoughts, feelings, pain points and various touchpoints were included in the journey map. This helped me to see their end-to-end experience from a bird’s eye view.

Journey Map

User Flow

Buyer

Seller

Wireframes

Wireframe sketching is the initial step where you translate your sketch idea into visual UI layout. They are low fidelity in nature and does not contain an actual copy. I like to use paper and pencil to create an initial wireframe. It helps that you can do any change quickly without taking much time. Pencil sketches are more beneficial for brainstorming because if an idea comes to mind then you can quickly convert it into a sketch.

Onboarding

For onboarding, we decided to show the main use case of the app in 4 different steps with the help of supporting illustrations which I customized to match the colour scheme of the application.

To make login easy, we kept login only through OTP

Home Screen (Hub) and Creating an RFQ

When the user enters the home screen, he sees an empty state if he has not yet created any RFQ.

RFQ Creation

RFQ means a request for a quote which is a commonly used terminology in trading. We tried to keep the RFQ creation and share process very simple. In RFQ form, we put the same fields which are very important, point of view of seller and buyer.

Hub- Buyer and Sellers

Hub is the place where the user will see all his RFQ’s from draft to completed. When the user taps into any RFQ, he will see all the details of that RFQ he has created and offers from different sellers. User can choose any seller based on lowest offer, quality (by looking at the product image) etc.

Seller offer

When the buyer creates and shares the RFQ on WhatsApp to his sellers, the seller can click on the link and enter his offer. Sellers do not have to download the app to submit the offer, there is an option to submit the offer on the link itself.

Negotiate and Confirm Order

Key Takeaways

· Every user is different: You should always decide the feature and design of the product by keeping the user’s requirements in your mind.

· Design systems are important. Because of the rush, we immediately jumped into designing without making components first.

· Manage time wisely. This experience taught me how to properly schedule my day and make sure I get all my tasks done.

Conclusion

I know there can be a lot of design changes but we had to launch our MVP (Minimum viable product) soon so we didn’t pay much attention to the UI. UX should be good and the user should understand the app that was more important for us in this MVP. We were able to accomplish our goals and launched the MVP on time to understand user behaviour for this product. I learned a lot from this experience.

Landing page link
https://gettradehub.com/landing

--

--

--

I love solving problems. I believe every great product starts with a user problem and the way to solve it is revealed through user empathy and understanding.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

La Patria | graphic design from Uruguay

Nir Eyal — Hooked

The Five Stages of Grief: How we finally built ourselves a new website

Online Resources for Design Engineers

Elegant, Useful Space

Introducing PMX: Our model for how tall timber buildings could work in cities

Architectural rendering shows the exterior of a tall timber building. A city skyline is in the background.

Bucket List Adventure Quest

Mind the product conference— what I took home with me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chirag Khushalani

Chirag Khushalani

I love solving problems. I believe every great product starts with a user problem and the way to solve it is revealed through user empathy and understanding.

More from Medium

The Trust Exercise— a UX case study

Designing Onboarding Screens for Intellect — a healthcare app

Case Study: Job Search App

Xylinx website design Case Study