Remotion

Product Design

Remote Usability Testing of Mobile Devices Using Motion Capture and Replay

Brown Human-Computer Interaction Lab

May 2020 - August 2020

Team size: 2

What: Product design for a user research platform that allows you to conduct remote usability tests and analyze your data.
Why: User research allows you to gather behavioral insights about your product and improve it. My work makes this platform more user friendly by making the interface more minimal and interactions more efficient.
What I learnt: End-to-end product development as I was part of initial sketching through the final prototyping phase. I also learnt to be a better collaborator with the engineer and research leads on the team.
If I were to have more time, I would iterate more on the visual design of the interface and conduct A/B tests.

Visit Website

I joined Remotion mid-project and was tasked with redesigning the interface and user experience. Since Remotion has multiple components (mobile client for capture, desktop application for replay and website), I had to look at the project from a birds-eye view and break them into smaller pieces. I also worked on a style guide to add cohesiveness to the product design.

Introduction

For the interface, I had to critically look at the existing version of the software and identify the issues users may have been running into. Remotion is a User Research platform that allows analysts to conduct remote usability studies. As the person primarily responsible for the product design, my role was focused on providing a successful on boarding experience, simpler navigation journey and an end-to-end consistency between the different components of Remotion (mobile app, desktop application, website).

Goal: Develop consistency between different components.
Outcome: Style guide for visual uniformity & mapping user journey for smoother transitions.

Interface Design

I joined Remotion mid-project, so to begin maintaining consistency across platforms I looked at the existing version of the software critically and identified the potential pain points for users.

Original version with annotations

Improved design with annotations

Not quite satisfied with this preliminary design, I iterated further and removed some chartjunk to give the interface a more modern look.

Interaction Design

To develop a better interaction system, I had to get into a user’s mind. One way I approached this was by storyboarding.

I made changes to the navigation system so it was more effective and efficient. The changes I made:
‍
- required fewer clicks for completing specific tasks
- increased visibility of interactive elements, reducing error rate
- updated the language for better readability
- added hover popups to provide information on less intuitive elements of the interface

User Testing

For me, it is always necessary to balance intuition with insights. I used a popular user testing service to get first-hand information on how potential users' interaction would be with Remotion. Here's the summary of my testing experience using this Figma prototype.

- The users all successfully completed the tasks (except one user who couldn’t complete it due to prototype limitations but interpreted the concept successfully).
- Two users gave 4/5 usability ratings and one gave 5/5 for task #8.
- Both the users who did not read the instructions took twice as long as compared to the user who did to complete the tasks but understood the goals and high-level ideas eventually.
- One user correlated colors on the heat map with the colors on the emotion bar which can be an issue since it might lead analysts to make mistakes like “there is a lot of red on the pressure display so the user must be frustrated.”

"I really like this product. I really think it's a cool design. I've seen nothing else like this."

‍User testing helped direct our focus on the instructions being provided to users and inspired us to include more instructional cues throughout the app rather than clumping them all in the beginning. We also adjusted colors so users would not mistake the heat map for emotions.