Building software for enterprise-level customers requires getting a working version of a product into the hands of your clients as quickly as possible. But this can be expensive. During a traditional development sprint, you builds wireframes, develops custom code, experiments with new gestures, plans out interactions, sets up different screen flows, and deploys for user testing.
After all of this time and resources spent working on a project, you still sometimes end up throwing away code or finding yourself with avoidable technical debt. And then on top of that, you may still spend time communicating a different approach with your team and with the customer. And then that same process would happen all over again.
To avoid this costly waste of time and resources at Maestro, we’ve modified the traditional sprint to include prototyping. It’s an important step to test your assumptions against user needs early in the process and learn how the product will feel when in the hands of your customers.
Interactive prototyping has become a popular topic, as new tools are introduced to make it easier for anyone to present an app concept or showcase an animation on a device using native interactions and gestures.
This topic is so popular that there is a wide range of new articles explaining the innovative tools available for prototyping. Here are a few to help get you started:
- “Prototyping Tools”
Breaking down the pros and cons to some of today’s most popular prototyping tools and applications.
- “Designing the Lyft Split Payment Experience Using Pixate and Framer”
A great case study showing how prototyping solved a design problem.
- “How Prototyping is Replacing Documentation”
A simple approach to replacing static deliverables with robust prototypes
- “Prototyping Interactive Animation”
A UX designers journey through the different prototyping tools available.
The process of introducing prototypes has become invaluable during the already established development process. At Maestro, we’ve been refining our workflow to make sure that our entire project team is involved in producing, providing feedback, and iterating on prototypes at an early stage of features or user stories.
This process helps us align our expectations and efforts in building these features. We could easily talk through or document all the details and interactions that happen on screen—in fact, it’s still a battle we face every day—but the ability to create something real removes all confusion and prompts a much more productive conversation as a team.
Here’s how we use prototyping for our clients:
Step 1: Getting started
Once a problem is defined or a new feature is planned, a designer and developer do some quick, collaborative sketching together. We talk through the ways a user interacts with the elements on the screen, how transitions happen during the experience, and explore the use of standard and custom controls.
This pairing of designer and developer benefits the product immensely, as both approach the problem differently. Decisions can be made early, and both can advocate on behalf of the user. These quick, paper sketches are then refined and organized to show a potential flow through the set features.
Step 2: Exploring flow
At the beginning of this stage, the designer works to get basic wireframes into Invision. This allows the team to see how a user will move from screen to screen, using an actual device. Invision brings to life that which used only to be static PDFs of wireframes accompanied by written instructions and descriptions of how the user would use it.
And just like that, we have a working prototype. It’s crude, might only include 2-4 screens, and hasn’t had much UI applied to it, but our team now has something on our devices that shows how the product will function. From there, we collect feedback from internal teams and our clients and iterate until we’ve tested all of our assumptions. At this stage, we also start advancing the wireframes with UI elements and begin to see how a finished product will feel.
Step 3: Designing delight
With products, the ability to delight a user is paramount in achieving repeatable use. With the help of micro-interactions, we can go a long way in achieving this. Micro-interactions, also called micro-moments, are the touches that help a user feel validated and rewarded and potentially fall in love with your product. At an early stage in the development, we start exploring how we can use animations, transitions, and gestures to help users establish a usage pattern, and along the way, differentiate our products.
Pixate allows us to build these interactions using real, device-specific animations and gestures. We can bring our custom UI elements into the app and start interacting without a single line of code. We can then share these prototypes with our team to help visually demonstrate how an interaction should feel. This is a huge step forward over the days of documenting each interaction with static screens and written animation notes.
Step 4: Sprinting in parallel
By starting the workflow with the pairing of a designer and a developer, it is easier to maintain that collaborative relationship throughout the project. No longer is there a hand-off, but rather a dance that requires a share of leadership. We are constantly building our prototypes, testing, presenting, and iterating throughout the process. So when we do have features developed, pivoting becomes less of a brash decision, but more of a calculated move. We don’t rush into change and we don’t separate design from development—we moved in parallel. This teamwork allows us to get ideas into the hands of our users quickly and develop meaningful features that we know will work.
Prototyping has helped our team to conserve valuable time and resources. It has also improved our ability to better serve our clients, which is imperative to us. It’s not a quick change, but it is one worth exploring. You will find that boosted success rates of your projects, improved communication among your team, and increased customer satisfaction will make the change well worth it.
Interested in seeing more ways to boost your projects success?
We've got a library of resources to help make your efforts more effective.Check it out!