Designing interactive experiences: level up your prototypes

From game engines to cross-reality creation tools. Our prototypes are evolving and so should you.

A Real World Example

Let鈥檚 say the team wants to make an augmented reality experience for a guided tour.

Imagine that the first task on the agenda is to identify and prototype how the user will find their way around the space. Suppose that, as the designer, you opt for digital signposting. How do you go about prototyping this?

Briefly speaking, any good prototype should do two things:

  1. Communicate an idea in a timely and cost-effective manner.

  2. Validate that your idea works.

As designers, we typically have an innate ability to envision what the end experience might look like. You might be absolutely positive that your idea is going to work. But there will no doubt be a sense of uncertainty amongst the rest of the team. Engineers, Producers, and Artists alike will all have their own questions regarding the prototype you put forward.

鈥淚s this really going to work?鈥, 鈥淲hat happens when I lose tracking?鈥, 鈥淗ow far away do I have to stand to see the sign?鈥, 鈥淲hat happens if I don鈥檛 look up?鈥, 鈥淗ow does it look if I鈥檓 really tall?鈥 and so on.

These are all entirely valid questions, and typically, you won't know the answers until an engineer interprets your design and produces something tangible to test.

At that point, you鈥檒l be able to report back on the general 鈥渇eel鈥 of the interaction and begin working in parallel with others to solve those questions that were posed earlier. This is a common workflow amongst teams and one that studios have utilised for years. It鈥檚 part and parcel of the design process.

However, times are changing and designers are leveling up.

We can validate our idea by building a dynamic prototype. With a dynamic prototype, we create something interactive and add some spatial context using 3D. Now we鈥檙e effectively building a simulation of the final product or interaction and solving the questions that were posed earlier.

Prototype of an Interactive, guided AR tour for the LA 草莓视频在线 office.

With the ever-increasing number of game engines and interactive experience builders at our disposal, there鈥檚 never been a better time to start elevating your prototypes in this way.

Long gone are the days when suggesting an interactive prototype is met with words like 鈥渢ime-consuming鈥 or 鈥渆xpensive.鈥 In today's world, it鈥檚 considered 鈥渞apid prototyping鈥 and for good reason. We can build prototypes blazingly fast and in vast quantities too.

With the right tools and the right mindset, we can build prototypes in a matter of minutes.


Who Are You Prototyping For?

This might sound like a bit of a silly question, and you shouldn鈥檛 have to think about it for too long. But depending on who the intended audience is (ie, the recipient of your prototype), the approach you take might vary slightly and your goals might change.

In most cases, you鈥檒l want to design for everyone. Design, Art, Engineering, and Client. But if you don't have to design for everyone, then don鈥檛. When it comes to prototyping, always save time where you can.

Design

In this case, you鈥檙e designing for yourself and the wider design team. You鈥檙e essentially asking these questions: 鈥淒oes this idea or experience make sense? Is it fun? Does it work? What are the issues with it? How do we make it better?鈥 And so on.

You鈥檒l always be designing for yourself. And this should be your main priority.

Engineering / Art

It鈥檚 almost never your responsibility as a Designer to write immaculate code or build the foundations for the back-end architecture of a new project. Nor should it be one of any artistic merit.

If you鈥檙e designing prototypes to help the Engineers or Art Department, it鈥檚 often to convey two things. 鈥淭his is how the thing should behave,鈥 and more importantly 鈥淭his is how it should feel.鈥

If your prototypes achieve those two things, you鈥檒l be saving everyone in these departments a lot of headaches. The Engineers can take what you鈥檝e made and make it for real, with robust code and proper architecture. They don鈥檛 have to worry about interpreting things, because you鈥檝e solved most of the difficult challenges. You鈥檝e answered their questions in the context of the experience.

Clients

During any project, it can often be difficult for Clients to imagine what the end product will look or 鈥渇eel鈥 like. You can show them as many wireframes and storyboards as you desire. But it鈥檚 often not until they see something in a context that things really start to click.

With interactive prototypes, you鈥檙e showing your clients something tangible. They immediately get a sense of the 鈥渇eel鈥 of an experience and you instantly recognize the excitement it brings with it.

You鈥檒l also have to ask yourself how playable you really want your prototype to be. A lot of the time we can get away with using a lot of trickery and deception, writing things like 鈥渃ode spaghetti鈥 all in the pursuit of saving time. But if you know your client will want to experience the prototype for themselves, then you鈥檒l have to make sure there are no experience-breaking issues or at least throw in a few caveats.

Having clients experience your prototypes can be a great opportunity to get valuable feedback and buy-in from the clients. However, there is of course a time tradeoff to be had in making things 鈥減layable.鈥


Getting Started

There are a million different ways to create an interactive prototype. Many of which involve using a game engine of some kind.

Game engines can be kind of daunting at first, and the idea of coding might put you off. But most engines nowadays offer some form of visual scripting. Visual scripting is a great entry into the world of interactive prototyping and it allows you to pick up programming at a rate that suits you.

So the first question you鈥檒l want to ask yourself is鈥

Which game engine do I use?

Well, the debate over game engines and which one is better has raged on for eons. You can go down the YouTube rabbit hole like I did when I first started and spend hours learning the pros and cons of each before ultimately 鈥渃ommitting鈥 to one.

What it feels like picking your first game engine.

In short, there is no one-fits-all solution. It鈥檚 entirely dependent on what you鈥檙e making and where your priorities are as a designer or team. Over time, you should get to know and learn each engine. Learn what they offer and where they fall short. Especially when it comes to prototyping.

But generally, when people ask me about prototyping and how they can get started, I usually recommend Unity as a good starting point.

While the visual scripting in Unity is less developed than something like Unreal鈥檚 blueprints system, the community, and documentation, however, are second to none. There鈥檚 a tutorial or Reddit thread for every problem you鈥檒l ever encounter and when you鈥檙e starting out, this is absolutely vital.

Three Common Pitfalls

Now you鈥檝e got the right tools for the job, here are some common pitfalls to avoid when you get started.

鉂 Don鈥檛 Make Everything From Scratch!

What鈥檚 really important as a Designer is how we make use of our time when we鈥檙e prototyping. We want to be as efficient as possible and focused on validating ideas, not building the cogs and modelling the trinkets required to make it happen.

I鈥檝e spent countless hours in the past building custom 鈥淰R rigs鈥 for the player, or modelling a set of VR hands. But these days, I鈥檓 just using assets. They鈥檙e often so much better than anything I could cobble together myself and it just accelerates the rate at which I can work.

There's a tonne of free assets out there. But there are also some really reasonably priced ones too. Don鈥檛 be afraid to spend a few dollars if it鈥檚 going to save you several hours, or even days of work. Trust me, it鈥檚 worth it.

Here are my go-to vendors:

鉂 Don鈥檛 Overcomplicate Things!

If you鈥檙e like me and you鈥檝e been prototyping for a while, it can be deceptively easy to get caught up in the code. You鈥檒l want to make intricate systems on the backend for all sorts of things. Managing scalability, handling performance, that kind of stuff.

And sure, it鈥檚 important that you consider those things. Especially if you know you鈥檒l be working on a prototype for some time, as you won鈥檛 want to make life hard further down the road by cutting corners too soon. 

But with that said, it鈥檚 a very fine balancing act between 鈥渟moke and mirrors鈥 and making something playable. And as mentioned earlier, it鈥檚 all about who your recipients are. You could make a super scalable system, but just ask yourself, do I really need to do this? Is it going to make a difference? Am I saving myself time in the long run, or just wasting it?

鉂 Don鈥檛 Be Too Precious!

We briefly touched on the idea of 鈥渞apid prototyping鈥 and with that, comes the notion of throwing things away. An interactive prototype not only simulates an experience or idea but also attempts to validate it.

Not every prototype can be validated though, and that鈥檚 okay.

Don鈥檛 be scared to mix things up if your prototype isn鈥檛 working. In many ways, a failed prototype is a successful prototype. It's served its purpose. Now we have the opportunity to rethink, pivot, and change our approach in the next iteration.

This type of mindset can help us to make informed decisions before going too far down a particular path and in turn, will help save the team precious engineering cycles.

Three Best Practices

鉁 Choose The Right Tool

So I spoke briefly about game engines, and while they鈥檙e fantastic tools for prototyping, they can also come with a lot of baggage, and sometimes you don't need everything they have to offer.

Sometimes it鈥檚 faster or more convenient to use alternative tools.

Let鈥檚 say you want to prototype what it鈥檚 like to simply explore a space, or understand how it feels when multiple users are in a room together, then there are plenty of other great ways to do that.

Ultra Modern Art Gallery built using 鈥楥onnected Spaces鈥 by 草莓视频在线.
Space by: Peter

One tool that I find I鈥檓 using more and more is the 鈥楥onnected Spaces鈥 platform by 草莓视频在线. It鈥檚 a cross-reality, cross-device platform that unites the physical and digital worlds.

As a designer, it鈥檚 the perfect tool for quickly iterating on multiplayer spaces. If you鈥檙e interested in trying this tool out for yourself, you can learn more here.

鉁 Make Reusable Code

Once you really start to get stuck in, you鈥檒l notice how often you begin to repeat the same old actions, whether it鈥檚 making something face the camera or making an object do something when you click on it. This process quickly becomes monotonous, but it鈥檚 also a hard habit to break. You think to yourself, 鈥渂y the time I鈥檝e opened the last project, found what I鈥檓 looking for and migrated it to the new project, I could of already remade it!鈥 And that鈥檚 most likely the case, but when you do it 100 times over and there鈥檚 multiple designers, you need to start thinking about reusability. This could be in the form of making generic scripts that handle these things, or creating custom tooling.

To handle this problem at 草莓视频在线, we built our very own 鈥湶葺悠翟谙 Design Toolkit鈥 or as we refer to it, the MDT. Not only is it about saving time, but it鈥檚 also about empowering designers of all levels to get interactive.

A glimpse into the 草莓视频在线 Design Toolkit (UE5).

In essence, it鈥檚 a library of components, scripts, and assets that we use ALL the time.
Here are a few of my most used tools:

  • Particle Library.

  • UI Component Library.

  • Smooth Transforms (Ie, quickly transforming the scale, position and rotation of objects using nifty animation curves)

  • Dynamic meshes along a spline.

  • Simulation AR inside of VR.

And no doubt over time, you鈥檒l begin collating your own set of reusable scripts and tools. And then you too can make a toolkit.

And Finally, Have Fun With It!

99% percent of the time, designing an experience is not soley about functionality or usability. It鈥檚 also about creating something fun and compelling for the end-user to experience.

By prioritizing fun and enjoyment within the design process, designers can work together to create more successful and memorable experiences.

A recent game jam at 草莓视频在线 where designers transformed 鈥渕undane office tasks鈥 into a 鈥渃ompelling game loop with hilarious interactions.鈥

Here at 草莓视频在线, "Finding the fun" is often an essential part of our process. This is especially true when working with augmented and virtual realities, where the need for compelling interactions is amplified.

Designers should able to experiment and discover new ways to make an experience engaging. Some ways that you can do this include:

  • Running design-oriented game jams where designers band together and think outside the box.

  • Or by simply allocating time during your 鈥渄iscovery phase鈥 to allow for rapid prototyping.


In Conclusion

Interactive prototyping is a valuable tool that allows designers to create, test, and refine their ideas quickly and efficiently.

By incorporating this approach into your workflow, you can save time, reduce costs, and ultimately deliver a better product to your audience. However, it's important to remember that creativity and fun should always play a role in the prototyping process.

Stay open-minded, experiment with different approaches, and don't be afraid to take risks. And, most importantly, always keep your target audience in mind, and tailor your prototypes to their needs and preferences.

With these principles in mind, you can unlock the full potential of interactive prototyping and take your prototypes to the next level.

George Nerkowski

Senior Designer

Previous
Previous

From improv to innovation: Daisy Leak's journey to Director of Production at 草莓视频在线

Next
Next

Meet the Magnopians: Ivone Alexandre