Development in Social Context Lab

Problem Description

The UCI Development in Social Context (DISC) Lab focuses on promoting the healthy development of children and teenagers by understanding and improving their social interactions. In order to further engage with its audience, the lab was looking to create a website that caters towards teenagers, parents, and researchers. More specifically, the lab wanted a website that is designed in a way that allows all of these groups to obtain information about the UCI Development in Social Context Lab (DISC). Our primary customer was Dr. Stephanie Reich, the director of the DISC Lab.

Challenges and Constraints

We were provided with a modified version of WordPress created by UCI. This modified version is stripped of its abilities to access the PHP back end, install any plugins, or even edit JavaScript. Although removing features that may prevent less technical users from making mistakes is helpful, there is the trade-off of severely limiting the functionality that can be implemented on the website. Thus, we were constrained in only being able to edit the website’s HTML and CSS.

With these limited resources, we understood that we needed to gather more requirements, improve the website based on these requirements, and then test the usability of the website on three user groups: teenagers, parents, and researchers.

Project Description

Type: Group project
Role: UI Designer/Developer
Course: UI design and evaluation
Duration: 3 months
Tools used: WordPress, Balsamiq, Adobe Photoshop, Camtasia
Final website: DISC

Customer Needs

In order to understand what Dr. Stephanie Reich considered as hard and soft requirements on her website, we conducted two interviews. These were the key findings:

  • User groups and respective needs:
    1. Teenagers: compelling content and pictures
    2. Parents: inspiring, healthy, and interesting projects
    3. Researchers: easy to search, navigate and get resource
  • Layout:
    1. No animations
    2. Minimize scrolling
  • Navigation:
    1. Provide a search functionality
    2. Provide multiple methods for navigation

Customer Needs Analysis

After two interview sessions with the customer we brainstormed about the possible strategy going ahead, the timeline, possible layout designs, etc. Here's a sneak peek into our whiteboard discussions:


After taking out all the requirements on paper, we started creating lo-fi wireframes to finalize the structure for the final development. A few examples:

Functional Website

After a few iterations, the wireframes were finalized and the website was developed and subjected to user testing

User Testing

To find major problems with the website for each user group, we performed our user test on 6-7 users in each user group of teenagers, parents, and researchers. Each of our user tests involved three parts:

  • Experiments
    1. 5 tasks were designed to fit the use case scenarios of each page.
    2. To create these use case scenarios, we used cognitive walkthroughs in addition to the client's understanding of user’s needs.
    3. Both the screen and the audio were recorded throughout the experiment.
  • Surveys
    1. Our survey consisted of 8 questions.
    2. Ratings on different aspects of the website were taken using a Likert Scale of 1 to 6
    3. Total anonymity of identity was preserved
  • Interviews
    1. Open-ended questions gave us more in depth view of what the users thought of the website
    2. Users were allowed to tell us any other comments at any time during the interview.


After analyzing all the user studies data, we evaluated the problems with the website. The survey results unanimously suggested that the website was aesthetically pleasing and the responsiveness was to the users' liking. The experiments results clearly highlighted the importance of a search bar in such a website, but the limitations imposed due to the UCI versioned WordPress did not help our case much. Also, the phrasing of one of tasks turned out to be confusing for many users resulting in an elated task completion time.

Final Suggestions

Considering all the task results and the feedback from all the users, we gave a final presentation with these some recommended changes to the website.

What I learned

  • Carried out user studies for the first time
  • Designers can be biased towards their work
  • Phrasing matters - clarity is must