 IndieDev Tips #7 - Guide to MVP • Part 5: My UI Design approach to ship faster.

Hi there,

Welcome to Part 5 of my Guide to MVP. So far, we came up with the idea (Part 1), validated the idea (Part 2), mapped all the cool features this product could benefit from (Part 3) and learnt to say ‘No’ to ourselves and focus on our Minimal Feature Set (Part 4). 

Today, things are starting to take shape. We’re starting to design our MVP. 💪🏻🔥

First things first, let’s get the big question out of the way. What’s the best UI tool to design your app? 

There are tons of options and many people get paralysed at this stage, stuck in the land of doubt, not knowing whether to pick Sketch, Figma, Adobe XD, or [insert any other UI Design tool here]. 

The answer is quite simple: pick what you have used in the past, and if you don’t know any of these tools, start with Figma. Why Figma, and not Sketch? Because I’m trying to help you decide fast here. Pick Sketch if it sounds better to you. It won’t matter much. As non-professional designers, all these tools will do the same for us.

Then there are secondary tools that will make your life easier. For me it’s mainly:

• SF Symbols: a huge collection of icons provided by Apple. It’s a great tool especially for iOS developers.

• Apple Design Resources & Components Library for the latest OS you’re designing for, see here or search the latest OS version (currently iOS14) in the community tab of Figma to find reusable components (Example here). It’ll help you with system components to keep your designs iOS looking. If you’re building for Android, search for “Material Design Resources”. Google has the same type to thing available.

We’re ready to start looking into how our MVP will look like and behave. At this stage you should have a very clear understanding of the core features that will go into your v1. If not, you might want to go through Part 3 & 4 once more.

If your idea has already been done by many people, download a bunch of apps and try them out. The goal here is to see what they do well and how they do it but most importantly to find what they don’t do well and what could be done better from a user experience point of view. If you identify a way to build a feature that will help users perform an action faster or make something clearer, write it down. That will likely influence your designs later.

Here is a list of places I love to explore to find cool inspirations.

Whenever something catches your eye, screenshot it and drop it in a mood-board page. I sometimes also take notes in my design file, just to explain to my future self what had caught my attention in a specific design.

During your search, you will find fancy looking designs animations. These things are traps, be careful. That’s how designers try to stand out on these design platforms. Sadly, these things often aren’t that simple to replicate in code and remember, we’re aiming for clean & simple MVP solutions, not optional and time consuming polish.

Once your mood-board is full enough (aka when you’re tired of scanning through designs), create a new page and get started on your own UI.

Here are a few examples of a components that inspired me and how they ended up looking in my own designs. I’m not replicating anything here but rather using elements (square box with white icon or a list of colors displayed horizontally) and incorporating them in my design in my own way.

While I work on a new MVP, I’m very selective with the things I spend time designing and anything I can skip, I skip. So let’s find opportunities to skip designing stuff.

For instance, if I’m planning to reuse a component I already coded in another project (think Settings screen, onboarding tutorial or login screens), I do not spend a minute designing them. Same approach with light/dark mode, I don’t design both versions, I’ll adapt this directly in code when I’m actually building the app.

I don’t design for all the possible states of a screen. If a list view can be empty, I don’t worry too much about the way that ‘empty state’ should look like. All these things can be polished later if not skipped.

Finally, if there’s a screen I can visualize very clearly in my head… I often skip designing it altogether.

You’re now equipped to design your MVP. Don’t spend weeks on this. Keep it short and don’t aim for perfection… it doesn’t exist.

In the next issue, I’ll share some tips on how to speed up development. We’re getting closer and closer to shipping this new project and I hope you’re making progress in yours too.

If you’ve enjoyed this series so far or have suggestions or questions you’d like to see covered in the future, feel free to reply to this email.

You can also find me on Twitter @edouard_iosdev or on Instagram @edouard_iosdev.

Thanks for reading.

Ed