Planning software applications can be a lot of fun with all the data collected from research, a structured application map, and clearly defined user stories. Even more exciting, though, is visualizing those plans with wireframes and setting them into motion with interactive prototypes.
At this point, we know what our users need, have some ideas on how to solve their problems, and are ready to visualize it. It can be tempting to open Figma right away and immediately build out your ideas with precision. However, we recommend taking a more strategic approach by starting with a wireframe.
Wireframes are simple sketches that evolve from a drawing to more concrete screens with colors and fonts. They should be based on existing and proven patterns that are familiar to the user, so do your research first.
We love to go to Dribbble, Behance, and other resources to see what has proven effective and what reappears over multiple solutions. Still, we can never be 100% sure that these previously established patterns will work for our specific users. That’s why we encourage doing usability tests before shipping products.
Let’s break down the stages of wireframing.
Low-fidelity wireframes are meant to be quick sketches to quickly communicate visual ideas. Think of a typical box diagram of the fancy new page you plan to build. In this step, your goal is mainly to get an idea in the wild. No need for details or neat lines! You can use wireframing software for this, but I tend to rely on my sketchpad (plus it’s more fun to doodle on paper).
Mid-fidelity wireframes are a step up from low-fidelity, but not as detailed as the final user interface. These frames are neater representations of your design direction and typically employ one or two monochromatic colors. The goal here is to illustrate a more faithful representation of layout, typography, and design patterns.
High-fidelity wireframes are typically what you’ll find on Dribbble and Behance. These frames are a near-perfect representation (size, layout, design elements, etc.) of the application after it’s developed.
If you have the budget and time to test your designs with real users (which we always recommend), the next step is to build a prototype from all the wireframes you designed in the previous step. Figma is a fantastic tool to do that!
Think about tasks that you want users to complete in a real-world scenario (scenarios help users to visualize real situations they would use the app in). All task flows should have a clear starting point and a point of completion.
Scenario: Lisa has completed the third quarter of her residency.
Task: Evaluate Lisa’s performance in the residency app and review her summarized results.
Decide if you want to give users a lot or limited freedom in your prototype. Will there be only one way to complete a task, or will they be able to click anywhere to get there? Then connect all buttons with screens and all actions that the user can take within your flow.
You can also choose how screens should transition into each other (instantly, dissolving, or smart-animated). And don’t forget to test your flows a couple of times by yourself or with a teammate.
Make sure your users are set up for success and who knows, maybe during the process of building your prototype you’ll discover discrepancies that can be solved before moving on to usability testing.
Are you curious about how we tested our Software Residency App designs with a prototype and what we learned from talking to real users? Stay tuned and visit the ZEAL blog again next week. Until then, let’s talk about your next idea. We can’t wait to hear from you!
Photo by Kelly Sikkema on Unsplash
This article has been written in collaboration with Lisa Panke.
Are you ready to build something brilliant? We're ready to help.
.jpg)
