![Page 1: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/1.jpg)
Website for Development in Social Context Lab
Informatics 231 Discussion Group 2
![Page 2: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/2.jpg)
Usability Problems
![Page 3: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/3.jpg)
Problem Statement
● Design a website that allows parents and child development researchers to obtain information about the UCI Development in Social Context Lab.
● Must have sections geared towards teenagers who are considering participating in one of the lab’s studies.
● The information architecture and usability of the website should be tested with the three main user groups: teenagers, parents, and researchers.
● The website will be revised based on the study results.
● Primary customer: Stephanie Reich
![Page 4: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/4.jpg)
Usability Problems
● Three Different User Groups:○ Teenagers
○ Parents
○ Researchers
● What information is each group of users looking for?○ Teenagers: Media reports, Current projects they can participate in
○ Parents: Media reports, Current projects their children can participate in
○ Researchers: Current and Past projects, Publications, Awards
![Page 5: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/5.jpg)
Usability Problems
● What makes a website attractive to teenagers?○ Need to understand a teenager’s motivation to visit the site
○ Need to discover what the needs of a teenager are
○ Need to find a way to make the site compelling to a teenager
● Goal: Create a website that is engaging and easy to use
![Page 6: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/6.jpg)
Usability Problems
● Limitations of WordPress○ Cannot directly edit backend software
○ Cannot use JavaScript to make it mobile friendly
○ Plugins cannot be freely installed
○ Layout is mostly restricted to predetermined themes
![Page 7: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/7.jpg)
User Study Methods
![Page 8: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/8.jpg)
User Study Methods
● Interviews with the Customer and the User Groups, includes:○ Stephanie Reich
○ Teenagers
○ Parents
○ Researchers
● User Study Analysis, includes:○ Affinity maps
○ Data analysis
![Page 9: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/9.jpg)
Interviews with Stephanie
● Initial interviews for user needs analysis○ Understanding the requirements for the website
○ Two interviews already conducted on 9/28 and 10/7
● Recurring interviews for iterating on website design○ Design the website
○ Present it to Stephanie and receive feedback
○ Two iterations with the interviews occurring on 10/25 and 11/1
![Page 10: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/10.jpg)
Usability Testing ● Testing with the three user groups (each group has 5 - 8 people)
○ Teenagers
○ Parents
○ Researchers
● Testing involves○ An Experiment
○ A Survey
○ An Interview
● Users will be obtained through Stephanie○ Approximately 45 minutes per user
![Page 11: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/11.jpg)
Experiment with the Users● The experiment will consist of asking users to perform a predefined task
○ Search for a specific project
○ Find contact information for the lab
● What we are measuring○ The amount of time to complete the task
○ The simplicity of the path used to reach the solution
● What we are testing on○ Laptops
○ Cell Phones
● Will use screen recordings
![Page 12: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/12.jpg)
Survey with the Users
● The post-experiment survey will consist of:○ Questions using a Likert scale (1 - 6) about the aesthetics and usability of the website
○ Approximately 8 - 10 questions in total
● What we are measuring○ Satisfaction with using the website
○ Pleasantness of the aesthetics of the website
○ Ease of navigating the website
![Page 13: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/13.jpg)
Example Survey Questions
● On a scale of 1 - 6,○ How likely are you to recommend this website to a friend?
○ How easy or difficult was it to use this website?
○ How fast or slow was the website?
○ How organized or unorganized was the website?
○ How easy or difficult was it to navigate the website on a computer?
○ How easy or difficult was it to navigate the website on a cell phone?
○ How aesthetically pleasing or displeasing did you find this site?
![Page 14: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/14.jpg)
Interview with Users
● The interview will consist of:○ Open-ended questions
○ Will use audio recordings
● What we are measuring○ Expectations of the website
○ Improvements to the website
○ Better understanding of the survey answers
○ Other opinions about the website
![Page 15: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/15.jpg)
Example Interview Questions1. Was it easy or difficult for you to finish the task?2. Which part of the experiment did you have difficulty with?3. What other information did you expect to see on the website?4. What parts of the website do you think we can improve?5. What parts did you find most frustrating to use?6. For researchers & parents: Whether the project profiles look appealing or not?7. After viewing the website, how comfortable are you about allowing your
children in participating in our studies?8. After viewing the website, how likely are you to participate
in a study?
![Page 16: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/16.jpg)
User Study Analysis● Compile the Results
○ Transcribe the audio recordings
○ Take notes on the screen recordings
● Analyze the Results with
○ Box plots
○ Affinity maps
● Goal is to○ Understand how well the navigation process works
○ Improve upon low rated aspects of the website
![Page 17: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/17.jpg)
Initial Website Design
![Page 18: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/18.jpg)
Website DesignLandpage layout:
Navigation Bar links to● Projects● People● Contact Page● Publications● Media● Resources
Navigation Boxes for each Project Age Group (Children, Teenagers, and Adults)
![Page 19: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/19.jpg)
Website DesignProject page:
Current and Past projects are listed togetherProjects are tagged and sorted by the age of their test subjects
Project Age Groups are:● Children● Teenagers● Adults
Images are used to navigate to pages listing each age group’s projectsAllows for maintainability and easy viewing of projectsResearchers will be tagged in each project they work on
![Page 20: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/20.jpg)
Website DesignPeople page:
Includes:● Current Faculty & Students● Alumni ● Collaborators
The information on each person includes:● Headshot● Short Biography● Their Research● Their Current Projects
Bob
Alice
![Page 21: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/21.jpg)
Website Design
Contact Page:
Includes:● Address● Directions ● Email
![Page 22: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/22.jpg)
Timeline / Work
Distribution
![Page 23: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/23.jpg)
Projected TimelineWeek 4: Start creating the websiteWeek 5: Interview with Stephanie on the initial website design (10/25)
Reiterate the websiteWeek 6: Interview with Stephanie on the iterated website design (11/1)
Reiterate the websiteWeek 7: Begin user testingWeek 8: Finish user testingWeek 9: Reiterate the website and work on the final presentationWeek 10: Give the final presentation (11/30)
Work on the final project report
![Page 24: Website for Development in Social Context Labkobsa/courses/INF231/16F/16F... · 2016-10-24 · Problem Statement Design a website that allows parents and child development researchers](https://reader036.vdocuments.mx/reader036/viewer/2022081406/5f18c676c0c40551817fdce3/html5/thumbnails/24.jpg)
Roles
Leader of Web Design: Saumya
Leader of Web Development: Nate Baer
Leader of User Testing: Ke Jing
Main Contact with Customer: Ashley Salzetti