Five steps to prototyping an awesome UI/UX for your MVP

When building your minimum viable product or MVP for your startup, one critical task is designing a great UI and UX that will make your users love and return to your app.

Let me show you how to do it in five steps:

Step 1: Identify your stakeholders

After studying the requirements, group your end users into one or many stakeholders.

For instance, in an e-commerce website, the stakeholders might be anonymous users, registered users, store admins, etc.

Notice that each stakeholder has a different expectation from the UI and distinct goals and tasks from other user types.

Also, notice that even though anonymous users and registered users will both be viewing the products catalog, each stakeholder has a different context within the website: An anonymous visitor has no purchase history that could be used to build better recommendations versus the registered user who can see better recommendations as he scans the catalog.

Step 2: Write your user stories

Once you identify the stakeholders, describe the steps a particular stakeholder will take within your app to achieve one specific task.

You can start with the most important tasks first, as they will allow you to design core features quickly. Then, these core user stories are the foundation for adding other secondary user stories.

From our previous e-commerce example, you can think of the Checkout process as a core user story for an anonymous user.

An anonymous user will:

1. Initiate the checkout by clicking the Checkout button.
2. Adjust his order lines.
3. Create an account.
4. Fill in his contact details.
5. Pick a shipping method.
6. Fill in a payment method.
7. Confirm his order.
8. See a confirmation message once the order has been placed.

Notice that the steps outlined depend on the requirements and can be adjusted or dropped to achieve our business goals.

For instance, you can drop or make optional the third step (Create an account) to remove friction and improve your user experience, which might lead to more orders being placed.

Step 3: Define your screens

Having users’ stories helps in defining your app screens. You will eventually notice that some screens are shared by many user stories.

From our previous example, you can imagine having screens like: the homepage, product catalog, product details, search results, cart contents, etc.

You will notice that the more a screen is shared by user stories and stakeholders, the more it can be challenging to design afterward. This is due to the number of goals the screen is supposed to help achieve for different stakeholders.

Step 4: Design your navigation

Good navigation can set the difference between a basic app and a great one. Simply put, when you design good navigation, you help your user accomplish his goals quickly and transparently. Your app is not in the way; it is a facilitator, an enabler.

From our e-commerce example, a good navigation practice is to enable the user always access his shopping cart from anywhere on the website. His shopping cart is one click away. He feels confident and not lost. He can clearly tell where is the way out.

Step 5: Stitch everything together

So far, you have written your user stories, defined your screens, and designed a navigation system. All that remains is to put everything together and create your vision for a great product.

The result is a set of scenarios you can showcase to your stakeholders and investors.

So do this:

1. Open your prototyping tool, be it Figma or something else.
2. Add screens for a particular user story.
3. Link those screens using your navigation system.
4. Rinse and repeat until you design most of your core user stories.
5. Then apply the same process to secondary user stories.
6. And voila! You have an initial prototype, show it to your stakeholders, and gather feedback…

Conclusion and some final thoughts

If you can learn something from the process described above, it is to understand and identify your target audience, what they expect from your product, and how you can deliver that to them.

These steps are about capturing and translating that knowledge into a working prototype in a user-centric way. I didn’t focus on themes, colors, fonts, or other subjective design aspects; instead, I focused on the end user and his expectations and goals.

Once you have your prototype, validate it with user feedback before committing to costly software development. Remember that changing a prototype is far less expensive than modifying production code. So invest more time in prototyping and let your users guide you.