Back
MVP design: how to create UI/UX for MVP?

MVP design process: Stages, tools, and deliverables

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:)

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

Dribbble, Behance, Pinterest and Muzli Search 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.

READ MORE  App development RFP: how to write it correctly?

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.

READ MORE  How to spend $1.5K on Healthcare app design and raise $400k
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?), Mobbin 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 Webframe. 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 Figma. 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: Black-and-white (yet clickable) prototypes. 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.

READ MORE  React Native challenges and benefits in 2020
The final 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).

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.

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:)

[updated 06/02/2020]