So you want to design an app. With countless apps across several app stores, making it to the top of the charts is a tall order. If you want to go for gold on the app stores, there are certain steps you must follow to make your ascent easier.
Prototyping is our bread and butter here at Proto.io. We help designers, entrepreneurs, product managers, and developers alike create prototypes that simplify the process of getting stakeholder buy-in, fundraising, and ultimately launching the app. But all designers have to start from square one and designing your first prototype can seem daunting. That’s why we have done the heavy lifting for you and reached out to seasoned designers to get their UX tips for prototyping the first time around.
The First Time Prototyping Experience
Before we jump into these UX tips for prototyping, we asked the contributors about their first experience creating a prototype. Here’s what they told us.
Dennis Lenard, CEO at Creative Navy and Senior UX Designer, offers his experience: “When I built my first prototype, I was eager to make something, anything. I approached the process with an experimental mindset, asking myself ‘What would happen if we did this? Or this?’ I didn’t even really consider using a professional tool. I got into my work mindset and sketched out as much as I could, pen to paper. It took time and lots of trial and error to develop a methodology that allowed me to be efficient, not just productive.”
Most great business ideas start on the back of a napkin or envelope – a low fidelity prototype based on a hand-drawn sketch or made out of simple shapes and text boxes is sometimes good enough to get proof of concept with minimum effort. However, in order to elevate the idea further, the visual and sometimes even interaction fidelity needs to increase.
That’s why we recommend moving beyond a sketch and switching over to a medium or high-fidelity prototype as soon as you receive positive feedback on your preliminary idea. It will save time, as you’ll be able to see which design features are feasible earlier on in the process. It will also enable the entire team to get on the same page in terms of what they want to include in the MVP version and what color schemes work best. This second reason for using prototypes aligns with what another design leader told us.
When Katherine Brown, Founder and Marketing Director at Spyic, was building her first mobile app prototype, “the goal was to build a basic prototype that can be used as a presentation for getting approval for the app. I decided to approach it as a one-person design project. I had limited resources, but I still wanted to build the best UX possible.”
As a one person team to start off with, Brown needed to make a prototype that was simple enough to be able to manage on her own and that worked hard enough to get her stakeholders on board. Designers must always strike this delicate balance, which is where the UX tips for prototypes come in. Now that you’ve read about their first-hand experiences while building their first prototypes, read on below to learn from the tips these designers wish they had when they were brand new to mobile app prototyping.
UX Strategies You Need to Know to Build a Mobile App Prototype
Having an experienced designer in your corner to coach you through prototyping would be great, but the second best option is to get their tried and true tips to learn from their mistakes and wins. Lenard breaks down the three UX tips he wishes he had at his disposal when designing his first prototype. Number one is “Creating a visual inventory. Having all your content elements and actions within the same canvas makes them easier to review. Whether you choose to go through them by yourself or with your stakeholders, organizing them makes it easier to see if anything is missing.”
Next, Lenard focuses on the importance of competitor benchmarking. He suggests first time prototypers “find up to three apps you really love and use them as inspiration for your page and navigational structure. Order your content and actions on these low-fidelity wireframes to see what the product might look like. Imagine you’re an artist making preliminary sketches to understand how the light should hit. Doing this is much easier than developing an original layout and getting into a creative rut.”
Here we offer a word of caution: there is a fine line between being inspired by a design and flat out copying it. Find a way to admire and pay homage to mobile app components while making them your own. There is plenty of stealing in the tech world, so put thought into how you can take the designs you like to the next level and make them truly unique.
The final piece of advice that Lenard highlights is “Asking for feedback. It’s easier for people to tell you what works and what doesn’t when you abide by design patterns they’re already familiar with. The fact that your low-fidelity wireframes aren’t perfect will elicit a lot of useful feedback, which will be much more concrete and applicable than if you would have worked on something entirely original.”
It’s important to note that you will get more critical user and investor feedback when your prototype is bare bones. Your testers won’t think that you have spent too much time on it and will give more effective commentary that will help improve its functionality. The more finalized the product appears, the more likely potential users will pay attention to design details that might be out of scope, or even hold back on harsh feedback because they assume you have put significant time and energy into the project already.
Brown suggests taking a slightly different approach when designing your first prototype: “Don’t allow users to draw attention to any notification in the system or system dialog boxes. Create a clear-cut path for users from one page to another, and ensure all required steps are available in one place. Use solid colors, gradients, or solid backgrounds, rather than patterns when possible because they make it easier for users to differentiate essential elements and understand their role within the interface. These UI designs can also be more effective at reducing eye strain.”
Closing Thoughts
There is no right or wrong way to design your first prototype. There are certainly more efficient ways. We hope the guidance provided above enables you to speed up your process, so that you can test ideas faster and improve your odds of topping the app store charts one day.
What UX tips for prototyping do you swear by? Let us know by tweeting us @Protoio.
Proto.io helps you bring your idea to life in no time, with no coding skills required. It’s ideal for UX designers, entrepreneurs, product managers, marketers, students, and anyone with a great idea. Sign up for a free 15-day trial to start building your first prototype today!
