UK's first marketplace for reclaimed creative materials
Role: 1 of 2 UI/UX Interns
Tools: Figma, Google Material Design Kit, Jira, Shopify
Duration: Sep 2024 - Oct 2024
Envisioning a B2B & B2C app for an e-commerce + sustainability company
Context
Renée Materials sells leftover materials (textile, wood, stone, metal, glass, paint, etc.) from businesses for creative repurposing, diverting commercial waste from landfills. They have a website marketplace where creatives, designers, and makers can buy materials sourced from furniture and clothing businesses, galleries, art and design studios, theatres, etc.
Problems + Solutions
While a website marketplace was made for customers looking for materials, the growing, invisible part of businesses offering materials was handled manually by Renée's small team. This necessitated a way for businesses to independently list and sell materials, similar to Amazon, where Renée acts as the common e-commerce platform.
Managing orders and their fulfilment is a standard procedure in most e-commerce scenarios, but the process of creating listings is harder. Dealing with materials from various industries demands a listing system that is flexible enough for anything, yet structured enough to capture the unique characteristics that matter to buyers in this creative materials space.
Deliverable
Renée wanted one app prototype that streamlined both seller and consumer workflows. This would have a customer-facing side with the regular marketplace of materials, while the seller side would have independent onboarding, product listing, and order fulfilment.
Initially, us two interns divided design tasks equally for research, ideation, and wireframing. This involved both seller and consumer sides. By the end, I became more invested in the seller-facing side and led its final delivery.
Final Prototype
The seller side dashboard summarises the active priorities of the business: an impact section to convey establish commitment to the circular marketplace, most recent orders and donations, and a beta "Material Match" section to connect material needs on the consumer side with sellers' available inventory of materials.
The orders tab expands into the full collection of past and present orders. Extensive filtering such as purchase date, material type and subtype, price, application, etc., allows full accessibility in locating any order. Order status (dispatched, confirmed, shipped) as well as Donation status (submitted, update on request) is the primary organisation. The sort button also adds convenience in search and visibility of results.
Listings are managed separately in another tab. Their one-off nature as opposed to dynamic/busy order lifecycles led us to create one sole place to deal with them, instead of having multiple channels (dashboard) to access them.
The community tab was a speculative tab that could be unique to Renée's mission to save materials from waste. While a placeholder for now, it could feature information about workshops on waste reuse, events on sustainability, circular economy, etc.
Sellers can now independently sell leftover materials by creating new listings via the add button.
After back and forth ideation, wireframing, and usability testing with 2 clients, we implemented a distinct information hierarchy in the listing process. Every product detail was made to support a niche yet diverse array of materials.
Help and info icons were added to help with the possible subjectivity in interpreting certain standards of information needed by Renée. Pre-filled examples in some of the entries (eg. "What is you material?") also aid sellers in adapting any data to Renée's listing conventions.
'Tags' and 'Listing title' were last in the entries since they were hypothesised to auto-form from previous responses, however still being editable.
Process
Early Research and Benchmarking
Reviewing existing e-commerce and multivendor marketplace apps and websites allowed us to first analyze current market trends and ways of integrating C2C/B2B/B2C models. Apart from studying the UI and system design of competitors’ platforms, we used public forums to assess some of their users’ actual satisfaction and pain points.
Major insights common to seller and buyer perspectives were found in the product listing process. Laying out clear entries of information with either supporting examples or info pop-ups could reduce mental overload while planning a sale and prevent false expectations between buyer and seller. They ensure a reliable, foolproof listing procedure in the long term which users can always navigate alone.
While established services like eBay and Vinted had features for varied demographics, we focused on strategies specific to Renée’s specialisation, such as the customisation of listing details and design that communicates the goal of waste reduction over revenue.
Ideation for Seller + Buyer Pathways
We brainstormed separate service blueprints for both user groups since sellers and buyers approached Renée with unique needs and identities. For sellers, there was a discernible intent to trade in materials and be a supplier, rarely enmeshing their role with a consumer personality who needs materials. We still did not rule out the scenario where a first-time user plays both roles simultaneously, hence including an option in our design later to switch between seller and buyer profiles.
Two types of buyer flows were proposed. One explored the customisation of items using extensive filters and suggestions based on the user’s creative application. The other relied on familiarity and replicating the existing website architecture. The seller side consisted of multiple user journeys depending on their prior knowledge of Renée, what they had to offer, different product types accepted by the startup, etc.
Wireframing
Within the seller flows, the dashboard and item donation pathway was visualised by the other intern. Meanwhile, I illustrated the seller’s self-fulfilment journey and New Listing architecture.
This stage brought up questions on what the best self-fulfilment pathway was for a first-time user. The order of each option in the New Listing menu, hierarchy of material details, input types accepted for each response – these decisions were made by considering the optimal choice in multiple edge cases and user scenarios. The “optimal choice” was geared towards satisfying as many seller profiles and their material needs as possible i.e. manufacturers in textile/paper/wood etc., fabric mills, furniture makers, galleries, etc.
Building upon our developments, a high fidelity wireframe was created for the seller-flow.
Design System, Visual Identity
In order to ensure a cohesive style and allow increased flexibility while testing different variations/design choices on the fly, we devised a design system with the help of Google’s Material Design Kit.
