Hello everyone, my name is Vlad, and I have created my own IT startup with just $100. I have always wanted to test my abilities and prove to myself what I am capable of. I wanted to see if I could go from creating an idea, designing the UI/UX, and developing the frontend and backend, to launching the product and marketing it.
To provide some context, let me briefly describe my background. At the age of 14, I became fascinated with web development because I had a Counter-Strike team, and we needed a website to register for tournaments. As I maintained the website, I also delved into the art of using Photoshop. I began monetizing the site and explored ways to promote it.
Moving forward, I attended university where I extensively wrote code in languages such as C++, Python, and C#. I developed my own neural networks, programmed robots, and tackled algorithms and data structures. During that time, I and my friends co-founded an event startup that helped users stay updated on schedules, changes, and notable speakers.
I was responsible for UI/UX design and frontend development. It was during that period that I studied my first design methodologies: Google Material Design Guidelines and Apple’s Human Interface Guidelines.
For my thesis, I worked on a project that involved fitting furniture using augmented reality on Swift.
Later on, my partners and I established a 40-person IT outsourcing company where I served as the CTO and kept pace with technology stacks across JS, TypeScript, React, Vue, PHP, Python, Node.js, and React Native.
With all the experience I had accumulated, I was eager to apply it to creating my own product.
The plan was to create a product that:
Would be beneficial for business owners.
Could distribute itself without requiring my time and effort.
Would have a monthly subscription (as extensive research indicates that this model is the most viable).
Could be developed without external investments, utilizing only my own resources.
Two ideas were considered:
I chose to pursue the development of applications for marketplaces because I already had experience in this field, albeit as a frontend developer and architect. Previously, I had created a smart assistant that enhanced the functionality of stores on both the Ecwid and Shopify platforms.
I began researching what was popular at that time among users and what generated traffic for owners of online stores.
The answer was obvious: social media. The success of a brand depends on its popularity in social networks and various business metrics, such as GMV, CMR, CM, and CLV.
I realized that small business owners spent a lot of time managing their social media accounts, while medium-sized business owners invested a considerable amount of money and effort in hiring SMM specialists.
To conduct research, I explored the app stores of Ecwid and Shopify. I found that there were similar applications available in Shopify, and in order to surpass the competition, I would need to create something genuinely superior and invest substantial resources so that merchants would choose my solution.
I decided against that idea because I didn’t want to dive into video content creation or use neural networks for generating textual content. My goal was to develop a basic functionality that could solve real business problems.
So, I turned to the Ecwid app store and discovered that there were hardly any competitors in the social media category. This was a win — merchants were seeking assistance with their social media management, and this is where they were waiting for a solution.
There are numerous insightful books written about project planning and design that can aid in designing one’s own project.
However, after many years of working in IT, I have developed my own design principles that are quite simple and allow for quick design of small and medium-scale projects. All you need is a pen and a notebook.
Start by listing the Actors that will be present in the system.
Describe the functionality for each actor in the form of a list.
Based on the functionality, design the layouts (this can be done in a notebook).
Let’s delve into the design process using the example of an Instagram Autopost application.
In light of the information provided, it’s clear that I will be developing an administrative panel for merchants integrated with Ecwid, along with a post-publication service. The application will comprise the following key components:
Dashboard Page: This serves as an informative landing page where users can view their connected Instagram accounts and a list of their marketing campaigns.
Connect Instagram Page: The first page users encounter after installing the application. Here, we provide a brief explanation of how to connect their Instagram account and configure their settings.
Create/Edit Campaign: This page features a form that allows users to input textual descriptions, set posting frequency, specify whether promotional codes need to be generated, select product categories from which items will be extracted, and view a post preview.
Tutorials Widget: A helpful widget designed to guide users through the application’s processes and functionalities, facilitating their understanding of its operation.
Armed with a pen and paper, I’ve sketched out a preliminary layout for these pages. Having a visual representation at hand greatly aids in the development of the application. It simplifies the design of both the frontend and the backend components and informs the database structure.
This approach has proven valuable to me on numerous occasions.
This is the first page users encounter, and our aim is to provide a comprehensive step-by-step guide on what they need to do.
The page features a concise information block, simple graphics, and a single button for the primary action: connecting their account to the application.
Additionally, we’ve included an onboarding widget on this page. Its purpose is to explain the process in detail.
Let’s break down the elements of this crucial introductory page:
Information Block: At the top of the page, you’ll find an information block. This block provides users with a quick overview of what they can expect and the benefits of connecting their account to our application.
Visual Aids: To enhance user understanding, we’ve incorporated straightforward graphics. These visuals offer a visual representation of the steps they’ll be taking.
Action Button: Prominently placed beneath the information block there is the main action button. Its purpose is clear — users click here to begin the process of connecting their account to our application.
Onboarding Widget: To make the onboarding process as smooth as possible, we’ve integrated an onboarding widget. This widget serves as a virtual guide, walking users through each step they need to follow. It simplifies the entire process and ensures that users feel confident about proceeding.
The Dashboard page serves as the central hub for merchants, providing them with a comprehensive overview of our application’s functionality while ensuring timely updates on any issues and offering valuable activity statistics.
Let’s break down the key components of this page:
Account Status: In the first block, users can easily check the status of their connected account. If an account’s token has expired or if there are access configuration problems, this section will display the real-time status along with a description of the issue.
Connected Pages: This block displays a list of connected Facebook pages or Instagram accounts. For each page, it indicates whether the application has access and whether there are any posting issues. This information helps users manage their social media presence effectively.
Time Zone Management: An essential aspect of successful posting is aligning with the store’s time zone. Users can view their current time zone in this block and have the option to adjust it to the time zone preferred. For instance, a store owner in London may see 21:00 GMT+1, while in New York it’s 16:00 GMT-4. This feature ensures posts are scheduled at the optimal times for their audience.
Campaign Overview: The Campaign block is a pivotal component, offering users insights into their ongoing campaigns. Users can quickly check which campaigns are active, their status, the destination page for posting, and initiate quick actions to start or stop campaigns. Additionally, users can access the campaign creation and editing forms directly from this section.
The Dashboard page is designed to empower merchants with a clear understanding of their application’s performance and control over their marketing campaigns.
By presenting crucial information in an accessible format, it streamlines the user experience and facilitates efficient management of their online presence.
The campaign creation and editing page with its abundance of forms and fields can appear daunting to those not well-versed in its intricacies. To streamline the user experience, we’ve organized the page into logical blocks, introduced helpful tooltips for each section, and included a post-preview feature.
Let’s dive into the various elements of this page:
1) Variations for Textual Descriptions: Recognizing the need for dynamic and engaging content to prevent user fatigue and potential unsubscribes, we’ve implemented a solution that randomly selects templates from pre-defined text options.
2) Preview Block: To enhance user comprehension of how their changes affect the appearance of the post, we’ve introduced a “Preview” block that replicates the design of Facebook and Instagram posts.
Changes made to the active template in Block 1 automatically update the text in the preview.
For instance, if a user includes {{PRODUCT_LINK}} in their message, they’ll see the final link in the preview.
3) Campaign Details: This block allows users to personalize campaigns and add distinctive features. For example, users can assign unique names to their campaigns and select categories for posting.
4) Scheduling Block: Users can specify the day of the week and time for post-publication in this section.
5) Account Selection: In this block, users can choose the account where the post will be published.
6) Campaign Activation Checkbox: Users have the option to activate or deactivate campaigns. This feature is especially useful when users want to schedule campaigns in advance or pause ongoing ones.
7) Modal Window with Categories: We provide a modal window with all site categories that will participate in the campaign. These categories are the source of randomly selected products for posting.
8) Promotion Codes Block: Unfortunately, this block is not reflected in the mockups but was added later. Here, users can configure discount and promotion code generation, which can be inserted into the text and overlaid on the product image.
By structuring the campaign creation and editing page in this manner, we aim to simplify the process for users, providing clarity and control over their marketing efforts.
With logical organization, helpful tooltips, and a real-time preview, we empower users to craft engaging campaigns effortlessly.
Design development can be divided into 2 parts:
I did not develop the design of the administrative part, as I will be satisfied with the prototype that we developed earlier. Ecwid API has its own CSS framework, and all I need to do is create a grid and insert ready-made components into it. In addition to simple components, the Ecwid API also has complex components, similar to the following:
If you are developing your own product that does not have its own CSS framework, you can use the open-source Bootstrap framework. This framework is known by many and has a large base of components and its own grid.
Okay, let’s move on to the second part, which is the development of our own style. Yes, I have decided to develop it myself without outsourcing the services of a designer. I could have hired a designer, but I wanted to leave a part of myself in this, as it will be the first point of contact for my users with this application.
The first thing the platform for hosting the application requires is a logo. I had an idea of placing the Instagram logo in the center, around which likes, people, and money revolve in their own orbits.
The concept of the application is that Instagram is a whole world for businessmen, where millions of people want to learn about your product and use it as soon as possible. This is how the logo came about.
It was very helpful for me to have Ecwid’s system of rules and guidelines for creating my logo. I believe that rules and specific frameworks simplify the task by reducing the possible variations of element placement and color usage.
In any app marketplace, the top priority is screenshots showcasing the functionality of the application. However, having just functionality is no longer enough. When we enter the App Store, we can see how each app competes for the user’s attention.
I set a goal for myself to create informative screenshots that would highlight the benefits of my application in each module. To achieve this, I have decided to combine vibrant colors, concise module descriptions, and module screenshots.
I opened Photoshop, created a canvas with a basic size, and applied the Instagram gradient. Then, I added a screenshot of the Instagram account connection module and included a brief description of this functionality. Done. And, of course, soft shadows for screenshots.
Next, it was necessary to provide a product description that would clearly explain to the user what needs the application would fulfill for the merchant. Here, I strived to be honest and sincere with the users. This was before the advent of GPT technologies.
This was the first part of the article. In the second part, I will talk about how I developed the backend & frontend and reveal some information about the number of installations and the revenue it brings.
In this article, I wanted to share the story of creating a product from scratch, and how one person can come up with an idea and bring it to life. Nowadays, we have so many opportunities for implementation, and I wanted to take advantage of them and create a cool product that would save time for small business owners.
If you have a desire to bring your own product to life, but, for example, only have skills in backend development, try creating the design, and writing texts (if you are interested in that). In creating this project, my main goal was not only to make money but also to gain new skills in backend development and design development.
And when you reach the end, you will feel a great level of dopamine in your blood, realizing that you can do so much.