Story-centered design: how to make a prototype in PowerPoint
When I started my career as a management consultant, I was surprised at how versatile PowerPoint was. We used it for everything from seating charts to market-entry strategies for Fortune 500 clients.
At Astrid, I found a new use for PowerPoint: building prototypes. These clickable mockups are great for rapidly testing with users and applying what you learn right away. They simulate the experience of using a website or app without having to write any code. Braden Kowitz described how the Google Ventures Design Studio uses clickable mockups in a previous GV Library article.
Here’s an example of a prototype I created using the process below.
1. Prepare your slides
Start by creating a PowerPoint file and setting the appropriate size in page setup. The actual size doesn’t matter as much as the aspect ratio — you’ll want to match the aspect ratio of the platform you’re designing for (desktop, tablet, or phone).
Create one slide for each state of your prototype. For example, a product setting with on and off states requires two slides. You’ll end up with quite a few slides, so it’s helpful to organize by adding sections in the thumbnail view on the left side of your screen.
2. Create the UI
Now it’s time to create the UI. The most straightforward approach is to create your UI directly in PowerPoint — use templates like Keynotopia’s or just build it from scratch.
If you’re really handy in Photoshop, Illustrator, or another app, you can create UI mockups there and make it clickable in PowerPoint. Here are some tips:
- Export common UI elements (like backgrounds, buttons, etc) separately and use them to build the necessary states in PowerPoint.
- Leave text out of your mockups and instead use PowerPoint’s text boxes — this will help you quickly create different states and make changes after usability tests.
- Use transparent PNGs to simulate effects like Lightbox.
- To save time, you can export mockups as complete screens (instead of separate pieces), but it’ll be much harder to make changes later.
3. Make it interactive
Now the fun part: making your mockups come alive.
First, select all slides in the thumbnails pane and disable “Advance slide on mouse click” (under “Transitions”). Web pages and apps don’t advance when you click just anywhere, so you’ll want to emulate this behavior in your prototype.
Next, link clickable elements like buttons and menus to their appropriate destination slides by right clicking and selecting “Hyperlink.” For example, if you have on and off states for a button, have the button link to the slide that shows the opposite state.
Link to specific slide numbers (for example, “Slide 5” instead of “Next slide”) and the links will automatically update even if you move slides around or insert new slides.
4. Use these advanced techniques to make your prototype really shine
Invisible boxes
These inconspicuous heroes are great if you need to add a clickable area where there is no separate element to select. Use the rectangle shape tool to draw a box, double click, select no fill and no line, then link away.
Invisible boxes are also useful when a tappable area in an app needs to be bigger than the actual UI element. (For reference, Apple suggests tappable areas should be at least 44 points by 44 points.)
If you copy invisible boxes and paste them in another slide, the boxes will appear in the exact same position on the new slide. This can be handy when working on a series of slides that are variations of the same state.
Decoy screens
Certain situations call for special transitions. For example, a welcome walkthrough for an app might have screens that swipe left as the user taps a “next” button.
In these cases, you can’t simply apply animation to a slide — transitions are tied to the introduction of the second slide (rather than the exit of the first), so you’ll trigger the same animation every time the slide loads. That’ll mess up your hyperlinks and ruin the illusion.
The solution is to create a decoy slide. When you need special transitions, create two identical slides — the first is a decoy with the sole job of displaying the animation. Set the decoy slide to automatically advance to the second, identical slide. Then hyperlink to the second slide to avoid the transition when needed.
Learn before you launch with a quick study
When your prototype is finished, conducting user research can be as simple as firing up presentation mode and watching someone use it.
You can even use a prototype like this to simulate interactivity on a mobile phone. The Google Ventures Design Studio uses Keynote to build prototypes, then exports a hyperlinked PDF and opens it in GoodReader on an iPhone. Research participants can click through the prototype like it’s the real thing!
To learn more about user research, check out the Design Staff guide to research.
Have you ever tested with clickable mockups? I’d love to hear about your experiences in the comments.
