A practical guide to creating a seamless presentation
When key stakeholders are unable to attend design reviews and are left to check out the work at a later time, no one wins. Your client misses out on important context about your process and conclusions, and the design team doesn’t have an opportunity to solicit contextual feedback of the highest utility. Schedules won’t always align when it comes to client services — it’s just a fact of life. So instead of implementing reactive processes in the midst of uncertainty, I’ve shifted my approach to a proactive one: by introducing interactive and narrative prototyping, you’ll offer clients necessary context while also facilitating the curation of feedback your team needs.
I recently joined Accomplice as a Senior Experience Designer, and one of my core responsibilities is to formulate, articulate, and defend design choices and rationale. I’ve found that the easiest and most effective way to do this is by displaying designs in a working prototype. This isn’t a revolutionary idea. When a client can see the design, click around, and truly interact with the flow, they’re much more likely to understand the concept and provide the feedback you need to make the product better. The majority of our sprint demos involve introducing prototypes during the early stages of the design process, which inherently prevents potential hiccups down the road.
That said, as the industry shifts away from traditional presentations and more towards working prototypes, I’ve noticed there’s been a lack of consideration for how a designer should actually present the prototype.
If you’re making quick, iterative prototypes, the first screen you present is likely part of a small section of an application. This might be a screen in account settings or potentially a screen during an e-commerce checkout flow. Regardless of the scenario, the client is typically thrown immediately into the middle of the feature so that the design team can get sign-off on how a specific interaction will function. Without proper context, this can be disorienting for stakeholders — especially once your prototype link starts circulating the client’s office.
So, how do you present a prototype that provides proper context, which in turn allows you to receive appropriate feedback? Here are a few tips and tricks that I’ve adopted along the way.
3 Tips to Improve Your Prototype Presentation
1. Set Expectations
It never hurts to add context to the beginning of your prototype that explains what stage of the design process you’re in.
With the lack of color and visual imagery, wireframes can be hard for a client to wrap their head around. Ever received repeated questions and feedback asking why your design (*cough* wireframe) only uses shades of gray? Add a screen before your design flow that explains what wireframes are and explicitly states what you’d like the client to focus on instead.
Depending on the audience and complexity of the project, I’ve also found it helpful to create a faux “disclaimer” screen to preface the working prototype. The disclaimer might reiterate that not all of the logic will function appropriately in the prototype or perhaps the prototype includes fake data that may be inconsistent across a few screens. By creating a friendly disclaimer screen, you can require the client to check a box attesting that they understand the intent of the prototype before moving forward. You’d be surprised how well this works!
2. Ditch The Extra Program
If you’re using a traditional presentation program (i.e., Keynote, InDesign, Google Slides, or the ever beloved PowerPoint) to create additional slides to accompany your prototype — this is likely slowing down your workflow. Maintaining deliverables in different programs can easily allow for things to slip through the cracks or get lost in translation. It can also be disruptive and disorienting during a presentation to jump back and forth between a PDF and a prototype.
Instead of using one of these separate programs to create slides, try creating your slides in Figma or Sketch. By using your frames/artboards as actual presentation slides, you can quickly hook these “screens” up at the beginning of your prototype to provide the little bit of extra context needed.
Not only does this save time, but it also allows for a seamless transition between the traditional presentation-like slides and the actual working prototype. Less time jumbling between different applications or tabs, and more time presenting the real work!
3. Make It Easy To Navigate
If you’re presenting a complicated flow that needs additional annotations, start by creating a screen that serves as the home base for your prototype. You likely want to keep the working prototype separate from any supplementary documentation; that way, the client doesn’t get bogged down or distracted with the paragraphs of text to the right of your screen.
Use the home base similar to a Choose Your Own Adventure book — by allowing the client to easily switch between the working prototype and supplementary documentation through descriptive buttons. It’s also essential to anchor a “close prototype” button on the bottom of the screens which allows the client to quickly escape to home base without pressing the arrows on their keyboard 50 times.
It can be immensely helpful to make buttons as descriptive as possible, especially when the prototype is a leave-behind, and your client is left to their own devices. In addition to this, keeping annotations or extra documentation within the same prototype link will ensure that nothing gets lost in translation.
Ready to get started?
Check out an example prototype that I created in Figma here.
Presenting Prototypes was originally published in accpl on Medium, where people are continuing the conversation by highlighting and responding to this story.
Powered by WPeMatico
