TradeGecko for B2B eCommerce

A significant part of the TradeGecko customer base have a wholesale component to their business. Unlike retail eCommerce, much of wholesale order management is still being done manually and offline (by phone, email, or in-person sales).

We built a B2B eCommerce Platform to provide our wholesale business customers an online storefront to allow them to automate their selling workflows just as much as they are able to on their online retail stores like Shopify and Amazon. Their business customers are given a password protected online view of their bespoke catalog with their negotiated pricing and rules (e. g. minimum order value and quantities, discounts, etc.), and place their orders online. By doing so, TradeGecko’s customers are truly able to consolidate all of their inventory and sales orders in one place from across their retail and wholesale channels.

I was Lead Product Designer for TradeGecko’s Sales Order Management team, driving a team of engineers as a triad lead alongside a Product Manager and a Technical Lead. Part of our ownership is in maintaining the wholesale business experience on both the TradeGecko platform and the integrated B2B eCommerce platform.

Alongside my Product Manager, I monitored and collected customer data overtime to identify the key priorities for our capability team’s roadmap on a quarterly basis. This included crunching and theming hundreds of customer feedback collected through our in-app feedback engine, customer support tickets, and partnering with our Account Managers and Customer Support teams.

I then work alongside my triad lead partners (Product Management Lead and Technical Lead) in sequencing exercises before bringing our roadmap forward to our team at the beginning of the quarter. The sequencing exercise involves the expertise of each of the triad lead and considers:

Example breadboard for the B2B Promotions feature

As we go through every sequenced item on our defined roadmap, I partner with my Product Manager to craft a broad research plan and schedule customer interviews over video calls with existing customers that have relevant feedback and pain points to the problem we are tackling at a certain point in time.

After understanding the customer problem in more depth, I share our learnings and conduct wireframing sessions across functions in TradeGecko, including members from design, product management, engineering, and customer-facing teams, to ideate early on the shape and form of the functionality while also taking into consideration multiple perspectives from team members with different areas of specialisation. Taking this approach means we get to catch gotchas earlier (e. g. technical feasibility) and allow our engineers to start spiking on the architecture and implementation without having to wait on designs to be finalised, which is critical in a fast-paced startup like ours.

Considering the ideas I’ve gathered from the sessions, I create wireframes to start gathering early feedback from the customers we’ve spoken to during our user research.

To further challenge the high-level ideas I’d have so far, I do an experience analysis of existing tools in the eCommerce operations landscape that are already trying to solve a similar problem. I specifically watch out for ensuring that we are not re-inventing any existing workflow and experience patterns, and at the same time, that we are aware of opportunities where we can be better. I also share any observed gaps in functionality with my Product Manager to assess if it is something that needs to be considered in our roadmap.

As we form a better sense of our customers’ needs from the ongoing broad research, in parallel, I then start creating designs in higher fidelity, and stitch core workflows together into usable prototypes that we could have customers click on like a real product themselves. Once we are confident of the scope of the initial release, alongside my Product Manager, we craft a more narrowed down interview script with more focus on the usability of the end-to-end workflow design in the context of using it within the TradeGecko product following its design patterns.

I then start working closely with our Technical Lead as we gain more confidence and get closer to a finalised shape and form of an initial product release to allow our engineers to spike the technical work in preparation for breaking down our tasks and estimating the work in more detail.

B2B Admin View Sample screen - Dashboard for Beta rollout focused on helping wholesale customers grow

Sample screens from B2B Promotions feature in Beta (L to R) - Admin view promotions index, Create promotion form default and completed state screens

Sample screens from B2B Promotions feature in Beta (L to R) - Promotion Detail View empty state, Get shareable link modal

Sample screens from B2B Promotions feature in Beta (L to R) - Promo code applied in existing B2B Storefront cart view, Promotion Admin detail view with log of redemptions

With a better understanding of an MVP, we start breaking down our tasks and estimate the work in more detail. I join in the engineers’ estimation poker exercises to answer questions pertaining to implementation to help them estimate the work with more confidence.

Once we’ve taken the total estimation of the work, the triad leads (Product Manager Lead, Technical Lead, and myself) then recalibrate the sequencing of our releases from MVP, to MLP, and beyond, identifying what is table stakes and what can be considered as fast-follows. My role in this exercise focuses on ensuring that we are not shipping a bad user experience regardless of how we stagger the scope of each release.

I worked side-by-side with frontend engineers on a day-to-day basis to ensure the UI and UX of our feature releases are up-to-spec, and to unblock them on any issues we encounter along the way during implementation.

I had access to the code base via Github so I contributed to the frontend code minimally on the side for UI tweaks, polishes, and outside of particular feature releases, fixing any observed UI regressions from time to time when frontend libraries we use get updated, and ensuring that our customers’ online B2B stores break elegantly on smaller screens for their wholesale customers who place orders on-the-go.

Snapshots of an example pull request on Github to make temporary fixes to the responsiveness of the B2B storefront product listing screen which break when viewed on mobile phones and tablets after a library update (From L-R Change description with before and after screenshots, and a snapshot of the code change comparison)

Production screenshots on mobile after deploying the fixes

I wrote the bug bash instructions broken down into individual testable workflows for teams across functions to test every feature release end-to-end. From this exercise, bugs were filed and prioritised on JIRA to define our launch ready-ness until all critical issues were resolved before releasing to 100% of our customer base.

I partnered with my Product Manager in continuing our testing and research as we release a fully working product to a handful of customers in Beta. Working with our team of engineers, I summarised our findings and helped ensure critical issues that came out of the feedback received at this stage were addressed to help identify our full rollout ready-ness, as well as recalibrate our post-release roadmap and sequencing.

I worked with our Knowledge Experts in creating help articles for our knowledge center. I also work closely with my Product Manager in creating onboarding materials for our customer facing teams into how new features work before they get released.

Design and Prototyping

User Research

Project Management

Frontend development