Building software for enterprise-level customers requires us to get a working version of a product into the hands of our clients as quickly as possible—but this can be expensive. During a traditional development sprint we would build wireframes, develop custom code, experiment with new gestures, plan out interactions, setup different screen flows, and deploy for user testing.
After all of this time and resources spent working on a project, we would still sometimes end up throwing away code or find ourselves with avoidable technical debt. And then on top of that, we would spend time communicating a different approach or intent with our team and with the customer. And then we would do it all over again.
To avoid this costly waste of time and resources at Maestro, we’ve modified the traditional sprint to include prototyping. It is an important step in testing our assumptions against user needs early in the process, and learning how the product will actually feel when in the hands of our 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 now 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 nice case study showing how a design problem was solved through prototyping.
- ”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.
“Make prototypes, not promises.” — Jason Pamental
Where the process of introducing prototypes becomes invaluable is in an already established development process. At Maestro, we have 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 helps us align our expectations and efforts in building these features. We could easily talk through or document all of the details and interactions that happen on screen, in fact, it’s still a battle we face everyday, but the ability to create something real removes all of the clutter and confusion, and prompts a much more productive conversation as a team.
STEP 1: Getting Started
Once a problem is defined, or a new feature is planned, a designer and developer will do some quick, collaborative sketching together. We will talk through the ways a user interacts with the elements on screen, basic interactions and transitions, 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 will work 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 to only 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 will 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 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 in pattern, and along the way, differentiate our products.
Pixate allows us to build these interactions using real, device-specific animations and gestures. We are able to 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 handoff, 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 didn’t rush into the change, we didn’t separate design from development, we moved in parallel. Allowing 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. I think you will find that the boosted success rates of your projects, improved communication among your team and increased customer satisfaction will be well worth it.
We’ve got a library of resources to help make your learning more effective.Take a Look