I am the founder and CEO of a VC-backed SaaS company Glorify.com. We've spent over $100,000 in total on just UI/UX design, and subsequently this process has impacted every other expense in our company which on average has been $50K per month between management, development, marketing and customer success over a 3 year period.

Building anything impactful is no doubt challenging, but I can say for sure that building a design tool is probably one of the most challenging due to the complexities of the user experience.

We've had many UI/UX wins with features shipped that our users adore. But probably an equal amount of losses where we spent too much time and energy on things our users just didn't care about. I wrote a detailed article about our failures right here.

After fixing our UI/UX design process using properly executed design systems and high fidelity prototypes, our company is finally moving in the right direction with product building momentum we've never seen before. But had we known what we know now 3 years ago, I honestly believe we would be doing at least $1m ARR by now. Instead we grew to $12K MRR by 2021 and overtime dropped to $5K MRR, which is where we are now (you can check my Stripe-verified product here)

Don't be me 3 years ago...

UI/UX bottlenecks is the elephant in the room 🐘

The fact is that for all SaaS, software and other digital experience companies, UI/UX is the biggest bottleneck of overall progress towards success, and yet strangely people don't highlight this enough.

The problem is that most companies go straight into product design with either an in-house designer or an agency without fully knowing what an actual scalable design system looks like nor it's life changing benefits. In fact most UI/UX designers themselves don't fully utilize Figma's best practices to make sure things are scalable from the beginning even though they can definitely deliver a beautifully designed interface.

Almost any designer can design something beautiful. But without building it from a custom scalable design system rigged to a 100% tactile high fidelity prototype, I guarantee you will waste not hours or weeks but months and possibly years (in our case 1.5 years), on design iteration and dev team handoff.

The Destructive Domino Effect of a Poor UI/UX Process 💀💀💀

Now let's put this into perspective by demonstrating the destructive domino effect that a poor UI/UX design process has on your business.

1. Designers go straight to knocking out low/mid fidelity screens on Figma with poor systemization during the process. The design itself may seem beautiful and there could be some basic saved reusable styles/components. But things are not centralized in a strong base.

2. Time goes by as you hit various UI/UX milestones. But with a weak base you can't change or iterate anything without spending days and weeks pushing pixels with your designer.

3. You realize you can't change basic things such as spacings, button designs, and other aesthetic choices at scale.

4. There is zero clarity on where and why specific colors and fonts should be used.

5. Your front-end developers will then have to redesign/convert your Figma screens into front-end html, CSS or any other code framework, this sometimes takes the same amount of time to deliver as the original Figma designs! 😖

6. By the end of the design process you have a bunch of static screens giving you a high level picture of the user experience but nothing is granular, so you have to explain every click to your dev team via huge documentation that takes weeks to create. 😭

7. With no clarity on the design side, there is no clarity on the dev side. Your developers, who are usually the most expensive team, end up spending weeks building things the wrong way or missing things out. 🥴

8. After endless calls with the dev team to clarify your long form documentations, the dev team rushes to fix things.

9. Your running out of time and money, so you decide to launch hoping it's an acceptable MVP, yet you already know how buggy and broken the experience is.

10. Great news, the users start coming in, perhaps you see a little revenue, but it's not sustainable yet. You get some positive and negative feedback from users, and they start requesting more features on the roadmap. Great you know what to build! But the thought of going through all of that hassle again feels like a nightmare.

11. You finally start to question the purpose of your existence 😵‍💫.

I know too many companies that have knocked down all or at least some of the pieces in the domino effect described above. If you have been here then it's not all doom and gloom. After I discovered a better way, our SaaS company started to change for the better. Companies often speak about becoming Product-Led, Marketing-Led or even Customer-Led, but hardly anyone speaks about the importance of becoming UIUX-Led. I don't even think it's a thing, so I am hoping to start this movement (if it doesn't exist already).

In a nutshell executing a proper UI/UX process, with a standard set by some of the greatest companies (such as Google, Spotify, Intercom etc...) requires you to have a deeper understanding of design systems and high fidelity prototypes executed using Figma's best practices.

This results in shipping your product a 100x faster and easier... Literally. 🚀

And no, you don't have to become an expert UI/UX designer. Just understanding the process is more than enough.

The Productive Domino Effect of a Great UI/UX Process 👷🏽‍♀️👷🏽‍♀️👷🏽‍♀️

Now let's put this into perspective by demonstrating the opposite productive domino effect that a great UI/UX design process has on your business.

1. You work with your UI/UX designer or agency that actually fully understands Figma's best practices for design systems and high fidelity prototypes.

2. After understanding your brand, users and overall vision, they start by exploring the style with 2 to 3 variations of concept screens and a basic prototype so your team can get a realistic simulation of how the experience will look and feel like. 🧐

3. Once you agree on the style direction, your designer will start creating a custom foundational design system with a clear guide on where and why particular styles/components are used. This includes your color system (primary/s, secondary/s, neutrals and semantics), typography hierarchy, iconography, spacings and accessibility tests (to make sure all people with different screens or eye conditions like color blindness can have the best experience.

4. Everything is tokenized from the beginning so that you can identify any design style or property on both your Figma file and front-end code. This results in design to code consistency with military precision. 🪖

5. Your designer will then start to flesh out basic interactive and static components such as buttons, menus, input fields, dropdowns etc... into an ever growing components library in Figma. Figma changed the game when they released interactive components last year. Making components interactive when possible will save you an insane amount of time from prototyping repeated interactions such as opening dropdown menus or hover animations on buttons. 🖱

6. Your designer will then go into high fidelity design tackling 1 screen at a time for specific flows while gathering relevant feedback from you and your team when necessary. As you build up your experience there will be opportunities to save parts of the design as new reusable components (making them interactive where possible) so that you can be more efficient. Once you agree on a final design your designer can publish it to your components library in Figma.

7. Once static screens of a specific flow are clear, your designer will prototype these screens together so that you can get an immersive tactile feel rather than just see static screens and imagine how it would work. 🤩

8. You can send prototypes to sample users, run tests and gather feedback to iterate. Best part is that iteration happens fast and at scale vs pushing pixels for days. 😁

9. Once you sign off a complete UI/UX flow, you can seamlessly transfer the prototype to the dev team without spending crazy hours and days on long form documentation. Every step in the experience is actually realistically simulated in the prototype giving your developers 1000% clarity without requiring hours of Q&A calls or video explanations. 🤓

10. You get your product off the ground faster with less bugs and ready for launch! Your team are excited and rally towards your vision. Customer success teams spread joy as they help each customer achieve better results. Marketing teams are fulfilled seeing their hard work payoff with delighted users. Users are grateful to see your product polished. And the dev team are motivated to gather feedback and take on the next challenge. 🥹

11. MRR grows slowly yet sustainably, you can now forecast success and raise that $3m seed round at a super valuation. 🦄

Ahhh, doesn't that story sound amazing. ❤️

My business finally started to change for the better only after I educated myself on best practices for scalable design systems. I am not an expert, but I know what the process looks like and what to expect when working with any UI/UX designer.

I wrote a detailed UI/UX case study on both our destructive and productive domino effects that we went through at Glorify. Feel free to check it out here.

Conclusion 🎯

Your UI/UX process, NOT final design output, is the obvious bottleneck that people just don't talk about enough. Dev teams are always waiting on final designs, and even when they get them nothing is clear, nothing is connected or accounted for. Nothing is tested in the design phase, gimmicky experiences are shipped, so things will definitely change after code is written and users actually experience it.

It's really sad, and I've experienced all of this way too many times.
I learned the hard way...

It's easy for non-product people to say, "hey can you just build that onboarding" Or "just change that menu style to this approach", and technically you should be able to iterate that fast. But if you don't have an efficient pipeline for shipping those types of requests where a strong UI/UX process is the first step, then I guarantee one thing; YOU will create a Frankenstein product, patched with hot fixes and inconsistencies. 🧟‍♂️

This is my sincere advice to all SaaS founders, product managers, creative directors, CTO's or anyone making big decisions for product in your company. Especially if you are a startup. Learn what a truly strong UI/UX process looks like. You don't have to be a UI/UX designer or expert, but at least have a basic understanding of the framework and what to expect from your designer.

There are many resources online that teaches this, the best and most obvious one being Figma's youtube channel. Although this can get a bit deep and technical - more geared towards pro designers.

I've also started a new Discord channel called Led By UX for product teams (especially non-UI/UX designers), where my team and other UX led companies such as Framer, Specsavers and others, share our learnings in an open and transparent community.

Check it out right here, and hopefully see you there!

Gone are the days of averagely designed MVPs. You could get away with those before 2019/18. MVP today means a smaller focussed set of features that gives value to end users, but packaged in an absolute pristine and beautiful experience.

This is my second post in Indie Hackers, and I already love this community, excited to share more of my journey, so if you did find any value in this post do give me a follow! 🙏🏾

Cheers!

‍