And how does that make you feel?

User testing with interactive prototypes made in Framer X are a surefire way to build the right product, the right way.

Louis Moody
Framer
7 min readApr 24, 2019

--

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

Don’t speculate, spectate

At Octopus Labs, testing our prototypes is an integral part of our discovery and delivery process. To make sure we’ve designed our assumptions correctly, we validate our ideas from sketches to high fidelity wireframes.

So consider the following: you’re contributing to a project that will transform the way your business engages with your customers. You’re incredibly passionate about providing value to your customers and the people using your product. However, there’s some uncertainty during your design process — the possibility of whether you’re getting the most value and insightful feedback from your user testing sessions, with the prototype you created.

1. Will the ability of the prototype provide enough useful, qualitative data to inform your decisions?

2. Does the environment of the prototype make the user behave naturally, showing objectively that the prototype meets (or doesn’t) the needs of the user without giving instructions?

These are the questions I ask myself before testing any project, and although there’s plenty of different ways to test and validate your design, I’ve found that Framer has always empowered me to make the best version of a concept, quickly and effectively.

What makes the problem better?

To understand how representative users will complete user journeys in real-life situations, I turned to Framer X. Framer X is an interactive design tool powered by React — but you probably already know that.

What you might not know is that I believe Framer X is positively the best tool for creating rapid life-like interactive prototypes, that work perfectly for the ideation and prototyping stage of the product development process.
The benefits using Framer X were 5x better than any other prototyping tool I tried, and here’s why:

Framer X is compatible: Framer X behaves like a browser, so it didn’t matter how simple or complex we wanted to make the prototype, because it’s powered by the same stuff that builds our products. This allowed our prototypes to function like the real thing, and we were able to update any feedback given within our component library and online seamlessly.

Framer X is flexible: Whether we wanted to test the experiences in different screen size, or test original interactive features like a chatbot or filter function, Framer X had an answer.

Framer X is usable: It’s important to us that we don’t assist the user during the testing sessions because it results in an unfair test. Framer X enables us to focus on the behaviours of the user. We didn’t have to explain “you can’t swipe the carousel on the prototype”, or “you can’t input data into that field”.

Chatbot functionality to test whether our users find it useful

What do you expect from this experience?

User testing sessions can create much confusion if not done correctly. A simple practice we follow is to understand the user journey we’re testing, and then give the user a scenario to follow that’s relative to our assumption we’re testing.

For example, during our user testing sessions with the project I was working on, the assumption was the following:

“The user would use the chatbot to quickly find the information they’re seeking”

We wanted to understand whether integrating a chatbot feature into the website would be a practical solution. This need surfaced from our research that we discovered “our users wanted to find information about investment documents quickly”.

The scenario the user received and was to conduct during the session:

“You’re a financial adviser that needs to research a product at Octopus and want to quickly download the key documents. You land on this page, what are your next steps?”

As it turns out, only 30% of the users interacted with the chatbot, but what was the most interesting is how the 30% asked whether they “could click the button”. We said, “sure, try it”.

They were excited.

They asked questions like: “does it work?” “Will it speak back to me?” I was pleased that the prototype was successful in delivering a realistic experience and the user was motivated during the session, even if they needed a little guidance.

Design + code

A lot of the time when I talk about Framer X among my peers, they say to me that they’re afraid that they’ll face a steep learning curve when it comes to learning the framework that powers Framer X, React JS.

Though understanding React can take your prototypes to the next level, it’s not a fundamental requirement to make realistic interactive prototypes. Framer X comes with useful features right out-of-the-box. However, what’s most exclusive, is the developer community building components in the Framer X store to empower a designers workflow.

Almost anything you need to create that doesn’t require specific features to your business is available. Also, even if not, if your company has React JS employees, it’s a great way to collaborate and make something together.
Fortunately for myself, I enjoy coding and learning React has been something I’ve been doing for the past 6–8 months. So I was ready to dive in and put my recently acquired knowledge to the test.

Making the chatbot functionality was relatively simple. A chatbot component already exists in the Framer X store, but I wanted to challenge myself to build my own.

I didn’t need a communicative chatbot — the goal was to see whether the user would open the chatbot and for myself to observe the data the user would input. Would they initiate a conversation? Alternatively, would they type a keyword as if they were searching for something?

The chatbot had three interactive elements:
1. The button located in the bottom right-hand corner.
2. The modal that appears when a user interacts with the button.
3. An input field for inputting data.

The input field utilised from the Framer X store. The button and modal were made using Frames.

Here’s the code I wrote to create the “show” and “hide” function when the user interacts with the button.

Firstly, I defined my customised Bezier Curve transition.

I then set some initial parameters for my components within a Data object.

Then comes the fun part- putting everything together to make it a seamless interactive experience. The following code toggles the parameters within this Data object when the user has interacted with the button.

The code may seem a little overwhelming if you’re not familiar, but honestly, it’s pretty simple once you understand the fundamentals. I suggest to practice and try, try again.

Some resources you can use to learn React and Framer X

And that’s it…

I hope you enjoyed and learned something from this article. Maybe it has even inspired you to learn that Framer X is much more than a prototyping tool.

I think of Framer X as a platform to innovate products by enhancing your design process and solving complex problems using the power of the Framer community. You can try out a free 14-day trial using this download link.

Thanks for reading. I hope you enjoyed and learned something from this article. Feedback welcomed in the comments.

Hi, I’m Louis Moody.
I’m a product designer from Shoreditch, London.
Check out my Instagram and Twitter to follow my process and to stay in the loop.

--

--

Louis Moody
Framer

An impact designer, holistic thinker igniting the imagination to see what’s possible.