Figma had been doing a decent job of letting me specify the product I am working on. However, there were some pretty serious gaps.
- Performance was a constant problem. First time load: 20 seconds. Freezing the screen, about 20 times a day.
- Community is ridiculously slow to load/use
- Strange behavior pretty frequently
Also, a more important problem came up. As my prototype approached 80 screens, it started getting harder and harder to add/change things. What should have taken me minutes was taking me closer to an hour. Maintenance was getting harder and harder. Also, I noticed that presenting the prototype to people, I would often have to explain things that the screens should be able to explain themselves.
The missing ingredient? Animation.
Animation helps demonstrate the USE of the product, not just the screens. To test my theory, I did a side-by-side comparison. I showed the product via the prototype and then the same screens in PowerPoint with animations.
As example, take a look at this single slide from the original Marketo design circa 2007. It’s not pixel perfect, but it’s in the ballpark. I call it Upper Middle Class Fidelity.
Look at the slide in presentation mode. Notice the technique of the hand moving to the right and dragging something to the left. To me, this is the core of the user experience of Marketo. Grab on the right, and drag it into the canvas. I tried to explain this at the time to people on a white board, but this single slide made people feel differently. Their eyes widened. They said, “Ooooooh, I get it.” Keep in mind, at the time, drag and drop like that was pretty rare.
When I did the side-by-side test of my current project, I got the same effect. Menus sliding open, text being typed on the screen, the cursor moving…these are all powerful techniques to communicate the reality of the application. Prototypes are good if you want to simulate using the app, but not if you want to communicate more complex ideas about the design of the app.
So I switched back (AGAIN) to PowerPoint. Interesting thing happened.
I have not used PowerPoint as my primary weapon of design in several years. Microsoft has clearly been working hard on it, especially the Mac version. It has progressed quite well. Some examples:
- Concurrent editing across Mac/PC and across browser and desktop version
- Fully lights out Office 365 autosaving and version management
- Great design capabilities
It’s not perfect. Figma, Sketch, and Photoshop all have better, more exact, tools. However, I can absolutely get Upper Middle Class Fidelity with nearly the same effort that I might put into Balsamiq.
Too many designers have an ALL or NOTHING mentality about fidelity. Either it’s wire-frames or its pixel perfect. Nothing in the middle. I fundamentally disagree with this approach. The key is maximizing your return on effort. A chart would help:
I believe that for nearly the same effort as a low fidelity tool, you can have almost all of the benefit of the high fidelity tool. You would still need to produce a graphic spec separately, but that is not something that happens in B2B software most of the time. You typically only need to do that for new projects.
To be clear, PowerPoint isn’t perfect. My current wish-list is significant:
- Switch from points to pixels.
- Allow rounded corners and other styling to be specified more like CSS.
- Import fonts. Why doesn’t Microsoft have something like Google Fonts??
- Make sure the online viewer renders fonts correctly.
- Allow components (reusable widgets) that I can control centrally
- Add in size constraints so I can pin parts of a grouped element to a particular position within the larger group.
One shocking thing was how frequently the Microsoft team is updating their product. Just look at how many releases they had in December, 2017 alone! SEVEN! In case you didn’t know, December is typically the slowest month for development.
Anyway, long story short, I switched back to my old friend PowerPoint and it feels pretty awesome. I am co-authoring documents with a designer who is on a Mac and delivering the spec to engineers via the online browser.