Back

MVP design process: stages, tools, and deliverables

Reading time: 7 minutes

MVP design: how to create UI/UX for MVP?
Table of contents

    MVP is the safest way to validate ideas because no super-polished product is crucial to start out. However, even accepting imperfection, ‘made in 90’s’ look and feel isn’t enough to make users come back. The MVP design needs to be taken care of. 

    To ensure the MVP design aspect isn’t overlooked after you hired MVP development agency, we’d like to walk you through all the steps we take at Purrweb when it comes to MVP design — there’s really a lot that happens along the way 🙂

    How to design an MVP? 

    Follow these steps:

    1. Competitor research

    It’s actually the pre-design stage, although if being neglected by both designers and product owners, causes nothing but wrong product positioning, visual copycats and ‘Let’s just build something and see’ thinking.

    At a very generic level, competitor research means checking out what’s out there. To understand today’s user needs, designers find top 3-5 relevant competitors and study how their products are designed.

    Deliverable: Competitor analysis. We are not talking here about blind recreation. It’s more about learning from what has already been done + finding flaws i.e product parts that need to be improved in MVP design (the biggest challenge when it comes to world-known competitors, though).

    MVP design: why study competitors? It’s not a big deal to indicate a few names since competitors always exist. No matter direct or indirect

    Duration — 1 day

    2. Inspiration

    Dribbblehttps://dribbble.com/purrwebui, Behancehttps://www.behance.net/PURRWEBPinteresthttps://www.pinterest.com and  Muzli Searchhttps://search.muz.li/ are great to not get stuck and gain a bit of visual inspiration. Assets like icons, typography, animations, branding, and all that jazz can be easily found there. So to brainstorm ideas for MVP design, designer types a keyword (upcoming product’s related stuff) and then checks the way similar projects are implemented.

    Say, we need to build create MVP design for a marketplace. To spark ideas (and procrastinate a bit :D), designer can start with the hashtag ‘Marketplace’ and then check the shots. Or, what’s even better, use key features as hashtags — for marketplaces, these can be ‘calendar’, ‘appointments’ or ‘dashboard’.

    The common mistake here is to use ‘fancy-design aggregators’ be it  Dribbble or Pinterest for finding UX inspiration. In most cases solutions that both platforms offer, are truly fancy, although illogical from the UX perspective but don’t worry! Just keep reading and figure out where you can borrow UX ideas.

    Deliverable: MVP Design concept. The main goal is to see how fonts, color palette, and buttons will perform by visualizing 1-2 screens from the main user flow. It will help all the stakeholders come up with the overall UI/UX architecture early on as well as back up further product decisions.

    MVP design: design conceptHealthcare app MVP design concept. Check the full work

    Above you can see very first MVP design concept screens we’ve implemented for an app that helps doctors determine preliminary diagnosis and schedule appointments. We were aimed to deliver a super-easy-to-navigate platform, hence, for the sake of clarity in UI, we’ve opted for a minimalistic style.

    Duration — 1-2 days

    3. Prototyping

    The most effort-consuming stage.

    Before the real MVP design starts, a consistent product ‘skeleton’ needs to be generated (without any colors and prettycisms). Here designer establishes the app architecture and navigation components — even if not going in-depth (detalization is entirely up to you/ project’s complexity level and needs), it lets you outline the user flow and discover what should be done to make the flow smoother.

    Prototypes show the way users interact with your MVP design

    When it comes to the UX part of MVP design (we’ve promised you the tool, right?),  Mobbinhttps://mobbin.design/ is awesome to come up with design patterns for mobile apps. Designer just taps a product name (like Uber) or picks a needed category (like Entertainment) to check the way world-known solutions are designed. As for the web, you can try  Webframehttps://webframe.xyz/?ref=producthunt. Just as Mobbin, the tool allows you to discover beautifully created designs.

    At the MVP design stage, UX isn’t about being ‘novel’. No one has to ‘First stop and think’ to get a sense of how to experience the app

    To create user flows for MVP design, we mostly use  Figmahttps://www.figma.com/. No software needs to be downloaded, because it’s browser-based. Making updates is super easy. Reviewing the design and asking a client for feedback in real-time — this is where Figma also excels at.

    Deliverable: How to design an MVP? You need to create black-and-white (yet clickable) prototypes for sure. These can be used for gaining initial feedback or conducting UX interviews.

    MVP design: prototype creationPrototypes for beauty business web app. Check out the entire design

    Duration — 2 weeks

    4. Visual design

    Once the client gives prototypes a ‘go’, it’s time to dress them up. To do so, designers need to think through the entire UI part with the ‘rough’ MVP design concept in mind (you remember about those 1-2 app screens, don’t you?).

    To make MVP design stand up, designers add colors, fonts, animations, logos, and all necessary brand-related elements. Because without a sexy look, it’s hardly possible to hook users — no matter how helpful or easy-to-use your thing is.

    The final MVP design stage that shows the way your app talks to end-users

    Deliverables: beautiful clickable prototypes, UI-kit, and design system. You’ll be given 2 things at once, so let’s consider each deliverable in a bit more detail.

    MVP design: visual design creationColored and detailed screens for the same beauty business web app. Have you already checked this project?

    UI-kit contains components like icons, buttons, fonts, and colors. The best thing about UI-kit is that it streamlines communication and maintenance of the entire design — be it devs (speeds things up), product owners (helps them stay clear about all visual elements) or designers (keeps all styles and elements in sync).

    MVP design: UI-kitIf one day, you wanna change, like, the primary text color from black to blue, this thing will save a ton of time and hassle 

    Duration— 2 weeks (in fact, adjustments go until the desired outcome is achieved).

    4 mistakes to avoid while developing and designing an MVP

    There are some mistakes that can be avoided while designing and developing an MVP. If you want to make your MVP design successful, it’s important to know some pitfalls of design that can entail an epic business failure.

    1. You solve the wrong problem

    Before spending your efforts on creating a product, you should answer a couple of questions — you can ask them while analyzing competitors. First of all, you need to understand who your target audienceis. Just imagine, you have a child that wants a toy train for Christmas — but you’ve bought him a teddy bear as a present. It’s a toy too, but the wish wasn’t fulfilled anyway. Similarly, the things are in MVP design — if you give a target audience the wrong toy, they lose their interest and become disappointed. 

    The next question is — what problems does your product solve? This is a key point if you want to create an MVP design that will be in demand. If your project doesn’t solve any problem, then why use it? So, make a list of potential problems that your product will solve.

    We‘ve already defined the problems, now it’s time to think about solutions. You need to answer the question — Is your project the most effective solution to the defined problem? To make a long story short — find your door first and only then build a key. 

    If you can find the answers to these questions, then congratulations, you’ve cracked your target audience for your MVP.

    2. You skip the prototype phase

    The direction of MVP design process can’t be fully understood without a prototype. You can’t create a nice-looking product without a draft, can you? You need to build a user interface and all the internal logic of a future MVP design first and only then create a clean copy — an MVP. A prototype is not yet a functioning version of the product but this important step can’t be skipped.

    3. You don’t think about necessary features

    If we are talking about MVP design, you need to define all the necessary features that will be in scope. We recommend choosing a few of them. And when your MVP design and development are ready, you can always add some new features.

    4. You hire amateurs

    It would be sad if you entrust somebody with a task they can’t fully complete. Hiring a professional team means saving time and money. If you don’t have an in-house team then outsourcing is a great opportunity. Choose a design studio with a skillful team that is good at MVP design and development, you can also check their portfolio and read some reviews. Entrust your MVP design to designers that can not only distinguish UX from UI but also have extensive experience in this sphere.

    Wrapping things up

    So here we are. Every piece of MVP design looks great — lots of tweaks and polishments were made to achieve this result. Now you can either present it to potential investors to get some money and support or pass on to the devs for further coding. Actually, you can do both at once — it’s totally up to your needs.  Now you know how to design an MVP, just follow these steps and get the project done without troubles. 

    And yes, remember, that the main goal of MVP is to validate if the idea is profitable or not. Do you solve a problem that is really worth solving? Is it what target customers are expecting from you? What do they like or hate about the solution? The more insights you gain, the more likely your product is a winner.

    But that’s completely another story:)

    If you want to get professional help with your MVP design, Purrweb team is here for you! Our managers will make your communication with a team seamless, designers will build a user-friendly interface, developers will make your MVP highly functioning and QA tester will find all the bugs. Just drop us a line and don’t worry — we’ll take over this job and make your dreams and ideas possible.

    How useful was this post?

    Rate this article!

    12 ratings, аverage 5 out of 5.

    No votes so far! Be the first to rate this post.

    As you found this post useful...

    Follow us on social media!

    Share