1. Education for Global Peace Website Prototype
Daniel Lowell Gardner
Farshad Momtaz
Oliver Haimson
Harsh Bahua
Krish Rajesh Furia
Max Wei
Neeraj Kumar
LouAnne Boyd
Ronit Kadam
Van Erick Custudio

2. a.) What are the usability problems that we are dealing with?
Designing a new website prototype for EGP platform (Education for Global Peace website)
Testing the website prototype for usability: can users easily access the information they want and navigate across the three environments?

3. Team view of task:
Collaborate with client to design information architecture for brand new multi-environment website with with clear usability
Break prototype into smaller parts for design and usability testing
Reassemble parts to create cohesive product

4. b) What methods are you going to employ to find answers to your HCI problem?
Interview client to inform the information architecture
Design wireframes and present to client
Conduct cognitive walkthroughs of each website component to insure efficient data flow
Incorporate client feedback and re-design
Conduct usability testing of prototype at Center for Peace and on UCI campus
Redesign based on usability feedback

5. c) How does your time plan look like, and who is going to do what task?
Summary:
Whole group met with client three times to discuss big picture and specific site components
We divided into subgroups for design tasks
Next steps:
revising wireframe designs
usability testing

6. 1. Create data flow with subtrees
Farshad--do you want to speak to this for a moment?

7. Reflect client’s principles Create anti-principles Create scenarios
2. Imagine the User
Create personas
Reflect client’s principles
Create anti-principles
Create scenarios
Erick, do you want to present this section of slides

8. Personas
Teacher
NGO
Admin
Student

9. Principles Anti Principles
Peace Can Be Learned
Inclusive
Embrace Change
Collaboration
“For profit”
Exclusive
Indoctrinate
Principles
Peace Can Be Learned
Continuous Reinforcement
Teacher Training
Inclusive
Rigorous
Use All Avenues for Positive Change
Nurture People and Organizations
Embrace Change
Collaboration
Anti-principles
We are not “for profit”, don’t have to please stakeholders (no investors)
We do not indoctrinate , we are not telling others how things should be done
For research component, we won’t exclude members’ contributions (but we will curated material)

10. Scenarios Student wants to learn about peace outside of class.
Student seeks opportunities to volunteer.
Teacher wants to share her knowledge for promoting peace.
Teacher is looking for training in peace.
Non-profit wants to promote a project of theirs
Teacher is looking for others to collaborate with to promote peace.
Researchers & Teachers looking for best practices research and curricula.
How will “best practices” be defined?

11. 3. Design wireframes for each component
Home page: Dan
Message board: LouAnne
Gateway page: Ronit
Research / Wiki page : Krish
Movement page: Oliver
Projects pages: Erick
Grants: Farshad

12. Wireframe for Home Page
(By Dan) here is an idea for a kind of "main page" thingy, that meshes with the user page I created. The large rectangle, would be the slide show kind of thing that is all the rage on snappy websites these days, and the circles would allow manual slide selection.

13. Wireframe for Gateway Page
(By Ronit) The Gateway page would have a further selection for Message Boards, Projects and Classes. On selection of Classes (for eg.) another selection for projects would be visible on the left. On selection of Ongoing Projects, a brief list of ongoing projects would be populated. The user would have the option of bookmarking a page and the option of getting more info. via the links.

14. Wireframe for Research Page

15. Wireframe for Movement Page
Here’s a first try at a mockup for the movements page. It is designed to be “eye-catching, simple, and inspirational” (as requested by the clients) and has links to all the components that the clients requested:
join us (displayed prominently with a catchy image)
global petition campaign
peace centers
video and pictures
social media links (Facebook, Twitter, Instagram, YouTube)
about us (renamed “the global peace movement”)
news
events
We will test this with users to see if it is clear and usable, and revise it as needed to improve usability.

16. Wireframe for Project Page Landing Page
Erick
From requirements document from Gal:
Project Center
About:
Collaborate on projects with peers in the community and worldwide, and give ability to students and teachers to create new projects, showcase, and also connect with NGO’s and support their work (like kidsgoglobal.net/showcase/ngo-projects). Act now section for crisis alerts, campaigns etc…
Example of projec page:

17. Wireframe for Individual Project

18. User Account page

19. User “activity” page

20. Wireframe for Grants Page

21. Wireframe to Add Grants

22. Feedback from client on data flow & wireframes
“I am so incredibly impressed” x 2
“Phenomenal”
-Paula Garb & Gal Kleinman

23. Next steps -Refine the design and flow between pages
-Wireframes & clarification for Search
-Combine message board with home page
-Heuristic Evaluation & Cognitive Walkthrough of Wireframes
-Combined Interactive Wireframe
-Cafe Study?

24. Project Timeline Week 1- 3 Week 4 - Week 5 Week 6 - Week 7 Week 8-
Met with client, design information architecture
Division into subgroups
Overview of information architecture and iteration with client
Week 4 - Week 5
Rough wireframes of major components
Fleshing out global Search functionalities
Functionality/Integration of message board
Understand control-flow between pages of various components
Understand common functionalities/screens for different components
Week 6 -
Week 7
Cognitive walkthroughs of each component
Iterative wireframing
Heuristic evaluation
Design of user/cafe study
Low fidelity prototype ready (DB integration in place)
Week 8-
Week 9
Pilot study with a few members outside the group
Incorporate feedback in final user study
Full fledged cafe/user study
Incorporate feedback in wireframes/prototype
______________________________________________________________
Investigate Chamilo and discuss if it matches our requirements for ‘toolbox’
Final presentation in class
Week 10
Integrate findings, wireframes and feedback into a final report

25. Task Distribution 1 Week 1 - 3 Week 4 – 5
Met with client, design information architecture—whole team
Division into subtasks to create subtrees and wireframe:
Overview of information architecture and iteration with client-whole team
Home page: Dan Gardener
Message board: LouAnne Boyd
Gateway page: Ronit
Research / Wiki page : Krish
Movement page: Oliver Haimson
Projects pages: Erick Custodio
Grants: Farshad, Harsh Bahua, Ronit Kadam
Search: Max (Maojie)
Overall architecture: Farshad, Harsh Bahua
Week 4 – 5
Rough wireframes of major components - DONE
Fleshing out global Search functionalities- Max
Functionality/Integration of message board- LouAnne
Understand control-flow between pages of various components- Whole team (diagram initiated by Neeraj)
Understand common functionalities/screens for different components- Whole team
Match up UI content to schema (each person have conversation with their respective DB person) - whole team
Daniel Lowell Gardner- user sign in/profile
Farshad Momtaz, Harsh Bahua, Ronit Kadam -data flow between pages and overall project coordination/cohesion
Oliver Haimson- movement pages
Krish Rajesh Furia - Research Wiki UI
Max (Maojie) Wei- search function
Neeraj Kumar—design curricula tool box UI
LouAnne Boyd -  Message Board
Ronit Kadam- Peace Ed. Gateway UI
Van Erick Custodio - Project pages

26. Task Distribution 2 Week 6 - Week 7
Cognitive walkthroughs of each component  - Iterative wireframing (Monday meeting)
Heuristic evaluation (TBD, possibly later in week) - all team
Design of user/cafe study -Erick, Oliver
Low fidelity prototype ready (DB integration in place) -Farshad Momtaz, Harsh Bahua
Whole team (every person has a component assigned, similar to week 4-5)
Week 8-
Week 9
Pilot study with a few members outside the group
Incorporate feedback in final user study
Full fledged cafe/user study- LouAnne, Erick, Oliver
Incorporate feedback in wireframes/prototype
Investigate Chamilo and discuss if it matches our requirements for ‘toolbox’-Neeraj
Final presentation in class-  Farshad Momtaz, LouAnne, Erick, and Oliver
Week 10
Integrate findings
Streamline all wireframes
Summarize all feedback
Pull together the final report

27. Questions?