HRx Bias Test | React App

sketch icon github icon html icon css icon

A multi-screen React.js web application created for HRx, a local company that provides workplace diversity consulting. The app is a hidden bias test where users have to categorize a series of words and/or pictures. The app uses the response time of the user to calculate whether they have unconscious bias. I worked in a team of 4 for this project, and we used Github, npm, RESTful API's and the Contentful CMS to complete it.

View live ‹ Back to projects

Process

Planning

With the concept of the application pretty much in place, planning the logic flow that would help the technical development was crucial. It was unexpectedly a big challenge, and what we originally thought was a simple application was much more complex. To help the team agree on the same logic flow, I took the initiative to create a flow chart.

HRx Bias Test Logic Flow Chart
Logic Flow Chat

Design

Compared to the Harvard Implicit Association Test, a similar web bias test, we wanted ours to look less 'academic', more modern and more user-friendly. Luckily, we also had a HRx brand style guide to follow to maintain consistency with the company brand.

Harvard IAT
Harvard Implicit Association Test Homepage
HRx Bias Test Desktop
Our Bias Test Homepage

Development

All our content was stored on the Contentful CMS, and could be retrieved via an API call using their Javascript SDK. The content is conveniently returned as an object, and we stored a lot of that information in the state to be used where necessary throughout the application.

Since the application was built on React without using Redux, it meant a lot of states had to be managed. A lot of the logic was handled in one component, which dictated which components to show depending on which state the application was in.

Test Landing Component Logic

For example, in the Test Landing Component, if the user had finished all test blocks, the app would show them the Form component to enter their information; if the user is supposed to be doing the test, the app would show them the correct test block; otherwise the app will return the Test Landing Page.

Show code
			
	// --------JSX CODE----------

		render() {

        // Loader...
        if (this.state.isLoading) {
            return (
                <div className="loading-spinner"></div	>
            )
        }

        // Form...
        if (this.state.finishedAllTests) {
            return (
                <Form
                    testTitle={this.state.testTitle}
                    testId={this.state.testId}
                    r1={this.state.r1}
                    r2={this.state.r2}
                    r3={this.state.r3}
                    r4={this.state.r4}
                    cBlock={this.state.cBlock}
                    iBlock={this.state.iBlock}
                /	>
            )
        }

        // Get current block 
        let currentBlock = (this.state.isFirstRound ? this.state.iBlock : this.state.cBlock);

        // Test Block...
        if (this.state.isDoingTest) {
            return (
                <TestBlock
                    testTitle={this.state.testTitle}
                    blockData={currentBlock}
                    testFinished={this.testFinished} /	>
            )
        }

        return ( // Regular Test Landing Content... )
			
		

Final Website

HRx Bias Test Mobile
HRx Bias Test Tablet
HRx Bias Test Desktop
View live ‹ Back to projects