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 design needs to be taken care of.
To ensure the design aspect isn’t overlooked, we’d like to walk you through all the steps we take at Purrweb when it comes to designing MVPs — 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.
It’s not a big deal to indicate a few names since competitors always exist. No matter direct or indirect
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 (the biggest challenge when it comes to world-known competitors, though).
At Purrweb, we do competitor research primarily to figure out what to focus on first in the development process
Approximate duration — 1 day
Dribbble, 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, designer types a keyword (upcoming product’s related stuff) and then checks the way similar projects are implemented.
Say, we need to build the 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: 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.
Healthcare app design concept. Check the full work
Above you can see very first 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.
Approximate duration — 1 day
The most effort-consuming stage.
Before the real designing 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 design
When it comes to the UX part (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.
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, 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.
Hi-fi prototypes for beauty business web app. Check out the entire design
Approximate 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’ design concept in mind (you remember about those 1-2 app screens, don’t you?).
To make the app stand up, designers add colors, fonts, animations, logos, and all necessary brand-related elements. Because without a sexy look (Instagram’s constant growth proves the power of visuals), it’s hardly possible to hook users — no matter how helpful or easy-to-use your thing is.
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.
Prototypes. Now, they are attractive enough to be proposed to investors.
Colored 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).
If one day, you wanna change, like, the primary text color from black to blue, this thing will save a ton of time and hassle
Approximate duration— 2 weeks (in fact, adjustments go until the desired outcome is achieved).
So here we are. Every piece of the 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.
But that’s completely another story:)