The Creativity Project

 

I am a research assistant with ROC HCI, Professor Ehsan Hoque’s lab at the University of Rochester. In the lab, I am on Ph.D student Raiyan Abdul Baten’s team for his research project to study the impact of networks on creativity.

 

00 My Role

My main role is to design the interface for the study and help translate design into front-end code. I am also assisting with research, study-design, and collecting/analyzing data.

01 The Problem

The study is divided into three stages and the participants have to respond to a prompt that tests their creativity. Since the study has multiple tasks, information has to be presented concisely. Additionally since it is online, errors have to be handled creatively as participants will not be able to ask a researcher if they get stuck or need help.

 

02 What elements does the study need?

After reading more about the study and talking with team I have come up with the following list for what my design needs to include:

PART 1: SOLO

users attempt the task on their own with no influence from others.

  • Task Related: Task Prompt, Answer-Space, Timer for task

  • User stats: Username and Score

  • Network Related: N/A

PART 2: STATIC NETWORK

users are now allowed to see answers from others in their network and edit their list.

  • Task Related: Task Prompt, Answer Space and Timer

  • User Stats: Username and Score

  • Network Related: Display answers from others on their network

PART 3: DYNAMIC NETWORK

users may change who they follow, before the next round starts

  • Task Related - N/A

  • User Stats: Username and Sore

  • Network Related: follow and unfollow other users based on their answers

SOME RESTRICTIONS

  • Users are allowed to enter up to 6 items in answer to prompt.

  • The prompt has to be written and not pictorial.

  • A user will have only 3 others in their network at any given time

 

03 Creating Flows

Unlike a website where users can navigate in multiple ways, this interface has to provide users with specific clues as to where to proceed next. Therefore I worked on creating a specific flow chart for how the user would progress through the interface.

 
Study Flow

Study Flow

 
 

04 Wireframes

Here are some shots from the initial wireframes and ideas that I have created:

 
CR Wire 1.jpg
CR Wire 2.jpg
CR Wire 3.jpg
CR Wire 4.jpg
 
 

05 Low Fidelity Prototype

Prototype Screens

 
 
 

Some Design Decisions

 
Informational Pop-Up I decided to have a pop-up before each step of the study since the study is timed. The pop-up would give users instructions and allow them to start when they are ready.

Informational Pop-Up

I decided to have a pop-up before each step of the study since the study is timed. The pop-up would give users instructions and allow them to start when they are ready.

Error-Handling Pop-Up To handle errors, I created a block that would display on the bottom-left corner of the page. The block has a dismiss button, so users can get rid of it but it doesn’t happen automatically. Additionally the error block will inform the user what the desired behavior is.

Error-Handling Pop-Up

To handle errors, I created a block that would display on the bottom-left corner of the page. The block has a dismiss button, so users can get rid of it but it doesn’t happen automatically. Additionally the error block will inform the user what the desired behavior is.

 
 
Participant Cards To keep a minimal design, I chose this card format to represent participants. This way the only visible information the participants have of each other is their responses to the prompt.

Participant Cards

To keep a minimal design, I chose this card format to represent participants. This way the only visible information the participants have of each other is their responses to the prompt.

Task Tracker Since the study has 5 sections with multiple nested parts, I wanted to users to always have a sense of where they are. To do this I created this small checklist on the side bar - which would get dynamically updated as they progress through the study

Task Tracker

Since the study has 5 sections with multiple nested parts, I wanted to users to always have a sense of where they are. To do this I created this small checklist on the side bar - which would get dynamically updated as they progress through the study

 
 
 

06 What's Coming Next?

I am currently collaborating with the team to translate the design into front-end code so that we can run a pilot soon. After which we can reflect on the data gathered and feedback received to consider the direction the research should take and any possible UI improvements.

 

07 Got Feedback for Me?