Design Archives - Female Tech Entrepreneur https://femaletechentrepreneur.com/tag/design/ Lessons learned from starting a tech company Wed, 29 May 2024 14:39:13 +0000 en-US hourly 1 https://femaletechentrepreneur.com/wp-content/uploads/2023/09/cropped-Favicon-Female-tech-entrepreneur-32x32.png Design Archives - Female Tech Entrepreneur https://femaletechentrepreneur.com/tag/design/ 32 32 Building an MVP for your Startup https://femaletechentrepreneur.com/building-an-mvp-for-your-startup/?utm_source=rss&utm_medium=rss&utm_campaign=building-an-mvp-for-your-startup Thu, 28 Mar 2024 16:45:26 +0000 https://femaletechentrepreneur.com/?p=1877 Do you have an entrepreneur within you and want to bring it to life? Creating a business plan and building an MVP (Minimal Viable Product) is the place to start.

The post Building an MVP for your Startup appeared first on Female Tech Entrepreneur.

]]>

Do you have an entrepreneur within you and want to bring it to life? Creating a business plan and building an MVP (Minimal Viable Product) is the place to start. In this post, I will share my approach to testing out a new business idea and some of the pitfalls that you should avoid.

What is an MVP?

Let us first get into what an MVP is and why we should start by building an MVP and not just the whole product.
MVP stands for Minimal Viable Product, which means a product with enough features to attract your first customers and thereby validate your idea.
In some cases, this means just a clickable prototype, the main thing is that it is just enough to get validation from customers so that you know if it is worth spending more time and money on.

Every time we have a new idea for a new feature or product in my startup, my first question is “What is the MVP we can do to test if this concept works?”. And as the design tools get better I can see a future where this doesn’t even involve the development team.

– Nanna Bach Munkholm

MVP requirements

Before building your MVP, it’s time to look at your MVP requirements.

  1. What problem do you want to solve?
  2. Who is your target audience?
  3. How can you reach them?
  4. What features do you need to solve their problem?
  5. What is the most important feature?
  6. How can I test that I’m solving their problem?

Try to note down the answers to these questions and be critical of the features – are they necessary for you to get validation?

For my first Tech Startup, I first created a prototype (a click-through design) to explain my idea to advisors and developers. The first error here was that I didn’t test it on potential customers. With this prototype, I went to a consultant company and negotiated a deal where they made the MVP. My second mistake was I hadn’t thought about how I should track if the early adopters liked the MVP. Leading to the MVP being useless. Furthermore, I had no clue about what I should be aware of when talking to developers.

– Nanna Bach Munkholm

How to Build an MVP?

Now that you have your MVP requirements we can take a look at the different options you have for building an MVP for your startup. Depending on the technology depth of your MVP you have different options.

  1. A clickable MVP without any functionality behind
  2. A No Code MVP with hand-held or simple functionality
  3. An advanced MVP

1. A clickable MVP without any functionality behind

This is a great choice if you have no technical experience and want to get your MVP out into your customer’s hands quickly.

Figma has become the preferred tool for most designers as it is intuitive and has all the features you need to create a clickable MVP. Another great advantage is that if you choose solution 2 or 3 you can use the design and extract the parameters you need for developing an MVP with functionalities behind it.

2. A No-Code MVP with hand-held or simple functionality

Creating a No-Code MVP is underrated. When I started my first Tech startup back in 2018 No-Code was not a thing, but today there is a No-Code that nearly fits every business case. No-code means tools where you can build your application without needing to code. You will of course have some restrictions compared to coding your application from scratch, but if you choose the right No-Code tool you are properly set for many years.
I’m not going to mention all the different No-Code tools available but I can recommend you to have a Talk with Maja Overgaard who is an expert in No Code.
These are the No-Code tools I have used so far.

Glide Apps

GlideApps is a great tool if you wanna ship something out quickly and you don’t have a lot of requirements for the design. Maja explained it as being the Duple (Lego) version of NoCode tools. As a database, it uses a Google Sheet, which makes it great for non-technical people. I have built great tools for personal use cases: a catalog of my favorite recipes, an event app for my birthday party, and a property rental app for my dad.

FlutterFlow

FlutterFlow is a more advanced NoCode tool, that can be used for releasing an app on App Store, Google Play, and just have a web app. This tool is optimized for mobile first, so building an administration portal will not be a great fit for this tool. But this tool comes very close to building a Flutter app (a Cross-platform framework). You can even get the code behind the FlutterFlow app exported to Flutter if you one day find out that the tool doesn't fit your needs anymore. FlutterFlow and Flutter are owned by Google and use Google Firebase as a database.  

Bubble.io

Bubble is a more advanced NoCode tool, where the learning curve is higher. If we are talking Lego terms again this is the Lego Technique version. Bubble is a great tool for web applications and you can connect the database you desire. So this could be a great fit for you if you have a more advanced data structure, need 100% control of the design, and don’t need an app.

3. An advanced MVP

When do we need to make an advanced MVP?

Are you trying to invent a new technology that never has been done before you might need to code it to prove it can be done. But often it’s not the UI that makes the difference in the beginning. What I’m trying to say is that you only need to start coding if you need a cool algorithm that does something smart, but then you can use a NoCode to make your algorithm come to life.

If you haven’t tested if your potential customers want to pay for the service you deliver, you can start by making a facade for your products and then hand-hold the functionality behind them. By doing this you can collect data on the customer’s behavior and thereby have data to attain an investment to hire developers to build the functionality behind.

I you wanna code everything from scratch take a look at my post about Starting a tech company without a tech background. Here I will take you through the things you need to consider to choose the best tech stack. 

Before launching my first tech venture, I encountered numerous fellow entrepreneurs who lacked technical skills and opted to hire consultants to develop their products. Initially, this seemed like a sound approach, especially after securing soft funding or investment.

However, a recurring issue emerged: as funds dwindled, they found themselves with unfinished products and no means to complete them. Recognizing this common pitfall, I made a strategic decision to learn the core programming language necessary for our venture, Python. Back in 2018, there wasn’t anything like NoCode. So, I had to learn other languages like TypeScript, HTML, CSS, and Dart, as we ended up in the same pitfalls.

Despite our best efforts, the learning curve associated with both coding and building a company simultaneously proved challenging, ultimately leading to the closure of our venture in 2021.
– Nanna Bach Munkholm

What I want to tell with this story is, to use your resources where they are best spent. Creating a business is not only building an MVP, it requires many skills so take the shortcuts where you can, and don’t start building a rocket if all you need is a skateboard to get you from A to B. 

Final advice on building an MVP

My advice to you my fellow entrepreneur embarking on building your Minimum Viable Product (MVP) for your startup is to always maintain a critical mindset. Continuously question the necessity of each feature and aspect, asking, “Is this truly essential to prove my idea?” By staying focused on the core elements that validate your concept, you’ll create a lean and effective MVP that efficiently serves its purpose. Remember, the goal is not to build a perfect product from the start but rather to gather crucial insights and feedback to iterate and improve upon. Stay focused, stay critical, and embrace the journey ahead with enthusiasm and determination.

The post Building an MVP for your Startup appeared first on Female Tech Entrepreneur.

]]>
Adobe XD to Flutter code https://femaletechentrepreneur.com/adobe-xd-to-flutter-code/?utm_source=rss&utm_medium=rss&utm_campaign=adobe-xd-to-flutter-code Sat, 23 May 2020 16:11:43 +0000 https://femaletechentrepreneur.com/?p=569 Transform your Adobe XD design to Flutter code with a single click. See how easy it is. Safe time transforming your designers work to beautiful apps.

The post Adobe XD to Flutter code appeared first on Female Tech Entrepreneur.

]]>

I’m happy to share with you a totally new feature to make your frontend work in Flutter much faster. Adobe XD have just released a new plugin that makes it possible for you to export your Adobe XD design to Flutter code, with a simple press of a button. It’s pretty cool!

Let’s check out how it works. 

Install Adobe XD to Flutter

Go to https://xd.adobelanding.com/xd-to-flutter/ where you can get direct access to download XD to Flutter. Follow their direction and install the plugin. When installed you will find the plugin under Plugins and you will be able to see a new panel as shown below.

adobe XD to Flutter plugin

Create a new Flutter project

When you export your design you need a project to export it to. So let us start be creating a new Flutter project. Check out my post on how to create a new Flutter project if you are new to Flutter.

In your pubspec.yaml file add adobe_xd to your dependencies.

adobe_xd: "^0.1.3"

You are now ready to export you design to Flutter. 

Export all widgets to Flutter

Now to the magic part exporting your Adobe XD design to Flutter code. Go back to Adobe XD and in the plugin panel choose UI Panel. Here you can choose your newly created Flutter project. When you are ready press Export All Widgets.

If you go to your lib folder in your Flutter project, you will now see a new file. You can rename it to what ever you want.

To see you results go to main.dart and change you home to be the new widget you have imported.

home: Stats(),

And run Flutter run.

Adobe XD Design

Adobe xd layout

Flutter layout

adobe XD to Flutter app view

That’s a really easy and fast way to export your design to functional code.

Let me know what you experience is with this new plugin. I personally look forward to working with it and seeing what difference it can make to my day to day work.

Happy coding 👩🏽‍💻

The post Adobe XD to Flutter code appeared first on Female Tech Entrepreneur.

]]>