How to Make an App Prototype (for 1/10th of the Cost) Guide + Example

Design

2021-10-13T16:56:32.241Z

Zigzag

“I have an innovative idea for an application—but I’m not a developer. What do I do?”

This is the question one of our clients recently asked us. The founder of SimplSell is a real estate professional with experience representing buyers and sellers. He knows the industry and understands the need for new software solutions in the market.

But he’s a real estate professional, not a developer. What should he do? In this guide, we’ll show you how to make an app prototype for your digital product.

Hero quote

Ideas are cheap. Action is everything.

To Summarize

If you’re not a developer, it’s crucial that you find one. You need someone with technical skills to partner with you and build your application. However, to hire a developer, you need funding.

Therefore, the number one goal for someone without coding skills is to get funding, likely from a third party.

In order to do that, you need a number of things, the most essential being a prototype that you can showcase as the foundation of your app.

Ideas are cheap. Action is everything.

This is why having a prototype is invaluable for founders looking for investment. It demonstrates not only the idea but also dedication, technical strategy, smart decision making, and shortened time to a minimum viable product (MVP) and a return on investment (ROI).

There are two essential steps to create a prototype for your app: design and technical strategy. If you can accomplish these two tasks, you’ll have a clickable prototype with a detailed plan for building an application.

Here’s how we approach making a prototype for an application.

Design Sprint: Your Prototype

A design sprint is a five-day design process that’s meant to quickly strategize, design, test, and iterate. It takes a lengthy process and distills down only the most necessary components. Design sprints will keep your product prototyping inexpensive. Here are the steps to include in your design sprint.

Step one: Understand your vision. Do you already have brand elements like colors, typefaces, and logos? If not, it’s worth including basic UI elements in your design sprint.

Step two: Identify the application pages/screens to design. You’ll want to choose the screens that provide value and showcase differentiating features. We recommend between three and six screens—enough to showcase the breadth and complexity of your app, but not so many that you can’t accomplish it within a week.

Step three: Establish user, business, and technical requirements for each section of the app. This is where your designers need to work with an engineer or product manager to align requirements and understand what’s feasible. Document all requirements.

Step four: Design high-fidelity, interactive mockups of the agreed-upon app pages.

Step five: Test iterate, but keep this to one or two rounds of feedback. Remember: this probably won’t be the final design. It’s just a prototype!

Architecture Sprint: Your Prototype

From there, you’ll want to dive into the architecture. This will help merge your conceptual designs with the “how we’re going to actually build it.”

Step one: Identify necessary languages for front and back-end development. Your software development partner should consider things like popularity, features, and integrations.

Step two: Research integrations where necessary. For this real estate application, things that needed to be considered were Zillow and other MLSs, payments, banks, and chat tools.

Step three: Categorize and prioritize requirements for an MVP. You should have an architectural strategy that includes all languages, frameworks, and databases.

Step four: Once you have both the design and development scope, it’s easy to provide estimated costs for the full design and development of the MVP.

SimplSell App Prototype: An Example

Here’s a detailed description of our design and architecture process for the application SimplSell.

We began this design sprint with research and discovery which centered around the end-user: buyers and sellers of real estate. We helped our client identify:

Business Goals: What is the backbone of SimplSell? What problems does the application solve for users? After the overarching business objectives were defined, we explored each of the following:

  • Short-Term Goals: What immediate actions and goals need to be met to get this app off the ground?
  • Growth Goals: To be successful, a certain number of users must be active on the app. What is that number? How we will get there?
  • Long-Term Goals: Is the end goal to attract an acquisition? What is the exit plan?

Who is the Target Audience? For this application, we had two: sellers and buyers. Once identified, we listed their pain points and motivations, how we might attract them, and the kind of technology they prefer.

Most importantly, we needed to answer the question, “why would our target audience use this application?”

After we have identified the target user and value proposition, we can refocus on the project goals. The overarching goal is to create a prototype to achieve funding, and we can accomplish that goal by designing six screens to capture the unique value and experience SimplSell provides.

From here, we created a basic design system for SimplSell. Here were our original ideas:

design system example

Creating the essential color palette and typeface was the beginning step to arrive at the core user interface of the application.

The next step was to identify the most valuable screens to design and each individual page’s purpose, value, and features. Here is one example of the detail we recommend fleshing out before design.

Overview Seller Screen

Description: This screen appeals to the seller.

Features: Savings calculator, enter home value

What this screen needs to communicate:

  • Buyers are pre-approved and verified
  • Communicate directly with buyers
  • Save money, recoup more of your sale
  • SimplSell is free until you close, the fee is 0.005%, capped at $5,000
  • SimplSell experts provide help with choosing an offer and the ability to choose a backup offer
  • Balanced and fair contracts
  • Knowledgebase to guide you through setting up a listing, staging, and marketing the sale of your home

We went through each page of the prototype and made these lists so each screen had a distinct purpose for being in the prototype.

Designing

After strategizing around the users, we quickly designed screens, received feedback, and iterated, all within the design sprint. Within a week, we had a clickable prototype that was focused on the core user’s motivations.

Next Steps

Now, the real estate professional has a workable prototype, with software development requirements, a not-so-distant MVP, and estimates for completion. Pretty much everything needed to acquire funding or a technical co-founder. Score.

If you’d like to run a design and architecture sprint with our team, reach out and let us know. We love working through technical problems and bringing new, innovative software products to life.