8
2 Comments

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.

curate comparison

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.

curate comparison 2

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.

curate comparison 3

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.


Check out my blog for the last few lessons learned during the journey.

✌️

on December 7, 2019
  1. 2

    Interesting service! Hope it does well :)

  2. 1

    Wow...interesting and good on you for seeing the added benefits and shifting. Would love to connect with you on this.