從零到 SaaS — 在 10 天內構建和啟動 SaaS！ 🚀
source : https://fernandopessagno.medium.com/from-zero-to-saas-building-and-launching-a-saas-in-10-days-66e262615d66 by Fernando Pessagno
我最近決定接受個人#buildinpublic 挑戰，我打算在短短 10 天內構建並發布 SaaS 產品。 自從我從頭開始構建產品以來已經有一段時間了，今年我想推動自己創造一些新東西。
首先，讓我解釋一下為什麼我要接受這個挑戰。 我的目標是讓自己負責。 我傾向於繼續構建更多功能並說“如果我添加這個會怎麼樣？” 或“如果我添加那個怎麼辦？” 但是這一次，我想抵制這種衝動，並專注於通過設置這個時間限制來保持它簡單而實用。
我將向您展示構建 SaaS 產品的整個過程：
- 構思
- 開發，和
- 發布
但我不會提供任何建議或假裝知道我在做什麼，因為這是我的第一個基於訂閱的產品。 相反，我將簡單地對開發過程和最終結果保持透明，以便您可以從我的成功和失敗中學習。
💡創意
那麼，新項目的內容是什麼？ 我決定為 Instagram 和 LinkedIn 創建最易於使用的輪播工具。
我有了這個項目的想法，因為我注意到輪播帖子在 LinkedIn 上非常受歡迎。 我致力於創建輪播，相信我，設計它們可能非常耗時。 所以，我想，為什麼不創建一些東西，讓非設計師更容易創建他們自己的具有視覺吸引力的旋轉木馬呢？
不過，我不想用太多的設計選項讓用戶不知所措。 畢竟，社交媒體上帖子的生命週期如此之短，並不總是值得花很多時間來完善它們。 我的目標是為用戶提供足夠的選擇，以創建能夠反映他們個人或公司品牌的引人注目的設計，而不會使事情變得太複雜。
當我在初創公司擔任設計師時，我經常發現自己要兼顧多項職責。 我不僅從事營銷設計工作，還必須處理產品設計和其他事情 — — 這就是初創公司的生活！ 面對如此多的事務，當我不得不花時間在多次文案迭代後進行設計更改時，這尤其令人沮喪。 我經常希望負責副本的人可以自己進行這些更改，而不需要讓我作為設計師參與進來。
這就是為什麼我認為我的 carousel maker 工具可能不僅對管理個人品牌的普通人、獨立創始人和獨立黑客有用，而且對時間和資源有限的小公司或初創公司也很有用致力於設計。 這一切都是為了讓每個人的設計過程更簡單、更容易獲得，無論他們的技術能力如何。
雖然我不確定我的方法是否會吸引用戶，但事實是設計模板市場上已經有大玩家了。 我需要讓自己與眾不同以脫穎而出，但又不能太過分以致於無法吸引廣大觀眾。
所以，我正在進行這個為期 10 天的實驗，看看這個想法是否站得住腳。 會有一些粗糙的邊緣，但這一切都是為了測試我是否應該繼續前進。 如果該產品在第一個月內沒有產生任何收入，那麼我就會知道是時候嘗試其他東西了。
🤔問題
首先，模板可能很棘手。 乍一看，它們可能看起來很棒，字體大小合適，調色板和諧，圖像精選，但用戶在自定義它們時可能會遇到困難。
當他們添加文本、更改字體大小並四處移動時，最終設計可能不是他們所希望的。 這並不奇怪，真的。 如果您不是設計師，您怎麼知道要使用哪些字體大小、顏色、邊距或填充？ 太多的自由會導致混亂的結果。
此外，這些模板中的許多都是獨特而華麗的，很難適應特定的品牌，導致視覺上的不一致和品牌形象的混亂。 另一個問題是，如果一個超級獨特、引人注目的模板太受歡迎，用戶到處都能看到它，它就會尖叫“模板！” 這通常不會順利進行。
🤔解決方案 我想做的是提供一個簡單的設計解決方案，讓用戶可以添加他們的品牌字體、顏色和徽標，而無需任何額外的附加功能。 一個簡單的設計是通用的，它不屬於任何人，但您可以通過添加您品牌的顏色和字體來賦予它獨特的觸感，從而使它成為您自己的設計 — — 它從根本上消除了看起來您和每個人都使用相同模板的風險 別的。
⚠️ 潛在的陷阱 但有一個問題：非設計師可能會對自己的形象感到不確定，並認為簡單的設計不夠好。
他們最終可能會因為該工具過於基礎而放棄該工具並選擇其他工具，試圖通過添加華麗的圖形和效果來彌補他們設計技能的不足，並相信越多越好。 你知道，經典的“把標誌做得更大”的情況 — — 如果你曾經在設計機構與客戶合作過，你就會完全明白我在說什麼！
現在我已經討論了這些問題、解決方案和潛在的陷阱，是時候深入了解開發過程並了解我如何正面應對這些挑戰了。
📅 第一天 第一天，我建立並運行了基本結構。 旋轉木馬是功能性的，我特意將設置放在每張幻燈片下面，這樣用戶就不必直接與設計元素進行交互。 他們不能移動或選擇任何東西，這與其他設計工具截然不同。
我不完全確定這種方法的結果如何，這有點像賭博。 這特別針對可能不習慣與設計畫布交互的用戶。 相反，設置以易於填寫和調整的形式呈現。
在“簡介”幻燈片中，我添加了副標題、標題、說明、向右滑動圖標和表情符號。 這是我正在嘗試的另一件事……添加表情符號可能是用戶傳達輪播主題的絕佳方式，而無需費力尋找與設計互補的圖像。
但真正令人興奮的是，當您更改文本時，字體大小會自動調整。 您可以根據需要添加任意數量的文本，並且它始終會自動適應。
想像一下，這可以節省多少時間和精力！ 每次您編輯文本時，都不再手動調整字體大小或重新定位元素。 這可能是一個真正的遊戲規則改變者，允許用戶專注於創建引人入勝的內容，而不是陷入設計細節中。
我還提供了一組文本編輯選項，使您可以添加顏色或斜體化標題。 這是非常基本的，但是現在應該完成這項工作。
至於常規的幻燈片，我確保在整個輪播中保持字體尺寸一致，因為不斷更改它確實會弄亂設計並使其看起來不專業。 將來，我想通過添加一般尺寸的選擇器來為用戶提供更多的控制和靈活性。
最後，要結束第1天，我添加了一個下載按鈕，該按鈕生成了一個PDF文件，該文件包含每個旋轉木馬幻燈片在單獨的頁面上，這是當前LinkedIn所需的格式，以在上載作為文檔時創建旋轉木馬帖子。
這可能不是世界上最漂亮的事情，但我可以正式說旋轉木馬製造商的作品！
對於Instagram，我需要導出一系列圖像，這將必須等待。
📅天＃02
這是第二天的第二天，我已經無法抗拒增強UI，以使其在視覺上更具吸引力。 通常，我不會優先考慮MVP的外觀，但是由於這是一種設計工具，所以我認為它至少應該有些體面。
還有什麼是新的？ 在花費了淫穢量的🕒之後，Emoji選擇器現在可以選擇完整列表，我在幻燈片中添加了一個社交媒體徽章，用戶將能夠以後作為個人品牌的一部分進行自定義。
另外，我實現了允許用戶刪除，重新排序或添加新幻燈片的按鈕。 這是一些獎勵：幻燈片計數器會自動計數自動，因此用戶不必擔心跟踪它。
我還添加了為每個幻燈片打開和關閉元素的功能，從而對旋轉木馬含量提供了更多控制。 當我以為自己已經完成了一天時，我不得不回去修改自動尺寸的腳本，以供介紹和移動幻燈片。 現在，它考慮了哪些元素可見或隱藏，並相應地調整字體大小以使文本（幾乎）完美地擬合文本。
因此，我為期10天的#buildinpublic挑戰的第二天結束了。 到目前為止，我的進步感覺很好！
📅天＃03
在第3天，我專注於實施一個側欄，該側欄允許用戶管理旋轉木馬的整體設置。 這是我要選擇的主要設計 — 用於一般設置的左側欄，同時仍使用戶可以自定義輪播中的每張幻燈片。
側菜單中的第一個選項是旋轉木馬類型。 如果選擇LinkedIn，則將下載PDF，這是在平台上創建輪播所需的格式。 如果選擇Instagram，則將下載一系列JPG。
另一個方便的功能是能夠確定用戶是否需要介紹和/或Outro幻燈片。 有時，他們可能只想直接採取行動而無需任何介紹。
對於調色板，我想讓用戶從精緻的預選顏色集合中進行選擇。 目前，只有四個，但是我計劃添加更多，當然，將來允許用戶在將來創建自定義調色板。
在介紹和Outro幻燈片上的文本的自動化功能非常酷，但是就像我之前說的那樣，常規幻燈片看起來更好，並且使用一致的字體尺寸更易於閱讀。 因此，我介紹了文本大小的小，中和大的選擇，只是為了確保對其整體尺寸以及對齊方式選擇仍然有一定的控制。
當涉及字體時，我將應用與顏色相同的原理 — 我提供了精心挑選的字體配對，以消除有關看起來不錯的任何猜測。
我計劃在以後的更新中添加更多字體選項。 但是，我知道這種方法可能對每個人都不起作用，尤其是對於在Google字體庫以外使用字體的品牌。
如果您喜歡更清潔的外觀，我還可以禁用滑梯櫃檯。
對於品牌，“個人”模式具有針對內容創建者，思想領導者或常規LinkedIn和Instagram用戶的爆頭，名稱或社交媒體處理的選項。 對於公司，有一個“公司模式”顯示您的徽標和網站。
到目前為止，我真的很高興取得的進展，終於開始看起來像是真正的產品，但是今天仍然有一些拋光和錯誤修復。
📅天＃04
我花了大部分時間在第四天工作，從事保存/加載功能。 基本上，用戶將能夠一次設計旋轉木馬，將所有一般設置保存為模板，並在將來加載以節省寶貴的時間。
目前，實現非常簡單 — 它只是在本地保存一個JSON文件。 但是，就像這個MVP階段的大多數功能一樣，它可以完成工作！
我還為Instagram故事添加了一種新的旋轉木馬類型選項。 我不確定這是否會是一個流行的選擇，但是現在用戶可以選擇Instagram故事並下載具有正確大小的系列圖像可以直接上傳的故事。 該選項上隱藏了品牌，因為Instagram在查看故事時已經顯示了帶有個人資料圖片和名稱的覆蓋層。
當天最重要的更新是“背景設計選項”功能。此功能的目的是添加一個微妙的背景設計元素，即使您滾動瀏覽它，也可以使輪播顯得無縫。
我認為無縫的效果使這些輪播真正酷，旋轉木馬變成了一個完整的圖像，它可以順利滾動而沒有任何視覺斷裂。
但這是一種平衡的行為，因為我想提供漂亮的設計選項，同時又補充了任何品牌風格而不會出現在不合適的情況下。
今天，我只有時間研究四個選擇。 這不是一件容易的事，因為我僅限於使用我可以操縱CSS顏色的HTML元素。 但是我相信我可以提出更多的設計選擇。
這就是挑戰第4天的全部，僅剩6天即可！
📅天＃05
在第5天，事情比平時少一些。 我花了大部分時間來拋光現有功能。
首先，我添加了更多調色板，包括創建自己的自定義調色板的選項。 而且，類似於顏色功能，我使用戶更容易自定義其字體配對。 他們可以選擇自定義字體配對的複選框，或者在他們喜歡的情況下選擇僅使用一張字體。
我還添加了更多微妙的設計背景效果，以補充任何品牌樣式，而不會看起來脫節或不合適。
另一個更新是“隨機化”按鈕。 每次頁面加載時，輪播已經從隨機選項開始，但是“隨機化”按鈕可以幫助用戶選擇隨機選項，直到找到自己喜歡的組合為止。 這是一個很小的補充，但這真的很方便！
最後，我添加了“幻燈片類型”選項：文本、文本+圖像或僅圖像。 我的目標受眾（非設計師）可能更喜歡將所有內容都保留為文本，但我仍然想為那些想要將圖像添加到他們的輪播中的人提供選項。
第 5 天就差不多了，此時，該工具已經可以正常使用了，我幾乎可以按原樣啟動它。 然而，有一些非常令人興奮的事情是我今天開始做的，但我想在揭開它之前完成它。
📅 第 6 天
#buildinpublic 個人挑戰和輪播製作器的第 6 天即將完成！ 我感到非常自豪，但接下來是真正的櫻桃。
我從構建其他產品 resumemaker.online 的經驗中學到了很多東西。 它是設計簡歷的工具，我花了一段時間才意識到提供內容方面的幫助與設計方面的幫助同樣重要，甚至更重要。
因此，我想通過向輪播製作器添加 AI 內容生成器來查看這是否也適用於此。 是的，我正在跳上 AI 炒作列車！
它是這樣工作的：你設置幻燈片的數量，選擇你的主題，然後讓 AI 為你的輪播寫出引人入勝的內容。 然後用戶可以根據需要對其進行編輯和個性化設置，它甚至可以選擇正確的表情符號！
我認為此功能可以使該產品有別於其他輪播製造商。 它不僅有助於設計，還有助於內容創建。 我很高興看到結果如何以及用戶對此有何反應。
📅 第 7 天
第 7 天就在這裡，仍然缺少一個重要的方面 — — 如何將其貨幣化。 這是我的第一個基於訂閱的產品，我對應該怎麼做有點無能為力，但這就是我的想法。
大多數功能將保持免費，但您可能已經註意到，我在幻燈片上添加了水印。 用戶可以免費下載沒有水印的輪播，但他們需要在社交媒體上分享鏈接才能這樣做。 我還添加了一條消息，鼓勵用戶支持像我這樣的獨立創始人，並在社交媒體上宣傳。 希望它能幫助更多人使用該工具！
但是我計劃在“Time Saver Pro Plan”下出售的付費專區後面還有一些功能。 我不是真的在賣設計； 我賣的是便利，一種做事更快的方法。 我在賣時間。 對於價格，我的起價為 9.95 美元/月，然後再看情況如何。
該計劃包括：
- 無水印
- 無限下載
- 最多包含 10 張幻燈片的輪播
- 能夠加載您自己的自定義預設
- 用於內容生成的 AI 功能
所以你有它 — 如果用戶共享它，他們仍然可以免費使用沒有水印的輪播製造商，但他們將無法訪問 AI 內容生成器或加載自定義預設的能力。 在他們達到一定的免費下載限制後，他們將需要從頭開始，而且他們只能創建最多六張幻燈片的輪播。
總的來說，我認為免費選項真的很慷慨。 為了展示 AI 內容生成器的價值，用戶可以使用一些預先生成的結果來測試 AI 功能，這些結果可用於各種主題，例如創業、瑜伽和 UX 設計。
最後，我要感謝 Outseta，因為它讓付款流程的設置變得輕而易舉。
📅 第 8 天
第 8 天進展順利，除了創建一個簡單的徽標和登錄頁面之外，沒有太多事情要做。
對於徽標，我不想在上面花太多時間，所以我從幾個選項開始，但最終看起來與 Instagram 上的輪播圖標太相似了。 它本可以奏效，但我的設計師自尊心不能讓它滑落，所以我不得不放棄它們。
然後，我嘗試用不同的方法將旋轉木馬的形狀提煉成最簡單的形式。 我嘗試添加“A.I.” 縮寫，也是通常與魔法或人工智能相關聯的圖標。
我更喜歡這些版本，並開始覺得我在它們上浪費了太多時間。 就在我要敲定一個設計的時候，我把它導出了錯誤的方式，結果發現這個標誌沒有邊框看起來好多了。 它看起來更優雅，但仍傳達相同的含義。
所以，我最終對結果非常滿意 — — 主要是偶然，而不是技巧。 它仍然很重要，對吧？
至於名稱透露，我一直保密，因為我不想破壞 AI 功能的驚喜……但現在，事不宜遲，產品名稱是 aiCarousels！
著陸頁也已完成。
保持簡單是我的目標，但為了讓它在視覺上更有趣，我添加了一個小的 javascript 腳本，它可以在用戶滾動時從左向右移動輪播示例。 我什至在功能部分使用表情符號而不是設計圖標，忠於旋轉木馬製造商背後的簡單理念。
現在一切都已準備就緒，是時候為發布做準備了。 在大門向公眾開放之前，還有一些事情需要嘗試，但我迫不及待地想與大家分享旋轉木馬製造商。
如果您想自己查看著陸頁，請前往 www.aicarousels.com
📅 第 9 天
現在是第 9 天，終於可以發布了！ 我之前提到過，我想涵蓋從構思階段到開發過程，現在我們正進入啟動階段。
在這篇文章中，我將分享我準備的東西，在下一篇文章中，我計劃分享發布結果，看看人們是否真的喜歡這個產品！
老實說，這很可能會失敗！ 模板市場的競爭非常激烈，但這就是不在單個項目上投入太多時間的好處……
想像一下，在某件事情上工作了六個月甚至一整年，結果人們告訴你，“嘿，你的產品是垃圾。” 這會有點痛，而且當你投入了這麼多時間和精力時，很難不把它當成個人的 — — 它開始感覺像是你自己的一部分。
但如果你只在一個項目上工作幾週（10 天可能有點短），你可以試水看看是否值得投入更多時間。 即使它沒有成功，你仍然會感覺很好，因為你已經獲得了一些寶貴的經驗教訓，可以應用到你的下一個項目中。
至於 Product Hunt 上的發布（對於那些不知道的人，它是發現新技術產品的首選網站），我設置了一個“即將推出”頁面。 它目前有 23 位註冊用戶，他們會在我們上線時收到通知，以便他們投票。
我還花時間設置了產品頁面，該頁面在太平洋時間上午 12 點上線。 我寫了詳細的描述，準備了第一條評論，這對引發討論非常重要，甚至還為 Product Hunt 用戶增加了 50% 的折扣。
到了做圖的時候，感覺有點傻。 我在嘗試為頁面設計漂亮的圖像時遇到了困難。 然後，我想到了 — — 我可以使用產品本身來製作它們！ 畢竟，還有什麼更好的方式來展示產品呢？ 因此，我最終製作了 3 種不同風格的 9 張圖片，每張圖片都提供了對產品功能的一瞥。
現在，只需等待頁面上線即可。 您可以通過訪問此鏈接來表達您的支持：https://www.producthunt.com/posts/aicarousels-com。 你的支持對我來說意義重大！
不管結果如何，一段時間後從頭開始構建一些東西真是太棒了。 這也極大地分散了我個人生活中發生的一些不愉快的事情。 那麼，讓我們看看發布的進展情況，明天我會告訴你結果！
📅 第 10 天 — 任務完成！
在 10 天內構建和啟動 SaaS 這一快速而激烈的挑戰的最後一天。 aiCarousels.com 現已上線，我想分享 Product Hunt 發布的結果和一些結束的想法。
老實說，在沒有適當測試的情況下推出產品有點像在黑暗中飛躍。 我給一些朋友看了，但你知道朋友是怎樣的 — — 他們總是想讓你感覺良好。 所以，即使他們說他們喜歡它，我也對他們的反饋持保留態度。 我真的不確定人們是否會喜歡它。 儘管有我的顧慮，發布還是出奇的順利！
aiCarousels 獲得第 9 名，獲得 154 票贊成票、64 條評論和 7 條 5/5 好評。
這與我的投票無關。 Product Hunt 已經變成了這場人氣競賽。 因此，如果你是一位擁有大量追隨者的創始人，那麼你登上頂峰的機會就會高得多。
我更關注評論，因為積極的反饋是壓倒性的，我想分享一些我最喜歡的評論，在那一刻，我開始驗證產品：
“好的！ 我打算讓我的內容創作者試試這個，看看我們是否可以擺脫 Canva 並節省一些時間和金錢！ 它看起來很光滑，但似乎創建過程也非常簡單明了！”
“我剛剛付錢給 Fiverr 上的內容創作者，讓我製作了一堆輪播，並且 ngl 你的產品為我製作的東西要好得多。 哦，我希望我在幾週前找到這個”
“作為一些 Instagram 帳戶的社交媒體經理，這個工具對我來說是純金，我喜歡它！ 恭喜上線！ ❤”
“美麗的！ 我一直在尋找這樣的工具，儘管我可以使用 Figma。 您的工具有助於加快速度，這非常有益。”
我從評論中得到的總體印像是，他們似乎都知道，投入更多精力來創建視覺上令人驚嘆的輪播並不能提供太多額外價值。 他們看到了獲得足夠好的東西并快速獲得它的價值。
但錦上添花的是，有5個付費用戶註冊了！ 這就是最終的證據。 人們可以說他們喜歡你的東西，但當他們真正付錢時，你就知道他們是認真的了！
我對結果非常滿意，非常感謝所有支持發布的人！
那麼現在，下一步是什麼？ 問得好……我不想說得太快，所以我還沒想那麼遠。 有很多事情我需要完善，但我為了 MVP 而推遲了，但至於大局，我還不太確定。 也許我可以簡單地把它發展到一個不錯的 MRR，把它列出來，然後試著賣掉它！
現在，我想我會冷靜一點。 這個為期 10 天的挑戰真的很有趣，但也有點緊張！
我只是希望你喜歡看一下構建 SaaS 背後的設計過程，就像我喜歡製作它一樣，儘管我知道你們中的一些人希望就編碼進行更多討論。 也許下一次，我會確保包含更多內容。
話雖如此，本系列到此結束！ 但是，我會繼續在 Twitter 上提供定期更新🐦
再次感謝您的支持，我們那邊見！
