We Write Code logo
We Write Code

Have you ever heard the words “Prototype” or “Wireframe” before and found yourself scratching your head? You’re not the only one.

Whether you work for a large company and have some thoughts on how to improve an existing process, or you’ve been working on an idea and have gone through 3 of the 4 things to do before starting your company, you might be ready to start tackling your Minimum Viable Product (MVP). One way to test your idea is to create a visual representation of your idea, allowing you to more easily demonstrate the potential.

The value behind creating a visual representation of your idea? It’s hard to predict what your customers want. You’re not going to know everything upfront so it’s important to put something out there that allows you to test your users and learn how they might interact with your idea.

So with that in mind, what types of visual representation might help you create an effective MVP?

1. Wireframes

The most pain-free way, and first line of defense in demonstrating your idea, is creating a set of wireframes. Wireframes help you plan your product’s structure and functionality, and are intentionally a low fidelity version of the design, frequently done in grayscale. They are simplistic and focus on functionality rather than visuals. Consider wireframes to be the foundation of your idea, defining the overall workflow you’d like users to emulate.

When we need to build wireframes, we utilize Sketch (a WWC favorite) to get the job done. With Sketch, we can use a set of pre-built design elements to quickly build screens to convey functionality (through dropdown menus, input fields, buttons, and other universally understood UI elements). This allows us to move quickly and get feedback on the overall workflow of the product.

While wireframes are fantastic for quick iterations, and allow team members to quickly and effectively communicate their ideas to each other, they aren’t great at showing the overall experience of the product or for tests with your actual customers.

2. Mockups

Mockups, contrary to wireframes, are typically a full-color, branded, medium to high fidelity representation of your product. They are intended to show the structure of the information while demonstrating some of the functionality. By focusing on the aesthetics, it forces those involved to look at the visual elements, to make sure they align with your brand and provide an overall cohesive experience.

Our tool of choice for mockups is again Sketch. Sketch was built specifically for web interface design, and with their expansive toolset and integrations, it’s a no-brainer. Especially considering it only costs $99 once and it’s yours forever.

That said, with the extra time it takes to build out high fidelity mockups, there’s the obvious increase in cost to put them together. However, because of their ability to resemble the final product, they’re great for testing with your customers and seeing how they respond to the product and brand.

3. Prototypes

The goal of a prototype is to emulate the final interactive experience of a product, and focus on what your users can interact with and see. Prototypes can be put in front of an end user or stakeholder, which means it’s important to approach a prototype iteratively versus as a final version.

Prototypes can be built in a number of ways, but over time we’ve found the most effective and efficient way for those involved to get feedback quickly is to turn our static mockups into a clickable prototype. After building our mockups in Sketch, we sync those to a tool called InVision which allows you to click and drag to emulate where you want people to click (called hotspots). Once you’ve finished, you’re able to share your prototype with others who can provide feedback to let you know what works and what doesn’t.

Prototypes are a great fit for an MVP as they are the closest thing to a live product for a customer to test without you spending an arm and a leg ahead of time.

As mentioned earlier, creating a visual representation of your idea can help others more clearly see the vision you have for your product, and any one of the 3 ways above could be a great asset in helping you gather feedback and develop a plan to move forward.

Curious how developing a prototype could help your idea move forward? Reach out to us at contact@wewritecode.com for more info on how a prototype might be the key to moving your idea forward.