“If a picture is worth a thousand words, a prototype is worth a thousand meetings.” — IDEO
Prototyping is a core fundamental of the design thinking process. Born out of industrial design, prototyping can be an iterative process to realize a product in the real world. Web site designs are demoed on a computer screen, printed designs are printed on a laser printer before going to press, even print newspaper redesigns print prototype copies. In all these cases, a product is made as real as possible to validate the design solution.
Reasons to prototype
- Design iteration & validation
- Show and tell
- User testing
- Development collaboration
All of these reasons justify using SwiftUI for prototyping. They also justify many other solutions from Figma to Keynote and every prototyping app already out there.
Your app will exist on a real phone held one handed while the customer is busying doing something else. At some point in your design process, a version of your design should be validated. After all your ideation and explorations in Figma or Sketch, you’ll want to test drive the best options on device, getting a feel for the design and interaction in the real world.
The distance from your eyes to a computer screen on your desk is different than to the iPhone held in your hand. Interacting with your design will show you if the placement of elements is natural, and any buttons or interactions reachable by your thumb.
A prototype should be the first option of your app design. Both Figma and Sketch have companion apps you can push your prototype to. And if all you plan to do is view your designs on the phone, that’s your best opportunity to begin iterating your interface.
There’s no wrong way to prototype. But the best tool can depend on your design process, time and skill-set. SwiftUI is not for everyone, and not for every situation. A design sprint workshop might call for pen & paper mockups. A quick addition to an existing app might only need a click-through demo in Figma. But a brand new app with an innovative interface might be better served with a working proof of concept. And a new feature with a complicated experience and flow may be easier to validate when you can observe customers using the app on a real phone.
Why use SwiftUI to prototype?
Most software for creating near realistic on device prototypes is limited. We have a wide range from design apps to dedicated prototyping tools. With design apps, prototyping has been tacked on. Design apps offer simple prototyping tools useful for the most basic interactions. Apps such as Figma are getting better, but their focus remains the design tools.
At the other end you have dedicated prototyping apps such as Protopie or Flinto that excel at prototyping features but offer limited design tools. These apps also come with another learning curve.
SwiftUI and Xcode do not pretend to be design tools, and this approach also comes with a learning curve. Any designer who’s played around with basic html can easily tackle SwiftUI.
There are many advantages to using SwiftUI that can outweigh other prototyping tools, but also one important constraint—getting the finished app onto an iPhone for testing. Thanks to remote working and the ease of having remote participants for user testing, installing the app creates another step, although not too far from asking participants to install a prototype viewer. In general there are still a number of issues with mobile app user testing.