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.
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.
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.
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.