Tested HQ: Interfaces for Instant Connection
For this project, Tested HQ needed two applications to incorporate into their business: a desktop application to help researchers find and connect with testers, and a mobile app for testers to respond to researchers, answer research questions, and receive rewards points for their participation. The main focus was to highlight the “instant connection” between researchers and testers within these systems.
Spring 2024
Tools
Figma
Objective
“Design desktop and mobile interfaces to instantly connect TestedHQ’s two user types to gather direct user insights.”
Duration
6 weeks
About Tested HQ
Tested HQ is a research and development company that helps connect product development teams with real users who often interact with their products, mainly power tools and construction equipment. They conduct user interviews, product testing, and questionnaires to help clients better understand the reception of the products they develop.
Preliminary Research & Persona Development
Informed by previous research and resources provided by Tested HQ, I made two personas to help understand the unique user needs and expectations involved in both the Tester and Researcher sides of the Tested HQ research process. These personas helped recenter focus throughout the design process and ensure that these needs were being met.
Tester Persona (Mobile)
Researcher Persona (Desktop)
Defining the Journey
With the two personas outlined, journey maps were created to define the steps, touchpoints, and goals of the user and to guide the creation of task flows for each application.
The main goal of these flows was to capture the part of the journey where the testers and the researchers connect.
Low-Fi Wireframes
Focusing on Functionality
Guided by the task flows and user needs, low-fi sketches were created to outline the functionality of the applications before designing the UI.
Some goals of the mobile interface were to be easily legible in outdoor conditions, streamline the intuitive completion of tasks, and gamify answering research.
The desktop interface was designed with the researcher’s tasks in mind, putting information at the forefront and allowing for the organization of filters, project goals, candidates, and communication nested within separate projects.
Mid-Fi Wireframes
Tester Interface (Mobile)
The mobile tester interface is designed to be easily navigable and quickly understandable on the move. A bright interface accompanies large buttons, simple bottom navigation, and communication functionality similar to those that the users are already familiar with.
Researcher Interface (Desktop)
The desktop researcher interface is designed to aid with the organization and overseeing of the testers. The tester search page contains filters, a project details area, and an expanded tester profile, making it easy to find the perfect fit for any research project. All testers involved with a project can be contacted on the project communication page.
Validation Through Usability Testing
Rough Figma prototypes were used at this stage to test the functionality and flow of the application. I facilitated user testing through the prototypes, observing points of confusion in the user’s actions, asking questions, and listening to any feedback they provided.
High-Fi Wireframes (Tester)
-
![]()
Polls
This page was designd as an instant-gratification infinate scroll, making it fun and easy for a large sum of users to complete quick research questions and earn rewards inbetween any task. Users can receive targeted polls based on their profile, which are prioritized and are worth more points. As soon as a user submits their answer, they can see the breakdown of all of the answers provided.
-
![]()
Messaging
The messaging page is broken into two catgories: “Invites”, which is how reserchers can reach out to potential testers, and “Active” which contains ongoing research projects that the tester has agreed to participate in. This messaging system provides a familiar feel to testers’ preferred communication channels while containing all communication to the Tested HQ platform.
-
![]()
Pre-Research Survey
After testers have accepted a research project, they can be sent a pre-research survey to complete. This survey can contain questions about rersearch preferences, outline tester availibility, and set a schedule to participate in research. An estimated completion time is included before the survey to help busy users plan accordingly.
-
![]()
Calling
One-on-one calling is the preferred method of communication for Tested HQ research. This interface has similar functionality to other popular video calling platforms. The action buttons are marked clearly at the bottom, and live subtitles can be generated and/or translated during the call. The camera positions can be switched to change which particiant is covered by the expanded subtitles.
-
![]()
Post-Research Review
Once the research has been completed, testers are prompted to leave a star review about their experience with the research. Suggested comment tags are available for testers to quickly click and provide more specific feedback, and a blank box is provided to type any other additional comments. Upon submitting this, the tester is show how many points they earned from the research.
-
![]()
Profile & Rewards
Within the profile tab, testers can edit their profile information, browse the rewards shop, and check in on past projects. The rewards shop displays the user’s current points and rank at all times, and contains a variety of gift cards that can be redeemed for points. The rewards shop also contains a ranking system for testers to see where the stack up against other usrs,
-
![]()
Past Project Updates
Tested HQ’s current users identified receiving updates about projects they have worked on as an unmet desire. This page serves as a catalogue of all of the projects a user has participted in, providing the option to receive notifications, giving the latest news about products in development, and including links to these products if available.
High-Fi Wireframes (Researcher)
-
![]()
Candidate Search (Default)
This page allows for detailed control over the tester candidate search process. Several categories are included on the top side panel to help narrow down the perfect fit for any project. A project overview is included on the bottom side panel to refresh the researcher on the goals and requirements of the project. A scrolling list of candidates is in the center of the screen, continuously updating as filters are added.
-
![]()
Candidate Search (Selected)
Once a candidate has been selected from the scrolling list, a descriptive profile appears on the rightmost panel. The profile details the tester’s work experience and demographic profile, lists the amout of research completed by the tester, and includes a broken-down explanation of the tester’s rating provided by other researchers. A tester can be saved with the bookmark icon to one or more of the researcher’s projects.
-
![]()
Video Call
In addition to basic video call functionality, this interface contains many tools for a researc er mid-interview. These tools include a side panel to take notes and view interview questions they plan to ask. The top right corner contains subtitles that generate live and later get saved into a transcript. These subtitles can also be translated into a different language live, and flags can be used to mark moments in the conversation to review later.
-
![]()
Tester Messaging (Chat)
Tester communiction lists are separated by project. All of the testers within a project are listed on one page where they can be contacted individually, questions can be answered, and progress can be monitored.
-
![]()
Tester Messaging (Compose)
Similar to composing emails, researchers can send important messages to a group of testers included in a project. These would appear no different as other messages for testers, as they are not able to contact or interact with one another.
