Website for the 'Child Development in Social Context Lab' at UCI

Design and development of DISC Lab website at UCI

Responsive image

This is the link to the website



Design and Develop the website for the Child Development in Social Context Lab (DISC) lab at University of California, Irvine


The aim of this project was to design and develop a website that allows teenagers, parents and child development researchers to obtain information about the UCI Child Development in Social Context Lab. The website is mobile responsive as well. We created the website using Wordpress.

Project Duration

This project was undertaken from October to December 2016 under the course 'User Interface Design and Evaluation' at UCI.

My Role

We were a team of 7. I was one of the designers and researchers.

Design Process

Customer Requirements

We started by interviewing the customer, the head of the DISC lab for her requirements. Here are the requirements that we collected:
• Responsive / high-density screens
• Content includes Who we are, contacts, projects, people in lab, publications
• People will visit the website to see ongoing projects, participate in projects or view results of earlier projects
• Tags for articles
• Single Admin role
• Simplistic / Minimalistic
• Static content
• Drop-down navigation at the top of the page
• Framework to easily change content
• No animations
• Bright contrasting colors, do not necessarily need UCI colors
• Anteater logo / UCI logo
• Website should cater to and be attractive to teenagers, families, researchers
• Results of older surveys


We then proceeded to create wire-frames based on the dump of the information that was given to us for the website. Since we were limited to do user testing only once, we could not design these wire-fames iteratively. Given below are the wire-frames that we designed using Balsamiq.

Responsive image
Responsive image

Responsive image
Responsive image

Responsive image
Responsive image

Responsive image
Responsive image

Screen-shots of the website

These are the screen shots of the website before the user testing. We created the website using Wordpress. This is a link to the website.

Responsive image
Responsive image

Responsive image
Responsive image

Responsive image
Responsive image

Responsive image
Responsive image

Usability Testing

7 Researchers, 6 parents and 6 teenagers were recruited for the usability testing. They were asked to perform a few tasks that would test the navigation of the website. After that they were asked to take a quick survey. A small interview was then conducted based on the survey responses. Tests were conducted on both laptops and mobiles. The participants were compensated with a 5$ Starbucks coupon.

Navigation Tasks

. How would you contact the lab by email?
. Find all the researchers in the project named “Learning While Multi-Tasking”.
. Stephanie M. Reich is a faculty member of the lab. Where did she get her doctorate from?
. Find out how many publications from this lab were published in 2015.
. Find out how many of the news articles concerning the lab discuss social media.

Survey Questions

. Which of the following user groups do you belong to? Teenager, parent or researcher?
. Did you use a computer or a cell phone to complete this experiment?
. How likely are you to recommend this website to a friend interested in the lab? (1 being not likely at all and 6 being very likely)
. How easy or difficult was it to find information on this website? (1 being easiest and 6 being most difficult)
. How fast or slow was the website? (1 being slowest and 6 being fastest)
. How organized or unorganized was the website? (1 being very unorganized and 6 being very organized)
. How easy or difficult was it to navigate the website on a computer / cell phone? (1 being easiest and 6 being most difficult)
. How aesthetically pleasing or displeasing did you find this site? (1 being very displeasing and 6 being very pleasing)

Interview Questions

. Was it easy or difficult for you to finish the tasks? Which parts of the tasks did you have difficulty with?
. What parts of the website did you find the most frustrating to use?
. What other information did you expect to see on the website?
. If you faced problems while navigating the website on a computer/cell phone, please describe them.
. For researchers and parents: Do the project profiles look appealing to you or not?
. For parents: After viewing the website, how comfortable are you with allowing your children in participating in one of their studies?
. For teens and college students: After viewing the website, how likely are you to participate in one of their studies?

Usability Testing Results

The figures below show the results of the tasks and the surveys. Task 2, which required navigating through the projects page to find a particular project, took the maximum time.

Responsive image

Responsive image

Here are some common problems that users faced:
. Users had difficulties locating a particular project as they were unfamiliar with the categorization of 'teenagers, researchers and parents'.
. While searching for a project, a user said,

"It's asking me to go through too many pages".

This showed that the website was too deep in the projects pages.
. While searching for a project, another user said,

" Since I am a researcher, should I go to 'Projects for researchers'? "

This shows there maybe problems with the wording
. Users did not know that the lab was a part of UCI
. Users wanted to know more about the lab before participating
. Users had to read through entire news articles for knowing what they were about
. Users wanted more information on the contact us page
. Researchers wanted to know more about the research interests of people in the lab
. Due to wordpress limitations we could not include a search bar on the website. Also, another limitation of wordpress was that we could not use java script.

Recommended Solutions

Based on the Usability Experiments, here are a few changes we suggested for the website:

A link to the list of all projects should be given on the projects landing page so that users can search for a particular problem without difficulty.

Responsive image
Responsive image

News articles on the new page should have a tag that defines the wide category they belong to.

Responsive image

The contact us page should have more information. Additionally, a 'drop a message' box can be added for the users who have quick questions.

Responsive image

People's bio should have a tag that defines the person's research interests.

Responsive image

UCI should be in the title to signify that the lab belongs to UCI.

Responsive image

Back to Work