They say that life is about the journey, not the destination. But destinations are nice places to be in, aren’t they? For a UX designer, reaching your dream destination means basking in the sleek interactiveness of a final website, app or product. Yet during the journey to a successful UX design, it can be tough to get a full sense of the product until the very last stages of development. Without the final masterpiece at hand, how do you know for sure that your vision is really going to work – and how can other people on the team take your word for it? And once you do get to the finish line, past all of the designing, revising and coding – making any additional modifications becomes much more complex. Having great mockups can definitely help you navigate through this UX journey, but then again, sometimes you need to be able to interact with a living, breathing product. This is exactly where my job as a UX prototyper comes in.
What is UX prototyping?
As a UX prototyper at Wix, I create code-based environments that behave, look and feel just like the real product. It’s as close to the real thing as it gets – except that it’s much faster to produce. Because of their relative quickness, prototypes are created during the design process, as an integral part of it. The aim? To improve our decision-making whilst working on the product’s design. My mission is to create a model that will simulate the real product, where almost every button and every hover will react as it would in the website or app itself. I make sure to include all of the complex interactions that add to the personality of a website or app, such as animations, flows, panels and other micro features. This can potentially save a lot of time for both the design and development processes. Different tech companies may refer to this field by varying terms, but whether you call it UX engineering, design technology or UX developing, the same idea remains: it’s about using code in order to test and improve design.
Creating an initial version of the final product is nothing new – most designers are already accustomed to using mockups as a part of their work process. But while mockups are, too, a means of communicating and testing ideas, prototypes offer an additional level of insight into the product. Therefore, prototypes shouldn’t come in place of mockups. Instead, the two tools can each provide a different way of understanding the product. While mockups represent a linear, static flow of the design, a prototype allows for a flow that you and your team can interact with, enabling you to play, feel and test your ideas. Additionally, unlike a mockup that first requires a few introductory sentences in order to understand it, a prototype is more self-explanatory and can stand on its own.
Prototype for component copy editing:
The live product:
A prototype is an environment that behaves, looks and feels like the live product.
Why should you use prototypes?
As a UX prototyper who’s at the intersection of design and code, my main priority is to work closely with designers in order to bridge the gap between design and development. By using code during the design process, designers can get a true sense of their product and in turn, optimize their process, make better decisions, and release better products. Here are a few of the main advantages of including prototyping into the design process:
– Make more adaptations early on:
Prototypes allow us to discover issues we might have otherwise only noticed much later, during the development. Making more changes earlier on can, in turn, save both time and money in the design process.
– Experience more of the product:
Having an early version of the product to interact with can also help expose the exceptional cases (and not only the happy paths), enabling us to make any necessary changes and revisions in the design.
– Increase innovation in design:
In cases of designing products with non-existing stage behaviors, prototypes act as a great tool for designers to experiment with.
– Improve communication:
Using a prototype, a designer can quickly present a live, working feature that has never previously existed. This can make brainstorming sessions much more effective and help in discussing new concepts.
– Conduct usability testing:
Prototypes are an opportunity to conduct usability testing prior to development, during the design process itself – and as a result, you can gain a valuable source of design feedback.
Prototypes allow us to create amazing micro-interactions with minimal effort.
Prototyping and usability testing: a case study
A recent project I worked on at Wix is a great example of how closely interlinked prototyping and UX design can be. The interface in question was an existing part of the Wix Bookings flow, one that many users found to be particularly confusing and was in need of an update. It’s a small, yet important step in the booking funnel, where users are requested to specify the kind of service that they provide, and state whether it’s a course, class or appointment. Looking to replace its current tooltip interface, the team came up with four new redesign options. They all looked equally promising and had their different pros and cons, but picking out a single winner turned out to be a surprisingly simple task.
The idea was to take all of the design versions to real users and see how they’d interact with them using usability testing. Due to time constraints, it wasn’t feasible for the designs to be sent out to development. Instead, I was asked to rise to the task of creating four different prototype versions under the not-too-flexible deadline of just one week. It was challenging, but we made it work. During that week, the more progress I made with the prototypes, the better the designers could get a feel for the products, and together we made many last-minute tweaks and updates. Seeing how the prototypes behaved helped the team communicate better in regards to the product, and each team member could formulate and articulate their ideas more clearly. As a result, this helped us maximize the versions we’d eventually show our users. The UX designers I was working with expressed just how helpful they found the prototypes to be. Having this kind of live, functioning product in such an early stage of the process, they said, helped them be more specific in their intent, and collaborate better as a team.
At the end of the week, the team met up with a few users in the San Francisco Wix offices, and watched them as they interacted with the product. While as the UX prototyper, I was not on-site for these sessions, I was constantly at the beck and call, revising the prototypes in real time. The ease of modifying and editing a prototype enabled us to keep adapting and improving even during the usability tests themselves.
Prototype for booking services, version 1:
Prototype for booking services, version 2:
Prototypes of different design versions of the same funnel, as applied in a usability test.
We were all surprised with how clear-cut the results of those sessions were, with one of the design options being clearly more user-friendly than the rest. It turned out that the design that made the funnel one step longer was in fact the clearest to understand, as the extra step functioned as an introduction, easing users into the process (version one). In hindsight, it’s possible that my team might have opted for this option to begin with, based on an educated guess, personal taste or even gut feeling. But with the help of the prototypes and usability testing, we were able to come up with a more well-informed decision and keep improving and perfecting the design early on in the process, before starting any of the developing work. After all, when you get a real-life sneak peek of your final destination, that’s when you can truly enjoy the journey.
