CRAFTees Two-sided Marketplace Template

Homepage with 3 product cards.

Overview

CRAFTees is the next template in conjuction with Pro NoCoders. This will be for a two-sided marketplace on Dittofi.

Introduction

CRAFTees is a two-sided marketplace app that allows sellers to offer their specialty or personalized t-shirts for sale. They'll be able to chat with customers, manage inventory, receive payment, manage orders, and see reports. The app allows the buyers to search, sort, and favorite products, along with chatting with seller, ordering, paying for, and tracking orders. The app admin will be able to manage users, provide support, distribute payments, generate reports, and update branding.

Research

Personas & User Study

Design Guidelines

Working from a scope and wireframes provided by Tonya at Pro NoCoders I created high fidelity layouts in Figma.

The homepage allows buyers to view the featured and latest items, click to go to product detailes or enter a search term to go to the product search results. The search results will allow them to then filter by size, color, and type. For the sellers the homepage offers an example of what their products could look like on the page as well as some more specific informatio about becoming a seller.

Landing page with featured products, latest products, why us section, and call-to-action to become a seller.
Landing page.

The product search page can be filtered and sorted by category, color, price, size, shipping type, and location of the seller.

Product search page sorted by Sports. all images feater a dog wearing a sweatshirt.
Product search

The product detail page offers four photos of the product design to show front, back, and detail areas. The rating, price, description and sizes are in the intital view. Users can click to see customer reviews and shipping information.

Product detail page with images on the left and details on the right. Desktop view.
Product detail.

Products get added to the cart for review.

Shopping cart with 2 products. User can adjust the quanity and add discount code then go to checkout.
Cart

The checkout page has options for using various payment options. The user can apply a discount code if they did not in the cart.

checkout page
Checkout

Once the order comes back as paid the user is presented with an order summary page. The user can download a PDF order summary or go back to shopping.

Order summary page.
Order summary.

Depending on the site mobile traffic could be more than desktop traffic. Below is an initial concept for what the app could look like as a mobile app or even app store app.

Concepts of the opening page, product search, and product detail on mobile.
Figma mobile concept.

Current stage is building out the site in Microsoft Visual Studio.

Development

Final Product

Key Takeaways

Results

Sign up to be notified when CRAFTees is up for sale

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.