Six design docs that make building your MVP easier
As mentioned in last week’s article, building an MVP can be a daunting task. If you’re set on creating the best version of your MVP, I’d suggest creating design documents that will each give more detail in how you want your MVP to be built. Below are six design documents you can create that will make building your MVP easier.
User Personas
A user persona is a mashup of a bunch of user interviews you’ve done to understand who your ideal user base is. It’s taking pieces from each individual ideal user, or finding patterns between your users, to create a personality of who you’re selling to.
Having user personas, each for a different user group you plan to target, will be integral for creating empathy for your users and will help as you continue to detail out your MVP. Having the personas documented not only help you, but your designers, product managers and engineering team to really know who this product you are building is for.
User Flowchart
The user flowchart details how a user will interact with your product, from the registration or login function, up through the end of your process. Especially if your product will have multiple features that involve user decisions that take them to different workflows, you’ll want to detail out each decision a user can make and how that pathway differs from the others.
Creating this flowchart really helps to think through the details of how a user will move through the app. This process might even bring up some questions or discussion points that you haven’t otherwise thought about in the holistic view of your product. This is when your user personas come in handy — they help you remember who is using the product and will hopefully clear up what decisions they make and what the product needs to do for them. If the personas don’t help, you can schedule a follow-up interview with someone you’ve previously interviewed or find another user you can test your flowchart on.
UI/UX Element Analysis
This analysis is similar to creating a branding collage or vision board. It’s a collection of the User Interface (UI) and User Experience (UX) elements you want your product to be inspired by or to include. This can be taken from your competitive research, which can help figure out which elements need to be consistent so that your user experience is familiar, or can be from interfaces you’ve experienced yourself.
To find UX elements, I’d reflect on why you like to use certain websites or apps and what function they make easy for you. For example, why it’s easy to use the map or search function in Yelp or Google Maps; texting or replying to friends through iMessage, Telegram or WhatsApp; why swiping on dating apps is satisfying. To find UI elements, I’d browse through design websites like Dribbble or Mobbin to help find inspiration of what you want your product to look or feel like. Make sure that you document which elements you like, either by taking screenshots or saving reference links someplace where you and other team members can view and add to them.
Wireframes
Now that you’ve done some brainstorming on how you’d like the interface to look and experience to feel, it’s time to make simple drawings of what your screens will look like and how they will function. I base these off of the user flowcharts, as a more visual design of how the MVP will function. I like to use paper or notecards to draw wireframes, but you can alternatively use any web drawing tool that allows you to create basic shapes and add text.
The level of detail in your wireframes should be minimal. They can include minor instructions and messaging, indicating which boxes are images or text fields for user inputs, and which are buttons or navigation bars. These wireframes should not need any design experience to create them.
UI/UX Designs
Now is the time to create a higher quality design of your wireframes. This is the first document that is somewhat dependent on your design skills. If you’re motivated in creating an initial draft of your designs, you might be pleasantly surprised by how much detail you’re able to include and the evolution from your wireframes. These designs can eventually be polished up by a UI/UX designer, and your initial draft will be a great starting point for your designer to better understand your direction.
User Stories
This is a document geared more towards the development work and the technical requirements that the dev team will need to meet. These stories break down the functions that a user will be doing and also provide a more granular view of why each piece of functionality is important to the overall application.When writing these stories, use this template: As a <user persona>, I want to <specific function>, so that I can <benefit of function>. I like to write these with the User Flowchart and UI/UX Designs for reference.
These stories are a great starting point for a product manager or software architect to come in and understand what needs to be built, and continue to add additional details. These stories are also great for quality assurance testing purposes, because it ties whatever technical element of the software back to a specific function that benefits the user.
These documents are part of the product design process, and really don’t need technical expertise or knowledge to create them. These are also pretty well-known concepts, with the exception of UI/UX Element Analysis, so if you get stumped or need more help, researching these documents will provide more concrete examples and information. As with most processes and documents, you can continue to add and revise as you research and learn more about your industry and users.
