THE LABEL SG: Multi-vendor e-commerce platform

Overview

THE LABEL SG is a fashion e-commerce web app championing local fashion designers. Created by the Textile and Fashion Industry Training Centre (TaF.tc), it also serves as a platform for graduates o launch their brand at early stages when they need the most help with marketing and outreach.

Previously hosting the site on Wordpress, we took the leap of creating our own platform from the ground up, streamlining features based on the needs of our fashion designers and customers.

Role

I was the lead designer and main liaison between designers, product owners (TaF.tc), and developers.

I managed the end-to-end design process — from the first rounds of user research to post-launch maintenance and management.

Results

THE LABEL SG was launched on its new platform in February 4, 2022. With much improved load times and reduced drop off rates, the new platform shows promising signs that it provide both improved discoverability on search engines and better shopping experiences for customers.

A mockup of the new THE LABEL SG website on desktop

A mockup of the new THE LABEL SG website on mobile

Goals

When we first launched THE LABEL SG in June 2020, we had less than a month to build the entire platform, brand identity, and marketing plan. We built the platform using Wordpress, Elementor, and Woocommerce for expediency.

As the platform grew, we received specific feature requests from vendors and customers alike that could only be resolved through plugins (if they could be resolved at all). Eventually, the platform was so bloated with bandage solutions that a simple product page could take minutes to load.

We built the new platform to streamline the features our users needed and create a system that processes orders swiftly and reliably.

Research

Users and Methods

Our main users were local fashion designers and their online customers.

I worked closely with our 3 inaugural designers as part of the initial platform launch, and became very familiar with their concerns over the course of our one-month campaign and the cooldown period that came after. I became familiar with customer concerns as I had to respond to several inquiries about deliveries, orders, sizing, etc.

I also ran user testing sessions with 6 frequent online shoppers who had not previously used our Wordpress platform.

A board of prioritisations, from less important to most important

Findings

We focused on three main clusters of product design concern that emerged from the feedback:

💸 Sharing more about brand stories made shopping more difficult. Longer-form storytelling forced customers to scroll more before they could reach items to shop. Customers viewed this as disruptive and annoying, even if they requested for more product information.
😵 Vendors were overwhelmed at the various functions available in their backend. Furthermore, not all features were relevant to them, as our Wordpress stack was not tailored specifically to fashion e-commerce. This caused vendors to outsource backend management either to internal temp staff or THE LABEL SG staff — an inconvenience that early-stage brand owners may not have the resources to resolve.
📦 Customers had the incorrect mental model that all inventory on the platform was centralised in a warehouse that THE LABEL SG managed. This is not true: designers are expected to manage inventory and delivery. This gap in knowledge generated many inquiries due to misaligned expectations, such as customers asking why an item from one designer came through but the other item they purchased from a different designer didn’t.

Solutions

We generated solutions in 3 key areas:

🛍️ Managing story-to-shopping ratio
📈 Streamlining features for vendor success
📦 A vendor-centric inventory model

🛍️ Managing story-to-shopping ratio

Our solutions revolved around making it easier for customers to opt-in to learning more about designers while remaining engaged with the shopping experience.

Brand descriptions were capped at the length of 2-3 viewport lines before showing the read more button. It was just enough to bring out the brand’s personality while showing enough product to pique shopping interest.

Screenshots of mobile before-and-after the read more function was added

A screenshot of how the read more function was applied to the desktop version

My original Wordpress layout included long-form, blog-like Brand Story posts. However, not only did the heatmap data show that this received few clicks; some users thought they would be redirected to a shopping page instead.

We remodeled the Brand Story page to a side tab that people could open mid-shopping experience, like a product tag should a customer want to know more about where their clothes came from. This does not redirect to a new page, but instead remains within the user flow.

📈 Streamlining features for vendor success

We had the freedom to build our CMS for fashion specifically rather than e-commerce broadly. We left many Wordpress features behind and made room for features that allowed vendors to engage with customers and strategise for increased with conversions.

New features included a system to collect customer inquiries and setting up coupons due to a large amount of requests for promo-setting features.

A before-and-after screenshot of the vendor's backend modules, showing that vendors can now strategise and connect with customers

This also gave us room to build e-commerce reports that vendors could download at their own time while selecting metrics that mattered to them.

📦 A vendor-centric inventory model

To realign customers to the correct mental model of THE LABEL SG’s inventory system, we rearranged important displays of delivery information and increased direct customer touchpoints with vendors.

Most visibly, our order tracking system splits the progress between different orders within the same order. Customers more clearly view what is coming from where.

Screenshot of Order Details, showing that items are filtered by vendor

Customers used to frequently write in to our general email to ask where their orders are, especially if one vendor’s items were delivered first.

Given this, we created an inquiry management system where any inquiries about order status are sent directly to vendors.

Screenshots demonstrating flow from help centre to order inquiry

Results

Outcomes

Loadtimes were drastically reduced, hitting one of our high priority goals. Furthermore, for the week of February 7-13, 2022 — though only half the in-stock inventory has been uploaded and half the amount of marketing dollars are being spent compared to 2021 — the new system has already beaten previous conversion metrics (7 new accounts in Feb 7-13, 2022 vs. 2 new accounts in Feb 7-13, 2021).

As marketing prepares for a full-fledged post-launch campaign, we look forward to more positive feedback given the promising start.

Lessons learned

✏️ As a designer, I learned that while user flows/wireflows helped reduce ambiguity on the user journey, these cannot replace workflow documentation that developers rely on for highly-detailed back-end processes. For this project, wireflows could not accurately document the approval/publishing workflow between vendors and admins. We spent a lot of time debugging this workflow in the pre-launch audit. Creating the workflow immediately helped the developers align.

🎯 As a project manager, I learned to widen my definition of who is an affected stakeholder that I should keep in the loop. Our designs accounted for SEO functionalities such as metadata and custom 404 pages, but only right before launch did we inform our SEO consultants about the launch. Though they gave us a wealth of great advice and enhancement opportunities, some of them can only be implemented in the next phase of development.

Next steps

Execute post-launch research to track acquisition, retention, and conversion metrics.
Conduct research to determine if our audience’s shopping behavior and attitudes have changed due to the evolving COVID situation.
Further develop our design system to ensure consistency in future product developments.
Work with marketing to build a designer community and communicate closely with our clients.

❤️ Special thanks to designers Dominic Tan and May Thwe Min for the support, Xavier Yong for helping me interface with customers and clients, the tech team (Andre The, Dylan Tan, Brian Lee, Wen Xiang Lai) for support during the bug audit, and the Transformist Network team for making development possible.

Next case study

TaF.tc: Front-end redesign for a Training Management System

Helping prospective students find what they need

view case study