How I Redesigned my Entire B2B SaaS App in 30 days

Instagram is currently one of the most popular platforms and has seen an explosion of business accounts, ad money spent and even purchases made directly in the app in the last year. Businesses of all sizes are flocking to the platform to get in on a piece of the action. The popularity of Instagram is what makes it a great marketing tool but it is what also makes it difficult to stand out and reach potential customers. Hashtags are a social media concept that is heavily used on Instagram to help classify posts and allow users to get their content in front of more people than just their followers.

Unfortunately employing an effective hashtag strategy on Instagram is hard work and really time consuming. Few businesses have the knowledge and resources and even fewer actually get it right.

Curate helps businesses get their hashtag boost by removing the complexity and saving them hours of time per week. Integrated directly with Instagram, Curate knows about all the hashtags each account has ever used and how they affected each post. As soon as a user signs up, all of their hashtags are available at their fingertips to help them select the perfect ones for maximum exposure. Create hashtag lists, use visualizations, track banned hashtags, get suggestions and even schedule your hashtags to be posted automatically for you.

As the app continued to evolve it hit an inflection point where I knew that building features on top of the current design wasn't going to pay off. There were a growing number of user experience issues that were more than just a simple style change. The navigation of the app and even how the data is presented was starting to make less sense in the original design. It was also already becoming cumbersome to build on top of it and the app could also use some lipstick to get it away from its standard Material look.

Since Curate is starting to gain traction and has paying customers, it was time to provide them with a better solution to their problems. Being the sole founder, I'm responsible for not only the development of the website, app, chrome extension and scraping tools but also handling the business side including marketing. I didn't really have extra time for much of anything and definitely not for rebuilding the entire web app. Regardless, I knew my reasoning was valid so I gave myself just one month to pull it off.

I worked. 🎉

I went from my first commit to the production deployment in exactly 30 days, completely revamping the user experience of Curate.

Here are a few tips I learned along the way if you find yourself undertaking a similar challenge.

Set your scope and prepare to change it

Before I even got started with any development, I set out to define what could actually be redesigned that would seem reasonable to accomplish in my time frame. I buffered my 30 days with a week or so knowing there would be things that come up that I didn't consider or I simply wouldn't have as much time to work on it as I would like.

It's important to have something that you can realistically accomplish. Not a goal that is even a bit lofty, set one that you know you can hit. No one was ever upset that they completely redesigned their SaaS app in only 20 days. On the contrary, increasing the scope and going past your set timeline is defeating and leaves you susceptible to not getting to an actual release.

For Curate, this meant deciding to include things like the menu, layout and about 10 main pages. Things like ancillary pages and settings/billing pages would receive minimal updates as part of the 30 day overhaul. I understood what changes could be accomplished by pure front end updates, what needed backend work and others that had their own intricacies.

I also banked on my UI development velocity snowballing towards the end because I'm using React and it naturally promotes building reusable components. Ideally the final page or two was going to be just wiring together existing components that I had built along the way.

The month was more or less a sprint towards my set scope but with an understanding that as my 30 day timer ticked down that I must deliver a complete product at the end. The goal was to go from code start to production release in 30 days so it was important not to have something half finished at the end.

I already knew which pieces could be left out of the overhaul if they had to be and naturally worked on those towards the end. Along the way it's okay to leave some of your work in progress but as the end nears focus on completing what you have started instead of committing to new changes. This should leave you with the last few days to focus on polish and making the release.

Break your plan into chunks and always know what's next

Now that you have what you want to accomplish locked in, start to break it down. Think about what you want the changes to look like and get to making some mockups. Consider what the page looks like but also take note on how it acts and behaves with user interaction. Since I was thinking about the redesign holistically, I was able to give my future self some tips on the UI/UX when I got to making it.

After I had some form of what the redesign looked like I thought thru how I would actually build it. What would I code first? What would I test for after I completed a new page? Which parts were the hardest? Write all of these answers down and use it as your guide during development. Using a text list, Kanban board like Trello, notebook or even a Spreadsheet works for tracking each chuck of redesign.

I'm a fan of low fidelity mockups and opted to go old school with pencil and paper on this one. I took each one of my 10 pages, including the menu, and drew out exactly how I thought it should be. I'm not a designer by trade so it's important for me to have inspiration when creating my mockups. I believe in finding design insight in tools that we enjoy using and understanding how they solve similar problems that I face.

Having inspiration from other SaaS apps can also help keep a strong cohesion since you can see how your reference sites deal with all the same design elements your app has. Curate takes a lot of its inspiration from various SEO keyword tools. There are striking similarities in how people search for keywords that have the right volume and competition for SEO and how they discover niche hashtags on Instagram.

A month for a single person to rebuild the entire UI of a production SaaS app in their spare time is no small feat. It was critical that I never had to think about what was up next. Every moment I had was devoted to the actual development of the scope and design I had created. The fact that I didn't really have to do much planning, only pivoting towards the end, is what made this entire journey possible.

If you spend part of your time doing design and thinking through parts of the UI along the way of development then the 30 day goal quickly starts to become unrealistic. Before I dive into a heads down coding session, I make sure I had enough work for 3 heads down coding sessions ready to plow thru just in case. Trust your instincts and focus on the plan you laid out.

Keep a running list of bugs and log future upgrades

It's software, you are moving fast, there will be bugs. As you are developing there will be things you didn't think about during the design phase that might present a challenge that you can't solve on the fly. It's important not to let these slow you down during the development while at the same time not letting them build up over the entire 30 days.

Write them down to tackle during polish before you deploy or as fast follows after it goes live. I would write down bugs that I saw or introduced as I was developing then I would double back after I completely finished that page, component or section. Often I would find myself writing a bug down in my list then charging forward with completing the functionality only to find that I naturally fixed it by just pressing on.

Another important thing to keep in the back of your mind is that your app will not be perfect at the end so don't try to make it that way. If there is a bug that isn't affecting functionality, like a UI inconsistency, don't stress about making sure they are all taken care of before the end of the design overhaul. Write them down to tackle during polish before you deploy or as fast follows after it goes live. This is another strategy that helps with having a deliverable app by the end of the 30 days.

During development you will come up with a ton of new ideas and concepts to mull over that you never previously thought up. This is welcome and you don't want to lose those new thoughts. Since you're trying to be heads down and work through your plan just spend a little time thinking about your new concept, write it down and press forward. Some of the best feature ideas in the backlog for Curate came during the actual development process. It's important that you don't let these ideas distract you, because they will. Ideas will seem so great that you will ask yourself "how can I not add this feature?!" but just have control. Ideas get better with time and reflecting on it later helps level you out and ultimately create the best solution.

Move on if you get stuck and keep moving towards the finish line

If you haven't noticed, there is a common theme in a lot of what we talked about so far. Staying focused. To hit the goal, I couldn't afford to get stuck on a bug or a technical challenge for a long period of time. If I found myself working on the same problem for more than an hour I write down the issue, stash my code changes and move onto something different. I use the Pomodoro Technique when developing so it's easy for me to understand how long I spend on a particular task. I make sure not to pick that item back up until the next day when my brain is able to reset. This helps with approaching the problem in a new light and saves wasted time iterating and not making progress.

Don't let these road blocks that come up frustrate you. There is a level of satisfaction in having a tough problem, writing it down then later solving it. I even intentionally switching from typing to writing down my issues with a pencil. The transition seems to help keep me more fresh during a long coding session. It's also rewarding to physically cross out each item that I knock out as I do it.

In the end, it was okay to have some things that didn't work yet. I just made sure they didn't appear and were turned off instead of left around broken. Remember if you spend 3 days working on a single problem then that is 10% of your total time. Challenges will come up but think about ways to solve them that are acceptable for having a finished project.

I gained a variety of experience with planning, design, development and execution during this month long journey. I kept myself motivated during the month like getting my wife involved and tracking how many pages I had left todo together. I carried around an old school clipboard with my designs which always kept it on my mind.

Staying excited and motivated is what helped me develop until I fall asleep only to wake up early so I could get back after it. It was an overwhelming and a fun experience all at the same time. Not only did I accomplish something amazing for Curate but I feel a sense of personal accomplishment. Hopefully this inspires others to undertake similar ventures and sheds some light on an approach that worked for me.

✌️