Replai Cuts Product Development Time from Weeks to Days
In this case study, the team at Replai explain how user testing with Framer allows them to iterate and test a new product in a matter of days.
Replai is changing the way we release and engage with social content. Though the product began as a tool to help streamers monetize highly engaging short videos, they are now evolving to bring their AI technology to content creators of all industries. From the very beginning, user testing has been at the core of their process. In meeting with promoters, teams, brands, and gamers, they've worked hard to ensure that features being worked on were exactly what users needed to be successful. Learn how Framer has become a crucial part of their design and user testing workflow.
Finding a design tool that fits
Finding the right tool for your team doesn’t happen overnight. For the Replai team, it came down to a need for deep collaboration and output of high-fidelity prototypes that were indistinguishable from the actual product.
Lead UX designer, Roberto Andrade, started using Sketch to design new versions of their product primarily because it was the tool he was used to and fulfilled his needs. But as the team expanded, Andrade realized that Sketch was falling short because there was no easy way for the whole team to collaborate on new ideas. With many team members working remotely from different countries, it wad crucial for everyone to be able to collaborate in real-time, give feedback, and work together in the same canvas.
Considering their need for a web-based platform, the Replai team then decided to move to Figma, which allowed them to collaborate in real-time. Multi-player functionality and commenting allowed both developers and the marketing team to engage with new designs. This cross-team participation ensured everyone was on the same page and had a seat at the table. This allowed the team to move fast during the design process, but a new issue soon cropped up. With Replai’s dependance on user testing, they needed to be able to show testers a prototype that would behave exactly like the real app. Given this criteria, designers soon hit a wall with Figma’s output not being the level of realism needed to produce the quality of feedback they needed.
“We needed a tool that would allow us to collaborate with those from marketing as well as developers. And in addition to that, we needed a tool that would allow us to user test real products with end users.”
— Roberto Andrade, UX Lead at Replai
Real-time collaboration, as well as the ability to create apps that work just like the real thing, led the Replai team to fully switch to Framer.
The lightbulb moment
Members from every team throughout Replai quickly realized the value of Framer during one of the first guerrilla user testing sessions for their new product. As Andrade explained, the team scheduled a number of user testing sessions with the goal of validating multiple app flows with potential users. The Replai team first considered developing an entire app, complete with designs and core functionality just for the purposes of user testing. They quickly realized it was unnecessary to invest developer resources in an MVP when they could create a high-fidelity prototype in Framer in a quarter of the time.
“The fact is that we were able to join forces between designer and software engineers all collaboratively working on this Framer prototype, and within a couple hours of work we had a design ready to conduct our user tests, which is surprising considering that the engineering team had never worked with Framer before.”
— Gustavo Silva, Software Engineer at Replai
Prior to the sessions, copywriters, developers and other teammates from across the company were able to open the Framer project to discuss user journeys, make last-minute edits, and test the prototypes on their phones. With Framer on the web, everyone was able to deliberate in real-time to ensure everything was in place and working for the user testing sessions.On the day of the user testing sessions, the team received the type of valuable and contextual feedback they were hoping for, thanks to a few unique Framer features.
Kickoff user testing by simply sharing a link.
Framer prototype links can be shared anywhere, with anyone, regardless if someone has a Framer account or not. For mobile prototypes, simply scan a QR code to use the prototype on your phone without having to install anything.
“Having participants share their screen using Framer was a game changer. We weren't restricted by dev or operating systems and had no delays. It was straight-up feedback and product evolution.”
— Richard Bond, Strategic Partnerships Director at Replai
User testing sessions are the most successful when you don’t have to explain every screen.
Prototypes made in Framer are real: buttons can be clicked, elements move, animations and transitions can be customized for any interactions. This means user testing sessions flow smoothly, participants need little direction, and they can focus on the full user experience. With static click-through prototypes, user test participants have to imagine how things would look if they were real. This often results in confusion, insufficient sessions, and incomplete feedback. Authentic feedback allowed the team to be agile, adapt, and evolve their product in days not weeks.
Iterations happen faster thanks to live collaboration.
The Replai team was able to watch user testing sessions, receive feedback, immediately go back into the canvas to make changes, and then continue user testing with improved prototypes. Everyone could be on the same page in the canvas together. And, anyone with the prototype link would receive the updates without having to resend the link. Users are always notified of updates with a button to refresh the Prototype view.
Learn more about user testing with Framer prototypes
Framer helps you think differently
Working in Framer allows you to focus more on the output because you can actually see the output in its entirety.
“Framer changes how you think about UX design, for the better. I noticed more complexities, felt more validated as a UX professional, and was more connected to both our developers and users.”
— Roberto Andrade, UX Lead at Replai
With high-fidelity prototypes at the center of your design process, you are closer to your users, by experiencing what they experience. Closer to production by building a prototype as close to the real app as possible. And because of this you are able to build better products faster.