I’ve been wanting to write for a while about some of the amazing tools we have at our disposal today to build functional prototypes. If you are a service/UX designer interested in advanced prototyping, do keep reading.
As designers we tend to assume that prototyping means using paper, Playmobil, photography, InVision, Framer, video mockups (for those still using After Effects), or any of the many, many other tools out there. When designing for (mobile) services, however, you sometimes want to go a little further than just a standalone user experience prototype. What happens when your product is used on a day-to-day basis and you actually try to live with it? Perhaps you want to be able to validate more complex things such as testing your concept in different usage contexts, or asynchronous communication between people and devices. If you ever designed a communication service, you’ll know how complex the latter can be.
On the other hand, you do not necessarily want to explore possible solutions using a live product, even if you are Google or Facebook, or you do have a beta program. You may not actually have anything in active development, so creating a separate branch on GitHub is also not an option. Simply put, it looks like you’re going to spend your time and money getting support from a software engineer. Or should you?
The Code Red prototype
The thought of any additional cost and the intention to build a functional prototype for our Code Red healthcare concept pushed me to try something different, and I wanted to see how far I would be able to take it. Since our Code Red concept depends heavily on a communication layer, I decided to give the ‘Backend As A Service’ offerings from Layer and Quickblox a try. Our goal was to build an iOS prototype with the essential (MVP-ish) functionality, offering us a playground where we can freely experiment with different design concepts.
The package I was looking for would need to offer the following 3 capabilities:
- An end-to-end messaging service: create connections and conversations, invite people, send and receive messages and receive push notifications.
- The ability to store small amounts of user-specific content: e.g. store attributes such as profile photos.
- The ability to synchronise parameter values: people using Code Red have a status indicator that is always kept in sync between devices and shared with the people they’re connected to.
A few of the cloud-based services that offer a fully-functional messaging backend, along with many other features
Wiring it all up
Although Layer definitely feels more polished, I ended up using Quickblox given their attractive pricing scheme. A couple of additions to my Cocoapods file, and I was ready to connect my app to the Quickblox service. After setting everything up and a good 2-3 weeks of quality time in XCode, we ended up with a great validation tool for design concepts that we can share with others, thanks to a small HockeyApp distribution.
You do need coding skills to be able to build something like our Code Red prototype, and it sometimes requires a fair amount of patience and a lot of reading. As an example, trying to get push notifications working on iOS can be a bit intimidating. Despite this, it has worked out extremely well for us and it can be a very rewarding process to go through. I should also note here that Cocoapods probably deserves its own blog post, because it’s one of the tools that has made development with services such as Quickblox so much more accessible.
In the end, the initial investment and learning curve may be well worth it if you consider the benefits:
- Ability to quickly build and validate different design concepts on top of a fully functional service
- Having something you can easily distribute and share
- Less dependency on engineering
- Fail even faster without it impacting a live product or critical user-base
I feel that we are getting closer and closer to a point where we can just plug these frameworks into our prototypes and activate them with a few basic configuration options. Perhaps an interesting next step for the latest prototyping tool from my friends at Facebook.