Craftify
Craftify is a web-based platform for creating custom designs on products ranging from phone cases to accessories. The platform is aimed at both buyers who need a unique product and sellers looking for an effective tool for mass management and sale of custom products. Through integrations with popular marketplaces such as Shopify and Etsy, the platform helps sellers create, manage and bulk edit their listings, greatly simplifying and speeding up their work on the marketplaces.
Craftify is a web-based platform for creating custom designs on products ranging from phone cases to accessories. The platform is aimed at both buyers who need a unique product and sellers looking for an effective tool for mass management and sale of custom products. Through integrations with popular marketplaces such as Shopify and Etsy, the platform helps sellers create, manage and bulk edit their listings, greatly simplifying and speeding up their work on the marketplaces.
Role
Product designer
In collaboration with
Project manager, Product Owners
Date/Duration
2023-24 / 7month
My contribution
I did this project while working at Halo Lab studio, working closely with the project manager and the product owner team. We started by creating the builder page needed for product design (e.g. smartphone cases), and then I was involved in all the next steps. I was fully responsible for UX/UI directions, designing user flows, prototyping solutions to show it to the owners and potential target audience.
I did this project while working at Halo Lab studio, working closely with the project manager and the product owner team. We started by creating the builder page needed for product design (e.g. smartphone cases), and then I was involved in all the next steps. I was fully responsible for UX/UI directions, designing user flows, prototyping solutions to show it to the owners and potential target audience.
Research
Stakeholder Interview
We started the project with a stakeholder interview to gain a deeper understanding of the goals and expectations of the platform. We used the 5W questions framefork to structure the information we needed.
We started the project with a stakeholder interview to gain a deeper understanding of the goals and expectations of the platform. We used the 5W questions framefork to structure the information we needed.
Why: The product is designed to monetize our accessory customization capabilities. We can produce custom accessories based on our users' designs. Also the product should help sellers to sell as much as possible;
Why: The product is designed to monetize our accessory customization capabilities. We can produce custom accessories based on our users' designs. Also the product should help sellers to sell as much as possible;
Who:
B2C (buyers): Individual users who want to create unique custom products such as phone cases and buy them;
B2B (sellers): Sellers, a way to automate and simplify the creation and mass management of custom product listings for sale on marketplaces, and then immediately have the ability to produce products;
Who:
B2C (buyers): Individual users who want to create unique custom products such as phone cases and buy them;
B2B (sellers): Sellers, a way to automate and simplify the creation and mass management of custom product listings for sale on marketplaces, and then immediately have the ability to produce products;
When:
B2C (buyers): The platform is used when buyers want to create and order a unique product, whether for personal use or for example branded items for a team;
B2B (sellers): Sellers can find value in the platform when managing their listings in marketplaces becomes a very time-consuming process, or a seller wants to design popular accessories and try to sell them;
When:
B2C (buyers): The platform is used when buyers want to create and order a unique product, whether for personal use or for example branded items for a team;
B2B (sellers): Sellers can find value in the platform when managing their listings in marketplaces becomes a very time-consuming process, or a seller wants to design popular accessories and try to sell them;
Where: This question is not so important in our case as it is more like an add-on, anyway users can use the platform anywhere, and the web version of the product is cheaper and more convenient for sellers who work with marketplaces from a computer;
Where: This question is not so important in our case as it is more like an add-on, anyway users can use the platform anywhere, and the web version of the product is cheaper and more convenient for sellers who work with marketplaces from a computer;
What: A web platform to customize and sell design products. For buyers, it's a way to create a unique product that can be ordered directly. For sellers, the platform provides powerful tools for creating and managing custom listings with the ability to integrate with major marketplaces via API.
What: A web platform to customize and sell design products. For buyers, it's a way to create a unique product that can be ordered directly. For sellers, the platform provides powerful tools for creating and managing custom listings with the ability to integrate with major marketplaces via API.
Problem Statement
How will the product allow B2B sellers to realize their marketing ideas and effectively sell them on marketplaces, while making the service interesting for B2C buyers as well?
Competitive Analysis
Based on the information obtained in the previous stage, we started working immediately on the homepage - Builder page. We analyzed several similar competitors, making SWOT analysis to define their strengths and weaknesses in terms of UX. The client provided us with a list of functionality to be implemented and I started designing wireframes with the builder, which the owner then tested with his focus group.
Based on the information obtained in the previous stage, we started working immediately on the homepage - Builder page. We analyzed several similar competitors, making SWOT analysis to define their strengths and weaknesses in terms of UX. The client provided us with a list of functionality to be implemented and I started designing wireframes with the builder, which the owner then tested with his focus group.
Main flows
Home page
The home page is saturated with animations. Each animation here fulfills a specific task: it not only attracts attention, but also demonstrates the functionality of the application, it helps to reveal a large number of features. Animations help users to quickly understand how to use the product for their own purposes.
The home page is saturated with animations. Each animation here fulfills a specific task: it not only attracts attention, but also demonstrates the functionality of the application, it helps to reveal a large number of features. Animations help users to quickly understand how to use the product for their own purposes.
Catalog
The catalog is made very simply without unnecessary information, in the product cards user sees the base price for production, selecting the product, creating a design seller puts a higher price to make a profit.
The catalog is made very simply without unnecessary information, in the product cards user sees the base price for production, selecting the product, creating a design seller puts a higher price to make a profit.
Builder
The builder page has a wide functionality and the main challenge was to adapt it for mobile. At the top of the page is the product catalog, which allows the user to quickly change the product and try the created design on different models. For example, by selecting an iPhone, the user can test the design on all models in the lineup, fine-tuning the layout for a perfect print.
The builder page has a wide functionality and the main challenge was to adapt it for mobile. At the top of the page is the product catalog, which allows the user to quickly change the product and try the created design on different models. For example, by selecting an iPhone, the user can test the design on all models in the lineup, fine-tuning the layout for a perfect print.
The viewport has 3 tabs for different views: Mockup, Template and Split:
Mockup: shows how the finished design will look on the product. This allows you to immediately evaluate the appearance;
Template: displays a grid, which helps the user to precisely align and crop the image;
Split: allows two modes to work simultaneously.
The viewport has 3 tabs for different views: Mockup, Template and Split:
Mockup: shows how the finished design will look on the product. This allows you to immediately evaluate the appearance;
Template: displays a grid, which helps the user to precisely align and crop the image;
Split: allows two modes to work simultaneously.
Buyer
Once the product design is finalized, the system prompts the user to select one of two options: For personal use (B2C) or for Seller (B2B).
Buyer Flow: the checkout process follows a standard scenario, with the option to add custom elements such as a logo on the packaging or customization of the invoice.
Once the product design is finalized, the system prompts the user to select one of two options: For personal use (B2C) or for Seller (B2B).
Buyer Flow: the checkout process follows a standard scenario, with the option to add custom elements such as a logo on the packaging or customization of the invoice.
Seller
The seller has vast functionality from design checking to working with listings and marketplace.
The seller has vast functionality from design checking to working with listings and marketplace.
Approve
At the seller after the design stage the next step is Approve, this gives the seller a chance to check how the design looks on the rest of the models.
At the seller after the design stage the next step is Approve, this gives the seller a chance to check how the design looks on the rest of the models.
Launch
Launch step is the final step of creating a listing. Here the user has a lot of settings when uploading photos, setting prices for different models or personalizing the listing. This listing can be saved without publishing or exported directly to your Etsy account.
Launch step is the final step of creating a listing. Here the user has a lot of settings when uploading photos, setting prices for different models or personalizing the listing. This listing can be saved without publishing or exported directly to your Etsy account.
To upload images, the platform provides a modal window with three tabs:
Upload from the computer;
Select from library: access to the collection of images offered by the platform;
Market: high-quality paid images are presented here. These aesthetically pleasing images help improve the appearance of ads and increase their appeal, which in turn helps increase conversions.
To upload images, the platform provides a modal window with three tabs:
Upload from the computer;
Select from library: access to the collection of images offered by the platform;
Market: high-quality paid images are presented here. These aesthetically pleasing images help improve the appearance of ads and increase their appeal, which in turn helps increase conversions.
After selecting images, they can be further customized by adding a background or promo ribbon, for example to show a discount on a product.
After selecting images, they can be further customized by adding a background or promo ribbon, for example to show a discount on a product.
There is also the ability to customize custom pricing for each model.
There is also the ability to customize custom pricing for each model.
Listings
The listings page offers sellers great opportunities to work with large lists. On this page a user can manage and bulk edit a large list of listings at the same time, and after the changes all information will be updated in the listings on the marketplace. Also listings can be imported from Etsy or Shopify, so sellers who already have many listings in their stores can use our tool to quickly import products to the platform.
The listings page offers sellers great opportunities to work with large lists. On this page a user can manage and bulk edit a large list of listings at the same time, and after the changes all information will be updated in the listings on the marketplace. Also listings can be imported from Etsy or Shopify, so sellers who already have many listings in their stores can use our tool to quickly import products to the platform.
Bulk editing
A feature that saves a lot of time for sellers, especially if they have hundreds of listings. In a couple of clicks you can massively change titles, description, photos, characteristics, prices, etc. on selected listings.
A feature that saves a lot of time for sellers, especially if they have hundreds of listings. In a couple of clicks you can massively change titles, description, photos, characteristics, prices, etc. on selected listings.
For example, on the eve of Black Friday, a seller wants to put discounts on all listings and add the text “Sale”, using the tool he will do it in a couple of clicks on hundreds of listings.
For example, on the eve of Black Friday, a seller wants to put discounts on all listings and add the text “Sale”, using the tool he will do it in a couple of clicks on hundreds of listings.
Stores
The seller has the ability to manage the store in their account, and the data is immediately exported to Etsy or Shopify.
The seller has the ability to manage the store in their account, and the data is immediately exported to Etsy or Shopify.
Results & Insights
After 7 months of work, we successfully completed the first version of the product, and stakeholders were very satisfied with the result and my contribution. In the future it is envisaged to add AI tools that will speed up the user experience even more.
After 7 months of work, we successfully completed the first version of the product, and stakeholders were very satisfied with the result and my contribution. In the future it is envisaged to add AI tools that will speed up the user experience even more.
After 7 months of work, we successfully completed the first version of the product, and stakeholders were very satisfied with the result and my contribution. In the future it is envisaged to add AI tools that will speed up the user experience even more.
After 7 months of work, we successfully completed the first version of the product, and stakeholders were very satisfied with the result and my contribution. In the future it is envisaged to add AI tools that will speed up the user experience even more.
The project turned out to be really complex and it was a challenge for me. Due to its scale, I came across a lot of unique patterns and solutions that were worth thinking about.
The project turned out to be really complex and it was a challenge for me. Due to its scale, I came across a lot of unique patterns and solutions that were worth thinking about.
One of the most difficult steps was working with the builder - it was important to fit a lot of components into the interface, ensuring intuitiveness and usability. Organizing the project in Figma was also challenging, there are a lot of components in the project and there was a lot of work with the prototype. Eventually, I learned how to handle large project that require special attention to detail and the ability to create a complex interface.
One of the most difficult steps was working with the builder - it was important to fit a lot of components into the interface, ensuring intuitiveness and usability. Organizing the project in Figma was also challenging, there are a lot of components in the project and there was a lot of work with the prototype. Eventually, I learned how to handle large project that require special attention to detail and the ability to create a complex interface.