View profile

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

 IndieDev Tips #7 - Guide to MVP • Part 5: My UI Design approach to ship faster.
By Edouard Barbier • Issue #7 • View online

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. 💪🏻🔥
What tools do we need?
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.
Finding design inspirations
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.
Source 1: the AppStore
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.
Source 2: Design hubs, platforms, hashtags etc
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.
This inspiration stage is not the moment to make your features more complicated, or spicy them up with complex animations. That would be shooting yourself in the foot.
Let's start putting things together
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.
Do not bluntly copy. You would expose yourself to copyright infringement claims and both the App Store and the PlayStore policy team could take down your app. The ideal approach is to feed your own creativity with other people’s work.
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.
Keeping it MVP: Designing as little as possible.
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.
Wrapping up
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.
Did you enjoy this issue?
Edouard Barbier

I’m Edouard, an Indie iOS Developer & Serial App Maker from Belgium. In 2015, I started to teach myself how to make iOS apps. In 2018, I left my job at Google to pursue the indie lifestyle.

This newsletter will include tips, mistakes I’ve made and tons of experiences I can share with others including a roadmap to escape the 9 to 5 and build products for a living.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue
Barcelona, Spain.